Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
...
  • 12 commits
  • 9 files changed
  • 0 commit comments
  • 1 contributor
Commits on Feb 05, 2012
@lojjic Fix divide-by-zero error when the total width or height of the box-sh…
…adow shape is zero.
3be66f6
Jason Johnston Make sure the element still exists after the add/removeClass delay. F…
…ixes #191.
b9e6813
Jason Johnston Don't perform border rendering if there is no border-radius specified. 64f4e7d
Jason Johnston Put the length calc element into the body rather than the documentEle…
…ment, fixes unit conversions in IE<8
0c278f9
Jason Johnston Fix comma afefebf
Jason Johnston 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
Jason Johnston 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
@lojjic Don't add any printing handlers in IE9, as they cause errors and aren…
…'t needed anyway.
8d73e90
Commits on Feb 08, 2012
@lojjic 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
@lojjic Bump build number af1031c
Commits on Feb 09, 2012
@lojjic Fix printing error in IE9 by putting the print media check before att…
…empting to access window.PIE
0aa983e
Commits on Mar 25, 2012
@lojjic Sometimes el.currentStyle does not yet exist; add a check at the star…
…t of each update and delay the update slightly if it's not present.
80e4d10
View
2 build.xml
@@ -2,7 +2,7 @@
<project name="PIE" default="build" basedir=".">
- <property name="version" value="1.0beta5" />
+ <property name="version" value="1.0.0-SNAPSHOT" />
<property name="build_dir" value="./build" />
<property name="src_dir" value="./sources" />
View
5 sources/BackgroundRenderer.js
@@ -153,6 +153,11 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
pxY = Math.round( bgPos.y ) + bwT + 0.5;
fill.position = ( pxX / elW ) + ',' + ( pxY / elH );
+ // Set the size of the image. We have to actually set it to px values otherwise it will not honor
+ // the user's browser zoom level and always display at its natural screen size.
+ fill['size']['x'] = 1; //Can be any value, just has to be set to "prime" it so the next line works. Weird!
+ fill['size'] = size.w + 'px,' + size.h + 'px';
+
// Repeating - clip the image shape
if( repeat && repeat !== 'repeat' ) {
if( repeat === 'repeat-x' || repeat === 'no-repeat' ) {
View
3 sources/BorderRenderer.js
@@ -17,8 +17,7 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
isActive: function() {
var si = this.styleInfos;
- return ( si.borderRadiusInfo.isActive() ||
- si.backgroundInfo.isActive() ) &&
+ return si.borderRadiusInfo.isActive() &&
!si.borderImageInfo.isActive() &&
si.borderInfo.isActive(); //check BorderStyleInfo last because it's the most expensive
},
View
6 sources/BoxShadowOutsetRenderer.js
@@ -74,7 +74,7 @@ PIE.BoxShadowOutsetRenderer = PIE.RendererBase.newRenderer( {
shadowInfo = shadowInfos[ i ];
xOff = shadowInfo.xOffset.pixels( el );
yOff = shadowInfo.yOffset.pixels( el );
- spread = shadowInfo.spread.pixels( el ),
+ spread = shadowInfo.spread.pixels( el );
blur = shadowInfo.blur.pixels( el );
color = shadowInfo.color;
// Shape path
@@ -89,8 +89,8 @@ PIE.BoxShadowOutsetRenderer = PIE.RendererBase.newRenderer( {
if( blur ) {
totalW = ( spread + blur ) * 2 + w;
totalH = ( spread + blur ) * 2 + h;
- focusX = blur * 2 / totalW;
- focusY = blur * 2 / totalH;
+ focusX = totalW ? blur * 2 / totalW : 0;
+ focusY = totalH ? blur * 2 / totalH : 0;
if( blur - spread > w / 2 || blur - spread > h / 2 ) {
// If the blur is larger than half the element's narrowest dimension, we cannot do
// this with a single shape gradient, because its focussize would have to be less than
View
228 sources/Element.js
@@ -27,8 +27,10 @@ PIE.Element = (function() {
var classes = dummyArray.slice.call( arguments, 1 ),
i = classes.length;
setTimeout( function() {
- while( i-- ) {
- addClass( el, classes[ i ] );
+ if( el ) {
+ while( i-- ) {
+ addClass( el, classes[ i ] );
+ }
}
}, 0 );
}
@@ -37,8 +39,10 @@ PIE.Element = (function() {
var classes = dummyArray.slice.call( arguments, 1 ),
i = classes.length;
setTimeout( function() {
- while( i-- ) {
- removeClass( el, classes[ i ] );
+ if( el ) {
+ while( i-- ) {
+ removeClass( el, classes[ i ] );
+ }
}
}, 0 );
}
@@ -68,117 +72,123 @@ PIE.Element = (function() {
bounds,
ieDocMode = PIE.ieDocMode,
cs = el.currentStyle,
- lazy = cs.getAttribute( lazyInitCssProp ) === 'true',
- childRenderers;
-
- // Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
- poll = cs.getAttribute( pollCssProp );
- poll = ieDocMode > 7 ? poll !== 'false' : poll === 'true';
-
- // Force layout so move/resize events will fire. Set this as soon as possible to avoid layout changes
- // after load, but make sure it only gets called the first time through to avoid recursive calls to init().
- if( !initializing ) {
- initializing = 1;
- el.runtimeStyle.zoom = 1;
- initFirstChildPseudoClass();
- }
-
- boundsInfo.lock();
+ lazy, childRenderers;
- // If the -pie-lazy-init:true flag is set, check if the element is outside the viewport and if so, delay initialization
- if( lazy && ( bounds = boundsInfo.getBounds() ) && ( docEl = doc.documentElement || doc.body ) &&
- ( bounds.y > docEl.clientHeight || bounds.x > docEl.clientWidth || bounds.y + bounds.h < 0 || bounds.x + bounds.w < 0 ) ) {
- if( !delayed ) {
- delayed = 1;
- PIE.OnScroll.observe( init );
- }
+ if( !cs ) {
+ // currentStyle not yet initialized; delay slightly until it's ready
+ setTimeout(init, 1);
} else {
- initialized = 1;
- delayed = initializing = 0;
- PIE.OnScroll.unobserve( init );
-
- // Create the style infos and renderers
- if ( ieDocMode === 9 ) {
- styleInfos = {
- backgroundInfo: new PIE.BackgroundStyleInfo( el ),
- borderImageInfo: new PIE.BorderImageStyleInfo( el ),
- borderInfo: new PIE.BorderStyleInfo( el )
- };
- styleInfosArr = [
- styleInfos.backgroundInfo,
- styleInfos.borderImageInfo
- ];
- rootRenderer = new PIE.IE9RootRenderer( el, boundsInfo, styleInfos );
- childRenderers = [
- new PIE.IE9BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
- new PIE.IE9BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
- ];
- } else {
+ lazy = cs.getAttribute( lazyInitCssProp ) === 'true';
+
+ // Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
+ poll = cs.getAttribute( pollCssProp );
+ poll = ieDocMode > 7 ? poll !== 'false' : poll === 'true';
+
+ // Force layout so move/resize events will fire. Set this as soon as possible to avoid layout changes
+ // after load, but make sure it only gets called the first time through to avoid recursive calls to init().
+ if( !initializing ) {
+ initializing = 1;
+ el.runtimeStyle.zoom = 1;
+ initFirstChildPseudoClass();
+ }
- styleInfos = {
- backgroundInfo: new PIE.BackgroundStyleInfo( el ),
- borderInfo: new PIE.BorderStyleInfo( el ),
- borderImageInfo: new PIE.BorderImageStyleInfo( el ),
- borderRadiusInfo: new PIE.BorderRadiusStyleInfo( el ),
- boxShadowInfo: new PIE.BoxShadowStyleInfo( el ),
- visibilityInfo: new PIE.VisibilityStyleInfo( el )
- };
- styleInfosArr = [
- styleInfos.backgroundInfo,
- styleInfos.borderInfo,
- styleInfos.borderImageInfo,
- styleInfos.borderRadiusInfo,
- styleInfos.boxShadowInfo,
- styleInfos.visibilityInfo
- ];
- rootRenderer = new PIE.RootRenderer( el, boundsInfo, styleInfos );
- childRenderers = [
- new PIE.BoxShadowOutsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
- new PIE.BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
- //new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
- new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
- new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
- ];
- if( el.tagName === 'IMG' ) {
- childRenderers.push( new PIE.ImgRenderer( el, boundsInfo, styleInfos, rootRenderer ) );
+ boundsInfo.lock();
+
+ // If the -pie-lazy-init:true flag is set, check if the element is outside the viewport and if so, delay initialization
+ if( lazy && ( bounds = boundsInfo.getBounds() ) && ( docEl = doc.documentElement || doc.body ) &&
+ ( bounds.y > docEl.clientHeight || bounds.x > docEl.clientWidth || bounds.y + bounds.h < 0 || bounds.x + bounds.w < 0 ) ) {
+ if( !delayed ) {
+ delayed = 1;
+ PIE.OnScroll.observe( init );
}
- rootRenderer.childRenderers = childRenderers; // circular reference, can't pass in constructor; TODO is there a cleaner way?
- }
- renderers = [ rootRenderer ].concat( childRenderers );
+ } else {
+ initialized = 1;
+ delayed = initializing = 0;
+ PIE.OnScroll.unobserve( init );
+
+ // Create the style infos and renderers
+ if ( ieDocMode === 9 ) {
+ styleInfos = {
+ backgroundInfo: new PIE.BackgroundStyleInfo( el ),
+ borderImageInfo: new PIE.BorderImageStyleInfo( el ),
+ borderInfo: new PIE.BorderStyleInfo( el )
+ };
+ styleInfosArr = [
+ styleInfos.backgroundInfo,
+ styleInfos.borderImageInfo
+ ];
+ rootRenderer = new PIE.IE9RootRenderer( el, boundsInfo, styleInfos );
+ childRenderers = [
+ new PIE.IE9BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
+ new PIE.IE9BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
+ ];
+ } else {
+
+ styleInfos = {
+ backgroundInfo: new PIE.BackgroundStyleInfo( el ),
+ borderInfo: new PIE.BorderStyleInfo( el ),
+ borderImageInfo: new PIE.BorderImageStyleInfo( el ),
+ borderRadiusInfo: new PIE.BorderRadiusStyleInfo( el ),
+ boxShadowInfo: new PIE.BoxShadowStyleInfo( el ),
+ visibilityInfo: new PIE.VisibilityStyleInfo( el )
+ };
+ styleInfosArr = [
+ styleInfos.backgroundInfo,
+ styleInfos.borderInfo,
+ styleInfos.borderImageInfo,
+ styleInfos.borderRadiusInfo,
+ styleInfos.boxShadowInfo,
+ styleInfos.visibilityInfo
+ ];
+ rootRenderer = new PIE.RootRenderer( el, boundsInfo, styleInfos );
+ childRenderers = [
+ new PIE.BoxShadowOutsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
+ new PIE.BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
+ //new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
+ new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
+ new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
+ ];
+ if( el.tagName === 'IMG' ) {
+ childRenderers.push( new PIE.ImgRenderer( el, boundsInfo, styleInfos, rootRenderer ) );
+ }
+ rootRenderer.childRenderers = childRenderers; // circular reference, can't pass in constructor; TODO is there a cleaner way?
+ }
+ renderers = [ rootRenderer ].concat( childRenderers );
+
+ // Add property change listeners to ancestors if requested
+ initAncestorEventListeners();
- // Add property change listeners to ancestors if requested
- initAncestorEventListeners();
+ // Add to list of polled elements in IE8
+ if( poll ) {
+ PIE.Heartbeat.observe( update );
+ PIE.Heartbeat.run();
+ }
- // Add to list of polled elements in IE8
- if( poll ) {
- PIE.Heartbeat.observe( update );
- PIE.Heartbeat.run();
+ // Trigger rendering
+ update( 1 );
}
- // Trigger rendering
- update( 1 );
- }
+ if( !eventsAttached ) {
+ eventsAttached = 1;
+ if( ieDocMode < 9 ) {
+ addListener( el, 'onmove', handleMoveOrResize );
+ }
+ addListener( el, 'onresize', handleMoveOrResize );
+ addListener( el, 'onpropertychange', propChanged );
+ addListener( el, 'onmouseenter', mouseEntered );
+ addListener( el, 'onmouseleave', mouseLeft );
+ addListener( el, 'onmousedown', mousePressed );
+ if( el.tagName in PIE.focusableElements ) {
+ addListener( el, 'onfocus', focused );
+ addListener( el, 'onblur', blurred );
+ }
+ PIE.OnResize.observe( handleMoveOrResize );
- if( !eventsAttached ) {
- eventsAttached = 1;
- if( ieDocMode < 9 ) {
- addListener( el, 'onmove', handleMoveOrResize );
- }
- addListener( el, 'onresize', handleMoveOrResize );
- addListener( el, 'onpropertychange', propChanged );
- addListener( el, 'onmouseenter', mouseEntered );
- addListener( el, 'onmouseleave', mouseLeft );
- addListener( el, 'onmousedown', mousePressed );
- if( el.tagName in PIE.focusableElements ) {
- addListener( el, 'onfocus', focused );
- addListener( el, 'onblur', blurred );
+ PIE.OnUnload.observe( removeEventListeners );
}
- PIE.OnResize.observe( handleMoveOrResize );
- PIE.OnUnload.observe( removeEventListeners );
+ boundsInfo.unlock();
}
-
- boundsInfo.unlock();
}
}
@@ -204,7 +214,11 @@ PIE.Element = (function() {
*/
function update( force ) {
if( !destroyed ) {
- if( initialized ) {
+ if( !el.currentStyle ) {
+ // currentStyle not yet initialized; delay slightly until it's ready
+ setTimeout(update, 1);
+ }
+ else if( initialized ) {
var i, len = renderers.length;
lockAll();
@@ -251,7 +265,11 @@ PIE.Element = (function() {
// is ignored because size calculations don't work correctly immediately when its onpropertychange
// event fires, and because it will trigger an onresize event anyway.
if( !destroyed && !( e && e.propertyName in ignorePropertyNames ) ) {
- if( initialized ) {
+ if( !el.currentStyle ) {
+ // currentStyle not yet initialized; delay slightly until it's ready
+ setTimeout(propChanged, 1);
+ }
+ else if( initialized ) {
lockAll();
for( i = 0; i < len; i++ ) {
renderers[i].prepareUpdate();
View
11 sources/Heartbeat.js
@@ -2,15 +2,20 @@
* Simple heartbeat timer - this is a brute-force workaround for syncing issues caused by IE not
* always firing the onmove and onresize events when elements are moved or resized. We check a few
* times every second to make sure the elements have the correct position and size. See Element.js
- * which adds heartbeat listeners based on the custom -pie-poll flag, which defaults to true in IE8
+ * which adds heartbeat listeners based on the custom -pie-poll flag, which defaults to true in IE8-9
* and false elsewhere.
*/
PIE.Heartbeat = new PIE.Observable();
PIE.Heartbeat.run = function() {
- var me = this;
+ var me = this,
+ interval;
if( !me.running ) {
- setInterval( function() { me.fire() }, 250 );
+ interval = doc.documentElement.currentStyle.getAttribute( PIE.CSS_PREFIX + 'poll-interval' ) || 250;
+ (function beat() {
+ me.fire();
+ setTimeout(beat, interval);
+ })();
me.running = 1;
}
};
View
6 sources/Length.js
@@ -7,7 +7,7 @@
*/
PIE.Length = (function() {
var lengthCalcEl = doc.createElement( 'length-calc' ),
- parent = doc.documentElement,
+ parent = doc.body || doc.documentElement,
s = lengthCalcEl.style,
conversions = {},
units = [ 'mm', 'cm', 'in', 'pt', 'pc' ],
@@ -19,13 +19,13 @@ PIE.Length = (function() {
parent.appendChild( lengthCalcEl );
while( i-- ) {
- lengthCalcEl.style.width = '100' + units[i];
+ s.width = '100' + units[i];
conversions[ units[i] ] = lengthCalcEl.offsetWidth / 100;
}
parent.removeChild( lengthCalcEl );
// All calcs from here on will use 1em
- lengthCalcEl.style.width = '1em';
+ s.width = '1em';
function Length( val ) {
View
6 sources/OnPrint.js
@@ -19,7 +19,9 @@
}
}
- PIE.OnUnload.attachManagedEvent( window, 'onbeforeprint', beforePrint );
- PIE.OnUnload.attachManagedEvent( window, 'onafterprint', afterPrint );
+ if( PIE.ieDocMode < 9 ) {
+ PIE.OnUnload.attachManagedEvent( window, 'onbeforeprint', beforePrint );
+ PIE.OnUnload.attachManagedEvent( window, 'onafterprint', afterPrint );
+ }
})();
View
18 sources/htc_init.js
@@ -1,17 +1,21 @@
var el = element;
function init() {
- var PIE = window[ 'PIE' ];
- if( PIE && doc.media !== 'print' ) { // IE strangely attaches a second copy of the behavior to elements when printing
- PIE['attach']( el );
+ if ( doc.media !== 'print' ) { // IE strangely attaches a second copy of the behavior to elements when printing
+ var PIE = window[ 'PIE' ];
+ if( PIE ) {
+ PIE['attach']( el );
+ }
}
}
function cleanup() {
- var PIE = window[ 'PIE' ];
- if (PIE) {
- PIE['detach']( el );
- PIE = el = 0;
+ if ( doc.media !== 'print' ) {
+ var PIE = window[ 'PIE' ];
+ if (PIE) {
+ PIE['detach']( el );
+ el = 0;
+ }
}
}

No commit comments for this range

Something went wrong with that request. Please try again.