Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

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

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: lojjic/PIE
...
head fork: lojjic/PIE
Checking mergeability… Don't worry, you can still create the pull request.
  • 16 commits
  • 13 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 28, 2012
@lojjic 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
Commits on May 12, 2012
@lojjic Add support for -pie-track-hover property to allow disabling of autom…
…atic :hover tracking
eca23e4
@lojjic Adjust for IE7's inconsistent application of logical vs. device pixel…
… ratio when zoomed. Issue #79
8026857
@lojjic 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
@lojjic Bump build number 1.0.0
41c8f58
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" />
<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
13 sources/BoundsInfo.js
@@ -25,14 +25,19 @@ PIE.BoundsInfo.prototype = {
getLiveBounds: function() {
var el = this.targetElement,
rect = el.getBoundingClientRect(),
- isIE9 = PIE.ieDocMode === 9;
+ isIE9 = PIE.ieDocMode === 9,
+ isIE7 = PIE.ieVersion === 7,
+ width = rect.right - rect.left;
return {
x: rect.left,
y: rect.top,
// In some cases scrolling the page will cause IE9 to report incorrect dimensions
- // in the rect returned by getBoundingClientRect, so we must query offsetWidth/Height instead
- w: isIE9 ? el.offsetWidth : rect.right - rect.left,
- h: isIE9 ? el.offsetHeight : rect.bottom - rect.top
+ // in the rect returned by getBoundingClientRect, so we must query offsetWidth/Height
+ // instead. Also IE7 is inconsistent in using logical vs. device pixels in measurements
+ // so we must calculate the ratio and use it in certain places as a position adjustment.
+ w: isIE9 || isIE7 ? el.offsetWidth : width,
+ h: isIE9 || isIE7 ? el.offsetHeight : rect.bottom - rect.top,
+ logicalZoomRatio: ( isIE7 && width ) ? el.offsetWidth / width : 1
};
},
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
28 sources/Element.js
@@ -4,6 +4,8 @@ PIE.Element = (function() {
var wrappers = {},
lazyInitCssProp = PIE.CSS_PREFIX + 'lazy-init',
pollCssProp = PIE.CSS_PREFIX + 'poll',
+ trackActiveCssProp = PIE.CSS_PREFIX + 'track-active',
+ trackHoverCssProp = PIE.CSS_PREFIX + 'track-hover',
hoverClass = PIE.CLASS_PREFIX + 'hover',
activeClass = PIE.CLASS_PREFIX + 'active',
focusClass = PIE.CLASS_PREFIX + 'focus',
@@ -27,8 +29,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 +41,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 );
}
@@ -69,6 +75,8 @@ PIE.Element = (function() {
ieDocMode = PIE.ieDocMode,
cs = el.currentStyle,
lazy = cs.getAttribute( lazyInitCssProp ) === 'true',
+ trackActive = cs.getAttribute( trackActiveCssProp ) !== 'false',
+ trackHover = cs.getAttribute( trackHoverCssProp ) !== 'false',
childRenderers;
// Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
@@ -166,9 +174,15 @@ PIE.Element = (function() {
}
addListener( el, 'onresize', handleMoveOrResize );
addListener( el, 'onpropertychange', propChanged );
- addListener( el, 'onmouseenter', mouseEntered );
- addListener( el, 'onmouseleave', mouseLeft );
- addListener( el, 'onmousedown', mousePressed );
+ if( trackHover ) {
+ addListener( el, 'onmouseenter', mouseEntered );
+ }
+ if( trackHover || trackActive ) {
+ addListener( el, 'onmouseleave', mouseLeft );
+ }
+ if( trackActive ) {
+ addListener( el, 'onmousedown', mousePressed );
+ }
if( el.tagName in PIE.focusableElements ) {
addListener( el, 'onfocus', focused );
addListener( el, 'onblur', blurred );
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
15 sources/RootRenderer.js
@@ -31,11 +31,12 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
boxPos,
s = this.getBox().style, cs,
x = 0, y = 0,
- elBounds = this.boundsInfo.getBounds();
+ elBounds = this.boundsInfo.getBounds(),
+ logicalZoomRatio = elBounds.logicalZoomRatio;
if( tgtPos === 'fixed' && PIE.ieVersion > 6 ) {
- x = elBounds.x;
- y = elBounds.y;
+ x = elBounds.x * logicalZoomRatio;
+ y = elBounds.y * logicalZoomRatio;
boxPos = tgtPos;
} else {
// Get the element's offsets from its nearest positioned ancestor. Uses
@@ -46,12 +47,12 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
if( par ) {
parRect = par.getBoundingClientRect();
cs = par.currentStyle;
- x = elBounds.x - parRect.left - ( parseFloat(cs.borderLeftWidth) || 0 );
- y = elBounds.y - parRect.top - ( parseFloat(cs.borderTopWidth) || 0 );
+ x = ( elBounds.x - parRect.left ) * logicalZoomRatio - ( parseFloat(cs.borderLeftWidth) || 0 );
+ y = ( elBounds.y - parRect.top ) * logicalZoomRatio - ( parseFloat(cs.borderTopWidth) || 0 );
} else {
docEl = doc.documentElement;
- x = elBounds.x + docEl.scrollLeft - docEl.clientLeft;
- y = elBounds.y + docEl.scrollTop - docEl.clientTop;
+ x = ( elBounds.x + docEl.scrollLeft - docEl.clientLeft ) * logicalZoomRatio;
+ y = ( elBounds.y + docEl.scrollTop - docEl.clientTop ) * logicalZoomRatio;
}
boxPos = 'absolute';
}
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;
+ }
}
}
View
29 tests/submitted/issue190.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title></title>
+
+ <style type="text/css">
+ .cssPieRoundedCornersTest
+ {
+ border: 1px solid #000;
+ border-radius: 10px;
+ behavior: url(../../build/PIE.htc);
+ position: relative;
+ -pie-track-active: false;
+ }
+ </style>
+
+</head>
+<body>
+
+<div class="cssPieRoundedCornersTest" style="height:150px;">
+ <div style="overflow:auto; height:75px; width:50%;">
+ Hello 1<br/>Hello 2<br/>Hello 3<br/>Hello 4<br/>Hello 5<br/>Hello 6<br/>
+ Hello 7<br/>Hello 8<br/>Hello 9<br/>Hello 10<br/>Hello 11<br/>Hello 12<br/>
+ Hello 13<br/>Hello 14<br/>Hello 15<br/>Hello 16<br/>Hello 17<br/>Hello 18<br/>
+ </div>
+</div>
+
+</body>
+</html>
View
55 tests/track-hover_track-active.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>-pie-png-fix test</title>
+
+ <style>
+
+ div {
+ behavior: url(../build/PIE.htc);
+ border-radius: 20px;
+ box-shadow: 0 0 10px blue;
+ background: white;
+ width: 200px;
+ height: 50px;
+ padding: 30px;
+ margin: 50px;
+ }
+
+ div.hover:hover {
+ border-radius: 30px;
+ box-shadow: 0 0 10px green;
+ }
+ #hover-false {
+ -pie-track-hover: false;
+ }
+
+ div.active:active {
+ border-radius: 50px;
+ box-shadow: 0 0 20px red;
+ }
+ #active-false {
+ -pie-track-active: false;
+ }
+
+ </style>
+</head>
+<body>
+
+ <div class="hover" id="hover-true">
+ -pie-track-hover: true;
+ </div>
+ <div class="hover" id="hover-false">
+ -pie-track-hover: false;
+ </div>
+
+ <div class="active" id="active-true">
+ -pie-track-active: true;
+ </div>
+ <div class="active" id="active-false">
+ -pie-track-active: false;
+ </div>
+
+</body>
+</html>

No commit comments for this range

Something went wrong with that request. Please try again.