Skip to content
This repository
  • 16 commits
  • 13 files changed
  • 0 comments
  • 1 contributor
Feb 04, 2012
Jason Johnston Fix divide-by-zero error when the total width or height of the box-sh…
…adow shape is zero.
3be66f6
Make sure the element still exists after the add/removeClass delay. F…
…ixes #191.
b9e6813
Don't perform border rendering if there is no border-radius specified. 64f4e7d
Put the length calc element into the body rather than the documentEle…
…ment, fixes unit conversions in IE<8
0c278f9
Fix comma afefebf
Partial fix for issue #79: explicitly set the size of the background …
…image fill tile in pixels so that IE will automatically adjust it to the user's zoom level.
9799198
Sometimes the body doesn't exist yet when doing length units calculat…
…ion (e.g. inclusion of PIE*.js), so fall back to documentElement
862c626
Jason Johnston Don't add any printing handlers in IE9, as they cause errors and aren…
…'t needed anyway.
8d73e90
Feb 07, 2012
Jason Johnston Tweaks to polling heartbeat: use setTimeout rather than setInterval t…
…o prevent backing up. Allow setting html{-pie-poll-interval:N} to customize the interval on a page.
6744f04
Jason Johnston Bump build number af1031c
Feb 08, 2012
Jason Johnston Fix printing error in IE9 by putting the print media check before att…
…empting to access window.PIE
0aa983e
Mar 27, 2012
Jason Johnston Add -pie-track-active:false flag to prevent toggling the active class…
… name on mousedown/up on a case by case basis. This can be used to avoid the IE6-7 bug where you couldn't drag the scrollbar of a descendant. Fixes issue #190.
ad253e8
May 12, 2012
Jason Johnston Add support for -pie-track-hover property to allow disabling of autom…
…atic :hover tracking
eca23e4
Jason Johnston Adjust for IE7's inconsistent application of logical vs. device pixel…
… ratio when zoomed. Issue #79
8026857
Jason Johnston IE7 zoom: use offsetWidth/Height directly in boundsInfo width/height …
…instead of multiplying so they are always rounded, as VML doesn't like fractional values.
3273396
Jason Johnston Bump build number 1.0.0 41c8f58
2  build.xml
@@ -2,7 +2,7 @@
2 2
 
3 3
 <project name="PIE" default="build" basedir=".">
4 4
 
5  
-    <property name="version" value="1.0beta5" />
  5
+    <property name="version" value="1.0.0" />
6 6
     <property name="build_dir" value="./build" />
7 7
     <property name="src_dir" value="./sources" />
8 8
 
5  sources/BackgroundRenderer.js
@@ -153,6 +153,11 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
153 153
                 pxY = Math.round( bgPos.y ) + bwT + 0.5;
154 154
                 fill.position = ( pxX / elW ) + ',' + ( pxY / elH );
155 155
 
  156
+                // Set the size of the image. We have to actually set it to px values otherwise it will not honor
  157
+                // the user's browser zoom level and always display at its natural screen size.
  158
+                fill['size']['x'] = 1; //Can be any value, just has to be set to "prime" it so the next line works. Weird!
  159
+                fill['size'] = size.w + 'px,' + size.h + 'px';
  160
+
156 161
                 // Repeating - clip the image shape
