Skip to content

Instantly share code, notes, and snippets.

@cheeaun
Created January 3, 2010 13:25
Show Gist options
  • Save cheeaun/267967 to your computer and use it in GitHub Desktop.
Save cheeaun/267967 to your computer and use it in GitHub Desktop.
Extends MooTools' Element.Style to have the CSS3 juice.
(function(){
var styles = {
borderRadius: '@px @px @px @px/@px @px @px @px',
MozBorderRadius: '@px @px @px @px/@px @px @px @px',
WebkitBorderRadius: '@px @px @px @px/@px @px @px @px',
boxShadow: '@px @px @px rgb(@, @, @)',
MozBoxShadow: '@px @px @px rgb(@, @, @)',
WebkitBoxShadow: '@px @px @px rgb(@, @, @)',
textShadow: '@px @px @px rgb(@, @, @)'
};
var shortStyles = {
borderRadius: {},
MozBorderRadius: {},
WebkitBorderRadius: {}
};
$extend(Element.Styles, styles);
$extend(Element.ShortStyles, shortStyles);
['TopLeft', 'TopRight', 'BottomLeft', 'BottomRight'].each(function(direction){
var Short = shortStyles;
var All = styles;
var bdr = 'border' + direction + 'Radius';
Short.borderRadius[bdr] = All[bdr] = '@px @px';
var wbdr = 'WebkitBorder' + direction + 'Radius';
Short.WebkitBorderRadius[wbdr] = All[wbdr] = '@px @px';
var mbdr = 'MozBorderRadius' + direction.toLowerCase().capitalize();
Short.MozBorderRadius[mbdr] = All[mbdr] = '@px @px';
});
var setStyle = Element.prototype.setStyle;
var getStyle = Element.prototype.getStyle;
var vendor = (Browser.Engine.gecko) ? 'Moz' : ((Browser.Engine.webkit) ? 'Webkit' : '');
var vendorize = function(property){
switch (property){
case 'borderTopLeftRadius':
case 'borderTopRightRadius':
case 'borderBottomRightRadius':
case 'borderBottomLeftRadius':
if (Browser.Engine.gecko){
var matches = property.match(/^border((Top|Bottom)(Left|Right))Radius$/)
property = 'BorderRadius' + matches[1].toLowerCase().capitalize();
}
case 'borderRadius':
case 'boxShadow':
property = vendor + property.capitalize();
}
return property;
};
Element.implement({
setStyle: function(property, value){
property = property.camelCase();
if (!this.style[property]) property = vendorize(property);
setStyle.apply(this, [property, value]);
return this;
},
getStyle: function(property){
property = property.camelCase();
if (property == 'borderRadius'){
var result = this.style[property];
if (!$chk(result)){
var horizontal = [], vertical = [];
var style = Element.ShortStyles[property];
for (var s in style){
var st = this.getStyle(s).split(' ');
horizontal.push(st[0]);
vertical.push(st[1] || '0px');
}
result = horizontal.join(' ') + '/' + vertical.join(' ');
return result;
}
}
if (!this.style[property]) property = vendorize(property);
return getStyle.apply(this, [property]);
}
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment