Created
January 3, 2010 13:25
-
-
Save cheeaun/267967 to your computer and use it in GitHub Desktop.
Extends MooTools' Element.Style to have the CSS3 juice.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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