Permalink
Browse files

Implement split build and loader. PIE.htc is now a very small (1K) st…

…ub which loads one of two separate .js files containing all the logic. Those two .js files contain only the code needed for IE9 and IE6-8 respectively, decreasing the total download size for any given user. The location of the .js files can be customized via a -pie-base-url property on the html element; this will likely be expanded to pull from a CDN by default.
  • Loading branch information...
1 parent 0230feb commit aa82152c070e41f3b7aaab7412863547dffc8348 Jason Johnston committed Sep 29, 2011
View
74 build.xml
@@ -2,7 +2,7 @@
<project name="PIE" default="build" basedir=".">
- <property name="version" value="1.0beta5" />
+ <property name="version" value="1.0beta6-SNAPSHOT" />
<property name="build_dir" value="./build" />
<property name="src_dir" value="./sources" />
@@ -12,7 +12,9 @@
<target name="build-uncompressed">
<mkdir dir="${build_dir}" />
- <concat destfile="${build_dir}/script_uncompressed.js">
+
+ <concat destfile="${build_dir}/PIE_IE678_uncompressed.js">
+ <fileset file="${src_dir}/js_open.js" />
<fileset file="${src_dir}/PIE_open.js" />
<fileset file="${src_dir}/Util.js" />
<fileset file="${src_dir}/GradientUtil.js" />
@@ -28,6 +30,7 @@
<fileset file="${src_dir}/BgSize.js" />
<fileset file="${src_dir}/Angle.js" />
<fileset file="${src_dir}/Color.js" />
+ <fileset file="${src_dir}/Color_IE678.js" />
<fileset file="${src_dir}/Tokenizer.js" />
<fileset file="${src_dir}/BoundsInfo.js" />
<fileset file="${src_dir}/StyleInfoBase.js" />
@@ -38,46 +41,69 @@
<fileset file="${src_dir}/BoxShadowStyleInfo.js" />
<fileset file="${src_dir}/VisibilityStyleInfo.js" />
<fileset file="${src_dir}/RendererBase.js" />
+ <fileset file="${src_dir}/RendererBase_IE678.js" />
<fileset file="${src_dir}/RootRenderer.js" />
<fileset file="${src_dir}/BackgroundRenderer.js" />
<fileset file="${src_dir}/BorderRenderer.js" />
<fileset file="${src_dir}/BorderImageRenderer.js" />
<fileset file="${src_dir}/BoxShadowOutsetRenderer.js" />
<!--<fileset file="${src_dir}/BoxShadowInsetRenderer.js" />-->
<fileset file="${src_dir}/ImgRenderer.js" />
+ <fileset file="${src_dir}/Element.js" />
+ <fileset file="${src_dir}/PIE_API.js" />
+ <fileset file="${src_dir}/js_close.js" />
+ </concat>
+
+ <concat destfile="${build_dir}/PIE_IE9_uncompressed.js">
+ <fileset file="${src_dir}/js_open.js" />
+ <fileset file="${src_dir}/PIE_open.js" />
+ <fileset file="${src_dir}/Util.js" />
+ <fileset file="${src_dir}/GradientUtil.js" />
+ <fileset file="${src_dir}/Observable.js" />
+ <fileset file="${src_dir}/Heartbeat.js" />
+ <fileset file="${src_dir}/OnBeforeUnload.js" />
+ <fileset file="${src_dir}/OnResize.js" />
+ <fileset file="${src_dir}/OnScroll.js" />
+ <fileset file="${src_dir}/OnPrint.js" />
+ <fileset file="${src_dir}/Length.js" />
+ <fileset file="${src_dir}/BgPosition.js" />
+ <fileset file="${src_dir}/BgSize.js" />
+ <fileset file="${src_dir}/Angle.js" />
+ <fileset file="${src_dir}/Color.js" />
+ <fileset file="${src_dir}/Tokenizer.js" />
+ <fileset file="${src_dir}/BoundsInfo.js" />
+ <fileset file="${src_dir}/StyleInfoBase.js" />
+ <fileset file="${src_dir}/BackgroundStyleInfo.js" />
+ <fileset file="${src_dir}/RendererBase.js" />
<fileset file="${src_dir}/IE9RootRenderer.js" />
<fileset file="${src_dir}/IE9BackgroundRenderer.js" />
<fileset file="${src_dir}/IE9BorderImageRenderer.js" />
<fileset file="${src_dir}/Element.js" />
<fileset file="${src_dir}/PIE_API.js" />
- <fileset file="${src_dir}/PIE_close.js" />
+ <fileset file="${src_dir}/js_close.js" />
</concat>
<concat destfile="${build_dir}/PIE_uncompressed.htc">
<fileset file="${src_dir}/htc_open.txt" />
- <fileset file="${build_dir}/script_uncompressed.js" />
- <fileset file="${src_dir}/htc_init.js" />
+ <fileset file="${src_dir}/htc_script.js" />
<fileset file="${src_dir}/htc_close.txt" />
</concat>
- <concat destfile="${build_dir}/PIE_uncompressed.js">
- <fileset file="${src_dir}/js_open.js" />
- <fileset file="${build_dir}/script_uncompressed.js" />
- <fileset file="${src_dir}/js_close.js" />
- </concat>
-
<replace file="${build_dir}/PIE_uncompressed.htc" token="$Version$" value="${version}"/>
- <replace file="${build_dir}/PIE_uncompressed.js" token="$Version$" value="${version}"/>
+ <replace file="${build_dir}/PIE_IE678_uncompressed.js" token="$Version$" value="${version}"/>
+ <replace file="${build_dir}/PIE_IE9_uncompressed.js" token="$Version$" value="${version}"/>
</target>
<target name="build-compressed" depends="build-uncompressed">
<exec executable="java">
<arg line='-jar tools/compiler.jar
- --js ${build_dir}/script_uncompressed.js
- --js ${src_dir}/htc_init.js
+ --js ${build_dir}/PIE_IE678_uncompressed.js
+ --js ${build_dir}/PIE_IE9_uncompressed.js
+ --js ${src_dir}/htc_script.js
--js ${src_dir}/closure_preservefunctions.js
- --module "script_compressed:1"
- --module "htc_init_compressed:1"
+ --module "PIE_IE678:1"
+ --module "PIE_IE9:1"
+ --module "htc_script_compressed:1"
--module "temp:1"
--module_output_path_prefix ${build_dir}/
--compilation_level ADVANCED_OPTIMIZATIONS
@@ -86,24 +112,16 @@
<concat destfile="${build_dir}/PIE.htc">
<fileset file="${src_dir}/htc_open.txt" />
- <fileset file="${build_dir}/script_compressed.js" />
- <fileset file="${build_dir}/htc_init_compressed.js" />
+ <fileset file="${build_dir}/htc_script_compressed.js" />
<fileset file="${src_dir}/htc_close.txt" />
</concat>
- <concat destfile="${build_dir}/PIE.js">
- <fileset file="${src_dir}/js_open.js" />
- <fileset file="${build_dir}/script_compressed.js" />
- <fileset file="${src_dir}/js_close.js" />
- </concat>
-
<replace file="${build_dir}/PIE.htc" token="$Version$" value="${version}"/>
- <replace file="${build_dir}/PIE.js" token="$Version$" value="${version}"/>
+ <replace file="${build_dir}/PIE_IE678.js" token="$Version$" value="${version}"/>
+ <replace file="${build_dir}/PIE_IE9.js" token="$Version$" value="${version}"/>
<delete file="${build_dir}/temp.js" />
- <delete file="${build_dir}/htc_init_compressed.js" />
- <delete file="${build_dir}/script_uncompressed.js" />
- <delete file="${build_dir}/script_compressed.js" />
+ <delete file="${build_dir}/htc_script_compressed.js" />
</target>
View
2 documentation/demos.html
@@ -32,6 +32,8 @@
<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>
View
2 sources/BackgroundStyleInfo.js
@@ -103,7 +103,7 @@ PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
gradient.stops.push( stop );
}
if( gradient.stops.length > 1 ) {
- PIE.Util.merge( image, gradient );
+ PIE.merge( image, gradient );
}
break;
}
View
4 sources/BorderImageRenderer.js
@@ -105,8 +105,8 @@ PIE.BorderImageRenderer = PIE.RendererBase.newRenderer( {
this.pieces = {};
for( i = 0; i < len; i++ ) {
- piece = this.pieces[ pieceNames[i] ] = PIE.Util.createVmlElement( 'rect' );
- piece.appendChild( PIE.Util.createVmlElement( 'imagedata' ) );
+ piece = this.pieces[ pieceNames[i] ] = this.createVmlElement( 'rect' );
+ piece.appendChild( this.createVmlElement( 'imagedata' ) );
s = piece.style;
s['behavior'] = 'url(#default#VML)';
s.position = "absolute";
View
50 sources/Color.js
@@ -17,55 +17,7 @@ PIE.Color = (function() {
*/
Color.rgbaRE = /\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;
- Color.names = {
- "aliceblue":"F0F8FF", "antiquewhite":"FAEBD7", "aqua":"0FF",
- "aquamarine":"7FFFD4", "azure":"F0FFFF", "beige":"F5F5DC",
- "bisque":"FFE4C4", "black":"000", "blanchedalmond":"FFEBCD",
- "blue":"00F", "blueviolet":"8A2BE2", "brown":"A52A2A",
- "burlywood":"DEB887", "cadetblue":"5F9EA0", "chartreuse":"7FFF00",
- "chocolate":"D2691E", "coral":"FF7F50", "cornflowerblue":"6495ED",
- "cornsilk":"FFF8DC", "crimson":"DC143C", "cyan":"0FF",
- "darkblue":"00008B", "darkcyan":"008B8B", "darkgoldenrod":"B8860B",
- "darkgray":"A9A9A9", "darkgreen":"006400", "darkkhaki":"BDB76B",
- "darkmagenta":"8B008B", "darkolivegreen":"556B2F", "darkorange":"FF8C00",
- "darkorchid":"9932CC", "darkred":"8B0000", "darksalmon":"E9967A",
- "darkseagreen":"8FBC8F", "darkslateblue":"483D8B", "darkslategray":"2F4F4F",
- "darkturquoise":"00CED1", "darkviolet":"9400D3", "deeppink":"FF1493",
- "deepskyblue":"00BFFF", "dimgray":"696969", "dodgerblue":"1E90FF",
- "firebrick":"B22222", "floralwhite":"FFFAF0", "forestgreen":"228B22",
- "fuchsia":"F0F", "gainsboro":"DCDCDC", "ghostwhite":"F8F8FF",
- "gold":"FFD700", "goldenrod":"DAA520", "gray":"808080",
- "green":"008000", "greenyellow":"ADFF2F", "honeydew":"F0FFF0",
- "hotpink":"FF69B4", "indianred":"CD5C5C", "indigo":"4B0082",
- "ivory":"FFFFF0", "khaki":"F0E68C", "lavender":"E6E6FA",
- "lavenderblush":"FFF0F5", "lawngreen":"7CFC00", "lemonchiffon":"FFFACD",
- "lightblue":"ADD8E6", "lightcoral":"F08080", "lightcyan":"E0FFFF",
- "lightgoldenrodyellow":"FAFAD2", "lightgreen":"90EE90", "lightgrey":"D3D3D3",
- "lightpink":"FFB6C1", "lightsalmon":"FFA07A", "lightseagreen":"20B2AA",
- "lightskyblue":"87CEFA", "lightslategray":"789", "lightsteelblue":"B0C4DE",
- "lightyellow":"FFFFE0", "lime":"0F0", "limegreen":"32CD32",
- "linen":"FAF0E6", "magenta":"F0F", "maroon":"800000",
- "mediumauqamarine":"66CDAA", "mediumblue":"0000CD", "mediumorchid":"BA55D3",
- "mediumpurple":"9370D8", "mediumseagreen":"3CB371", "mediumslateblue":"7B68EE",
- "mediumspringgreen":"00FA9A", "mediumturquoise":"48D1CC", "mediumvioletred":"C71585",
- "midnightblue":"191970", "mintcream":"F5FFFA", "mistyrose":"FFE4E1",
- "moccasin":"FFE4B5", "navajowhite":"FFDEAD", "navy":"000080",
- "oldlace":"FDF5E6", "olive":"808000", "olivedrab":"688E23",
- "orange":"FFA500", "orangered":"FF4500", "orchid":"DA70D6",
- "palegoldenrod":"EEE8AA", "palegreen":"98FB98", "paleturquoise":"AFEEEE",
- "palevioletred":"D87093", "papayawhip":"FFEFD5", "peachpuff":"FFDAB9",
- "peru":"CD853F", "pink":"FFC0CB", "plum":"DDA0DD",
- "powderblue":"B0E0E6", "purple":"800080", "red":"F00",
- "rosybrown":"BC8F8F", "royalblue":"4169E1", "saddlebrown":"8B4513",
- "salmon":"FA8072", "sandybrown":"F4A460", "seagreen":"2E8B57",
- "seashell":"FFF5EE", "sienna":"A0522D", "silver":"C0C0C0",
- "skyblue":"87CEEB", "slateblue":"6A5ACD", "slategray":"708090",
- "snow":"FFFAFA", "springgreen":"00FF7F", "steelblue":"4682B4",
- "tan":"D2B48C", "teal":"008080", "thistle":"D8BFD8",
- "tomato":"FF6347", "turquoise":"40E0D0", "violet":"EE82EE",
- "wheat":"F5DEB3", "white":"FFF", "whitesmoke":"F5F5F5",
- "yellow":"FF0", "yellowgreen":"9ACD32"
- };
+ Color.names = {};
Color.prototype = {
/**
View
52 sources/Color_IE678.js
@@ -0,0 +1,52 @@
+/**
+ * CSS color name translations for use in VML
+ */
+PIE.Color.names = {
+ "aliceblue":"F0F8FF", "antiquewhite":"FAEBD7", "aqua":"0FF",
+ "aquamarine":"7FFFD4", "azure":"F0FFFF", "beige":"F5F5DC",
+ "bisque":"FFE4C4", "black":"000", "blanchedalmond":"FFEBCD",
+ "blue":"00F", "blueviolet":"8A2BE2", "brown":"A52A2A",
+ "burlywood":"DEB887", "cadetblue":"5F9EA0", "chartreuse":"7FFF00",
+ "chocolate":"D2691E", "coral":"FF7F50", "cornflowerblue":"6495ED",
+ "cornsilk":"FFF8DC", "crimson":"DC143C", "cyan":"0FF",
+ "darkblue":"00008B", "darkcyan":"008B8B", "darkgoldenrod":"B8860B",
+ "darkgray":"A9A9A9", "darkgreen":"006400", "darkkhaki":"BDB76B",
+ "darkmagenta":"8B008B", "darkolivegreen":"556B2F", "darkorange":"FF8C00",
+ "darkorchid":"9932CC", "darkred":"8B0000", "darksalmon":"E9967A",
+ "darkseagreen":"8FBC8F", "darkslateblue":"483D8B", "darkslategray":"2F4F4F",
+ "darkturquoise":"00CED1", "darkviolet":"9400D3", "deeppink":"FF1493",
+ "deepskyblue":"00BFFF", "dimgray":"696969", "dodgerblue":"1E90FF",
+ "firebrick":"B22222", "floralwhite":"FFFAF0", "forestgreen":"228B22",
+ "fuchsia":"F0F", "gainsboro":"DCDCDC", "ghostwhite":"F8F8FF",
+ "gold":"FFD700", "goldenrod":"DAA520", "gray":"808080",
+ "green":"008000", "greenyellow":"ADFF2F", "honeydew":"F0FFF0",
+ "hotpink":"FF69B4", "indianred":"CD5C5C", "indigo":"4B0082",
+ "ivory":"FFFFF0", "khaki":"F0E68C", "lavender":"E6E6FA",
+ "lavenderblush":"FFF0F5", "lawngreen":"7CFC00", "lemonchiffon":"FFFACD",
+ "lightblue":"ADD8E6", "lightcoral":"F08080", "lightcyan":"E0FFFF",
+ "lightgoldenrodyellow":"FAFAD2", "lightgreen":"90EE90", "lightgrey":"D3D3D3",
+ "lightpink":"FFB6C1", "lightsalmon":"FFA07A", "lightseagreen":"20B2AA",
+ "lightskyblue":"87CEFA", "lightslategray":"789", "lightsteelblue":"B0C4DE",
+ "lightyellow":"FFFFE0", "lime":"0F0", "limegreen":"32CD32",
+ "linen":"FAF0E6", "magenta":"F0F", "maroon":"800000",
+ "mediumauqamarine":"66CDAA", "mediumblue":"0000CD", "mediumorchid":"BA55D3",
+ "mediumpurple":"9370D8", "mediumseagreen":"3CB371", "mediumslateblue":"7B68EE",
+ "mediumspringgreen":"00FA9A", "mediumturquoise":"48D1CC", "mediumvioletred":"C71585",
+ "midnightblue":"191970", "mintcream":"F5FFFA", "mistyrose":"FFE4E1",
+ "moccasin":"FFE4B5", "navajowhite":"FFDEAD", "navy":"000080",
+ "oldlace":"FDF5E6", "olive":"808000", "olivedrab":"688E23",
+ "orange":"FFA500", "orangered":"FF4500", "orchid":"DA70D6",
+ "palegoldenrod":"EEE8AA", "palegreen":"98FB98", "paleturquoise":"AFEEEE",
+ "palevioletred":"D87093", "papayawhip":"FFEFD5", "peachpuff":"FFDAB9",
+ "peru":"CD853F", "pink":"FFC0CB", "plum":"DDA0DD",
+ "powderblue":"B0E0E6", "purple":"800080", "red":"F00",
+ "rosybrown":"BC8F8F", "royalblue":"4169E1", "saddlebrown":"8B4513",
+ "salmon":"FA8072", "sandybrown":"F4A460", "seagreen":"2E8B57",
+ "seashell":"FFF5EE", "sienna":"A0522D", "silver":"C0C0C0",
+ "skyblue":"87CEEB", "slateblue":"6A5ACD", "slategray":"708090",
+ "snow":"FFFAFA", "springgreen":"00FF7F", "steelblue":"4682B4",
+ "tan":"D2B48C", "teal":"008080", "thistle":"D8BFD8",
+ "tomato":"FF6347", "turquoise":"40E0D0", "violet":"EE82EE",
+ "wheat":"F5DEB3", "white":"FFF", "whitesmoke":"F5F5F5",
+ "yellow":"FF0", "yellowgreen":"9ACD32"
+};
View
2 sources/PIE_close.js
@@ -1,2 +0,0 @@
-
-} // if( !PIE )
View
171 sources/PIE_open.js
@@ -1,86 +1,105 @@
-var PIE = window['PIE'];
+/**
+ * Simple utility for merging objects
+ * @param {Object} obj1 The main object into which all others will be merged
+ * @param {...Object} var_args Other objects which will be merged into the first, in order
+ */
+PIE.merge = function( obj1 ) {
+ var i, len, p, objN, args = arguments;
+ for( i = 1, len = args.length; i < len; i++ ) {
+ objN = args[i];
+ for( p in objN ) {
+ if( objN.hasOwnProperty( p ) ) {
+ obj1[ p ] = objN[ p ];
+ }
+ }
+ }
+ return obj1;
+};
-if( !PIE ) {
- PIE = window['PIE'] = {
- CSS_PREFIX: '-pie-',
- STYLE_PREFIX: 'Pie',
- CLASS_PREFIX: 'pie_',
- tableCellTags: {
- 'TD': 1,
- 'TH': 1
- },
- /**
- * Lookup table of elements which cannot take custom children.
- */
- childlessElements: {
- 'TABLE':1,
- 'THEAD':1,
- 'TBODY':1,
- 'TFOOT':1,
- 'TR':1,
- 'INPUT':1,
- 'TEXTAREA':1,
- 'SELECT':1,
- 'OPTION':1,
- 'IMG':1,
- 'HR':1
- },
+PIE.merge(PIE, {
- /**
- * Elements that can receive user focus
- */
- focusableElements: {
- 'A':1,
- 'INPUT':1,
- 'TEXTAREA':1,
- 'SELECT':1,
- 'BUTTON':1
- },
+ // Constants
+ CSS_PREFIX: '-pie-',
+ STYLE_PREFIX: 'Pie',
+ CLASS_PREFIX: 'pie_',
- /**
- * Values of the type attribute for input elements displayed as buttons
- */
- inputButtonTypes: {
- 'submit':1,
- 'button':1,
- 'reset':1
- },
+ tableCellTags: {
+ 'TD': 1,
+ 'TH': 1
+ },
- emptyFn: function() {}
- };
+ /**
+ * Lookup table of elements which cannot take custom children.
+ */
+ childlessElements: {
+ 'TABLE':1,
+ 'THEAD':1,
+ 'TBODY':1,
+ 'TFOOT':1,
+ 'TR':1,
+ 'INPUT':1,
+ 'TEXTAREA':1,
+ 'SELECT':1,
+ 'OPTION':1,
+ 'IMG':1,
+ 'HR':1
+ },
- // Force the background cache to be used. No reason it shouldn't be.
- try {
- doc.execCommand( 'BackgroundImageCache', false, true );
- } catch(e) {}
+ /**
+ * Elements that can receive user focus
+ */
+ focusableElements: {
+ 'A':1,
+ 'INPUT':1,
+ 'TEXTAREA':1,
+ 'SELECT':1,
+ 'BUTTON':1
+ },
- (function() {
- /*
- * IE version detection approach by James Padolsey, with modifications -- from
- * http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
- */
- var ieVersion = 4,
- div = doc.createElement('div'),
- all = div.getElementsByTagName('i'),
- shape;
- while (
- div.innerHTML = '<!--[if gt IE ' + (++ieVersion) + ']><i></i><![endif]-->',
- all[0]
- ) {}
- PIE.ieVersion = ieVersion;
+ /**
+ * Values of the type attribute for input elements displayed as buttons
+ */
+ inputButtonTypes: {
+ 'submit':1,
+ 'button':1,
+ 'reset':1
+ },
- // Detect IE6
- if( ieVersion === 6 ) {
- // IE6 can't access properties with leading dash, but can without it.
- PIE.CSS_PREFIX = PIE.CSS_PREFIX.replace( /^-/, '' );
- }
+ emptyFn: function() {}
+});
+
+// Force the background cache to be used. No reason it shouldn't be.
+try {
+ doc.execCommand( 'BackgroundImageCache', false, true );
+} catch(e) {}
+
+(function() {
+ /*
+ * IE version detection approach by James Padolsey, with modifications -- from
+ * http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
+ */
+ var ieVersion = 4,
+ div = doc.createElement('div'),
+ all = div.getElementsByTagName('i'),
+ shape;
+ while (
+ div.innerHTML = '<!--[if gt IE ' + (++ieVersion) + ']><i></i><![endif]-->',
+ all[0]
+ ) {}
+ PIE.ieVersion = ieVersion;
+
+ // Detect IE6
+ if( ieVersion === 6 ) {
+ // IE6 can't access properties with leading dash, but can without it.
+ PIE.CSS_PREFIX = PIE.CSS_PREFIX.replace( /^-/, '' );
+ }
- PIE.ieDocMode = doc.documentMode || PIE.ieVersion;
+ PIE.ieDocMode = doc.documentMode || PIE.ieVersion;
- // Detect VML support (a small number of IE installs don't have a working VML engine)
- div.innerHTML = '<v:shape adj="1"/>';
- shape = div.firstChild;
- shape.style['behavior'] = 'url(#default#VML)';
- PIE.supportsVML = (typeof shape['adj'] === "object");
- }());
+ // Detect VML support (a small number of IE installs don't have a working VML engine)
+ div.innerHTML = '<v:shape adj="1"/>';
+ shape = div.firstChild;
+ shape.style['behavior'] = 'url(#default#VML)';
+ PIE.supportsVML = (typeof shape['adj'] === "object");
+})();
View
291 sources/RendererBase.js
@@ -12,7 +12,7 @@ PIE.RendererBase = {
this.styleInfos = styleInfos;
this.parent = parent;
}
- PIE.Util.merge( Renderer.prototype, PIE.RendererBase, proto );
+ PIE.merge( Renderer.prototype, PIE.RendererBase, proto );
return Renderer;
},
@@ -65,299 +65,10 @@ PIE.RendererBase = {
}
},
-
- /**
- * Add a layer element, with the given z-order index, to the renderer's main box element. We can't use
- * z-index because that breaks when the root rendering box's z-index is 'auto' in IE8+ standards mode.
- * So instead we make sure they are inserted into the DOM in the correct order.
- * @param {number} index
- * @param {Element} el
- */
- addLayer: function( index, el ) {
- this.removeLayer( index );
- for( var layers = this._layers || ( this._layers = [] ), i = index + 1, len = layers.length, layer; i < len; i++ ) {
- layer = layers[i];
- if( layer ) {
- break;
- }
- }
- layers[index] = el;
- this.getBox().insertBefore( el, layer || null );
- },
-
- /**
- * Retrieve a layer element by its index, or null if not present
- * @param {number} index
- * @return {Element}
- */
- getLayer: function( index ) {
- var layers = this._layers;
- return layers && layers[index] || null;
- },
-
- /**
- * Remove a layer element by its index
- * @param {number} index
- */
- removeLayer: function( index ) {
- var layer = this.getLayer( index ),
- box = this._box;
- if( layer && box ) {
- box.removeChild( layer );
- this._layers[index] = null;
- }
- },
-
-
- /**
- * Get a VML shape by name, creating it if necessary.
- * @param {string} name A name identifying the element
- * @param {string=} subElName If specified a subelement of the shape will be created with this tag name
- * @param {Element} parent The parent element for the shape; will be ignored if 'group' is specified
- * @param {number=} group If specified, an ordinal group for the shape. 1 or greater. Groups are rendered
- * using container elements in the correct order, to get correct z stacking without z-index.
- */
- getShape: function( name, subElName, parent, group ) {
- var shapes = this._shapes || ( this._shapes = {} ),
- shape = shapes[ name ],
- s;
-
- if( !shape ) {
- shape = shapes[ name ] = PIE.Util.createVmlElement( 'shape' );
- if( subElName ) {
- shape.appendChild( shape[ subElName ] = PIE.Util.createVmlElement( subElName ) );
- }
-
- if( group ) {
- parent = this.getLayer( group );
- if( !parent ) {
- this.addLayer( group, doc.createElement( 'group' + group ) );
- parent = this.getLayer( group );
- }
- }
-
- parent.appendChild( shape );
-
- s = shape.style;
- s.position = 'absolute';
- s.left = s.top = 0;
- s['behavior'] = 'url(#default#VML)';
- }
- return shape;
- },
-
- /**
- * Delete a named shape which was created by getShape(). Returns true if a shape with the
- * given name was found and deleted, or false if there was no shape of that name.
- * @param {string} name
- * @return {boolean}
- */
- deleteShape: function( name ) {
- var shapes = this._shapes,
- shape = shapes && shapes[ name ];
- if( shape ) {
- shape.parentNode.removeChild( shape );
- delete shapes[ name ];
- }
- return !!shape;
- },
-
-
- /**
- * For a given set of border radius length/percentage values, convert them to concrete pixel
- * values based on the current size of the target element.
- * @param {Object} radii
- * @return {Object}
- */
- getRadiiPixels: function( radii ) {
- var el = this.targetElement,
- bounds = this.boundsInfo.getBounds(),
- w = bounds.w,
- h = bounds.h,
- tlX, tlY, trX, trY, brX, brY, blX, blY, f;
-
- tlX = radii.x['tl'].pixels( el, w );
- tlY = radii.y['tl'].pixels( el, h );
- trX = radii.x['tr'].pixels( el, w );
- trY = radii.y['tr'].pixels( el, h );
- brX = radii.x['br'].pixels( el, w );
- brY = radii.y['br'].pixels( el, h );
- blX = radii.x['bl'].pixels( el, w );
- blY = radii.y['bl'].pixels( el, h );
-
- // If any corner ellipses overlap, reduce them all by the appropriate factor. This formula
- // is taken straight from the CSS3 Backgrounds and Borders spec.
- f = Math.min(
- w / ( tlX + trX ),
- h / ( trY + brY ),
- w / ( blX + brX ),
- h / ( tlY + blY )
- );
- if( f < 1 ) {
- tlX *= f;
- tlY *= f;
- trX *= f;
- trY *= f;
- brX *= f;
- brY *= f;
- blX *= f;
- blY *= f;
- }
-
- return {
- x: {
- 'tl': tlX,
- 'tr': trX,
- 'br': brX,
- 'bl': blX
- },
- y: {
- 'tl': tlY,
- 'tr': trY,
- 'br': brY,
- 'bl': blY
- }
- }
- },
-
- /**
- * Return the VML path string for the element's background box, with corners rounded.
- * @param {Object.<{t:number, r:number, b:number, l:number}>} shrink - if present, specifies number of
- * pixels to shrink the box path inward from the element's four sides.
- * @param {number=} mult If specified, all coordinates will be multiplied by this number
- * @param {Object=} radii If specified, this will be used for the corner radii instead of the properties
- * from this renderer's borderRadiusInfo object.
- * @return {string} the VML path
- */
- getBoxPath: function( shrink, mult, radii ) {
- mult = mult || 1;
-
- var r, str,
- bounds = this.boundsInfo.getBounds(),
- w = bounds.w * mult,
- h = bounds.h * mult,
- radInfo = this.styleInfos.borderRadiusInfo,
- floor = Math.floor, ceil = Math.ceil,
- shrinkT = shrink ? shrink.t * mult : 0,
- shrinkR = shrink ? shrink.r * mult : 0,
- shrinkB = shrink ? shrink.b * mult : 0,
- shrinkL = shrink ? shrink.l * mult : 0,
- tlX, tlY, trX, trY, brX, brY, blX, blY;
-
- if( radii || radInfo.isActive() ) {
- r = this.getRadiiPixels( radii || radInfo.getProps() );
-
- tlX = r.x['tl'] * mult;
- tlY = r.y['tl'] * mult;
- trX = r.x['tr'] * mult;
- trY = r.y['tr'] * mult;
- brX = r.x['br'] * mult;
- brY = r.y['br'] * mult;
- blX = r.x['bl'] * mult;
- blY = r.y['bl'] * mult;
-
- str = 'm' + floor( shrinkL ) + ',' + floor( tlY ) +
- 'qy' + floor( tlX ) + ',' + floor( shrinkT ) +
- 'l' + ceil( w - trX ) + ',' + floor( shrinkT ) +
- 'qx' + ceil( w - shrinkR ) + ',' + floor( trY ) +
- 'l' + ceil( w - shrinkR ) + ',' + ceil( h - brY ) +
- 'qy' + ceil( w - brX ) + ',' + ceil( h - shrinkB ) +
- 'l' + floor( blX ) + ',' + ceil( h - shrinkB ) +
- 'qx' + floor( shrinkL ) + ',' + ceil( h - blY ) + ' x e';
- } else {
- // simplified path for non-rounded box
- str = 'm' + floor( shrinkL ) + ',' + floor( shrinkT ) +
- 'l' + ceil( w - shrinkR ) + ',' + floor( shrinkT ) +
- 'l' + ceil( w - shrinkR ) + ',' + ceil( h - shrinkB ) +
- 'l' + floor( shrinkL ) + ',' + ceil( h - shrinkB ) +
- 'xe';
- }
- return str;
- },
-
-
- /**
- * Get the container element for the shapes, creating it if necessary.
- */
- getBox: function() {
- var box = this.parent.getLayer( this.boxZIndex ), s;
-
- if( !box ) {
- box = doc.createElement( this.boxName );
- s = box.style;
- s.position = 'absolute';
- s.top = s.left = 0;
- this.parent.addLayer( this.boxZIndex, box );
- }
-
- return box;
- },
-
-
- /**
- * Hide the actual border of the element. In IE7 and up we can just set its color to transparent;
- * however IE6 does not support transparent borders so we have to get tricky with it. Also, some elements
- * like form buttons require removing the border width altogether, so for those we increase the padding
- * by the border size.
- */
- hideBorder: function() {
- var el = this.targetElement,
- cs = el.currentStyle,
- rs = el.runtimeStyle,
- tag = el.tagName,
- isIE6 = PIE.ieVersion === 6,
- sides, side, i;
-
- if( ( isIE6 && ( tag in PIE.childlessElements || tag === 'FIELDSET' ) ) ||
- tag === 'BUTTON' || ( tag === 'INPUT' && el.type in PIE.inputButtonTypes ) ) {
- rs.borderWidth = '';
- sides = this.styleInfos.borderInfo.sides;
- for( i = sides.length; i--; ) {
- side = sides[ i ];
- rs[ 'padding' + side ] = '';
- rs[ 'padding' + side ] = ( PIE.getLength( cs[ 'padding' + side ] ) ).pixels( el ) +
- ( PIE.getLength( cs[ 'border' + side + 'Width' ] ) ).pixels( el ) +
- ( PIE.ieVersion !== 8 && i % 2 ? 1 : 0 ); //needs an extra horizontal pixel to counteract the extra "inner border" going away
- }
- rs.borderWidth = 0;
- }
- else if( isIE6 ) {
- // Wrap all the element's children in a custom element, set the element to visiblity:hidden,
- // and set the wrapper element to visiblity:visible. This hides the outer element's decorations
- // (background and border) but displays all the contents.
- // TODO find a better way to do this that doesn't mess up the DOM parent-child relationship,
- // as this can interfere with other author scripts which add/modify/delete children. Also, this
- // won't work for elements which cannot take children, e.g. input/button/textarea/img/etc. Look into
- // using a compositor filter or some other filter which masks the border.
- if( el.childNodes.length !== 1 || el.firstChild.tagName !== 'ie6-mask' ) {
- var cont = doc.createElement( 'ie6-mask' ),
- s = cont.style, child;
- s.visibility = 'visible';
- s.zoom = 1;
- while( child = el.firstChild ) {
- cont.appendChild( child );
- }
- el.appendChild( cont );
- rs.visibility = 'hidden';
- }
- }
- else {
- rs.borderColor = 'transparent';
- }
- },
-
- unhideBorder: function() {
-
- },
-
-
/**
* Destroy the rendered objects. This is a base implementation which handles common renderer
* structures, but individual renderers may override as necessary.
*/
destroy: function() {
- this.parent.removeLayer( this.boxZIndex );
- delete this._shapes;
- delete this._layers;
}
};
View
319 sources/RendererBase_IE678.js
@@ -0,0 +1,319 @@
+PIE.merge(PIE.RendererBase, {
+
+ /**
+ * Add a layer element, with the given z-order index, to the renderer's main box element. We can't use
+ * z-index because that breaks when the root rendering box's z-index is 'auto' in IE8+ standards mode.
+ * So instead we make sure they are inserted into the DOM in the correct order.
+ * @param {number} index
+ * @param {Element} el
+ */
+ addLayer: function( index, el ) {
+ this.removeLayer( index );
+ for( var layers = this._layers || ( this._layers = [] ), i = index + 1, len = layers.length, layer; i < len; i++ ) {
+ layer = layers[i];
+ if( layer ) {
+ break;
+ }
+ }
+ layers[index] = el;
+ this.getBox().insertBefore( el, layer || null );
+ },
+
+ /**
+ * Retrieve a layer element by its index, or null if not present
+ * @param {number} index
+ * @return {Element}
+ */
+ getLayer: function( index ) {
+ var layers = this._layers;
+ return layers && layers[index] || null;
+ },
+
+ /**
+ * Remove a layer element by its index
+ * @param {number} index
+ */
+ removeLayer: function( index ) {
+ var layer = this.getLayer( index ),
+ box = this._box;
+ if( layer && box ) {
+ box.removeChild( layer );
+ this._layers[index] = null;
+ }
+ },
+
+
+ /**
+ * To create a VML element, it must be created by a Document which has the VML
+ * namespace set. Unfortunately, if you try to add the namespace programatically
+ * into the main document, you will get an "Unspecified error" when trying to
+ * access document.namespaces before the document is finished loading. To get
+ * around this, we create a DocumentFragment, which in IE land is apparently a
+ * full-fledged Document. It allows adding namespaces immediately, so we add the
+ * namespace there and then have it create the VML element.
+ * @param {string} tag The tag name for the VML element
+ * @return {Element} The new VML element
+ */
+ createVmlElement: function fn( tag ) {
+ var vmlCreatorDoc = fn.doc,
+ vmlPrefix = 'css3vml';
+ if( !vmlCreatorDoc ) {
+ vmlCreatorDoc = fn.doc = doc.createDocumentFragment();
+ vmlCreatorDoc.namespaces.add( vmlPrefix, 'urn:schemas-microsoft-com:vml' );
+ }
+ return vmlCreatorDoc.createElement( vmlPrefix + ':' + tag );
+ },
+
+
+ /**
+ * Get a VML shape by name, creating it if necessary.
+ * @param {string} name A name identifying the element
+ * @param {string=} subElName If specified a subelement of the shape will be created with this tag name
+ * @param {Element} parent The parent element for the shape; will be ignored if 'group' is specified
+ * @param {number=} group If specified, an ordinal group for the shape. 1 or greater. Groups are rendered
+ * using container elements in the correct order, to get correct z stacking without z-index.
+ */
+ getShape: function( name, subElName, parent, group ) {
+ var shapes = this._shapes || ( this._shapes = {} ),
+ shape = shapes[ name ],
+ s;
+
+ if( !shape ) {
+ shape = shapes[ name ] = this.createVmlElement( 'shape' );
+ if( subElName ) {
+ shape.appendChild( shape[ subElName ] = this.createVmlElement( subElName ) );
+ }
+
+ if( group ) {
+ parent = this.getLayer( group );
+ if( !parent ) {
+ this.addLayer( group, doc.createElement( 'group' + group ) );
+ parent = this.getLayer( group );
+ }
+ }
+
+ parent.appendChild( shape );
+
+ s = shape.style;
+ s.position = 'absolute';
+ s.left = s.top = 0;
+ s['behavior'] = 'url(#default#VML)';
+ }
+ return shape;
+ },
+
+ /**
+ * Delete a named shape which was created by getShape(). Returns true if a shape with the
+ * given name was found and deleted, or false if there was no shape of that name.
+ * @param {string} name
+ * @return {boolean}
+ */
+ deleteShape: function( name ) {
+ var shapes = this._shapes,
+ shape = shapes && shapes[ name ];
+ if( shape ) {
+ shape.parentNode.removeChild( shape );
+ delete shapes[ name ];
+ }
+ return !!shape;
+ },
+
+
+ /**
+ * For a given set of border radius length/percentage values, convert them to concrete pixel
+ * values based on the current size of the target element.
+ * @param {Object} radii
+ * @return {Object}
+ */
+ getRadiiPixels: function( radii ) {
+ var el = this.targetElement,
+ bounds = this.boundsInfo.getBounds(),
+ w = bounds.w,
+ h = bounds.h,
+ tlX, tlY, trX, trY, brX, brY, blX, blY, f;
+
+ tlX = radii.x['tl'].pixels( el, w );
+ tlY = radii.y['tl'].pixels( el, h );
+ trX = radii.x['tr'].pixels( el, w );
+ trY = radii.y['tr'].pixels( el, h );
+ brX = radii.x['br'].pixels( el, w );
+ brY = radii.y['br'].pixels( el, h );
+ blX = radii.x['bl'].pixels( el, w );
+ blY = radii.y['bl'].pixels( el, h );
+
+ // If any corner ellipses overlap, reduce them all by the appropriate factor. This formula
+ // is taken straight from the CSS3 Backgrounds and Borders spec.
+ f = Math.min(
+ w / ( tlX + trX ),
+ h / ( trY + brY ),
+ w / ( blX + brX ),
+ h / ( tlY + blY )
+ );
+ if( f < 1 ) {
+ tlX *= f;
+ tlY *= f;
+ trX *= f;
+ trY *= f;
+ brX *= f;
+ brY *= f;
+ blX *= f;
+ blY *= f;
+ }
+
+ return {
+ x: {
+ 'tl': tlX,
+ 'tr': trX,
+ 'br': brX,
+ 'bl': blX
+ },
+ y: {
+ 'tl': tlY,
+ 'tr': trY,
+ 'br': brY,
+ 'bl': blY
+ }
+ }
+ },
+
+ /**
+ * Return the VML path string for the element's background box, with corners rounded.
+ * @param {Object.<{t:number, r:number, b:number, l:number}>} shrink - if present, specifies number of
+ * pixels to shrink the box path inward from the element's four sides.
+ * @param {number=} mult If specified, all coordinates will be multiplied by this number
+ * @param {Object=} radii If specified, this will be used for the corner radii instead of the properties
+ * from this renderer's borderRadiusInfo object.
+ * @return {string} the VML path
+ */
+ getBoxPath: function( shrink, mult, radii ) {
+ mult = mult || 1;
+
+ var r, str,
+ bounds = this.boundsInfo.getBounds(),
+ w = bounds.w * mult,
+ h = bounds.h * mult,
+ radInfo = this.styleInfos.borderRadiusInfo,
+ floor = Math.floor, ceil = Math.ceil,
+ shrinkT = shrink ? shrink.t * mult : 0,
+ shrinkR = shrink ? shrink.r * mult : 0,
+ shrinkB = shrink ? shrink.b * mult : 0,
+ shrinkL = shrink ? shrink.l * mult : 0,
+ tlX, tlY, trX, trY, brX, brY, blX, blY;
+
+ if( radii || radInfo.isActive() ) {
+ r = this.getRadiiPixels( radii || radInfo.getProps() );
+
+ tlX = r.x['tl'] * mult;
+ tlY = r.y['tl'] * mult;
+ trX = r.x['tr'] * mult;
+ trY = r.y['tr'] * mult;
+ brX = r.x['br'] * mult;
+ brY = r.y['br'] * mult;
+ blX = r.x['bl'] * mult;
+ blY = r.y['bl'] * mult;
+
+ str = 'm' + floor( shrinkL ) + ',' + floor( tlY ) +
+ 'qy' + floor( tlX ) + ',' + floor( shrinkT ) +
+ 'l' + ceil( w - trX ) + ',' + floor( shrinkT ) +
+ 'qx' + ceil( w - shrinkR ) + ',' + floor( trY ) +
+ 'l' + ceil( w - shrinkR ) + ',' + ceil( h - brY ) +
+ 'qy' + ceil( w - brX ) + ',' + ceil( h - shrinkB ) +
+ 'l' + floor( blX ) + ',' + ceil( h - shrinkB ) +
+ 'qx' + floor( shrinkL ) + ',' + ceil( h - blY ) + ' x e';
+ } else {
+ // simplified path for non-rounded box
+ str = 'm' + floor( shrinkL ) + ',' + floor( shrinkT ) +
+ 'l' + ceil( w - shrinkR ) + ',' + floor( shrinkT ) +
+ 'l' + ceil( w - shrinkR ) + ',' + ceil( h - shrinkB ) +
+ 'l' + floor( shrinkL ) + ',' + ceil( h - shrinkB ) +
+ 'xe';
+ }
+ return str;
+ },
+
+
+ /**
+ * Get the container element for the shapes, creating it if necessary.
+ */
+ getBox: function() {
+ var box = this.parent.getLayer( this.boxZIndex ), s;
+
+ if( !box ) {
+ box = doc.createElement( this.boxName );
+ s = box.style;
+ s.position = 'absolute';
+ s.top = s.left = 0;
+ this.parent.addLayer( this.boxZIndex, box );
+ }
+
+ return box;
+ },
+
+
+ /**
+ * Hide the actual border of the element. In IE7 and up we can just set its color to transparent;
+ * however IE6 does not support transparent borders so we have to get tricky with it. Also, some elements
+ * like form buttons require removing the border width altogether, so for those we increase the padding
+ * by the border size.
+ */
+ hideBorder: function() {
+ var el = this.targetElement,
+ cs = el.currentStyle,
+ rs = el.runtimeStyle,
+ tag = el.tagName,
+ isIE6 = PIE.ieVersion === 6,
+ sides, side, i;
+
+ if( ( isIE6 && ( tag in PIE.childlessElements || tag === 'FIELDSET' ) ) ||
+ tag === 'BUTTON' || ( tag === 'INPUT' && el.type in PIE.inputButtonTypes ) ) {
+ rs.borderWidth = '';
+ sides = this.styleInfos.borderInfo.sides;
+ for( i = sides.length; i--; ) {
+ side = sides[ i ];
+ rs[ 'padding' + side ] = '';
+ rs[ 'padding' + side ] = ( PIE.getLength( cs[ 'padding' + side ] ) ).pixels( el ) +
+ ( PIE.getLength( cs[ 'border' + side + 'Width' ] ) ).pixels( el ) +
+ ( PIE.ieVersion !== 8 && i % 2 ? 1 : 0 ); //needs an extra horizontal pixel to counteract the extra "inner border" going away
+ }
+ rs.borderWidth = 0;
+ }
+ else if( isIE6 ) {
+ // Wrap all the element's children in a custom element, set the element to visiblity:hidden,
+ // and set the wrapper element to visiblity:visible. This hides the outer element's decorations
+ // (background and border) but displays all the contents.
+ // TODO find a better way to do this that doesn't mess up the DOM parent-child relationship,
+ // as this can interfere with other author scripts which add/modify/delete children. Also, this
+ // won't work for elements which cannot take children, e.g. input/button/textarea/img/etc. Look into
+ // using a compositor filter or some other filter which masks the border.
+ if( el.childNodes.length !== 1 || el.firstChild.tagName !== 'ie6-mask' ) {
+ var cont = doc.createElement( 'ie6-mask' ),
+ s = cont.style, child;
+ s.visibility = 'visible';
+ s.zoom = 1;
+ while( child = el.firstChild ) {
+ cont.appendChild( child );
+ }
+ el.appendChild( cont );
+ rs.visibility = 'hidden';
+ }
+ }
+ else {
+ rs.borderColor = 'transparent';
+ }
+ },
+
+ unhideBorder: function() {
+
+ },
+
+
+ /**
+ * Destroy the rendered objects. This is a base implementation which handles common renderer
+ * structures, but individual renderers may override as necessary.
+ */
+ destroy: function() {
+ this.parent.removeLayer( this.boxZIndex );
+ delete this._shapes;
+ delete this._layers;
+ }
+});
View
2 sources/StyleInfoBase.js
@@ -27,7 +27,7 @@ PIE.StyleInfoBase = {
this.targetElement = el;
this._lastCss = this.getCss();
}
- PIE.Util.merge( StyleInfo.prototype, PIE.StyleInfoBase, proto );
+ PIE.merge( StyleInfo.prototype, PIE.StyleInfoBase, proto );
StyleInfo._propsCache = {};
return StyleInfo;
},
View
47 sources/Util.js
@@ -2,60 +2,19 @@
* Utility functions
*/
(function() {
- var vmlCreatorDoc,
- idNum = 0,
+ var idNum = 0,
imageSizes = {};
PIE.Util = {
/**
- * To create a VML element, it must be created by a Document which has the VML
- * namespace set. Unfortunately, if you try to add the namespace programatically
- * into the main document, you will get an "Unspecified error" when trying to
- * access document.namespaces before the document is finished loading. To get
- * around this, we create a DocumentFragment, which in IE land is apparently a
- * full-fledged Document. It allows adding namespaces immediately, so we add the
- * namespace there and then have it create the VML element.
- * @param {string} tag The tag name for the VML element
- * @return {Element} The new VML element
- */
- createVmlElement: function( tag ) {
- var vmlPrefix = 'css3vml';
- if( !vmlCreatorDoc ) {
- vmlCreatorDoc = doc.createDocumentFragment();
- vmlCreatorDoc.namespaces.add( vmlPrefix, 'urn:schemas-microsoft-com:vml' );
- }
- return vmlCreatorDoc.createElement( vmlPrefix + ':' + tag );
- },
-
-
- /**
* Generate and return a unique ID for a given object. The generated ID is stored
- * as a property of the object for future reuse.
+ * as a property of the object for future reuse. DOM Elements use the builtin uniqueID property.
* @param {Object} obj
*/
getUID: function( obj ) {
- return obj && obj[ '_pieId' ] || ( obj[ '_pieId' ] = '_' + ++idNum );
- },
-
-
- /**
- * Simple utility for merging objects
- * @param {Object} obj1 The main object into which all others will be merged
- * @param {...Object} var_args Other objects which will be merged into the first, in order
- */
- merge: function( obj1 ) {
- var i, len, p, objN, args = arguments;
- for( i = 1, len = args.length; i < len; i++ ) {
- objN = args[i];
- for( p in objN ) {
- if( objN.hasOwnProperty( p ) ) {
- obj1[ p ] = objN[ p ];
- }
- }
- }
- return obj1;
+ return obj && obj[ 'uniqueID' ] || obj[ '_pieId' ] || ( obj[ '_pieId' ] = '_' + idNum++ );
},
View
20 sources/htc_init.js
@@ -1,20 +0,0 @@
-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 );
- }
-}
-
-function cleanup() {
- var PIE = window[ 'PIE' ];
- if (PIE) {
- PIE['detach']( el );
- PIE = el = 0;
- }
-}
-
-if( el.readyState === 'complete' ) {
- init();
-}
View
2 sources/htc_open.txt
@@ -9,6 +9,4 @@ Dual-licensed for use under the Apache License Version 2.0 or the General Public
<PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="init()" />
<PUBLIC:ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="init()" />
<PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />
-
<script type="text/javascript">
-var doc = element.document;
View
62 sources/htc_script.js
@@ -0,0 +1,62 @@
+var el = element,
+ doc = el.document,
+ PIE = window[ 'PIE' ];
+
+if (!PIE) {
+ (function() {
+ var queue = {},
+ baseUrl, script, tester, isIE6;
+
+ // Create stub PIE object
+ PIE = window[ 'PIE' ] = {
+ 'onLoad': function() {
+ for( var id in queue ) {
+ if ( queue.hasOwnProperty( id ) ) {
+ PIE[ 'attach' ]( queue[ id ] );
+ }
+ }
+ queue = 0;
+ delete PIE[ 'onLoad' ];
+ },
+
+ 'attach': function( el ) {
+ queue[ el[ 'uniqueID' ] ] = el;
+ },
+
+ 'detach': function( el ) {
+ delete queue[ el[ 'uniqueID' ] ];
+ }
+ };
+
+ tester = doc.createElement('div');
+ tester.innerHTML = '<!--[if IE 6]><i></i><![endif]-->';
+ isIE6 = tester.getElementsByTagName('i')[0];
+
+ // Start loading JS file
+ baseUrl = doc.documentElement.currentStyle.getAttribute( ( isIE6 ? '' : '-' ) + 'pie-base-url' );
+ baseUrl = baseUrl ? baseUrl.replace(/^"|"$/g, '') : '';
+ script = doc.createElement('script');
+ script.async = true;
+ script.src = baseUrl + '/PIE_IE' + ( doc.documentMode === 9 ? '9' : '678' ) + '.js';
+ doc.getElementsByTagName( 'head' )[0].appendChild( script );
+ })();
+}
+
+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 );
+ }
+}
+
+function cleanup() {
+ var PIE = window[ 'PIE' ];
+ if ( PIE && doc.media !== 'print' ) {
+ PIE[ 'detach' ]( el );
+ }
+ el = 0;
+}
+
+if( el.readyState === 'complete' ) {
+ init();
+}
View
7 sources/js_close.js
@@ -1 +1,6 @@
-})();
+
+ if ( PIE[ 'onLoad' ] ) {
+ PIE[ 'onLoad' ]();
+ }
+
+})( window, document );
View
4 sources/js_open.js
@@ -4,5 +4,5 @@ Version $Version$
http://css3pie.com
Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
*/
-(function(){
-var doc = document;
+(function( win, doc ) {
+ var PIE = win[ 'PIE' ] || ( win[ 'PIE' ] = {} );
View
1 tests/basic.html
@@ -13,6 +13,7 @@
font-family: sans-serif;
font-size: 16px;
background: #EEE;
+ -pie-base-url: "../build";
}
.section {

0 comments on commit aa82152

Please sign in to comment.