First look at css hooks. These hooks provide a way to change how jQuery handles getti...
[jquery.git] / src / css.js
index e52e453..497303a 100644 (file)
@@ -21,11 +21,11 @@ var rexclude = /z-?index|font-?weight|opacity|zoom|line-?height/i,
        };
 
 jQuery.fn.css = function( name, value ) {
-       return access( this, name, value, true, function( elem, name, value ) {
+       return jQuery.access( this, name, value, true, function( elem, name, value ) {
                if ( value === undefined ) {
                        return jQuery.curCSS( elem, name );
                }
-               
+
                if ( typeof value === "number" && !rexclude.test(name) ) {
                        value += "px";
                }
@@ -35,37 +35,55 @@ jQuery.fn.css = function( name, value ) {
 };
 
 jQuery.extend({
-       style: function( elem, name, value ) {
-               // don't set styles on text and comment nodes
-               if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ) {
-                       return undefined;
-               }
+       cssHooks: {
+               opacity: {
+                       get: function( elem, force ) {
+                               var style = elem.style;
+                               if ( jQuery.support.opacity && !style.filter ) {
+                                       return false; // move along, nothing to see here
+                               }
 
-               // ignore negative width and height values #1599
-               if ( (name === "width" || name === "height") && parseFloat(value) < 0 ) {
-                       value = undefined;
-               }
+                               // IE uses filters for opacity
+                               var ret = ropacity.test(elem.currentStyle.filter || "") ?
+                                                       (parseFloat(RegExp.$1) / 100) + "" :
+                                                       "";
 
-               var style = elem.style || elem, set = value !== undefined;
+                               return ret === "" ?
+                                       "1" :
+                                       ret;
+                       },
+
+                       set: function( elem, value ) {
+                               var style = elem.style;
+                               if ( jQuery.support.opacity && !style.filter ) {
+                                       return false; // move along, nothing to see here
+                               }
 
-               // IE uses filters for opacity
-               if ( !jQuery.support.opacity && name === "opacity" ) {
-                       if ( set ) {
                                // IE has trouble with opacity if it does not have layout
                                // Force it by setting the zoom level
                                style.zoom = 1;
 
                                // Set the alpha filter to set the opacity
-                               var opacity = parseInt( value, 10 ) + '' === "NaN" ? "" : "alpha(opacity=" + value * 100 + ")";
-                               var filter = style.filter || jQuery.curCSS( elem, 'filter' ) || "";
+                               var opacity = parseInt( value, 10 ) + "" === "NaN" ? "" : "alpha(opacity=" + value * 100 + ")";
+                               var filter = style.filter || jQuery.curCSS( elem, "filter" ) || "";
                                style.filter = ralpha.test(filter) ? filter.replace(ralpha, opacity) : opacity;
                        }
+               }
+       },
 
-                       return style.filter && style.filter.indexOf("opacity=") >= 0 ?
-                               (parseFloat( ropacity.exec(style.filter)[1] ) / 100) + '':
-                               "";
+       style: function( elem, name, value ) {
+               // don't set styles on text and comment nodes
+               if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ) {
+                       return undefined;
                }
 
+               // ignore negative width and height values #1599
+               if ( (name === "width" || name === "height") && parseFloat(value) < 0 ) {
+                       value = undefined;
+               }
+
+               var style = elem.style || elem, set = value !== undefined;
+
                // Make sure we're using the right name for getting the float value
                if ( rfloat.test( name ) ) {
                        name = styleFloat;
@@ -73,8 +91,19 @@ jQuery.extend({
 
                name = name.replace(rdashAlpha, fcamelCase);
 
+               var hooks = jQuery.cssHooks[name] || {};
+
                if ( set ) {
-                       style[ name ] = value;
+                       if ( !('set' in hooks) || hooks.set( elem, value ) === false ) {
+                               style[ name ] = value;
+                       }
+               }
+
+               if ( 'get' in hooks ) {
+                       var cssHookReturn = hooks.get( elem, false );
+                       if ( cssHookReturn !== false ) {
+                               return cssHookReturn;
+                       }
                }
 
                return style[ name ];
@@ -82,32 +111,13 @@ jQuery.extend({
 
        css: function( elem, name, force, extra ) {
                if ( name === "width" || name === "height" ) {
-                       var val, props = cssShow, which = name === "width" ? cssWidth : cssHeight;
-
-                       function getWH() {
-                               val = name === "width" ? elem.offsetWidth : elem.offsetHeight;
-
-                               if ( extra === "border" ) {
-                                       return;
-                               }
-
-                               jQuery.each( which, function() {
-                                       if ( !extra ) {
-                                               val -= parseFloat(jQuery.curCSS( elem, "padding" + this, true)) || 0;
-                                       }
-
-                                       if ( extra === "margin" ) {
-                                               val += parseFloat(jQuery.curCSS( elem, "margin" + this, true)) || 0;
-                                       } else {
-                                               val -= parseFloat(jQuery.curCSS( elem, "border" + this + "Width", true)) || 0;
-                                       }
-                               });
-                       }
-
                        if ( elem.offsetWidth !== 0 ) {
-                               getWH();
+                               val = getWH( elem, name, extra );
+
                        } else {
-                               jQuery.swap( elem, props, getWH );
+                               jQuery.swap( elem, cssShow, function() {
+                                       val = getWH( elem, name, extra );
+                               });
                        }
 
                        return Math.max(0, Math.round(val));
@@ -117,24 +127,17 @@ jQuery.extend({
        },
 
        curCSS: function( elem, name, force ) {
-               var ret, style = elem.style, filter;
-
-               // IE uses filters for opacity
-               if ( !jQuery.support.opacity && name === "opacity" && elem.currentStyle ) {
-                       ret = ropacity.test(elem.currentStyle.filter || "") ?
-                               (parseFloat(RegExp.$1) / 100) + "" :
-                               "";
-
-                       return ret === "" ?
-                               "1" :
-                               ret;
-               }
+               var ret, style = elem.style, filter, hooks = jQuery.cssHooks[name] || {};
 
                // Make sure we're using the right name for getting the float value
                if ( rfloat.test( name ) ) {
                        name = styleFloat;
                }
 
+               if ( 'get' in hooks && ( ret = hooks.get( elem, force ) ) !== false ) {
+                       return ret;
+               }
+
                if ( !force && style && style[ name ] ) {
                        ret = style[ name ];
 
@@ -205,12 +208,36 @@ jQuery.extend({
                callback.call( elem );
 
                // Revert the old values
-               for ( var name in options ) {
+               for ( name in options ) {
                        elem.style[ name ] = old[ name ];
                }
        }
 });
 
+function getWH( elem, name, extra ) {
+       var which = name === "width" ? cssWidth : cssHeight,
+               val = name === "width" ? elem.offsetWidth : elem.offsetHeight;
+
+       if ( extra === "border" ) {
+               return val;
+       }
+
+       jQuery.each( which, function() {
+               if ( !extra ) {
+                       val -= parseFloat(jQuery.curCSS( elem, "padding" + this, true)) || 0;
+               }
+
+               if ( extra === "margin" ) {
+                       val += parseFloat(jQuery.curCSS( elem, "margin" + this, true)) || 0;
+
+               } else {
+                       val -= parseFloat(jQuery.curCSS( elem, "border" + this + "Width", true)) || 0;
+               }
+       });
+
+       return val;
+}
+
 if ( jQuery.expr && jQuery.expr.filters ) {
        jQuery.expr.filters.hidden = function( elem ) {
                var width = elem.offsetWidth, height = elem.offsetHeight,