Skip to content
This repository has been archived by the owner on Apr 20, 2023. It is now read-only.

Current style check #311

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Current style check #311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3be66f6
Fix divide-by-zero error when the total width or height of the box-sh…
lojjic Nov 20, 2011
b9e6813
Make sure the element still exists after the add/removeClass delay. F…
Dec 31, 2011
64f4e7d
Don't perform border rendering if there is no border-radius specified.
Nov 19, 2011
0c278f9
Put the length calc element into the body rather than the documentEle…
Nov 7, 2011
afefebf
Fix comma
Oct 30, 2011
9799198
Partial fix for issue #79: explicitly set the size of the background …
Sep 5, 2011
862c626
Sometimes the body doesn't exist yet when doing length units calculat…
Nov 25, 2011
8d73e90
Don't add any printing handlers in IE9, as they cause errors and aren…
lojjic Feb 5, 2012
6744f04
Tweaks to polling heartbeat: use setTimeout rather than setInterval t…
lojjic Feb 8, 2012
af1031c
Bump build number
lojjic Feb 8, 2012
0aa983e
Fix printing error in IE9 by putting the print media check before att…
lojjic Feb 9, 2012
80e4d10
Sometimes el.currentStyle does not yet exist; add a check at the star…
lojjic Mar 25, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion build.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />

Expand Down
5 changes: 5 additions & 0 deletions sources/BackgroundRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) {
Expand Down
3 changes: 1 addition & 2 deletions sources/BorderRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
Expand Down
6 changes: 3 additions & 3 deletions sources/BoxShadowOutsetRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
228 changes: 123 additions & 105 deletions sources/Element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}
Expand All @@ -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 );
}
Expand Down Expand Up @@ -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();
}
}

Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand Down
11 changes: 8 additions & 3 deletions sources/Heartbeat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
};
6 changes: 3 additions & 3 deletions sources/Length.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ],
Expand All @@ -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 ) {
Expand Down
6 changes: 4 additions & 2 deletions sources/OnPrint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}

})();
Loading