When printing, revert all elements to their default non-CSS3 state, t…

…o avoid positioning errors and to honor the browser's settings for printing backgrounds etc.

build.xml

@@ -17,8 +17,10 @@
             <fileset file="${src_dir}/Util.js" />
             <fileset file="${src_dir}/Observable.js" />
             <fileset file="${src_dir}/Heartbeat.js" />
-            <fileset file="${src_dir}/OnScroll.js" />
+            <fileset file="${src_dir}/OnBeforeUnload.js" />
             <fileset file="${src_dir}/OnResize.js" />
+            <fileset file="${src_dir}/OnScroll.js" />
+            <fileset file="${src_dir}/OnPrint.js" />
             <fileset file="${src_dir}/Length.js" />
             <fileset file="${src_dir}/BgPosition.js" />
             <fileset file="${src_dir}/Angle.js" />

sources/Element.js

@@ -237,43 +237,45 @@ PIE.Element = (function() {
          * is destroyed.
          */
         function destroy() {
-            var i, len;
+            if( !destroyed ) {
+                var i, len;
 
-            destroyed = 1;
+                destroyed = 1;
 
-            // destroy any active renderers
-            if( renderers ) {
-                for( i = 0, len = renderers.length; i < len; i++ ) {
-                    renderers[i].destroy();
+                // destroy any active renderers
+                if( renderers ) {
+                    for( i = 0, len = renderers.length; i < len; i++ ) {
+                        renderers[i].destroy();
+                    }
                 }
-            }
 
-            // remove any ancestor propertychange listeners
-            if( ancestors ) {
-                for( i = 0, len = ancestors.length; i < len; i++ ) {
-                    ancestors[i].detachEvent( 'onpropertychange', ancestorPropChanged );
-                    ancestors[i].detachEvent( 'onmouseenter', mouseEntered );
-                    ancestors[i].detachEvent( 'onmouseleave', mouseLeft );
+                // remove any ancestor propertychange listeners
+                if( ancestors ) {
+                    for( i = 0, len = ancestors.length; i < len; i++ ) {
+                        ancestors[i].detachEvent( 'onpropertychange', ancestorPropChanged );
+                        ancestors[i].detachEvent( 'onmouseenter', mouseEntered );
+                        ancestors[i].detachEvent( 'onmouseleave', mouseLeft );
+                    }
                 }
-            }
 
-            // Remove from list of polled elements in IE8
-            if( PIE.ie8DocMode === 8 ) {
-                PIE.Heartbeat.unobserve( update );
+                // Remove from list of polled elements in IE8
+                if( PIE.ie8DocMode === 8 ) {
+                    PIE.Heartbeat.unobserve( update );
+                }
+                // Stop onscroll/onresize listening
+                PIE.OnScroll.unobserve( update );
+                PIE.OnResize.unobserve( update );
+
+                // Remove event listeners
+                el.detachEvent( 'onmove', update );
+                el.detachEvent( 'onresize', update );
+                el.detachEvent( 'onpropertychange', propChanged );
+                el.detachEvent( 'onmouseenter', mouseEntered );
+                el.detachEvent( 'onmouseleave', mouseLeft );
+
+                // Kill objects
+                renderers = boundsInfo = styleInfos = styleInfosArr = ancestors = el = null;
             }
-            // Stop onscroll/onresize listening
-            PIE.OnScroll.unobserve( update );
-            PIE.OnResize.unobserve( update );
-
-            // Remove event listeners
-            el.detachEvent( 'onmove', update );
-            el.detachEvent( 'onresize', update );
-            el.detachEvent( 'onpropertychange', propChanged );
-            el.detachEvent( 'onmouseenter', mouseEntered );
-            el.detachEvent( 'onmouseleave', mouseLeft );
-
-            // Kill objects
-            renderers = boundsInfo = styleInfos = styleInfosArr = ancestors = null;
         }
 
 
@@ -321,11 +323,12 @@ PIE.Element = (function() {
         }
 
 
-        // Public methods - these are all already bound to this instance so there's no need to wrap them
-        // in a closure to maintain the 'this' scope object.
+        // These methods are all already bound to this instance so there's no need to wrap them
+        // in a closure to maintain the 'this' scope object when calling them.
         this.init = init;
         this.update = update;
         this.destroy = destroy;
+        this.el = el;
     }
 
     Element.getInstance = function( el ) {
@@ -342,16 +345,23 @@ PIE.Element = (function() {
         }
     };
 
-    // Destroy all Element objects when leaving the page
-    window.attachEvent( 'onbeforeunload', function() {
+    Element.destroyAll = function() {
+        var els = [], wrapper;
         if( wrappers ) {
             for( var w in wrappers ) {
                 if( wrappers.hasOwnProperty( w ) ) {
-                    wrappers[ w ].destroy();
+                    wrapper = wrappers[ w ];
+                    els.push( wrapper.el );
+                    wrapper.destroy();
                 }
             }
+            wrappers = {};
         }
-    } );
+        return els;
+    };
+
+    // Destroy all Element objects when leaving the page
+    PIE.OnBeforeUnload.observe( Element.destroyAll );
 
     return Element;
 })();

sources/OnBeforeUnload.js

@@ -0,0 +1,5 @@
+/**
+ * Create an observable listener for the onbeforeunload event
+ */
+PIE.OnBeforeUnload = new PIE.Observable();
+window.attachEvent( 'onbeforeunload', function() { PIE.OnBeforeUnload.fire(); } );

sources/OnPrint.js

@@ -0,0 +1,31 @@
+/**
+ * Listen for printing events, destroy all active PIE instances when printing, and
+ * restore them afterward.
+ */
+(function() {
+
+    var elements,
+        win = window;
+
+    function beforePrint() {
+        elements = PIE.Element.destroyAll();
+    }
+
+    function afterPrint() {
+        if( elements ) {
+            for( var i = 0, len = elements.length; i < len; i++ ) {
+                PIE[ 'attach' ]( elements[i] );
+            }
+            elements = 0;
+        }
+    }
+
+    win.attachEvent( 'onbeforeprint', beforePrint );
+    win.attachEvent( 'onafterprint', afterPrint );
+
+    PIE.OnBeforeUnload.observe( function() {
+        win.detachEvent( 'onbeforeprint', beforePrint );
+        win.detachEvent( 'onafterprint', afterPrint );
+    } );
+
+})();

sources/OnResize.js

@@ -1,5 +1,15 @@
 /**
  * Create a single observable listener for window resize events.
  */
-PIE.OnResize = new PIE.Observable();
-window.attachEvent( 'onresize', function() { PIE.OnResize.fire(); } );
+(function() {
+    PIE.OnResize = new PIE.Observable();
+
+    function resized() {
+        PIE.OnResize.fire();
+    }
+
+    window.attachEvent( 'onresize', resized );
+    PIE.OnBeforeUnload.observe( function() {
+        window.detachEvent( 'onresize', resized );
+    } );
+})();

sources/OnScroll.js

@@ -2,6 +2,17 @@
  * Create a single observable listener for scroll events. Used for lazy loading based
  * on the viewport, and for fixed position backgrounds.
  */
-PIE.OnScroll = new PIE.Observable();
-window.attachEvent( 'onscroll', function() { PIE.OnScroll.fire(); } );
-window.attachEvent( 'onresize', function() { PIE.OnScroll.fire(); } );
+(function() {
+    PIE.OnScroll = new PIE.Observable();
+
+    function scrolled() {
+        PIE.OnScroll.fire();
+    }
+
+    window.attachEvent( 'onscroll', scrolled );
+    PIE.OnBeforeUnload.observe( function() {
+        window.detachEvent( 'onscroll', scrolled );
+    } );
+
+    PIE.OnResize.observe( scrolled );
+})();

sources/htc_init.js

@@ -1,7 +1,9 @@
 var p = window.PIE;
 
 function init() {
-    p.attach( element );
+    if( doc.media !== 'print' ) { // IE strangely attaches a second copy of the behavior to elements when printing
+        p.attach( element );
+    }
 }
 
 function cleanup() {