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: jackingod/PIE
...
head fork: lojjic/PIE
Checking mergeability… Don't worry, you can still create the pull request.
  • 19 commits
  • 18 files changed
  • 2 commit comments
  • 3 contributors
Commits on Dec 27, 2011
Jason Johnston Implement rendering of background-clip. Fix order of gradient opacity. 775ce0a
Commits on Dec 31, 2011
Jason Johnston Make sure the element still exists after the add/removeClass delay. F…
…ixes #191.
0c0087f
Commits on Feb 09, 2012
@lojjic lojjic Fix printing error in IE9 by putting the print media check before att…
…empting to access window.PIE
c080e1b
@lojjic lojjic Bump build number to start 2.0 beta series 4b397f2
Commits on Feb 13, 2012
@CSSJS CSSJS Update documentation/pie-js.html 8f69083
Commits on Feb 27, 2012
@betalb betalb Strip single quotes as well as double from `pie-load-path` a1ac21f
@lojjic lojjic Merge pull request #202 from betalb/patch-1
Strip single quotes as well as double from `pie-load-path`
9697dfe
Commits on Feb 29, 2012
@lojjic lojjic Fix typo. Thanks to Yochai Weiss 34fe48b
Commits on Mar 14, 2012
@lojjic lojjic Add discounthotels.co.uk to sites list. Add rel="nofollow" to all sit…
…e links.
34154b1
Commits on Mar 25, 2012
@lojjic lojjic Merge pull request #200 from CSSJS/patch-1
Update documentation/pie-js.html
239cd8e
Commits on Mar 28, 2012
@lojjic 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.
29edda0
@lojjic lojjic Merge branch 'master' of github.com:lojjic/PIE e7d3630
Commits on May 12, 2012
@lojjic lojjic Add support for -pie-track-hover property to allow disabling of autom…
…atic :hover tracking
7f94811
@lojjic lojjic Adjust for IE7's inconsistent application of logical vs. device pixel…
… ratio when zoomed. Issue #79
322d587
@lojjic 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. Apply the ratio to the background image size.
c622e0d
@lojjic lojjic Update build doc with info about the 1.x branch 0b22935
@lojjic lojjic Update title of z-index known issues section to be more obvious for u…
…sers experiencing the problem
77fa7a1
Commits on May 13, 2012
@lojjic lojjic Add docs for -pie-track-hover and -pie-track-active cae6bc8
Commits on May 20, 2012
@lojjic lojjic Honor background-clip for the background color in IE9. Fixed issue #207. 5e2c432
View
4 build.xml
@@ -2,7 +2,7 @@
<project name="PIE" default="build" basedir=".">
- <property name="version" value="1.0beta6-SNAPSHOT" />
+ <property name="version" value="2.0beta1-SNAPSHOT" />
<!-- 'http://cdnjs.cloudflare.com/ajax/libs/css3pie/${version}' -->
<property name="default_base_urls" value="['http://lojjic.github.com/PIE/files/builds/${version}']"/>
<property name="build_dir" value="./build" />
@@ -40,6 +40,7 @@
<fileset file="${src_dir}/BorderRadiusStyleInfo.js" />
<fileset file="${src_dir}/BorderImageStyleInfo.js" />
<fileset file="${src_dir}/BoxShadowStyleInfo.js" />
+ <fileset file="${src_dir}/PaddingStyleInfo.js" />
<fileset file="${src_dir}/VisibilityStyleInfo.js" />
<fileset file="${src_dir}/VmlShape.js" />
<fileset file="${src_dir}/RendererBase.js" />
@@ -84,6 +85,7 @@
<fileset file="${src_dir}/BackgroundStyleInfo.js" />
<fileset file="${src_dir}/BorderStyleInfo.js" />
<fileset file="${src_dir}/BorderImageStyleInfo.js" />
+ <fileset file="${src_dir}/PaddingStyleInfo.js" />
<fileset file="${src_dir}/RendererBase.js" />
<fileset file="${src_dir}/IE9RootRenderer.js" />
<fileset file="${src_dir}/IE9BackgroundRenderer.js" />
View
10 documentation/build.html
@@ -36,11 +36,15 @@ <h2 id="getsource">Get the source code</h2>
<ol>
<li>Check out the source using Git:
- <pre><kbd>git clone git://github.com/lojjic/PIE.git</kbd></pre>
+ <pre><kbd>git clone git://github.com/lojjic/PIE.git
+cd PIE</kbd></pre>
+ If you want the 2.x unstable branch then you're done; if you want the 1.x stable branch then run:
+ <pre><kbd>git checkout 1.x</kbd></pre>
or:
</li>
- <li>Download an archive of the source:
- <a href="http://github.com/lojjic/PIE/archives/master">http://github.com/lojjic/PIE/archives/master</a>
+ <li>Download an archive of the source:<br>
+ <a href="http://github.com/lojjic/PIE/archives/master">http://github.com/lojjic/PIE/archives/master</a> (2.x unstable branch)<br>
+ <a href="http://github.com/lojjic/PIE/archives/1.x">http://github.com/lojjic/PIE/archives/1.x</a> (1.x stable branch)
</li>
</ol>
View
61 documentation/demos.html
@@ -25,36 +25,37 @@
<p>Here is just a tiny list of sites using PIE already in production. <a href="/contact/">Tell us about yours!</a></p>
<ul>
- <li><a href="http://americanapparel.net">American Apparel</a> (<strong><abbr title="Not safe for work">NSFW</abbr></strong>)</li>
- <li><a href="http://www.bitcloud.com.au/">BitCloud</a></li>
- <li><a href="http://www.cahealthadvocates.org/">California Health Advocates</a></li>
- <li><a href="http://demo.crowdfavorite.com/carrington-business">Carrington Business WordPress Theme</a></li>
- <li><a href="http://www.cheapmortgages.com/">Cheap Mortgages</a></li>
- <li><a href="http://www.composite.net/">Composite C1 CMS</a></li>
- <li><a href="http://www.cthealth.org/">Connecticut Health Foundation</a></li>
- <li><a href="http://setup.dynguide.com/">DynDNS</a></li>
- <li><a href="http://www.heidiklumfragrances.com/">Heidi Klum Fragrances</a></li>
- <li><a href="http://www.hitreach.co.uk/">Hit Reach Web Design &amp; SEO</a></li>
- <li><a href="http://www.journeyoutreach.org/">Journey Outreach</a></li>
- <li><a href="http://www.kleinezeitung.at/">Kleine Zeitung</a></li>
- <li><a href="http://sites.mckesson.com/betterhealth/">McKesson: For Better Health</a></li>
- <li><a href="http://www.memyteam.com/">me:myteam</a></li>
- <li><a href="http://modemerr.com/">Mode Merr</a></li>
- <li><a href="http://mom.com/">Mom.com</a></li>
- <li><a href="http://www.blogsouthwest.com/">Nuts About Southwest</a></li>
- <li><a href="http://www.protagonize.com">Protagonize</a></li>
- <li><a href="http://realti.ca/">Realti.ca</a></li>
- <li><a href="http://roomandboard.com/">Room &amp; Board</a></li>
- <li><a href="http://www.rudisglutenfree.com/">Rudi's Gluten-Free Bakery</a></li>
- <li><a href="http://sheffieldismyplanet.co.uk/">Sheffield Is My Planet</a></li>
- <li><a href="http://www.skillstar.com/">Skillstar</a></li>
- <li><a href="http://www.socialistproductions.org/">Socialist Productions</a></li>
- <li><a href="http://freestyle-developments.co.uk/demo/public/svs/">SVS Securities</a></li>
- <li><a href="http://www.thenorthface.com/">The North Face</a></li>
- <li><a href="http://twbasics.keycontent.org/">Tiki for Smarties</a></li>
- <li><a href="http://www.tinypie.co.uk/">TinyPie Projects</a></li>
- <li><a href="http://www.tractionco.com/">Traction</a></li>
- <li><a href="https://www.viaprinto.de/">viaprinto</a></li>
+ <li><a rel="nofollow" href="http://americanapparel.net">American Apparel</a> (<strong><abbr title="Not safe for work">NSFW</abbr></strong>)</li>
+ <li><a rel="nofollow" href="http://www.bitcloud.com.au/">BitCloud</a></li>
+ <li><a rel="nofollow" href="http://www.cahealthadvocates.org/">California Health Advocates</a></li>
+ <li><a rel="nofollow" href="http://demo.crowdfavorite.com/carrington-business">Carrington Business WordPress Theme</a></li>
+ <li><a rel="nofollow" href="http://www.cheapmortgages.com/">Cheap Mortgages</a></li>
+ <li><a rel="nofollow" href="http://www.discounthotels.co.uk/">Cheap Hotels</a></li>
+ <li><a rel="nofollow" href="http://www.composite.net/">Composite C1 CMS</a></li>
+ <li><a rel="nofollow" href="http://www.cthealth.org/">Connecticut Health Foundation</a></li>
+ <li><a rel="nofollow" href="http://setup.dynguide.com/">DynDNS</a></li>
+ <li><a rel="nofollow" href="http://www.heidiklumfragrances.com/">Heidi Klum Fragrances</a></li>
+ <li><a rel="nofollow" href="http://www.hitreach.co.uk/">Hit Reach Web Design &amp; SEO</a></li>
+ <li><a rel="nofollow" href="http://www.journeyoutreach.org/">Journey Outreach</a></li>
+ <li><a rel="nofollow" href="http://www.kleinezeitung.at/">Kleine Zeitung</a></li>
+ <li><a rel="nofollow" href="http://sites.mckesson.com/betterhealth/">McKesson: For Better Health</a></li>
+ <li><a rel="nofollow" href="http://www.memyteam.com/">me:myteam</a></li>
+ <li><a rel="nofollow" href="http://modemerr.com/">Mode Merr</a></li>
+ <li><a rel="nofollow" href="http://mom.com/">Mom.com</a></li>
+ <li><a rel="nofollow" href="http://www.blogsouthwest.com/">Nuts About Southwest</a></li>
+ <li><a rel="nofollow" href="http://www.protagonize.com">Protagonize</a></li>
+ <li><a rel="nofollow" href="http://realti.ca/">Realti.ca</a></li>
+ <li><a rel="nofollow" href="http://roomandboard.com/">Room &amp; Board</a></li>
+ <li><a rel="nofollow" href="http://www.rudisglutenfree.com/">Rudi's Gluten-Free Bakery</a></li>
+ <li><a rel="nofollow" href="http://sheffieldismyplanet.co.uk/">Sheffield Is My Planet</a></li>
+ <li><a rel="nofollow" href="http://www.skillstar.com/">Skillstar</a></li>
+ <li><a rel="nofollow" href="http://www.socialistproductions.org/">Socialist Productions</a></li>
+ <li><a rel="nofollow" href="http://freestyle-developments.co.uk/demo/public/svs/">SVS Securities</a></li>
+ <li><a rel="nofollow" href="http://www.thenorthface.com/">The North Face</a></li>
+ <li><a rel="nofollow" href="http://twbasics.keycontent.org/">Tiki for Smarties</a></li>
+ <li><a rel="nofollow" href="http://www.tinypie.co.uk/">TinyPie Projects</a></li>
+ <li><a rel="nofollow" href="http://www.tractionco.com/">Traction</a></li>
+ <li><a rel="nofollow" href="https://www.viaprinto.de/">viaprinto</a></li>
</ul>
View
4 documentation/known-issues.html
@@ -21,7 +21,7 @@
and feature requests are tracked.</p>
<ul>
- <li><a href="#z-index">Problems with z-index (disappearing backgrounds/borders/shadows)</a></li>
+ <li><a href="#z-index">Disappearing backgrounds/borders/shadows (z-index issues)</a></li>
<li><a href="#relative-paths">Relative paths</a></li>
<li><a href="#shorthand">Shorthand only</a></li>
<li><a href="#hasLayout">Problems with hasLayout</a></li>
@@ -33,7 +33,7 @@
</ul>
-<h2 id="z-index">Problems with z-index (disappearing backgrounds/borders/shadows)</h2>
+<h2 id="z-index">Disappearing backgrounds/borders/shadows (z-index issues)</h2>
<p>First, a little background on how PIE renders CSS3 decorations: a single <code>&lt;css3-container/&gt;</code>
element is created which holds all the VML objects. This container element is inserted as a previous sibling to the
View
2  documentation/pie-js.html
@@ -60,7 +60,7 @@ <h2 id="usage">Using PIE.js</h2>
<ol>
<li>Include the PIE.js script in your page, surrounded by a conditional comment to prevent it from being downloaded in other browsers:
- <pre><code>&lt;!--[if lt IE 10]>
+ <pre><code>&lt;!--[if IE]>
&lt;script type="text/javascript" src="path/to/PIE.js">&lt;/script>
&lt;![endif]--></code></pre>
</li>
View
2  documentation/product-comparison.html
@@ -88,7 +88,7 @@ <h2 id="cssSandpaper">Zoltan Hawryluk's <a href="http://www.useragentman.com/blo
<p>It also has an extension which adds amazingly accurate support for text-shadow.</p>
-<p>PIE currently lacks support for both 2D transforms and text-shadow; they are planned for a future release but for now I do recomment cssSandpaper.</p>
+<p>PIE currently lacks support for both 2D transforms and text-shadow; they are planned for a future release but for now I do recommend cssSandpaper.</p>
<p>Unfortunately due to the special way PIE renders the features it supports, you cannot use cssSandpaper's 2D transform support in conjunction with PIE, or it will transform the element's foreground but leave its background in place. Once PIE adds its own 2D transform support this will work as expected.</p>
View
25 documentation/supported-css3-features.html
@@ -30,6 +30,8 @@
<li><a href="#pie-png-fix">PNG alpha transparency and -pie-png-fix</a></li>
<li><a href="#pie-lazy-init">Lazy Initialization (-pie-lazy-init)</a></li>
<li><a href="#pie-poll">Layout polling (-pie-poll)</a></li>
+ <li><a href="#pie-track-hover">:hover tracking (-pie-track-hover)</a></li>
+ <li><a href="#pie-track-active">:active tracking (-pie-track-active)</a></li>
</ul>
</li>
</ul>
@@ -396,6 +398,29 @@ <h3 id="pie-poll">Layout Polling (-pie-poll)</h3>
<code>-pie-poll:true;</code> to force polling on for an element, or <code>-pie-poll:false;</code> to disable it.</p>
+<h3 id="pie-track-hover">Hover tracking (-pie-track-hover)</h3>
+
+<p>By default, PIE automatically listens for mouseover/out events and applies any matching <code>:hover</code>
+styles if supported by the browser. In addition, it adds a special <code>pie_hover</code> class to the element
+which you can use to apply hover styles in versions of IE that don't support it.</p>
+
+<p>If you want to disable this, you can do so by setting the custom CSS style <code>-pie-track-hover:false;</code>
+for the element. This might be useful if you notice sluggishness on your page when hovering and you don't need
+hover styles.</p>
+
+
+<h3 id="pie-track-active">Active tracking (-pie-track-active)</h3>
+
+<p>By default, PIE automatically listens for mousedown/up events and applies any matching <code>:active</code>
+styles if supported by the browser. In addition, it adds a special <code>pie_active</code> class to the element
+which you can use to apply active styles in versions of IE that don't support it.</p>
+
+<p>If you want to disable this, you can do so by setting the custom CSS style <code>-pie-track-active:false;</code>
+for the element. This is useful in some situations where the addition of the pie_active class has unwanted
+side effects, for instance breaking the behavior of <a href="https://github.com/lojjic/PIE/issues/190">scrollbars in IE7</a>.</p>
+
+
+
<!-- noformat off -->
View
76 sources/BackgroundRenderer.js
@@ -50,7 +50,7 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
shape.setSize( bounds.w, bounds.h );
shape.setAttrs(
- 'path', this.getBoxPath( 0, 0, 0, 0, 2 )
+ 'path', this.getBgClipPath( bounds, props.colorClip )
);
shape.setFillAttrs( 'color', color.colorValue( el ) );
alpha = color.alpha();
@@ -69,7 +69,7 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
var props = this.styleInfos.backgroundInfo.getProps(),
bounds = this.boundsInfo.getBounds(),
images = props && props.bgImages,
- img, shape, w, h, s, i;
+ img, shape, w, h, i;
if( images ) {
this.hideBackground();
@@ -83,7 +83,7 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
shape = this.getShape( 'bgImage' + i, this.shapeZIndex + ( .5 - i / 1000 ) );
shape.setAttrs(
- 'path', this.getBoxPath( 0, 0, 0, 0, 2 )
+ 'path', this.getBgClipPath( bounds, img.bgClip )
);
shape.setSize( w, h );
@@ -123,9 +123,10 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
// It's possible that the element dimensions are zero now but weren't when the original
// update executed, make sure that's not the case to avoid divide-by-zero error
if( elW && elH ) {
- var bgInfo = me.styleInfos.backgroundInfo,
+ var styleInfos = me.styleInfos,
+ bgInfo = styleInfos.backgroundInfo,
bg = bgInfo.getProps().bgImages[ index ],
- bgAreaSize = bgInfo.getBgAreaSize( bg.bgOrigin, me.boundsInfo, me.styleInfos.borderInfo ),
+ bgAreaSize = bgInfo.getBgAreaSize( bg.bgOrigin, me.boundsInfo, styleInfos.borderInfo, styleInfos.paddingInfo ),
adjustedImgSize = ( bg.bgSize || PIE.BgSize.DEFAULT ).pixels(
me.targetElement, bgAreaSize.w, bgAreaSize.h, imgSize.w, imgSize.h
),
@@ -149,7 +150,8 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
// Set the size of the image. We only set it if the image is scaled via background-size or by
// the user changing the browser zoom level, to avoid fuzzy images at normal size. For some reason
// using px units doesn't work in VML markup so we must convert to pt.
- 'size', ( adjustedImgSize.w !== imgSize.w || adjustedImgSize.h !== imgSize.h || screen['logicalXDPI'] / screen['deviceXDPI'] !== 1 ) ?
+ 'size', ( adjustedImgSize.w !== imgSize.w || adjustedImgSize.h !== imgSize.h ||
+ bounds.logicalZoomRatio !== 1 || screen['logicalXDPI'] / screen['deviceXDPI'] !== 1 ) ?
PIE.Length.pxToPt( adjustedImgSize.w ) + 'pt,' + PIE.Length.pxToPt( adjustedImgSize.h ) + 'pt' : ''
);
@@ -171,6 +173,48 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
/**
+ * For a given background-clip value, return the VML path for that clip area.
+ * @param {Object} bounds
+ * @param {String} bgClip
+ */
+ getBgClipPath: function( bounds, bgClip ) {
+ var me = this,
+ shrinkT = 0,
+ shrinkR = 0,
+ shrinkB = 0,
+ shrinkL = 0,
+ el = me.targetElement,
+ styleInfos = me.styleInfos,
+ borders, paddings;
+
+ if ( bgClip && bgClip !== 'border-box' ) {
+ borders = styleInfos.borderInfo.getProps();
+ if ( borders && ( borders = borders.widths ) ) {
+ shrinkT += borders[ 't' ].pixels( el );
+ shrinkR += borders[ 'r' ].pixels( el );
+ shrinkB += borders[ 'b' ].pixels( el );
+ shrinkL += borders[ 'l' ].pixels( el );
+ }
+ }
+
+ if ( bgClip === 'content-box' ) {
+ paddings = styleInfos.paddingInfo.getProps();
+ if( paddings ) {
+ shrinkT += paddings[ 't' ].pixels( el );
+ shrinkR += paddings[ 'r' ].pixels( el );
+ shrinkB += paddings[ 'b' ].pixels( el );
+ shrinkL += paddings[ 'l' ].pixels( el );
+ }
+ }
+
+ // Add points at 0,0 and w,h so that the image size/position will still be
+ // based on the full element area.
+ return 'm0,0r0,0m' + bounds.w * 2 + ',' + bounds.h * 2 + 'r0,0' +
+ me.getBoxPath( shrinkT, shrinkR, shrinkB, shrinkL, 2 );
+ },
+
+
+ /**
* For a given background-origin value, return the x/y position of the origin
* from the top-left of the element bounds.
* @param {String} bgOrigin
@@ -178,12 +222,13 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
getBgOriginXY: function( bgOrigin ) {
var me = this,
el = me.targetElement,
+ styleInfos = me.styleInfos,
x = 0,
y = 0,
- borders, getLength, cs;
+ borders, paddings;
if( bgOrigin !== 'border-box' ) {
- borders = me.styleInfos.borderInfo.getProps();
+ borders = styleInfos.borderInfo.getProps();
if( borders && ( borders = borders.widths ) ) {
x += borders[ 'l' ].pixels( el );
y += borders[ 't' ].pixels( el );
@@ -191,10 +236,11 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
}
if ( bgOrigin === 'content-box' ) {
- getLength = PIE.getLength;
- cs = el.currentStyle;
- x += getLength( cs.paddingLeft ).pixels( el );
- y += getLength( cs.paddingTop ).pixels( el );
+ paddings = styleInfos.paddingInfo.getProps();
+ if( paddings ) {
+ x += paddings[ 'l' ].pixels( el );
+ y += paddings[ 't' ].pixels( el );
+ }
}
return { x: x, y: y };
@@ -295,10 +341,12 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
// Set opacity; right now we only support this for two-stop gradients, multi-stop
// opacity will require chopping up each segment into its own shape.
+ // Note these seem backwards but they must be that way since VML strangely reverses
+ // them when the 'colors' property is present.
if ( stopCount === 2 ) {
shape.setFillAttrs(
- 'opacity', stops[0].color.alpha(),
- 'o:opacity2', stops[1].color.alpha()
+ 'opacity', stops[1].color.alpha(),
+ 'o:opacity2', stops[0].color.alpha()
);
}
},
View
16 sources/BackgroundStyleInfo.js
@@ -33,6 +33,7 @@ PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
* Format of return object:
* {
* color: <PIE.Color>,
+ * colorClip: <'border-box' | 'padding-box'>,
* bgImages: [
* {
* imgType: 'image',
@@ -226,6 +227,8 @@ PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
image.origString = css.substring( beginCharIndex );
props.bgImages.push( image );
}
+
+ props.colorClip = image.bgClip;
}
// Otherwise, use the standard background properties; let IE give us the values rather than parsing them
@@ -360,12 +363,12 @@ PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
* @param {PIE.BoundsInfo} boundsInfo
* @param {PIE.BorderStyleInfo} borderInfo
*/
- getBgAreaSize: function( bgOrigin, boundsInfo, borderInfo ) {
+ getBgAreaSize: function( bgOrigin, boundsInfo, borderInfo, paddingInfo ) {
var el = this.targetElement,
bounds = boundsInfo.getBounds(),
w = bounds.w,
h = bounds.h,
- borders, getLength, cs;
+ borders, paddings;
if( bgOrigin !== 'border-box' ) {
borders = borderInfo.getProps();
@@ -376,10 +379,11 @@ PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
}
if ( bgOrigin === 'content-box' ) {
- getLength = PIE.getLength;
- cs = el.currentStyle;
- w -= getLength( cs.paddingLeft ).pixels( el ) + getLength( cs.paddingRight ).pixels( el );
- h -= getLength( cs.paddingTop ).pixels( el ) + getLength( cs.paddingBottom ).pixels( el );
+ paddings = paddingInfo.getProps();
+ if ( paddings ) {
+ w -= paddings[ 'l' ].pixels( el ) + paddings[ 'l' ].pixels( el );
+ h -= paddings[ 't' ].pixels( el ) + paddings[ 'b' ].pixels( el );
+ }
}
return { w: w, h: h };
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
37 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 );
}
@@ -72,6 +78,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
@@ -105,11 +113,14 @@ PIE.Element = (function() {
styleInfos = {
backgroundInfo: new PIE.BackgroundStyleInfo( el ),
borderImageInfo: new PIE.BorderImageStyleInfo( el ),
- borderInfo: new PIE.BorderStyleInfo( el )
+ borderInfo: new PIE.BorderStyleInfo( el ),
+ paddingInfo: new PIE.PaddingStyleInfo( el )
};
styleInfosArr = [
styleInfos.backgroundInfo,
- styleInfos.borderImageInfo
+ styleInfos.borderInfo,
+ styleInfos.borderImageInfo,
+ styleInfos.paddingInfo
];
rootRenderer = new PIE.IE9RootRenderer( el, boundsInfo, styleInfos );
childRenderers = [
@@ -124,6 +135,7 @@ PIE.Element = (function() {
borderImageInfo: new PIE.BorderImageStyleInfo( el ),
borderRadiusInfo: new PIE.BorderRadiusStyleInfo( el ),
boxShadowInfo: new PIE.BoxShadowStyleInfo( el ),
+ paddingInfo: new PIE.PaddingStyleInfo( el ),
visibilityInfo: new PIE.VisibilityStyleInfo( el )
};
styleInfosArr = [
@@ -132,6 +144,7 @@ PIE.Element = (function() {
styleInfos.borderImageInfo,
styleInfos.borderRadiusInfo,
styleInfos.boxShadowInfo,
+ styleInfos.paddingInfo,
styleInfos.visibilityInfo
];
rootRenderer = new PIE.RootRenderer( el, boundsInfo, styleInfos );
@@ -169,9 +182,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
9 sources/IE9BackgroundRenderer.js
@@ -21,7 +21,8 @@ PIE.IE9BackgroundRenderer = PIE.RendererBase.newRenderer( {
draw: function() {
var me = this,
- bgInfo = me.styleInfos.backgroundInfo,
+ styleInfos = me.styleInfos,
+ bgInfo = styleInfos.backgroundInfo,
props = bgInfo.getProps(),
bg, images, i = 0, img, bgAreaSize, bgSize;
@@ -32,10 +33,10 @@ PIE.IE9BackgroundRenderer = PIE.RendererBase.newRenderer( {
if ( images ) {
while( img = images[ i++ ] ) {
if (img.imgType === 'linear-gradient' ) {
- bgAreaSize = bgInfo.getBgAreaSize( bg.bgOrigin, me.boundsInfo, me.styleInfos.borderInfo ),
+ bgAreaSize = bgInfo.getBgAreaSize( bg.bgOrigin, me.boundsInfo, styleInfos.borderInfo, styleInfos.paddingInfo );
bgSize = ( img.bgSize || PIE.BgSize.DEFAULT ).pixels(
me.targetElement, bgAreaSize.w, bgAreaSize.h, bgAreaSize.w, bgAreaSize.h
- ),
+ );
bg.push(
'url(data:image/svg+xml,' + escape( me.getGradientSvg( img, bgSize.w, bgSize.h ) ) + ') ' +
me.bgPositionToString( img.bgPosition ) + ' / ' + bgSize.w + 'px ' + bgSize.h + 'px ' +
@@ -48,7 +49,7 @@ PIE.IE9BackgroundRenderer = PIE.RendererBase.newRenderer( {
}
if ( props.color ) {
- bg.push( props.color.val );
+ bg.push( props.color.val + ' ' + ( props.colorClip || '' ) );
}
me.parent.setBackgroundLayer(me.bgLayerZIndex, bg.join(','));
View
11 sources/ImgRenderer.js
@@ -33,8 +33,7 @@ PIE.ImgRenderer = PIE.RendererBase.newRenderer( {
el = this.targetElement,
src = el.src,
round = Math.round,
- cs = el.currentStyle,
- getLength = PIE.getLength,
+ paddings = this.styleInfos.paddingInfo.getProps(),
zero;
// In IE6, the BorderRenderer will have hidden the border by moving the border-width to
@@ -47,10 +46,10 @@ PIE.ImgRenderer = PIE.RendererBase.newRenderer( {
shape.setAttrs(
'path', this.getBoxPath(
- round( borderWidths['t'].pixels( el ) + getLength( cs.paddingTop ).pixels( el ) ),
- round( borderWidths['r'].pixels( el ) + getLength( cs.paddingRight ).pixels( el ) ),
- round( borderWidths['b'].pixels( el ) + getLength( cs.paddingBottom ).pixels( el ) ),
- round( borderWidths['l'].pixels( el ) + getLength( cs.paddingLeft ).pixels( el ) ),
+ round( borderWidths['t'].pixels( el ) + paddings[ 't' ].pixels( el ) ),
+ round( borderWidths['r'].pixels( el ) + paddings[ 'r' ].pixels( el ) ),
+ round( borderWidths['b'].pixels( el ) + paddings[ 'b' ].pixels( el ) ),
+ round( borderWidths['l'].pixels( el ) + paddings[ 'l' ].pixels( el ) ),
2
)
);
View
35 sources/PaddingStyleInfo.js
@@ -0,0 +1,35 @@
+/**
+ * Handles parsing, caching, and detecting changes to padding CSS
+ * @constructor
+ * @param {Element} el the target element
+ */
+PIE.PaddingStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
+
+ parseCss: function( css ) {
+ var tokenizer = new PIE.Tokenizer( css ),
+ arr = [],
+ token;
+
+ while( ( token = tokenizer.next() ) && token.isLengthOrPercent() ) {
+ arr.push( PIE.getLength( token.tokenValue ) );
+ }
+ return arr.length > 0 && arr.length < 5 ? {
+ 't': arr[0],
+ 'r': arr[1] || arr[0],
+ 'b': arr[2] || arr[0],
+ 'l': arr[3] || arr[1] || arr[0]
+ } : null;
+ },
+
+ getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
+ var el = this.targetElement,
+ rs = el.runtimeStyle,
+ rsPadding = rs.padding,
+ padding;
+ if( rsPadding ) rs.padding = '';
+ padding = el.currentStyle.padding;
+ if( rsPadding ) rs.padding = rsPadding;
+ return padding;
+ } )
+
+} );
View
15 sources/RootRenderer.js
@@ -40,11 +40,12 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
boxPos,
s = this.getBoxEl().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
@@ -55,12 +56,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_script.js
@@ -32,7 +32,7 @@ if ( !window[ 'PIE' ] && docMode < 10 ) {
// Look for a custom -pie-load-path, or fall back to the CDN url
baseUrl = doc.documentElement.currentStyle.getAttribute( ( isIE6 ? '' : '-' ) + 'pie-load-path' );
if( baseUrl ) {
- baseUrl = baseUrl.replace(/^"|"$/g, '');
+ baseUrl = baseUrl.replace(/^("|')|("|')$/g, '');
baseUrls = [ baseUrl ];
}
@@ -72,16 +72,20 @@ if ( !window[ 'PIE' ] && docMode < 10 ) {
}
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 && doc.media !== 'print' ) {
- PIE[ 'detach' ]( el );
+ 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>

Showing you all comments on commits in this comparison.

@matthew-dean

So, when are we getting a Beta6 build?

@matthew-dean

Exciting!

Something went wrong with that request. Please try again.