157 162
                 if( repeat && repeat !== 'repeat' ) {
158 163
                     if( repeat === 'repeat-x' || repeat === 'no-repeat' ) {
3  sources/BorderRenderer.js
@@ -17,8 +17,7 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
17 17
 
18 18
     isActive: function() {
19 19
         var si = this.styleInfos;
20  
-        return ( si.borderRadiusInfo.isActive() ||
21  
-                 si.backgroundInfo.isActive() ) &&
  20
+        return si.borderRadiusInfo.isActive() &&
22 21
                !si.borderImageInfo.isActive() &&
23 22
                si.borderInfo.isActive(); //check BorderStyleInfo last because it's the most expensive
24 23
     },
13  sources/BoundsInfo.js
@@ -25,14 +25,19 @@ PIE.BoundsInfo.prototype = {
25 25
     getLiveBounds: function() {
26 26
         var el = this.targetElement,
27 27
             rect = el.getBoundingClientRect(),
28  
-            isIE9 = PIE.ieDocMode === 9;
  28
+            isIE9 = PIE.ieDocMode === 9,
  29
+            isIE7 = PIE.ieVersion === 7,
  30
+            width = rect.right - rect.left;
29 31
         return {
30 32
             x: rect.left,
31 33
             y: rect.top,
32 34
             // In some cases scrolling the page will cause IE9 to report incorrect dimensions
33  
-            // in the rect returned by getBoundingClientRect, so we must query offsetWidth/Height instead
34  
-            w: isIE9 ? el.offsetWidth : rect.right - rect.left,
35  
-            h: isIE9 ? el.offsetHeight : rect.bottom - rect.top
  35
+            // in the rect returned by getBoundingClientRect, so we must query offsetWidth/Height
  36
+            // instead. Also IE7 is inconsistent in using logical vs. device pixels in measurements
  37
+            // so we must calculate the ratio and use it in certain places as a position adjustment.
  38
+            w: isIE9 || isIE7 ? el.offsetWidth : width,
  39
+            h: isIE9 || isIE7 ? el.offsetHeight : rect.bottom - rect.top,
  40
+            logicalZoomRatio: ( isIE7 && width ) ? el.offsetWidth / width : 1
36 41
         };
37 42
     },
38 43
 
6  sources/BoxShadowOutsetRenderer.js
@@ -74,7 +74,7 @@ PIE.BoxShadowOutsetRenderer = PIE.RendererBase.newRenderer( {
74 74
             shadowInfo = shadowInfos[ i ];
75 75
             xOff = shadowInfo.xOffset.pixels( el );
76 76
             yOff = shadowInfo.yOffset.pixels( el );
77  
-            spread = shadowInfo.spread.pixels( el ),
  77
+            spread = shadowInfo.spread.pixels( el );
78 78
             blur = shadowInfo.blur.pixels( el );
79 79
             color = shadowInfo.color;
80 80
             // Shape path
@@ -89,8 +89,8 @@ PIE.BoxShadowOutsetRenderer = PIE.RendererBase.newRenderer( {
89 89
             if( blur ) {
90 90
                 totalW = ( spread + blur ) * 2 + w;
91 91
                 totalH = ( spread + blur ) * 2 + h;
92  
-                focusX = blur * 2 / totalW;
93  
-                focusY = blur * 2 / totalH;
  92
+                focusX = totalW ? blur * 2 / totalW : 0;
  93
+                focusY = totalH ? blur * 2 / totalH : 0;
94 94
                 if( blur - spread > w / 2 || blur - spread > h / 2 ) {
95 95
                     // If the blur is larger than half the element's narrowest dimension, we cannot do
96 96
                     // this with a single shape gradient, because its focussize would have to be less than
28  sources/Element.js
@@ -4,6 +4,8 @@ PIE.Element = (function() {
4 4
     var wrappers = {},
5 5
         lazyInitCssProp = PIE.CSS_PREFIX + 'lazy-init',
6 6
         pollCssProp = PIE.CSS_PREFIX + 'poll',
  7
+        trackActiveCssProp = PIE.CSS_PREFIX + 'track-active',
  8
+        trackHoverCssProp = PIE.CSS_PREFIX + 'track-hover',
7 9
         hoverClass = PIE.CLASS_PREFIX + 'hover',
8 10
         activeClass = PIE.CLASS_PREFIX + 'active',
9 11
         focusClass = PIE.CLASS_PREFIX + 'focus',
@@ -27,8 +29,10 @@ PIE.Element = (function() {
27 29
         var classes = dummyArray.slice.call( arguments, 1 ),
28 30
             i = classes.length;
29 31
         setTimeout( function() {
30  
-            while( i-- ) {
31  
-                addClass( el, classes[ i ] );
  32
+            if( el ) {
  33
+                while( i-- ) {
  34
+                    addClass( el, classes[ i ] );
  35
+                }
32 36
             }
33 37
         }, 0 );
34 38
     }
@@ -37,8 +41,10 @@ PIE.Element = (function() {
37 41
         var classes = dummyArray.slice.call( arguments, 1 ),
38 42
             i = classes.length;
39 43
         setTimeout( function() {
40  
-            while( i-- ) {
41  
-                removeClass( el, classes[ i ] );
  44
+            if( el ) {
  45
+                while( i-- ) {
  46
+                    removeClass( el, classes[ i ] );
  47
+                }
42 48
             }
43 49
         }, 0 );
44 50
     }
@@ -69,6 +75,8 @@ PIE.Element = (function() {
69 75
                     ieDocMode = PIE.ieDocMode,
70 76
                     cs = el.currentStyle,
71 77
                     lazy = cs.getAttribute( lazyInitCssProp ) === 'true',
  78
+                    trackActive = cs.getAttribute( trackActiveCssProp ) !== 'false',
  79
+                    trackHover = cs.getAttribute( trackHoverCssProp ) !== 'false',
72 80
                     childRenderers;
73 81
 
74 82
                 // Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
@@ -166,9 +174,15 @@ PIE.Element = (function() {
166 174
                     }
167 175
                     addListener( el, 'onresize', handleMoveOrResize );
168 176
                     addListener( el, 'onpropertychange', propChanged );
169  
-                    addListener( el, 'onmouseenter', mouseEntered );
170  
-                    addListener( el, 'onmouseleave', mouseLeft );
171  
-                    addListener( el, 'onmousedown', mousePressed );
  177
+                    if( trackHover ) {
  178
+                        addListener( el, 'onmouseenter', mouseEntered );
  179
+                    }
  180
+                    if( trackHover || trackActive ) {
  181
+                        addListener( el, 'onmouseleave', mouseLeft );
  182
+                    }
  183
+                    if( trackActive ) {
  184
+                        addListener( el, 'onmousedown', mousePressed );
  185
+                    }
172 186
                     if( el.tagName in PIE.focusableElements ) {
173 187
                         addListener( el, 'onfocus', focused );
174 188
                         addListener( el, 'onblur', blurred );
11  sources/Heartbeat.js
@@ -2,15 +2,20 @@
2 2
  * Simple heartbeat timer - this is a brute-force workaround for syncing issues caused by IE not
3 3
  * always firing the onmove and onresize events when elements are moved or resized. We check a few
4 4
  * times every second to make sure the elements have the correct position and size. See Element.js
5  
- * which adds heartbeat listeners based on the custom -pie-poll flag, which defaults to true in IE8
  5
+ * which adds heartbeat listeners based on the custom -pie-poll flag, which defaults to true in IE8-9
6 6
  * and false elsewhere.
7 7
  */
8 8
 
9 9
 PIE.Heartbeat = new PIE.Observable();
10 10
 PIE.Heartbeat.run = function() {
11  
-    var me = this;
  11
+    var me = this,
  12
+        interval;
12 13
     if( !me.running ) {
13  
-        setInterval( function() { me.fire() }, 250 );
  14
+        interval = doc.documentElement.currentStyle.getAttribute( PIE.CSS_PREFIX + 'poll-interval' ) || 250;
  15
+        (function beat() {
  16
+            me.fire();
  17
+            setTimeout(beat, interval);
  18
+        })();
14 19
         me.running = 1;
15 20
     }
16 21
 };
6  sources/Length.js
@@ -7,7 +7,7 @@
7 7
  */
8 8
 PIE.Length = (function() {
9 9
     var lengthCalcEl = doc.createElement( 'length-calc' ),
10  
-        parent = doc.documentElement,
  10
+        parent = doc.body || doc.documentElement,
11 11
         s = lengthCalcEl.style,
12 12
         conversions = {},
13 13
         units = [ 'mm', 'cm', 'in', 'pt', 'pc' ],
@@ -19,13 +19,13 @@ PIE.Length = (function() {
19 19
 
20 20
     parent.appendChild( lengthCalcEl );
21 21
     while( i-- ) {
22  
-        lengthCalcEl.style.width = '100' + units[i];
  22
+        s.width = '100' + units[i];
23 23
         conversions[ units[i] ] = lengthCalcEl.offsetWidth / 100;
24 24
     }
25 25
     parent.removeChild( lengthCalcEl );
26 26
 
27 27
     // All calcs from here on will use 1em
28  
-    lengthCalcEl.style.width = '1em';
  28
+    s.width = '1em';
29 29
 
30 30
 
31 31
     function Length( val ) {
6  sources/OnPrint.js
@@ -19,7 +19,9 @@
19 19
         }
20 20
     }
21 21
 
22  
-    PIE.OnUnload.attachManagedEvent( window, 'onbeforeprint', beforePrint );
23  
-    PIE.OnUnload.attachManagedEvent( window, 'onafterprint', afterPrint );
  22
+    if( PIE.ieDocMode < 9 ) {
  23
+        PIE.OnUnload.attachManagedEvent( window, 'onbeforeprint', beforePrint );
  24
+        PIE.OnUnload.attachManagedEvent( window, 'onafterprint', afterPrint );
  25
+    }
24 26
 
25 27
 })();
15  sources/RootRenderer.js
@@ -31,11 +31,12 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
31 31
                 boxPos,
32 32
                 s = this.getBox().style, cs,
33 33
                 x = 0, y = 0,
34  
-                elBounds = this.boundsInfo.getBounds();
  34
+                elBounds = this.boundsInfo.getBounds(),
  35
+                logicalZoomRatio = elBounds.logicalZoomRatio;
35 36
 
36 37
             if( tgtPos === 'fixed' && PIE.ieVersion > 6 ) {
37  
-                x = elBounds.x;
38  
-                y = elBounds.y;
  38
+                x = elBounds.x * logicalZoomRatio;
  39
+                y = elBounds.y * logicalZoomRatio;
39 40
                 boxPos = tgtPos;
40 41
             } else {
41 42
                 // Get the element's offsets from its nearest positioned ancestor. Uses
@@ -46,12 +47,12 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
46 47
                 if( par ) {
47 48
                     parRect = par.getBoundingClientRect();
48 49
                     cs = par.currentStyle;
49  
-                    x = elBounds.x - parRect.left - ( parseFloat(cs.borderLeftWidth) || 0 );
50  
-                    y = elBounds.y - parRect.top - ( parseFloat(cs.borderTopWidth) || 0 );
  50
+                    x = ( elBounds.x - parRect.left ) * logicalZoomRatio - ( parseFloat(cs.borderLeftWidth) || 0 );
  51
+                    y = ( elBounds.y - parRect.top ) * logicalZoomRatio - ( parseFloat(cs.borderTopWidth) || 0 );
51 52
                 } else {
52 53
                     docEl = doc.documentElement;
53  
-                    x = elBounds.x + docEl.scrollLeft - docEl.clientLeft;
54  
-                    y = elBounds.y + docEl.scrollTop - docEl.clientTop;
  54
+                    x = ( elBounds.x + docEl.scrollLeft - docEl.clientLeft ) * logicalZoomRatio;
  55
+                    y = ( elBounds.y + docEl.scrollTop - docEl.clientTop ) * logicalZoomRatio;
55 56
                 }
56 57
                 boxPos = 'absolute';
57 58
             }
18  sources/htc_init.js
... ...
@@ -1,17 +1,21 @@
1 1
 var el = element;
2 2
 
3 3
 function init() {
4  
-    var PIE = window[ 'PIE' ];
5  
-    if( PIE && doc.media !== 'print' ) { // IE strangely attaches a second copy of the behavior to elements when printing
6  
-        PIE['attach']( el );
  4
+    if ( doc.media !== 'print' ) { // IE strangely attaches a second copy of the behavior to elements when printing
  5
+        var PIE = window[ 'PIE' ];
  6
+        if( PIE ) {
  7
+            PIE['attach']( el );
  8
+        }
7 9
     }
8 10
 }
9 11
 
10 12
 function cleanup() {
11  
-    var PIE = window[ 'PIE' ];
12  
-    if (PIE) {
13  
-        PIE['detach']( el );
14  
-        PIE = el = 0;
  13
+    if ( doc.media !== 'print' ) {
  14
+        var PIE = window[ 'PIE' ];
  15
+        if (PIE) {
  16
+            PIE['detach']( el );
  17
+            el = 0;
  18
+        }
15 19
     }
16 20
 }
17 21
 
29  tests/submitted/issue190.html
... ...
@@ -0,0 +1,29 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+    <title></title>
  5
+
  6
+    <style type="text/css">
  7
+        .cssPieRoundedCornersTest
  8
+        {
  9
+            border: 1px solid #000;
  10
+            border-radius: 10px;
  11
+            behavior: url(../../build/PIE.htc);
  12
+            position: relative;
  13
+            -pie-track-active: false;
  14
+        }
  15
+    </style>
  16
+
  17
+</head>
  18
+<body>
  19
+
  20
+<div class="cssPieRoundedCornersTest" style="height:150px;">
  21
+    <div style="overflow:auto; height:75px; width:50%;">
  22
+        Hello 1<br/>Hello 2<br/>Hello 3<br/>Hello 4<br/>Hello 5<br/>Hello 6<br/>
  23
+        Hello 7<br/>Hello 8<br/>Hello 9<br/>Hello 10<br/>Hello 11<br/>Hello 12<br/>
  24
+        Hello 13<br/>Hello 14<br/>Hello 15<br/>Hello 16<br/>Hello 17<br/>Hello 18<br/>
  25
+    </div>
  26
+</div>
  27
+
  28
+</body>
  29
+</html>
55  tests/track-hover_track-active.html
... ...
@@ -0,0 +1,55 @@
  1
+<!DOCTYPE html>
  2
+
  3
+<html>
  4
+<head>
  5
+    <title>-pie-png-fix test</title>
  6
+
  7
+    <style>
  8
+
  9
+        div {
  10
+            behavior: url(../build/PIE.htc);
  11
+            border-radius: 20px;
  12
+            box-shadow: 0 0 10px blue;
  13
+            background: white;
  14
+            width: 200px;
  15
+            height: 50px;
  16
+            padding: 30px;
  17
+            margin: 50px;
  18
+        }
  19
+
  20
+        div.hover:hover {
  21
+            border-radius: 30px;
  22
+            box-shadow: 0 0 10px green;
  23
+        }
  24
+        #hover-false {
  25
+            -pie-track-hover: false;
  26
+        }
  27
+
  28
+        div.active:active {
  29
+            border-radius: 50px;
  30
+            box-shadow: 0 0 20px red;
  31
+        }
  32
+        #active-false {
  33
+            -pie-track-active: false;
  34
+        }
  35
+
  36
+    </style>
  37
+</head>
  38
+<body>
  39
+
  40
+    <div class="hover" id="hover-true">
  41
+        -pie-track-hover: true;
  42
+    </div>
  43
+    <div class="hover" id="hover-false">
  44
+        -pie-track-hover: false;
  45
+    </div>
  46
+
  47
+    <div class="active" id="active-true">
  48
+        -pie-track-active: true;
  49
+    </div>
  50
+    <div class="active" id="active-false">
  51
+        -pie-track-active: false;
  52
+    </div>
  53
+
  54
+</body>
  55
+</html>

No commit comments for this range

Something went wrong with that request. Please try again.