Use the StyleInfo locking mechanism to cache the 'changed' value at t…

…he beginning of an update; this allows the changed method to handle tracking itself rather than relying on a side-effect from another method, resulting in more accurate change tracking. Fixes hovering when the unhovered state has no css3 styles.
ajaswa · Nov 8, 2010 · 77fef47 · 77fef47
1 parent 2dff7dd
commit 77fef47
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git a/sources/Element.js b/sources/Element.js
@@ -132,10 +132,7 @@ PIE.Element = (function() {
                 if( initialized ) {
                     var i, len;
 
-                    boundsInfo.lock();
-                    for( i = styleInfosArr.length; i--; ) {
-                        styleInfosArr[i].lock();
-                    }
+                    lockAll();
                     if( force || boundsInfo.positionChanged() ) {
                         /* TODO just using getBoundingClientRect (used internally by BoundsInfo) for detecting
                            position changes may not always be accurate; it's possible that
@@ -153,10 +150,7 @@ PIE.Element = (function() {
                             renderers[i].updateSize();
                         }
                     }
-                    for( i = styleInfosArr.length; i--; ) {
-                        styleInfosArr[i].unlock();
-                    }
-                    boundsInfo.unlock();
+                    unlockAll();
                 }
                 else if( !initializing ) {
                     init();
@@ -173,26 +167,21 @@ PIE.Element = (function() {
             // results in an infinite loop; therefore we filter out those property names.
             if( !destroyed && !( event && event.propertyName in ignorePropertyNames ) ) {
                 if( initialized ) {
-                    var i, len,
-                        toUpdate = [];
-
-                    boundsInfo.lock();
+                    var i, len, renderer;
 
+                    lockAll();
                     for( i = 0, len = renderers.length; i < len; i++ ) {
-                        // Make sure position is synced if the element hasn't already been renderered.
+                        renderer = renderers[i];
+                        // Make sure position is synced if the element hasn't already been rendered.
                         // TODO this feels sloppy - look into merging propChanged and update functions
-                        if( !renderers[i].isPositioned ) {
-                            renderers[i].updatePos();
+                        if( !renderer.isPositioned ) {
+                            renderer.updatePos();
                         }
-                        if( renderers[i].needsUpdate() ) {
-                            toUpdate.push( renderers[i] );
+                        if( renderer.needsUpdate() ) {
+                            renderer.updateProps();
                         }
                     }
-                    for( i = 0, len = toUpdate.length; i < len; i++ ) {
-                        toUpdate[i].updateProps();
-                    }
-
-                    boundsInfo.unlock();
+                    unlockAll();
                 }
                 else if( !initializing ) {
                     init();
@@ -236,6 +225,20 @@ PIE.Element = (function() {
             }
         }
 
+        function lockAll() {
+            boundsInfo.lock();
+            for( var i = styleInfosArr.length; i--; ) {
+                styleInfosArr[i].lock();
+            }
+        }
+
+        function unlockAll() {
+            for( var i = styleInfosArr.length; i--; ) {
+                styleInfosArr[i].unlock();
+            }
+            boundsInfo.unlock();
+        }
+
 
         /**
          * Remove all event listeners from the element and any monitoried ancestors.

diff --git a/sources/StyleInfoBase.js b/sources/StyleInfoBase.js
@@ -37,7 +37,7 @@ PIE.StyleInfoBase = {
      * @return {Object}
      */
     getProps: function() {
-        var css = this._lastCss = this.getCss(),
+        var css = this.getCss(),
             cache = this.constructor._propsCache;
         return css ? ( css in cache ? cache[ css ] : ( cache[ css ] = this.parseCss( css ) ) ) : null;
     },
@@ -67,12 +67,15 @@ PIE.StyleInfoBase = {
     } ),
 
     /**
-     * Determine whether the target CSS style has changed since the last time it was parsed.
+     * Determine whether the target CSS style has changed since the last time it was used.
      * @return {boolean}
      */
-    changed: function() {
-        return this._lastCss !== this.getCss();
-    },
+    changed: cacheWhenLocked( function() {
+        var currentCss = this.getCss(),
+            changed = currentCss !== this._lastCss;
+        this._lastCss = currentCss;
+        return changed;
+    } ),
 
     cacheWhenLocked: cacheWhenLocked,