diff options
Diffstat (limited to 'themes/mantra/js/PIE/PIE_uncompressed.js')
| -rw-r--r-- | themes/mantra/js/PIE/PIE_uncompressed.js | 8946 |
1 files changed, 4473 insertions, 4473 deletions
diff --git a/themes/mantra/js/PIE/PIE_uncompressed.js b/themes/mantra/js/PIE/PIE_uncompressed.js index c29cc7da..85f6785e 100644 --- a/themes/mantra/js/PIE/PIE_uncompressed.js +++ b/themes/mantra/js/PIE/PIE_uncompressed.js @@ -1,4474 +1,4474 @@ -/*
-PIE: CSS3 rendering for IE
-Version 1.0.0
-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;var PIE = window['PIE'];
-
-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
- },
-
- /**
- * Elements that can receive user focus
- */
- focusableElements: {
- 'A':1,
- 'INPUT':1,
- 'TEXTAREA':1,
- 'SELECT':1,
- 'BUTTON':1
- },
-
- /**
- * Values of the type attribute for input elements displayed as buttons
- */
- inputButtonTypes: {
- 'submit':1,
- 'button':1,
- 'reset':1
- },
-
- 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;
-
- // 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");
- }());
-/**
- * Utility functions
- */
-(function() {
- var vmlCreatorDoc,
- 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.
- * @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;
- },
-
-
- /**
- * Execute a callback function, passing it the dimensions of a given image once
- * they are known.
- * @param {string} src The source URL of the image
- * @param {function({w:number, h:number})} func The callback function to be called once the image dimensions are known
- * @param {Object} ctx A context object which will be used as the 'this' value within the executed callback function
- */
- withImageSize: function( src, func, ctx ) {
- var size = imageSizes[ src ], img, queue;
- if( size ) {
- // If we have a queue, add to it
- if( Object.prototype.toString.call( size ) === '[object Array]' ) {
- size.push( [ func, ctx ] );
- }
- // Already have the size cached, call func right away
- else {
- func.call( ctx, size );
- }
- } else {
- queue = imageSizes[ src ] = [ [ func, ctx ] ]; //create queue
- img = new Image();
- img.onload = function() {
- size = imageSizes[ src ] = { w: img.width, h: img.height };
- for( var i = 0, len = queue.length; i < len; i++ ) {
- queue[ i ][ 0 ].call( queue[ i ][ 1 ], size );
- }
- img.onload = null;
- };
- img.src = src;
- }
- }
- };
-})();/**
- * Utility functions for handling gradients
- */
-PIE.GradientUtil = {
-
- getGradientMetrics: function( el, width, height, gradientInfo ) {
- var angle = gradientInfo.angle,
- startPos = gradientInfo.gradientStart,
- startX, startY,
- endX, endY,
- startCornerX, startCornerY,
- endCornerX, endCornerY,
- deltaX, deltaY,
- p, UNDEF;
-
- // Find the "start" and "end" corners; these are the corners furthest along the gradient line.
- // This is used below to find the start/end positions of the CSS3 gradient-line, and also in finding
- // the total length of the VML rendered gradient-line corner to corner.
- function findCorners() {
- startCornerX = ( angle >= 90 && angle < 270 ) ? width : 0;
- startCornerY = angle < 180 ? height : 0;
- endCornerX = width - startCornerX;
- endCornerY = height - startCornerY;
- }
-
- // Normalize the angle to a value between [0, 360)
- function normalizeAngle() {
- while( angle < 0 ) {
- angle += 360;
- }
- angle = angle % 360;
- }
-
- // Find the start and end points of the gradient
- if( startPos ) {
- startPos = startPos.coords( el, width, height );
- startX = startPos.x;
- startY = startPos.y;
- }
- if( angle ) {
- angle = angle.degrees();
-
- normalizeAngle();
- findCorners();
-
- // If no start position was specified, then choose a corner as the starting point.
- if( !startPos ) {
- startX = startCornerX;
- startY = startCornerY;
- }
-
- // Find the end position by extending a perpendicular line from the gradient-line which
- // intersects the corner opposite from the starting corner.
- p = PIE.GradientUtil.perpendicularIntersect( startX, startY, angle, endCornerX, endCornerY );
- endX = p[0];
- endY = p[1];
- }
- else if( startPos ) {
- // Start position but no angle specified: find the end point by rotating 180deg around the center
- endX = width - startX;
- endY = height - startY;
- }
- else {
- // Neither position nor angle specified; create vertical gradient from top to bottom
- startX = startY = endX = 0;
- endY = height;
- }
- deltaX = endX - startX;
- deltaY = endY - startY;
-
- if( angle === UNDEF ) {
- // Get the angle based on the change in x/y from start to end point. Checks first for horizontal
- // or vertical angles so they get exact whole numbers rather than what atan2 gives.
- angle = ( !deltaX ? ( deltaY < 0 ? 90 : 270 ) :
- ( !deltaY ? ( deltaX < 0 ? 180 : 0 ) :
- -Math.atan2( deltaY, deltaX ) / Math.PI * 180
- )
- );
- normalizeAngle();
- findCorners();
- }
-
- return {
- angle: angle,
- startX: startX,
- startY: startY,
- endX: endX,
- endY: endY,
- startCornerX: startCornerX,
- startCornerY: startCornerY,
- endCornerX: endCornerX,
- endCornerY: endCornerY,
- deltaX: deltaX,
- deltaY: deltaY,
- lineLength: PIE.GradientUtil.distance( startX, startY, endX, endY )
- }
- },
-
- /**
- * Find the point along a given line (defined by a starting point and an angle), at which
- * that line is intersected by a perpendicular line extending through another point.
- * @param x1 - x coord of the starting point
- * @param y1 - y coord of the starting point
- * @param angle - angle of the line extending from the starting point (in degrees)
- * @param x2 - x coord of point along the perpendicular line
- * @param y2 - y coord of point along the perpendicular line
- * @return [ x, y ]
- */
- perpendicularIntersect: function( x1, y1, angle, x2, y2 ) {
- // Handle straight vertical and horizontal angles, for performance and to avoid
- // divide-by-zero errors.
- if( angle === 0 || angle === 180 ) {
- return [ x2, y1 ];
- }
- else if( angle === 90 || angle === 270 ) {
- return [ x1, y2 ];
- }
- else {
- // General approach: determine the Ax+By=C formula for each line (the slope of the second
- // line is the negative inverse of the first) and then solve for where both formulas have
- // the same x/y values.
- var a1 = Math.tan( -angle * Math.PI / 180 ),
- c1 = a1 * x1 - y1,
- a2 = -1 / a1,
- c2 = a2 * x2 - y2,
- d = a2 - a1,
- endX = ( c2 - c1 ) / d,
- endY = ( a1 * c2 - a2 * c1 ) / d;
- return [ endX, endY ];
- }
- },
-
- /**
- * Find the distance between two points
- * @param {Number} p1x
- * @param {Number} p1y
- * @param {Number} p2x
- * @param {Number} p2y
- * @return {Number} the distance
- */
- distance: function( p1x, p1y, p2x, p2y ) {
- var dx = p2x - p1x,
- dy = p2y - p1y;
- return Math.abs(
- dx === 0 ? dy :
- dy === 0 ? dx :
- Math.sqrt( dx * dx + dy * dy )
- );
- }
-
-};/**
- *
- */
-PIE.Observable = function() {
- /**
- * List of registered observer functions
- */
- this.observers = [];
-
- /**
- * Hash of function ids to their position in the observers list, for fast lookup
- */
- this.indexes = {};
-};
-PIE.Observable.prototype = {
-
- observe: function( fn ) {
- var id = PIE.Util.getUID( fn ),
- indexes = this.indexes,
- observers = this.observers;
- if( !( id in indexes ) ) {
- indexes[ id ] = observers.length;
- observers.push( fn );
- }
- },
-
- unobserve: function( fn ) {
- var id = PIE.Util.getUID( fn ),
- indexes = this.indexes;
- if( id && id in indexes ) {
- delete this.observers[ indexes[ id ] ];
- delete indexes[ id ];
- }
- },
-
- fire: function() {
- var o = this.observers,
- i = o.length;
- while( i-- ) {
- o[ i ] && o[ i ]();
- }
- }
-
-};/*
- * 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-9
- * and false elsewhere.
- */
-
-PIE.Heartbeat = new PIE.Observable();
-PIE.Heartbeat.run = function() {
- var me = this,
- interval;
- if( !me.running ) {
- interval = doc.documentElement.currentStyle.getAttribute( PIE.CSS_PREFIX + 'poll-interval' ) || 250;
- (function beat() {
- me.fire();
- setTimeout(beat, interval);
- })();
- me.running = 1;
- }
-};
-/**
- * Create an observable listener for the onunload event
- */
-(function() {
- PIE.OnUnload = new PIE.Observable();
-
- function handleUnload() {
- PIE.OnUnload.fire();
- window.detachEvent( 'onunload', handleUnload );
- window[ 'PIE' ] = null;
- }
-
- window.attachEvent( 'onunload', handleUnload );
-
- /**
- * Attach an event which automatically gets detached onunload
- */
- PIE.OnUnload.attachManagedEvent = function( target, name, handler ) {
- target.attachEvent( name, handler );
- this.observe( function() {
- target.detachEvent( name, handler );
- } );
- };
-})()/**
- * Create a single observable listener for window resize events.
- */
-PIE.OnResize = new PIE.Observable();
-
-PIE.OnUnload.attachManagedEvent( window, 'onresize', function() { PIE.OnResize.fire(); } );
-/**
- * Create a single observable listener for scroll events. Used for lazy loading based
- * on the viewport, and for fixed position backgrounds.
- */
-(function() {
- PIE.OnScroll = new PIE.Observable();
-
- function scrolled() {
- PIE.OnScroll.fire();
- }
-
- PIE.OnUnload.attachManagedEvent( window, 'onscroll', scrolled );
-
- PIE.OnResize.observe( scrolled );
-})();
-/**
- * Listen for printing events, destroy all active PIE instances when printing, and
- * restore them afterward.
- */
-(function() {
-
- var elements;
-
- function beforePrint() {
- elements = PIE.Element.destroyAll();
- }
-
- function afterPrint() {
- if( elements ) {
- for( var i = 0, len = elements.length; i < len; i++ ) {
- PIE[ 'attach' ]( elements[i] );
- }
- elements = 0;
- }
- }
-
- if( PIE.ieDocMode < 9 ) {
- PIE.OnUnload.attachManagedEvent( window, 'onbeforeprint', beforePrint );
- PIE.OnUnload.attachManagedEvent( window, 'onafterprint', afterPrint );
- }
-
-})();/**
- * Create a single observable listener for document mouseup events.
- */
-PIE.OnMouseup = new PIE.Observable();
-
-PIE.OnUnload.attachManagedEvent( doc, 'onmouseup', function() { PIE.OnMouseup.fire(); } );
-/**
- * Wrapper for length and percentage style values. The value is immutable. A singleton instance per unique
- * value is returned from PIE.getLength() - always use that instead of instantiating directly.
- * @constructor
- * @param {string} val The CSS string representing the length. It is assumed that this will already have
- * been validated as a valid length or percentage syntax.
- */
-PIE.Length = (function() {
- var lengthCalcEl = doc.createElement( 'length-calc' ),
- parent = doc.body || doc.documentElement,
- s = lengthCalcEl.style,
- conversions = {},
- units = [ 'mm', 'cm', 'in', 'pt', 'pc' ],
- i = units.length,
- instances = {};
-
- s.position = 'absolute';
- s.top = s.left = '-9999px';
-
- parent.appendChild( lengthCalcEl );
- while( i-- ) {
- s.width = '100' + units[i];
- conversions[ units[i] ] = lengthCalcEl.offsetWidth / 100;
- }
- parent.removeChild( lengthCalcEl );
-
- // All calcs from here on will use 1em
- s.width = '1em';
-
-
- function Length( val ) {
- this.val = val;
- }
- Length.prototype = {
- /**
- * Regular expression for matching the length unit
- * @private
- */
- unitRE: /(px|em|ex|mm|cm|in|pt|pc|%)$/,
-
- /**
- * Get the numeric value of the length
- * @return {number} The value
- */
- getNumber: function() {
- var num = this.num,
- UNDEF;
- if( num === UNDEF ) {
- num = this.num = parseFloat( this.val );
- }
- return num;
- },
-
- /**
- * Get the unit of the length
- * @return {string} The unit
- */
- getUnit: function() {
- var unit = this.unit,
- m;
- if( !unit ) {
- m = this.val.match( this.unitRE );
- unit = this.unit = ( m && m[0] ) || 'px';
- }
- return unit;
- },
-
- /**
- * Determine whether this is a percentage length value
- * @return {boolean}
- */
- isPercentage: function() {
- return this.getUnit() === '%';
- },
-
- /**
- * Resolve this length into a number of pixels.
- * @param {Element} el - the context element, used to resolve font-relative values
- * @param {(function():number|number)=} pct100 - the number of pixels that equal a 100% percentage. This can be either a number or a
- * function which will be called to return the number.
- */
- pixels: function( el, pct100 ) {
- var num = this.getNumber(),
- unit = this.getUnit();
- switch( unit ) {
- case "px":
- return num;
- case "%":
- return num * ( typeof pct100 === 'function' ? pct100() : pct100 ) / 100;
- case "em":
- return num * this.getEmPixels( el );
- case "ex":
- return num * this.getEmPixels( el ) / 2;
- default:
- return num * conversions[ unit ];
- }
- },
-
- /**
- * The em and ex units are relative to the font-size of the current element,
- * however if the font-size is set using non-pixel units then we get that value
- * rather than a pixel conversion. To get around this, we keep a floating element
- * with width:1em which we insert into the target element and then read its offsetWidth.
- * For elements that won't accept a child we insert into the parent node and perform
- * additional calculation. If the font-size *is* specified in pixels, then we use that
- * directly to avoid the expensive DOM manipulation.
- * @param {Element} el
- * @return {number}
- */
- getEmPixels: function( el ) {
- var fs = el.currentStyle.fontSize,
- px, parent, me;
-
- if( fs.indexOf( 'px' ) > 0 ) {
- return parseFloat( fs );
- }
- else if( el.tagName in PIE.childlessElements ) {
- me = this;
- parent = el.parentNode;
- return PIE.getLength( fs ).pixels( parent, function() {
- return me.getEmPixels( parent );
- } );
- }
- else {
- el.appendChild( lengthCalcEl );
- px = lengthCalcEl.offsetWidth;
- if( lengthCalcEl.parentNode === el ) { //not sure how this could be false but it sometimes is
- el.removeChild( lengthCalcEl );
- }
- return px;
- }
- }
- };
-
-
- /**
- * Retrieve a PIE.Length instance for the given value. A shared singleton instance is returned for each unique value.
- * @param {string} val The CSS string representing the length. It is assumed that this will already have
- * been validated as a valid length or percentage syntax.
- */
- PIE.getLength = function( val ) {
- return instances[ val ] || ( instances[ val ] = new Length( val ) );
- };
-
- return Length;
-})();
-/**
- * Wrapper for a CSS3 bg-position value. Takes up to 2 position keywords and 2 lengths/percentages.
- * @constructor
- * @param {Array.<PIE.Tokenizer.Token>} tokens The tokens making up the background position value.
- */
-PIE.BgPosition = (function() {
-
- var length_fifty = PIE.getLength( '50%' ),
- vert_idents = { 'top': 1, 'center': 1, 'bottom': 1 },
- horiz_idents = { 'left': 1, 'center': 1, 'right': 1 };
-
-
- function BgPosition( tokens ) {
- this.tokens = tokens;
- }
- BgPosition.prototype = {
- /**
- * Normalize the values into the form:
- * [ xOffsetSide, xOffsetLength, yOffsetSide, yOffsetLength ]
- * where: xOffsetSide is either 'left' or 'right',
- * yOffsetSide is either 'top' or 'bottom',
- * and x/yOffsetLength are both PIE.Length objects.
- * @return {Array}
- */
- getValues: function() {
- if( !this._values ) {
- var tokens = this.tokens,
- len = tokens.length,
- Tokenizer = PIE.Tokenizer,
- identType = Tokenizer.Type,
- length_zero = PIE.getLength( '0' ),
- type_ident = identType.IDENT,
- type_length = identType.LENGTH,
- type_percent = identType.PERCENT,
- type, value,
- vals = [ 'left', length_zero, 'top', length_zero ];
-
- // If only one value, the second is assumed to be 'center'
- if( len === 1 ) {
- tokens.push( new Tokenizer.Token( type_ident, 'center' ) );
- len++;
- }
-
- // Two values - CSS2
- if( len === 2 ) {
- // If both idents, they can appear in either order, so switch them if needed
- if( type_ident & ( tokens[0].tokenType | tokens[1].tokenType ) &&
- tokens[0].tokenValue in vert_idents && tokens[1].tokenValue in horiz_idents ) {
- tokens.push( tokens.shift() );
- }
- if( tokens[0].tokenType & type_ident ) {
- if( tokens[0].tokenValue === 'center' ) {
- vals[1] = length_fifty;
- } else {
- vals[0] = tokens[0].tokenValue;
- }
- }
- else if( tokens[0].isLengthOrPercent() ) {
- vals[1] = PIE.getLength( tokens[0].tokenValue );
- }
- if( tokens[1].tokenType & type_ident ) {
- if( tokens[1].tokenValue === 'center' ) {
- vals[3] = length_fifty;
- } else {
- vals[2] = tokens[1].tokenValue;
- }
- }
- else if( tokens[1].isLengthOrPercent() ) {
- vals[3] = PIE.getLength( tokens[1].tokenValue );
- }
- }
-
- // Three or four values - CSS3
- else {
- // TODO
- }
-
- this._values = vals;
- }
- return this._values;
- },
-
- /**
- * Find the coordinates of the background image from the upper-left corner of the background area.
- * Note that these coordinate values are not rounded.
- * @param {Element} el
- * @param {number} width - the width for percentages (background area width minus image width)
- * @param {number} height - the height for percentages (background area height minus image height)
- * @return {Object} { x: Number, y: Number }
- */
- coords: function( el, width, height ) {
- var vals = this.getValues(),
- pxX = vals[1].pixels( el, width ),
- pxY = vals[3].pixels( el, height );
-
- return {
- x: vals[0] === 'right' ? width - pxX : pxX,
- y: vals[2] === 'bottom' ? height - pxY : pxY
- };
- }
- };
-
- return BgPosition;
-})();
-/**
- * Wrapper for a CSS3 background-size value.
- * @constructor
- * @param {String|PIE.Length} w The width parameter
- * @param {String|PIE.Length} h The height parameter, if any
- */
-PIE.BgSize = (function() {
-
- var CONTAIN = 'contain',
- COVER = 'cover',
- AUTO = 'auto';
-
-
- function BgSize( w, h ) {
- this.w = w;
- this.h = h;
- }
- BgSize.prototype = {
-
- pixels: function( el, areaW, areaH, imgW, imgH ) {
- var me = this,
- w = me.w,
- h = me.h,
- areaRatio = areaW / areaH,
- imgRatio = imgW / imgH;
-
- if ( w === CONTAIN ) {
- w = imgRatio > areaRatio ? areaW : areaH * imgRatio;
- h = imgRatio > areaRatio ? areaW / imgRatio : areaH;
- }
- else if ( w === COVER ) {
- w = imgRatio < areaRatio ? areaW : areaH * imgRatio;
- h = imgRatio < areaRatio ? areaW / imgRatio : areaH;
- }
- else if ( w === AUTO ) {
- h = ( h === AUTO ? imgH : h.pixels( el, areaH ) );
- w = h * imgRatio;
- }
- else {
- w = w.pixels( el, areaW );
- h = ( h === AUTO ? w / imgRatio : h.pixels( el, areaH ) );
- }
-
- return { w: w, h: h };
- }
-
- };
-
- BgSize.DEFAULT = new BgSize( AUTO, AUTO );
-
- return BgSize;
-})();
-/**
- * Wrapper for angle values; handles conversion to degrees from all allowed angle units
- * @constructor
- * @param {string} val The raw CSS value for the angle. It is assumed it has been pre-validated.
- */
-PIE.Angle = (function() {
- function Angle( val ) {
- this.val = val;
- }
- Angle.prototype = {
- unitRE: /[a-z]+$/i,
-
- /**
- * @return {string} The unit of the angle value
- */
- getUnit: function() {
- return this._unit || ( this._unit = this.val.match( this.unitRE )[0].toLowerCase() );
- },
-
- /**
- * Get the numeric value of the angle in degrees.
- * @return {number} The degrees value
- */
- degrees: function() {
- var deg = this._deg, u, n;
- if( deg === undefined ) {
- u = this.getUnit();
- n = parseFloat( this.val, 10 );
- deg = this._deg = ( u === 'deg' ? n : u === 'rad' ? n / Math.PI * 180 : u === 'grad' ? n / 400 * 360 : u === 'turn' ? n * 360 : 0 );
- }
- return deg;
- }
- };
-
- return Angle;
-})();/**
- * Abstraction for colors values. Allows detection of rgba values. A singleton instance per unique
- * value is returned from PIE.getColor() - always use that instead of instantiating directly.
- * @constructor
- * @param {string} val The raw CSS string value for the color
- */
-PIE.Color = (function() {
- var instances = {};
-
- function Color( val ) {
- this.val = val;
- }
-
- /**
- * Regular expression for matching rgba colors and extracting their components
- * @type {RegExp}
- */
- 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.prototype = {
- /**
- * @private
- */
- parse: function() {
- if( !this._color ) {
- var me = this,
- v = me.val,
- vLower,
- m = v.match( Color.rgbaRE );
- if( m ) {
- me._color = 'rgb(' + m[1] + ',' + m[2] + ',' + m[3] + ')';
- me._alpha = parseFloat( m[4] );
- }
- else {
- if( ( vLower = v.toLowerCase() ) in Color.names ) {
- v = '#' + Color.names[vLower];
- }
- me._color = v;
- me._alpha = ( v === 'transparent' ? 0 : 1 );
- }
- }
- },
-
- /**
- * Retrieve the value of the color in a format usable by IE natively. This will be the same as
- * the raw input value, except for rgba values which will be converted to an rgb value.
- * @param {Element} el The context element, used to get 'currentColor' keyword value.
- * @return {string} Color value
- */
- colorValue: function( el ) {
- this.parse();
- return this._color === 'currentColor' ? el.currentStyle.color : this._color;
- },
-
- /**
- * Retrieve the alpha value of the color. Will be 1 for all values except for rgba values
- * with an alpha component.
- * @return {number} The alpha value, from 0 to 1.
- */
- alpha: function() {
- this.parse();
- return this._alpha;
- }
- };
-
-
- /**
- * Retrieve a PIE.Color instance for the given value. A shared singleton instance is returned for each unique value.
- * @param {string} val The CSS string representing the color. It is assumed that this will already have
- * been validated as a valid color syntax.
- */
- PIE.getColor = function(val) {
- return instances[ val ] || ( instances[ val ] = new Color( val ) );
- };
-
- return Color;
-})();/**
- * A tokenizer for CSS value strings.
- * @constructor
- * @param {string} css The CSS value string
- */
-PIE.Tokenizer = (function() {
- function Tokenizer( css ) {
- this.css = css;
- this.ch = 0;
- this.tokens = [];
- this.tokenIndex = 0;
- }
-
- /**
- * Enumeration of token type constants.
- * @enum {number}
- */
- var Type = Tokenizer.Type = {
- ANGLE: 1,
- CHARACTER: 2,
- COLOR: 4,
- DIMEN: 8,
- FUNCTION: 16,
- IDENT: 32,
- LENGTH: 64,
- NUMBER: 128,
- OPERATOR: 256,
- PERCENT: 512,
- STRING: 1024,
- URL: 2048
- };
-
- /**
- * A single token
- * @constructor
- * @param {number} type The type of the token - see PIE.Tokenizer.Type
- * @param {string} value The value of the token
- */
- Tokenizer.Token = function( type, value ) {
- this.tokenType = type;
- this.tokenValue = value;
- };
- Tokenizer.Token.prototype = {
- isLength: function() {
- return this.tokenType & Type.LENGTH || ( this.tokenType & Type.NUMBER && this.tokenValue === '0' );
- },
- isLengthOrPercent: function() {
- return this.isLength() || this.tokenType & Type.PERCENT;
- }
- };
-
- Tokenizer.prototype = {
- whitespace: /\s/,
- number: /^[\+\-]?(\d*\.)?\d+/,
- url: /^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,
- ident: /^\-?[_a-z][\w-]*/i,
- string: /^("([^"]*)"|'([^']*)')/,
- operator: /^[\/,]/,
- hash: /^#[\w]+/,
- hashColor: /^#([\da-f]{6}|[\da-f]{3})/i,
-
- unitTypes: {
- 'px': Type.LENGTH, 'em': Type.LENGTH, 'ex': Type.LENGTH,
- 'mm': Type.LENGTH, 'cm': Type.LENGTH, 'in': Type.LENGTH,
- 'pt': Type.LENGTH, 'pc': Type.LENGTH,
- 'deg': Type.ANGLE, 'rad': Type.ANGLE, 'grad': Type.ANGLE
- },
-
- colorFunctions: {
- 'rgb': 1, 'rgba': 1, 'hsl': 1, 'hsla': 1
- },
-
-
- /**
- * Advance to and return the next token in the CSS string. If the end of the CSS string has
- * been reached, null will be returned.
- * @param {boolean} forget - if true, the token will not be stored for the purposes of backtracking with prev().
- * @return {PIE.Tokenizer.Token}
- */
- next: function( forget ) {
- var css, ch, firstChar, match, val,
- me = this;
-
- function newToken( type, value ) {
- var tok = new Tokenizer.Token( type, value );
- if( !forget ) {
- me.tokens.push( tok );
- me.tokenIndex++;
- }
- return tok;
- }
- function failure() {
- me.tokenIndex++;
- return null;
- }
-
- // In case we previously backed up, return the stored token in the next slot
- if( this.tokenIndex < this.tokens.length ) {
- return this.tokens[ this.tokenIndex++ ];
- }
-
- // Move past leading whitespace characters
- while( this.whitespace.test( this.css.charAt( this.ch ) ) ) {
- this.ch++;
- }
- if( this.ch >= this.css.length ) {
- return failure();
- }
-
- ch = this.ch;
- css = this.css.substring( this.ch );
- firstChar = css.charAt( 0 );
- switch( firstChar ) {
- case '#':
- if( match = css.match( this.hashColor ) ) {
- this.ch += match[0].length;
- return newToken( Type.COLOR, match[0] );
- }
- break;
-
- case '"':
- case "'":
- if( match = css.match( this.string ) ) {
- this.ch += match[0].length;
- return newToken( Type.STRING, match[2] || match[3] || '' );
- }
- break;
-
- case "/":
- case ",":
- this.ch++;
- return newToken( Type.OPERATOR, firstChar );
-
- case 'u':
- if( match = css.match( this.url ) ) {
- this.ch += match[0].length;
- return newToken( Type.URL, match[2] || match[3] || match[4] || '' );
- }
- }
-
- // Numbers and values starting with numbers
- if( match = css.match( this.number ) ) {
- val = match[0];
- this.ch += val.length;
-
- // Check if it is followed by a unit
- if( css.charAt( val.length ) === '%' ) {
- this.ch++;
- return newToken( Type.PERCENT, val + '%' );
- }
- if( match = css.substring( val.length ).match( this.ident ) ) {
- val += match[0];
- this.ch += match[0].length;
- return newToken( this.unitTypes[ match[0].toLowerCase() ] || Type.DIMEN, val );
- }
-
- // Plain ol' number
- return newToken( Type.NUMBER, val );
- }
-
- // Identifiers
- if( match = css.match( this.ident ) ) {
- val = match[0];
- this.ch += val.length;
-
- // Named colors
- if( val.toLowerCase() in PIE.Color.names || val === 'currentColor' || val === 'transparent' ) {
- return newToken( Type.COLOR, val );
- }
-
- // Functions
- if( css.charAt( val.length ) === '(' ) {
- this.ch++;
-
- // Color values in function format: rgb, rgba, hsl, hsla
- if( val.toLowerCase() in this.colorFunctions ) {
- function isNum( tok ) {
- return tok && tok.tokenType & Type.NUMBER;
- }
- function isNumOrPct( tok ) {
- return tok && ( tok.tokenType & ( Type.NUMBER | Type.PERCENT ) );
- }
- function isValue( tok, val ) {
- return tok && tok.tokenValue === val;
- }
- function next() {
- return me.next( 1 );
- }
-
- if( ( val.charAt(0) === 'r' ? isNumOrPct( next() ) : isNum( next() ) ) &&
- isValue( next(), ',' ) &&
- isNumOrPct( next() ) &&
- isValue( next(), ',' ) &&
- isNumOrPct( next() ) &&
- ( val === 'rgb' || val === 'hsa' || (
- isValue( next(), ',' ) &&
- isNum( next() )
- ) ) &&
- isValue( next(), ')' ) ) {
- return newToken( Type.COLOR, this.css.substring( ch, this.ch ) );
- }
- return failure();
- }
-
- return newToken( Type.FUNCTION, val );
- }
-
- // Other identifier
- return newToken( Type.IDENT, val );
- }
-
- // Standalone character
- this.ch++;
- return newToken( Type.CHARACTER, firstChar );
- },
-
- /**
- * Determine whether there is another token
- * @return {boolean}
- */
- hasNext: function() {
- var next = this.next();
- this.prev();
- return !!next;
- },
-
- /**
- * Back up and return the previous token
- * @return {PIE.Tokenizer.Token}
- */
- prev: function() {
- return this.tokens[ this.tokenIndex-- - 2 ];
- },
-
- /**
- * Retrieve all the tokens in the CSS string
- * @return {Array.<PIE.Tokenizer.Token>}
- */
- all: function() {
- while( this.next() ) {}
- return this.tokens;
- },
-
- /**
- * Return a list of tokens from the current position until the given function returns
- * true. The final token will not be included in the list.
- * @param {function():boolean} func - test function
- * @param {boolean} require - if true, then if the end of the CSS string is reached
- * before the test function returns true, null will be returned instead of the
- * tokens that have been found so far.
- * @return {Array.<PIE.Tokenizer.Token>}
- */
- until: function( func, require ) {
- var list = [], t, hit;
- while( t = this.next() ) {
- if( func( t ) ) {
- hit = true;
- this.prev();
- break;
- }
- list.push( t );
- }
- return require && !hit ? null : list;
- }
- };
-
- return Tokenizer;
-})();/**
- * Handles calculating, caching, and detecting changes to size and position of the element.
- * @constructor
- * @param {Element} el the target element
- */
-PIE.BoundsInfo = function( el ) {
- this.targetElement = el;
-};
-PIE.BoundsInfo.prototype = {
-
- _locked: 0,
-
- positionChanged: function() {
- var last = this._lastBounds,
- bounds;
- return !last || ( ( bounds = this.getBounds() ) && ( last.x !== bounds.x || last.y !== bounds.y ) );
- },
-
- sizeChanged: function() {
- var last = this._lastBounds,
- bounds;
- return !last || ( ( bounds = this.getBounds() ) && ( last.w !== bounds.w || last.h !== bounds.h ) );
- },
-
- getLiveBounds: function() {
- var el = this.targetElement,
- rect = el.getBoundingClientRect(),
- 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. 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
- };
- },
-
- getBounds: function() {
- return this._locked ?
- ( this._lockedBounds || ( this._lockedBounds = this.getLiveBounds() ) ) :
- this.getLiveBounds();
- },
-
- hasBeenQueried: function() {
- return !!this._lastBounds;
- },
-
- lock: function() {
- ++this._locked;
- },
-
- unlock: function() {
- if( !--this._locked ) {
- if( this._lockedBounds ) this._lastBounds = this._lockedBounds;
- this._lockedBounds = null;
- }
- }
-
-};
-(function() {
-
-function cacheWhenLocked( fn ) {
- var uid = PIE.Util.getUID( fn );
- return function() {
- if( this._locked ) {
- var cache = this._lockedValues || ( this._lockedValues = {} );
- return ( uid in cache ) ? cache[ uid ] : ( cache[ uid ] = fn.call( this ) );
- } else {
- return fn.call( this );
- }
- }
-}
-
-
-PIE.StyleInfoBase = {
-
- _locked: 0,
-
- /**
- * Create a new StyleInfo class, with the standard constructor, and augmented by
- * the StyleInfoBase's members.
- * @param proto
- */
- newStyleInfo: function( proto ) {
- function StyleInfo( el ) {
- this.targetElement = el;
- this._lastCss = this.getCss();
- }
- PIE.Util.merge( StyleInfo.prototype, PIE.StyleInfoBase, proto );
- StyleInfo._propsCache = {};
- return StyleInfo;
- },
-
- /**
- * Get an object representation of the target CSS style, caching it for each unique
- * CSS value string.
- * @return {Object}
- */
- getProps: function() {
- var css = this.getCss(),
- cache = this.constructor._propsCache;
- return css ? ( css in cache ? cache[ css ] : ( cache[ css ] = this.parseCss( css ) ) ) : null;
- },
-
- /**
- * Get the raw CSS value for the target style
- * @return {string}
- */
- getCss: cacheWhenLocked( function() {
- var el = this.targetElement,
- ctor = this.constructor,
- s = el.style,
- cs = el.currentStyle,
- cssProp = this.cssProperty,
- styleProp = this.styleProperty,
- prefixedCssProp = ctor._prefixedCssProp || ( ctor._prefixedCssProp = PIE.CSS_PREFIX + cssProp ),
- prefixedStyleProp = ctor._prefixedStyleProp || ( ctor._prefixedStyleProp = PIE.STYLE_PREFIX + styleProp.charAt(0).toUpperCase() + styleProp.substring(1) );
- return s[ prefixedStyleProp ] || cs.getAttribute( prefixedCssProp ) || s[ styleProp ] || cs.getAttribute( cssProp );
- } ),
-
- /**
- * Determine whether the target CSS style is active.
- * @return {boolean}
- */
- isActive: cacheWhenLocked( function() {
- return !!this.getProps();
- } ),
-
- /**
- * Determine whether the target CSS style has changed since the last time it was used.
- * @return {boolean}
- */
- changed: cacheWhenLocked( function() {
- var currentCss = this.getCss(),
- changed = currentCss !== this._lastCss;
- this._lastCss = currentCss;
- return changed;
- } ),
-
- cacheWhenLocked: cacheWhenLocked,
-
- lock: function() {
- ++this._locked;
- },
-
- unlock: function() {
- if( !--this._locked ) {
- delete this._lockedValues;
- }
- }
-};
-
-})();/**
- * Handles parsing, caching, and detecting changes to background (and -pie-background) CSS
- * @constructor
- * @param {Element} el the target element
- */
-PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
-
- cssProperty: PIE.CSS_PREFIX + 'background',
- styleProperty: PIE.STYLE_PREFIX + 'Background',
-
- attachIdents: { 'scroll':1, 'fixed':1, 'local':1 },
- repeatIdents: { 'repeat-x':1, 'repeat-y':1, 'repeat':1, 'no-repeat':1 },
- originAndClipIdents: { 'padding-box':1, 'border-box':1, 'content-box':1 },
- positionIdents: { 'top':1, 'right':1, 'bottom':1, 'left':1, 'center':1 },
- sizeIdents: { 'contain':1, 'cover':1 },
- propertyNames: {
- CLIP: 'backgroundClip',
- COLOR: 'backgroundColor',
- IMAGE: 'backgroundImage',
- ORIGIN: 'backgroundOrigin',
- POSITION: 'backgroundPosition',
- REPEAT: 'backgroundRepeat',
- SIZE: 'backgroundSize'
- },
-
- /**
- * For background styles, we support the -pie-background property but fall back to the standard
- * backround* properties. The reason we have to use the prefixed version is that IE natively
- * parses the standard properties and if it sees something it doesn't know how to parse, for example
- * multiple values or gradient definitions, it will throw that away and not make it available through
- * currentStyle.
- *
- * Format of return object:
- * {
- * color: <PIE.Color>,
- * bgImages: [
- * {
- * imgType: 'image',
- * imgUrl: 'image.png',
- * imgRepeat: <'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'>,
- * bgPosition: <PIE.BgPosition>,
- * bgAttachment: <'scroll' | 'fixed' | 'local'>,
- * bgOrigin: <'border-box' | 'padding-box' | 'content-box'>,
- * bgClip: <'border-box' | 'padding-box'>,
- * bgSize: <PIE.BgSize>,
- * origString: 'url(img.png) no-repeat top left'
- * },
- * {
- * imgType: 'linear-gradient',
- * gradientStart: <PIE.BgPosition>,
- * angle: <PIE.Angle>,
- * stops: [
- * { color: <PIE.Color>, offset: <PIE.Length> },
- * { color: <PIE.Color>, offset: <PIE.Length> }, ...
- * ]
- * }
- * ]
- * }
- * @param {String} css
- * @override
- */
- parseCss: function( css ) {
- var el = this.targetElement,
- cs = el.currentStyle,
- tokenizer, token, image,
- tok_type = PIE.Tokenizer.Type,
- type_operator = tok_type.OPERATOR,
- type_ident = tok_type.IDENT,
- type_color = tok_type.COLOR,
- tokType, tokVal,
- beginCharIndex = 0,
- positionIdents = this.positionIdents,
- gradient, stop, width, height,
- props = { bgImages: [] };
-
- function isBgPosToken( token ) {
- return token && token.isLengthOrPercent() || ( token.tokenType & type_ident && token.tokenValue in positionIdents );
- }
-
- function sizeToken( token ) {
- return token && ( ( token.isLengthOrPercent() && PIE.getLength( token.tokenValue ) ) || ( token.tokenValue === 'auto' && 'auto' ) );
- }
-
- // If the CSS3-specific -pie-background property is present, parse it
- if( this.getCss3() ) {
- tokenizer = new PIE.Tokenizer( css );
- image = {};
-
- while( token = tokenizer.next() ) {
- tokType = token.tokenType;
- tokVal = token.tokenValue;
-
- if( !image.imgType && tokType & tok_type.FUNCTION && tokVal === 'linear-gradient' ) {
- gradient = { stops: [], imgType: tokVal };
- stop = {};
- while( token = tokenizer.next() ) {
- tokType = token.tokenType;
- tokVal = token.tokenValue;
-
- // If we reached the end of the function and had at least 2 stops, flush the info
- if( tokType & tok_type.CHARACTER && tokVal === ')' ) {
- if( stop.color ) {
- gradient.stops.push( stop );
- }
- if( gradient.stops.length > 1 ) {
- PIE.Util.merge( image, gradient );
- }
- break;
- }
-
- // Color stop - must start with color
- if( tokType & type_color ) {
- // if we already have an angle/position, make sure that the previous token was a comma
- if( gradient.angle || gradient.gradientStart ) {
- token = tokenizer.prev();
- if( token.tokenType !== type_operator ) {
- break; //fail
- }
- tokenizer.next();
- }
-
- stop = {
- color: PIE.getColor( tokVal )
- };
- // check for offset following color
- token = tokenizer.next();
- if( token.isLengthOrPercent() ) {
- stop.offset = PIE.getLength( token.tokenValue );
- } else {
- tokenizer.prev();
- }
- }
- // Angle - can only appear in first spot
- else if( tokType & tok_type.ANGLE && !gradient.angle && !stop.color && !gradient.stops.length ) {
- gradient.angle = new PIE.Angle( token.tokenValue );
- }
- else if( isBgPosToken( token ) && !gradient.gradientStart && !stop.color && !gradient.stops.length ) {
- tokenizer.prev();
- gradient.gradientStart = new PIE.BgPosition(
- tokenizer.until( function( t ) {
- return !isBgPosToken( t );
- }, false )
- );
- }
- else if( tokType & type_operator && tokVal === ',' ) {
- if( stop.color ) {
- gradient.stops.push( stop );
- stop = {};
- }
- }
- else {
- // Found something we didn't recognize; fail without adding image
- break;
- }
- }
- }
- else if( !image.imgType && tokType & tok_type.URL ) {
- image.imgUrl = tokVal;
- image.imgType = 'image';
- }
- else if( isBgPosToken( token ) && !image.bgPosition ) {
- tokenizer.prev();
- image.bgPosition = new PIE.BgPosition(
- tokenizer.until( function( t ) {
- return !isBgPosToken( t );
- }, false )
- );
- }
- else if( tokType & type_ident ) {
- if( tokVal in this.repeatIdents && !image.imgRepeat ) {
- image.imgRepeat = tokVal;
- }
- else if( tokVal in this.originAndClipIdents && !image.bgOrigin ) {
- image.bgOrigin = tokVal;
- if( ( token = tokenizer.next() ) && ( token.tokenType & type_ident ) &&
- token.tokenValue in this.originAndClipIdents ) {
- image.bgClip = token.tokenValue;
- } else {
- image.bgClip = tokVal;
- tokenizer.prev();
- }
- }
- else if( tokVal in this.attachIdents && !image.bgAttachment ) {
- image.bgAttachment = tokVal;
- }
- else {
- return null;
- }
- }
- else if( tokType & type_color && !props.color ) {
- props.color = PIE.getColor( tokVal );
- }
- else if( tokType & type_operator && tokVal === '/' && !image.bgSize && image.bgPosition ) {
- // background size
- token = tokenizer.next();
- if( token.tokenType & type_ident && token.tokenValue in this.sizeIdents ) {
- image.bgSize = new PIE.BgSize( token.tokenValue );
- }
- else if( width = sizeToken( token ) ) {
- height = sizeToken( tokenizer.next() );
- if ( !height ) {
- height = width;
- tokenizer.prev();
- }
- image.bgSize = new PIE.BgSize( width, height );
- }
- else {
- return null;
- }
- }
- // new layer
- else if( tokType & type_operator && tokVal === ',' && image.imgType ) {
- image.origString = css.substring( beginCharIndex, tokenizer.ch - 1 );
- beginCharIndex = tokenizer.ch;
- props.bgImages.push( image );
- image = {};
- }
- else {
- // Found something unrecognized; chuck everything
- return null;
- }
- }
-
- // leftovers
- if( image.imgType ) {
- image.origString = css.substring( beginCharIndex );
- props.bgImages.push( image );
- }
- }
-
- // Otherwise, use the standard background properties; let IE give us the values rather than parsing them
- else {
- this.withActualBg( PIE.ieDocMode < 9 ?
- function() {
- var propNames = this.propertyNames,
- posX = cs[propNames.POSITION + 'X'],
- posY = cs[propNames.POSITION + 'Y'],
- img = cs[propNames.IMAGE],
- color = cs[propNames.COLOR];
-
- if( color !== 'transparent' ) {
- props.color = PIE.getColor( color )
- }
- if( img !== 'none' ) {
- props.bgImages = [ {
- imgType: 'image',
- imgUrl: new PIE.Tokenizer( img ).next().tokenValue,
- imgRepeat: cs[propNames.REPEAT],
- bgPosition: new PIE.BgPosition( new PIE.Tokenizer( posX + ' ' + posY ).all() )
- } ];
- }
- } :
- function() {
- var propNames = this.propertyNames,
- splitter = /\s*,\s*/,
- images = cs[propNames.IMAGE].split( splitter ),
- color = cs[propNames.COLOR],
- repeats, positions, origins, clips, sizes, i, len, image, sizeParts;
-
- if( color !== 'transparent' ) {
- props.color = PIE.getColor( color )
- }
-
- len = images.length;
- if( len && images[0] !== 'none' ) {
- repeats = cs[propNames.REPEAT].split( splitter );
- positions = cs[propNames.POSITION].split( splitter );
- origins = cs[propNames.ORIGIN].split( splitter );
- clips = cs[propNames.CLIP].split( splitter );
- sizes = cs[propNames.SIZE].split( splitter );
-
- props.bgImages = [];
- for( i = 0; i < len; i++ ) {
- image = images[ i ];
- if( image && image !== 'none' ) {
- sizeParts = sizes[i].split( ' ' );
- props.bgImages.push( {
- origString: image + ' ' + repeats[ i ] + ' ' + positions[ i ] + ' / ' + sizes[ i ] + ' ' +
- origins[ i ] + ' ' + clips[ i ],
- imgType: 'image',
- imgUrl: new PIE.Tokenizer( image ).next().tokenValue,
- imgRepeat: repeats[ i ],
- bgPosition: new PIE.BgPosition( new PIE.Tokenizer( positions[ i ] ).all() ),
- bgOrigin: origins[ i ],
- bgClip: clips[ i ],
- bgSize: new PIE.BgSize( sizeParts[ 0 ], sizeParts[ 1 ] )
- } );
- }
- }
- }
- }
- );
- }
-
- return ( props.color || props.bgImages[0] ) ? props : null;
- },
-
- /**
- * Execute a function with the actual background styles (not overridden with runtimeStyle
- * properties set by the renderers) available via currentStyle.
- * @param fn
- */
- withActualBg: function( fn ) {
- var isIE9 = PIE.ieDocMode > 8,
- propNames = this.propertyNames,
- rs = this.targetElement.runtimeStyle,
- rsImage = rs[propNames.IMAGE],
- rsColor = rs[propNames.COLOR],
- rsRepeat = rs[propNames.REPEAT],
- rsClip, rsOrigin, rsSize, rsPosition, ret;
-
- if( rsImage ) rs[propNames.IMAGE] = '';
- if( rsColor ) rs[propNames.COLOR] = '';
- if( rsRepeat ) rs[propNames.REPEAT] = '';
- if( isIE9 ) {
- rsClip = rs[propNames.CLIP];
- rsOrigin = rs[propNames.ORIGIN];
- rsPosition = rs[propNames.POSITION];
- rsSize = rs[propNames.SIZE];
- if( rsClip ) rs[propNames.CLIP] = '';
- if( rsOrigin ) rs[propNames.ORIGIN] = '';
- if( rsPosition ) rs[propNames.POSITION] = '';
- if( rsSize ) rs[propNames.SIZE] = '';
- }
-
- ret = fn.call( this );
-
- if( rsImage ) rs[propNames.IMAGE] = rsImage;
- if( rsColor ) rs[propNames.COLOR] = rsColor;
- if( rsRepeat ) rs[propNames.REPEAT] = rsRepeat;
- if( isIE9 ) {
- if( rsClip ) rs[propNames.CLIP] = rsClip;
- if( rsOrigin ) rs[propNames.ORIGIN] = rsOrigin;
- if( rsPosition ) rs[propNames.POSITION] = rsPosition;
- if( rsSize ) rs[propNames.SIZE] = rsSize;
- }
-
- return ret;
- },
-
- getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
- return this.getCss3() ||
- this.withActualBg( function() {
- var cs = this.targetElement.currentStyle,
- propNames = this.propertyNames;
- return cs[propNames.COLOR] + ' ' + cs[propNames.IMAGE] + ' ' + cs[propNames.REPEAT] + ' ' +
- cs[propNames.POSITION + 'X'] + ' ' + cs[propNames.POSITION + 'Y'];
- } );
- } ),
-
- getCss3: PIE.StyleInfoBase.cacheWhenLocked( function() {
- var el = this.targetElement;
- return el.style[ this.styleProperty ] || el.currentStyle.getAttribute( this.cssProperty );
- } ),
-
- /**
- * Tests if style.PiePngFix or the -pie-png-fix property is set to true in IE6.
- */
- isPngFix: function() {
- var val = 0, el;
- if( PIE.ieVersion < 7 ) {
- el = this.targetElement;
- val = ( '' + ( el.style[ PIE.STYLE_PREFIX + 'PngFix' ] || el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'png-fix' ) ) === 'true' );
- }
- return val;
- },
-
- /**
- * The isActive logic is slightly different, because getProps() always returns an object
- * even if it is just falling back to the native background properties. But we only want
- * to report is as being "active" if either the -pie-background override property is present
- * and parses successfully or '-pie-png-fix' is set to true in IE6.
- */
- isActive: PIE.StyleInfoBase.cacheWhenLocked( function() {
- return (this.getCss3() || this.isPngFix()) && !!this.getProps();
- } )
-
-} );/**
- * Handles parsing, caching, and detecting changes to border CSS
- * @constructor
- * @param {Element} el the target element
- */
-PIE.BorderStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
-
- sides: [ 'Top', 'Right', 'Bottom', 'Left' ],
- namedWidths: {
- 'thin': '1px',
- 'medium': '3px',
- 'thick': '5px'
- },
-
- parseCss: function( css ) {
- var w = {},
- s = {},
- c = {},
- active = false,
- colorsSame = true,
- stylesSame = true,
- widthsSame = true;
-
- this.withActualBorder( function() {
- var el = this.targetElement,
- cs = el.currentStyle,
- i = 0,
- style, color, width, lastStyle, lastColor, lastWidth, side, ltr;
- for( ; i < 4; i++ ) {
- side = this.sides[ i ];
-
- ltr = side.charAt(0).toLowerCase();
- style = s[ ltr ] = cs[ 'border' + side + 'Style' ];
- color = cs[ 'border' + side + 'Color' ];
- width = cs[ 'border' + side + 'Width' ];
-
- if( i > 0 ) {
- if( style !== lastStyle ) { stylesSame = false; }
- if( color !== lastColor ) { colorsSame = false; }
- if( width !== lastWidth ) { widthsSame = false; }
- }
- lastStyle = style;
- lastColor = color;
- lastWidth = width;
-
- c[ ltr ] = PIE.getColor( color );
-
- width = w[ ltr ] = PIE.getLength( s[ ltr ] === 'none' ? '0' : ( this.namedWidths[ width ] || width ) );
- if( width.pixels( this.targetElement ) > 0 ) {
- active = true;
- }
- }
- } );
-
- return active ? {
- widths: w,
- styles: s,
- colors: c,
- widthsSame: widthsSame,
- colorsSame: colorsSame,
- stylesSame: stylesSame
- } : null;
- },
-
- getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
- var el = this.targetElement,
- cs = el.currentStyle,
- css;
-
- // Don't redraw or hide borders for cells in border-collapse:collapse tables
- if( !( el.tagName in PIE.tableCellTags && el.offsetParent.currentStyle.borderCollapse === 'collapse' ) ) {
- this.withActualBorder( function() {
- css = cs.borderWidth + '|' + cs.borderStyle + '|' + cs.borderColor;
- } );
- }
- return css;
- } ),
-
- /**
- * Execute a function with the actual border styles (not overridden with runtimeStyle
- * properties set by the renderers) available via currentStyle.
- * @param fn
- */
- withActualBorder: function( fn ) {
- var rs = this.targetElement.runtimeStyle,
- rsWidth = rs.borderWidth,
- rsColor = rs.borderColor,
- ret;
-
- if( rsWidth ) rs.borderWidth = '';
- if( rsColor ) rs.borderColor = '';
-
- ret = fn.call( this );
-
- if( rsWidth ) rs.borderWidth = rsWidth;
- if( rsColor ) rs.borderColor = rsColor;
-
- return ret;
- }
-
-} );
-/**
- * Handles parsing, caching, and detecting changes to border-radius CSS
- * @constructor
- * @param {Element} el the target element
- */
-(function() {
-
-PIE.BorderRadiusStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
-
- cssProperty: 'border-radius',
- styleProperty: 'borderRadius',
-
- parseCss: function( css ) {
- var p = null, x, y,
- tokenizer, token, length,
- hasNonZero = false;
-
- if( css ) {
- tokenizer = new PIE.Tokenizer( css );
-
- function collectLengths() {
- var arr = [], num;
- while( ( token = tokenizer.next() ) && token.isLengthOrPercent() ) {
- length = PIE.getLength( token.tokenValue );
- num = length.getNumber();
- if( num < 0 ) {
- return null;
- }
- if( num > 0 ) {
- hasNonZero = true;
- }
- arr.push( length );
- }
- return arr.length > 0 && arr.length < 5 ? {
- 'tl': arr[0],
- 'tr': arr[1] || arr[0],
- 'br': arr[2] || arr[0],
- 'bl': arr[3] || arr[1] || arr[0]
- } : null;
- }
-
- // Grab the initial sequence of lengths
- if( x = collectLengths() ) {
- // See if there is a slash followed by more lengths, for the y-axis radii
- if( token ) {
- if( token.tokenType & PIE.Tokenizer.Type.OPERATOR && token.tokenValue === '/' ) {
- y = collectLengths();
- }
- } else {
- y = x;
- }
-
- // Treat all-zero values the same as no value
- if( hasNonZero && x && y ) {
- p = { x: x, y : y };
- }
- }
- }
-
- return p;
- }
-} );
-
-var zero = PIE.getLength( '0' ),
- zeros = { 'tl': zero, 'tr': zero, 'br': zero, 'bl': zero };
-PIE.BorderRadiusStyleInfo.ALL_ZERO = { x: zeros, y: zeros };
-
-})();/**
- * Handles parsing, caching, and detecting changes to border-image CSS
- * @constructor
- * @param {Element} el the target element
- */
-PIE.BorderImageStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
-
- cssProperty: 'border-image',
- styleProperty: 'borderImage',
-
- repeatIdents: { 'stretch':1, 'round':1, 'repeat':1, 'space':1 },
-
- parseCss: function( css ) {
- var p = null, tokenizer, token, type, value,
- slices, widths, outsets,
- slashCount = 0,
- Type = PIE.Tokenizer.Type,
- IDENT = Type.IDENT,
- NUMBER = Type.NUMBER,
- PERCENT = Type.PERCENT;
-
- if( css ) {
- tokenizer = new PIE.Tokenizer( css );
- p = {};
-
- function isSlash( token ) {
- return token && ( token.tokenType & Type.OPERATOR ) && ( token.tokenValue === '/' );
- }
-
- function isFillIdent( token ) {
- return token && ( token.tokenType & IDENT ) && ( token.tokenValue === 'fill' );
- }
-
- function collectSlicesEtc() {
- slices = tokenizer.until( function( tok ) {
- return !( tok.tokenType & ( NUMBER | PERCENT ) );
- } );
-
- if( isFillIdent( tokenizer.next() ) && !p.fill ) {
- p.fill = true;
- } else {
- tokenizer.prev();
- }
-
- if( isSlash( tokenizer.next() ) ) {
- slashCount++;
- widths = tokenizer.until( function( token ) {
- return !token.isLengthOrPercent() && !( ( token.tokenType & IDENT ) && token.tokenValue === 'auto' );
- } );
-
- if( isSlash( tokenizer.next() ) ) {
- slashCount++;
- outsets = tokenizer.until( function( token ) {
- return !token.isLength();
- } );
- }
- } else {
- tokenizer.prev();
- }
- }
-
- while( token = tokenizer.next() ) {
- type = token.tokenType;
- value = token.tokenValue;
-
- // Numbers and/or 'fill' keyword: slice values. May be followed optionally by width values, followed optionally by outset values
- if( type & ( NUMBER | PERCENT ) && !slices ) {
- tokenizer.prev();
- collectSlicesEtc();
- }
- else if( isFillIdent( token ) && !p.fill ) {
- p.fill = true;
- collectSlicesEtc();
- }
-
- // Idents: one or values for 'repeat'
- else if( ( type & IDENT ) && this.repeatIdents[value] && !p.repeat ) {
- p.repeat = { h: value };
- if( token = tokenizer.next() ) {
- if( ( token.tokenType & IDENT ) && this.repeatIdents[token.tokenValue] ) {
- p.repeat.v = token.tokenValue;
- } else {
- tokenizer.prev();
- }
- }
- }
-
- // URL of the image
- else if( ( type & Type.URL ) && !p.src ) {
- p.src = value;
- }
-
- // Found something unrecognized; exit.
- else {
- return null;
- }
- }
-
- // Validate what we collected
- if( !p.src || !slices || slices.length < 1 || slices.length > 4 ||
- ( widths && widths.length > 4 ) || ( slashCount === 1 && widths.length < 1 ) ||
- ( outsets && outsets.length > 4 ) || ( slashCount === 2 && outsets.length < 1 ) ) {
- return null;
- }
-
- // Fill in missing values
- if( !p.repeat ) {
- p.repeat = { h: 'stretch' };
- }
- if( !p.repeat.v ) {
- p.repeat.v = p.repeat.h;
- }
-
- function distributeSides( tokens, convertFn ) {
- return {
- 't': convertFn( tokens[0] ),
- 'r': convertFn( tokens[1] || tokens[0] ),
- 'b': convertFn( tokens[2] || tokens[0] ),
- 'l': convertFn( tokens[3] || tokens[1] || tokens[0] )
- };
- }
-
- p.slice = distributeSides( slices, function( tok ) {
- return PIE.getLength( ( tok.tokenType & NUMBER ) ? tok.tokenValue + 'px' : tok.tokenValue );
- } );
-
- if( widths && widths[0] ) {
- p.widths = distributeSides( widths, function( tok ) {
- return tok.isLengthOrPercent() ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
- } );
- }
-
- if( outsets && outsets[0] ) {
- p.outset = distributeSides( outsets, function( tok ) {
- return tok.isLength() ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
- } );
- }
- }
-
- return p;
- }
-
-} );/**
- * Handles parsing, caching, and detecting changes to box-shadow CSS
- * @constructor
- * @param {Element} el the target element
- */
-PIE.BoxShadowStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
-
- cssProperty: 'box-shadow',
- styleProperty: 'boxShadow',
-
- parseCss: function( css ) {
- var props,
- getLength = PIE.getLength,
- Type = PIE.Tokenizer.Type,
- tokenizer;
-
- if( css ) {
- tokenizer = new PIE.Tokenizer( css );
- props = { outset: [], inset: [] };
-
- function parseItem() {
- var token, type, value, color, lengths, inset, len;
-
- while( token = tokenizer.next() ) {
- value = token.tokenValue;
- type = token.tokenType;
-
- if( type & Type.OPERATOR && value === ',' ) {
- break;
- }
- else if( token.isLength() && !lengths ) {
- tokenizer.prev();
- lengths = tokenizer.until( function( token ) {
- return !token.isLength();
- } );
- }
- else if( type & Type.COLOR && !color ) {
- color = value;
- }
- else if( type & Type.IDENT && value === 'inset' && !inset ) {
- inset = true;
- }
- else { //encountered an unrecognized token; fail.
- return false;
- }
- }
-
- len = lengths && lengths.length;
- if( len > 1 && len < 5 ) {
- ( inset ? props.inset : props.outset ).push( {
- xOffset: getLength( lengths[0].tokenValue ),
- yOffset: getLength( lengths[1].tokenValue ),
- blur: getLength( lengths[2] ? lengths[2].tokenValue : '0' ),
- spread: getLength( lengths[3] ? lengths[3].tokenValue : '0' ),
- color: PIE.getColor( color || 'currentColor' )
- } );
- return true;
- }
- return false;
- }
-
- while( parseItem() ) {}
- }
-
- return props && ( props.inset.length || props.outset.length ) ? props : null;
- }
-} );
-/**
- * Retrieves the state of the element's visibility and display
- * @constructor
- * @param {Element} el the target element
- */
-PIE.VisibilityStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
-
- getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
- var cs = this.targetElement.currentStyle;
- return cs.visibility + '|' + cs.display;
- } ),
-
- parseCss: function() {
- var el = this.targetElement,
- rs = el.runtimeStyle,
- cs = el.currentStyle,
- rsVis = rs.visibility,
- csVis;
-
- rs.visibility = '';
- csVis = cs.visibility;
- rs.visibility = rsVis;
-
- return {
- visible: csVis !== 'hidden',
- displayed: cs.display !== 'none'
- }
- },
-
- /**
- * Always return false for isActive, since this property alone will not trigger
- * a renderer to do anything.
- */
- isActive: function() {
- return false;
- }
-
-} );
-PIE.RendererBase = {
-
- /**
- * Create a new Renderer class, with the standard constructor, and augmented by
- * the RendererBase's members.
- * @param proto
- */
- newRenderer: function( proto ) {
- function Renderer( el, boundsInfo, styleInfos, parent ) {
- this.targetElement = el;
- this.boundsInfo = boundsInfo;
- this.styleInfos = styleInfos;
- this.parent = parent;
- }
- PIE.Util.merge( Renderer.prototype, PIE.RendererBase, proto );
- return Renderer;
- },
-
- /**
- * Flag indicating the element has already been positioned at least once.
- * @type {boolean}
- */
- isPositioned: false,
-
- /**
- * Determine if the renderer needs to be updated
- * @return {boolean}
- */
- needsUpdate: function() {
- return false;
- },
-
- /**
- * Run any preparation logic that would affect the main update logic of this
- * renderer or any of the other renderers, e.g. things that might affect the
- * element's size or style properties.
- */
- prepareUpdate: PIE.emptyFn,
-
- /**
- * Tell the renderer to update based on modified properties
- */
- updateProps: function() {
- this.destroy();
- if( this.isActive() ) {
- this.draw();
- }
- },
-
- /**
- * Tell the renderer to update based on modified element position
- */
- updatePos: function() {
- this.isPositioned = true;
- },
-
- /**
- * Tell the renderer to update based on modified element dimensions
- */
- updateSize: function() {
- if( this.isActive() ) {
- this.draw();
- } else {
- this.destroy();
- }
- },
-
-
- /**
- * 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;
- }
-};
-/**
- * Root renderer; creates the outermost container element and handles keeping it aligned
- * with the target element's size and position.
- * @param {Element} el The target element
- * @param {Object} styleInfos The StyleInfo objects
- */
-PIE.RootRenderer = PIE.RendererBase.newRenderer( {
-
- isActive: function() {
- var children = this.childRenderers;
- for( var i in children ) {
- if( children.hasOwnProperty( i ) && children[ i ].isActive() ) {
- return true;
- }
- }
- return false;
- },
-
- needsUpdate: function() {
- return this.styleInfos.visibilityInfo.changed();
- },
-
- updatePos: function() {
- if( this.isActive() ) {
- var el = this.getPositioningElement(),
- par = el,
- docEl,
- parRect,
- tgtCS = el.currentStyle,
- tgtPos = tgtCS.position,
- boxPos,
- s = this.getBox().style, cs,
- x = 0, y = 0,
- elBounds = this.boundsInfo.getBounds(),
- logicalZoomRatio = elBounds.logicalZoomRatio;
-
- if( tgtPos === 'fixed' && PIE.ieVersion > 6 ) {
- x = elBounds.x * logicalZoomRatio;
- y = elBounds.y * logicalZoomRatio;
- boxPos = tgtPos;
- } else {
- // Get the element's offsets from its nearest positioned ancestor. Uses
- // getBoundingClientRect for accuracy and speed.
- do {
- par = par.offsetParent;
- } while( par && ( par.currentStyle.position === 'static' ) );
- if( par ) {
- parRect = par.getBoundingClientRect();
- cs = par.currentStyle;
- 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 ) * logicalZoomRatio;
- y = ( elBounds.y + docEl.scrollTop - docEl.clientTop ) * logicalZoomRatio;
- }
- boxPos = 'absolute';
- }
-
- s.position = boxPos;
- s.left = x;
- s.top = y;
- s.zIndex = tgtPos === 'static' ? -1 : tgtCS.zIndex;
- this.isPositioned = true;
- }
- },
-
- updateSize: PIE.emptyFn,
-
- updateVisibility: function() {
- var vis = this.styleInfos.visibilityInfo.getProps();
- this.getBox().style.display = ( vis.visible && vis.displayed ) ? '' : 'none';
- },
-
- updateProps: function() {
- if( this.isActive() ) {
- this.updateVisibility();
- } else {
- this.destroy();
- }
- },
-
- getPositioningElement: function() {
- var el = this.targetElement;
- return el.tagName in PIE.tableCellTags ? el.offsetParent : el;
- },
-
- getBox: function() {
- var box = this._box, el;
- if( !box ) {
- el = this.getPositioningElement();
- box = this._box = doc.createElement( 'css3-container' );
- box.style['direction'] = 'ltr'; //fix positioning bug in rtl environments
-
- this.updateVisibility();
-
- el.parentNode.insertBefore( box, el );
- }
- return box;
- },
-
- finishUpdate: PIE.emptyFn,
-
- destroy: function() {
- var box = this._box, par;
- if( box && ( par = box.parentNode ) ) {
- par.removeChild( box );
- }
- delete this._box;
- delete this._layers;
- }
-
-} );
-/**
- * Renderer for element backgrounds.
- * @constructor
- * @param {Element} el The target element
- * @param {Object} styleInfos The StyleInfo objects
- * @param {PIE.RootRenderer} parent
- */
-PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
-
- boxZIndex: 2,
- boxName: 'background',
-
- needsUpdate: function() {
- var si = this.styleInfos;
- return si.backgroundInfo.changed() || si.borderRadiusInfo.changed();
- },
-
- isActive: function() {
- var si = this.styleInfos;
- return si.borderImageInfo.isActive() ||
- si.borderRadiusInfo.isActive() ||
- si.backgroundInfo.isActive() ||
- ( si.boxShadowInfo.isActive() && si.boxShadowInfo.getProps().inset );
- },
-
- /**
- * Draw the shapes
- */
- draw: function() {
- var bounds = this.boundsInfo.getBounds();
- if( bounds.w && bounds.h ) {
- this.drawBgColor();
- this.drawBgImages();
- }
- },
-
- /**
- * Draw the background color shape
- */
- drawBgColor: function() {
- var props = this.styleInfos.backgroundInfo.getProps(),
- bounds = this.boundsInfo.getBounds(),
- el = this.targetElement,
- color = props && props.color,
- shape, w, h, s, alpha;
-
- if( color && color.alpha() > 0 ) {
- this.hideBackground();
-
- shape = this.getShape( 'bgColor', 'fill', this.getBox(), 1 );
- w = bounds.w;
- h = bounds.h;
- shape.stroked = false;
- shape.coordsize = w * 2 + ',' + h * 2;
- shape.coordorigin = '1,1';
- shape.path = this.getBoxPath( null, 2 );
- s = shape.style;
- s.width = w;
- s.height = h;
- shape.fill.color = color.colorValue( el );
-
- alpha = color.alpha();
- if( alpha < 1 ) {
- shape.fill.opacity = alpha;
- }
- } else {
- this.deleteShape( 'bgColor' );
- }
- },
-
- /**
- * Draw all the background image layers
- */
- drawBgImages: function() {
- var props = this.styleInfos.backgroundInfo.getProps(),
- bounds = this.boundsInfo.getBounds(),
- images = props && props.bgImages,
- img, shape, w, h, s, i;
-
- if( images ) {
- this.hideBackground();
-
- w = bounds.w;
- h = bounds.h;
-
- i = images.length;
- while( i-- ) {
- img = images[i];
- shape = this.getShape( 'bgImage' + i, 'fill', this.getBox(), 2 );
-
- shape.stroked = false;
- shape.fill.type = 'tile';
- shape.fillcolor = 'none';
- shape.coordsize = w * 2 + ',' + h * 2;
- shape.coordorigin = '1,1';
- shape.path = this.getBoxPath( 0, 2 );
- s = shape.style;
- s.width = w;
- s.height = h;
-
- if( img.imgType === 'linear-gradient' ) {
- this.addLinearGradient( shape, img );
- }
- else {
- shape.fill.src = img.imgUrl;
- this.positionBgImage( shape, i );
- }
- }
- }
-
- // Delete any bgImage shapes previously created which weren't used above
- i = images ? images.length : 0;
- while( this.deleteShape( 'bgImage' + i++ ) ) {}
- },
-
-
- /**
- * Set the position and clipping of the background image for a layer
- * @param {Element} shape
- * @param {number} index
- */
- positionBgImage: function( shape, index ) {
- var me = this;
- PIE.Util.withImageSize( shape.fill.src, function( size ) {
- var el = me.targetElement,
- bounds = me.boundsInfo.getBounds(),
- elW = bounds.w,
- elH = bounds.h;
-
- // 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 fill = shape.fill,
- si = me.styleInfos,
- border = si.borderInfo.getProps(),
- bw = border && border.widths,
- bwT = bw ? bw['t'].pixels( el ) : 0,
- bwR = bw ? bw['r'].pixels( el ) : 0,
- bwB = bw ? bw['b'].pixels( el ) : 0,
- bwL = bw ? bw['l'].pixels( el ) : 0,
- bg = si.backgroundInfo.getProps().bgImages[ index ],
- bgPos = bg.bgPosition ? bg.bgPosition.coords( el, elW - size.w - bwL - bwR, elH - size.h - bwT - bwB ) : { x:0, y:0 },
- repeat = bg.imgRepeat,
- pxX, pxY,
- clipT = 0, clipL = 0,
- clipR = elW + 1, clipB = elH + 1, //make sure the default clip region is not inside the box (by a subpixel)
- clipAdjust = PIE.ieVersion === 8 ? 0 : 1; //prior to IE8 requires 1 extra pixel in the image clip region
-
- // Positioning - find the pixel offset from the top/left and convert to a ratio
- // The position is shifted by half a pixel, to adjust for the half-pixel coordorigin shift which is
- // needed to fix antialiasing but makes the bg image fuzzy.
- pxX = Math.round( bgPos.x ) + bwL + 0.5;
- 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' ) {
- clipT = pxY + 1;
- clipB = pxY + size.h + clipAdjust;
- }
- if( repeat === 'repeat-y' || repeat === 'no-repeat' ) {
- clipL = pxX + 1;
- clipR = pxX + size.w + clipAdjust;
- }
- shape.style.clip = 'rect(' + clipT + 'px,' + clipR + 'px,' + clipB + 'px,' + clipL + 'px)';
- }
- }
- } );
- },
-
-
- /**
- * Draw the linear gradient for a gradient layer
- * @param {Element} shape
- * @param {Object} info The object holding the information about the gradient
- */
- addLinearGradient: function( shape, info ) {
- var el = this.targetElement,
- bounds = this.boundsInfo.getBounds(),
- w = bounds.w,
- h = bounds.h,
- fill = shape.fill,
- stops = info.stops,
- stopCount = stops.length,
- PI = Math.PI,
- GradientUtil = PIE.GradientUtil,
- perpendicularIntersect = GradientUtil.perpendicularIntersect,
- distance = GradientUtil.distance,
- metrics = GradientUtil.getGradientMetrics( el, w, h, info ),
- angle = metrics.angle,
- startX = metrics.startX,
- startY = metrics.startY,
- startCornerX = metrics.startCornerX,
- startCornerY = metrics.startCornerY,
- endCornerX = metrics.endCornerX,
- endCornerY = metrics.endCornerY,
- deltaX = metrics.deltaX,
- deltaY = metrics.deltaY,
- lineLength = metrics.lineLength,
- vmlAngle, vmlGradientLength, vmlColors,
- stopPx, vmlOffsetPct,
- p, i, j, before, after;
-
- // In VML land, the angle of the rendered gradient depends on the aspect ratio of the shape's
- // bounding box; for example specifying a 45 deg angle actually results in a gradient
- // drawn diagonally from one corner to its opposite corner, which will only appear to the
- // viewer as 45 degrees if the shape is equilateral. We adjust for this by taking the x/y deltas
- // between the start and end points, multiply one of them by the shape's aspect ratio,
- // and get their arctangent, resulting in an appropriate VML angle. If the angle is perfectly
- // horizontal or vertical then we don't need to do this conversion.
- vmlAngle = ( angle % 90 ) ? Math.atan2( deltaX * w / h, deltaY ) / PI * 180 : ( angle + 90 );
-
- // VML angles are 180 degrees offset from CSS angles
- vmlAngle += 180;
- vmlAngle = vmlAngle % 360;
-
- // Add all the stops to the VML 'colors' list, including the first and last stops.
- // For each, we find its pixel offset along the gradient-line; if the offset of a stop is less
- // than that of its predecessor we increase it to be equal. We then map that pixel offset to a
- // percentage along the VML gradient-line, which runs from shape corner to corner.
- p = perpendicularIntersect( startCornerX, startCornerY, angle, endCornerX, endCornerY );
- vmlGradientLength = distance( startCornerX, startCornerY, p[0], p[1] );
- vmlColors = [];
- p = perpendicularIntersect( startX, startY, angle, startCornerX, startCornerY );
- vmlOffsetPct = distance( startX, startY, p[0], p[1] ) / vmlGradientLength * 100;
-
- // Find the pixel offsets along the CSS3 gradient-line for each stop.
- stopPx = [];
- for( i = 0; i < stopCount; i++ ) {
- stopPx.push( stops[i].offset ? stops[i].offset.pixels( el, lineLength ) :
- i === 0 ? 0 : i === stopCount - 1 ? lineLength : null );
- }
- // Fill in gaps with evenly-spaced offsets
- for( i = 1; i < stopCount; i++ ) {
- if( stopPx[ i ] === null ) {
- before = stopPx[ i - 1 ];
- j = i;
- do {
- after = stopPx[ ++j ];
- } while( after === null );
- stopPx[ i ] = before + ( after - before ) / ( j - i + 1 );
- }
- // Make sure each stop's offset is no less than the one before it
- stopPx[ i ] = Math.max( stopPx[ i ], stopPx[ i - 1 ] );
- }
-
- // Convert to percentage along the VML gradient line and add to the VML 'colors' value
- for( i = 0; i < stopCount; i++ ) {
- vmlColors.push(
- ( vmlOffsetPct + ( stopPx[ i ] / vmlGradientLength * 100 ) ) + '% ' + stops[i].color.colorValue( el )
- );
- }
-
- // Now, finally, we're ready to render the gradient fill. Set the start and end colors to
- // the first and last stop colors; this just sets outer bounds for the gradient.
- fill['angle'] = vmlAngle;
- fill['type'] = 'gradient';
- fill['method'] = 'sigma';
- fill['color'] = stops[0].color.colorValue( el );
- fill['color2'] = stops[stopCount - 1].color.colorValue( el );
- if( fill['colors'] ) { //sometimes the colors object isn't initialized so we have to assign it directly (?)
- fill['colors'].value = vmlColors.join( ',' );
- } else {
- fill['colors'] = vmlColors.join( ',' );
- }
- },
-
-
- /**
- * Hide the actual background image and color of the element.
- */
- hideBackground: function() {
- var rs = this.targetElement.runtimeStyle;
- rs.backgroundImage = 'url(about:blank)'; //ensures the background area reacts to mouse events
- rs.backgroundColor = 'transparent';
- },
-
- destroy: function() {
- PIE.RendererBase.destroy.call( this );
- var rs = this.targetElement.runtimeStyle;
- rs.backgroundImage = rs.backgroundColor = '';
- }
-
-} );
-/**
- * Renderer for element borders.
- * @constructor
- * @param {Element} el The target element
- * @param {Object} styleInfos The StyleInfo objects
- * @param {PIE.RootRenderer} parent
- */
-PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
-
- boxZIndex: 4,
- boxName: 'border',
-
- needsUpdate: function() {
- var si = this.styleInfos;
- return si.borderInfo.changed() || si.borderRadiusInfo.changed();
- },
-
- isActive: function() {
- var si = this.styleInfos;
- return si.borderRadiusInfo.isActive() &&
- !si.borderImageInfo.isActive() &&
- si.borderInfo.isActive(); //check BorderStyleInfo last because it's the most expensive
- },
-
- /**
- * Draw the border shape(s)
- */
- draw: function() {
- var el = this.targetElement,
- props = this.styleInfos.borderInfo.getProps(),
- bounds = this.boundsInfo.getBounds(),
- w = bounds.w,
- h = bounds.h,
- shape, stroke, s,
- segments, seg, i, len;
-
- if( props ) {
- this.hideBorder();
-
- segments = this.getBorderSegments( 2 );
- for( i = 0, len = segments.length; i < len; i++) {
- seg = segments[i];
- shape = this.getShape( 'borderPiece' + i, seg.stroke ? 'stroke' : 'fill', this.getBox() );
- shape.coordsize = w * 2 + ',' + h * 2;
- shape.coordorigin = '1,1';
- shape.path = seg.path;
- s = shape.style;
- s.width = w;
- s.height = h;
-
- shape.filled = !!seg.fill;
- shape.stroked = !!seg.stroke;
- if( seg.stroke ) {
- stroke = shape.stroke;
- stroke['weight'] = seg.weight + 'px';
- stroke.color = seg.color.colorValue( el );
- stroke['dashstyle'] = seg.stroke === 'dashed' ? '2 2' : seg.stroke === 'dotted' ? '1 1' : 'solid';
- stroke['linestyle'] = seg.stroke === 'double' && seg.weight > 2 ? 'ThinThin' : 'Single';
- } else {
- shape.fill.color = seg.fill.colorValue( el );
- }
- }
-
- // remove any previously-created border shapes which didn't get used above
- while( this.deleteShape( 'borderPiece' + i++ ) ) {}
- }
- },
-
-
- /**
- * Get the VML path definitions for the border segment(s).
- * @param {number=} mult If specified, all coordinates will be multiplied by this number
- * @return {Array.<string>}
- */
- getBorderSegments: function( mult ) {
- var el = this.targetElement,
- bounds, elW, elH,
- borderInfo = this.styleInfos.borderInfo,
- segments = [],
- floor, ceil, wT, wR, wB, wL,
- round = Math.round,
- borderProps, radiusInfo, radii, widths, styles, colors;
-
- if( borderInfo.isActive() ) {
- borderProps = borderInfo.getProps();
-
- widths = borderProps.widths;
- styles = borderProps.styles;
- colors = borderProps.colors;
-
- if( borderProps.widthsSame && borderProps.stylesSame && borderProps.colorsSame ) {
- if( colors['t'].alpha() > 0 ) {
- // shortcut for identical border on all sides - only need 1 stroked shape
- wT = widths['t'].pixels( el ); //thickness
- wR = wT / 2; //shrink
- segments.push( {
- path: this.getBoxPath( { t: wR, r: wR, b: wR, l: wR }, mult ),
- stroke: styles['t'],
- color: colors['t'],
- weight: wT
- } );
- }
- }
- else {
- mult = mult || 1;
- bounds = this.boundsInfo.getBounds();
- elW = bounds.w;
- elH = bounds.h;
-
- wT = round( widths['t'].pixels( el ) );
- wR = round( widths['r'].pixels( el ) );
- wB = round( widths['b'].pixels( el ) );
- wL = round( widths['l'].pixels( el ) );
- var pxWidths = {
- 't': wT,
- 'r': wR,
- 'b': wB,
- 'l': wL
- };
-
- radiusInfo = this.styleInfos.borderRadiusInfo;
- if( radiusInfo.isActive() ) {
- radii = this.getRadiiPixels( radiusInfo.getProps() );
- }
-
- floor = Math.floor;
- ceil = Math.ceil;
-
- function radius( xy, corner ) {
- return radii ? radii[ xy ][ corner ] : 0;
- }
-
- function curve( corner, shrinkX, shrinkY, startAngle, ccw, doMove ) {
- var rx = radius( 'x', corner),
- ry = radius( 'y', corner),
- deg = 65535,
- isRight = corner.charAt( 1 ) === 'r',
- isBottom = corner.charAt( 0 ) === 'b';
- return ( rx > 0 && ry > 0 ) ?
- ( doMove ? 'al' : 'ae' ) +
- ( isRight ? ceil( elW - rx ) : floor( rx ) ) * mult + ',' + // center x
- ( isBottom ? ceil( elH - ry ) : floor( ry ) ) * mult + ',' + // center y
- ( floor( rx ) - shrinkX ) * mult + ',' + // width
- ( floor( ry ) - shrinkY ) * mult + ',' + // height
- ( startAngle * deg ) + ',' + // start angle
- ( 45 * deg * ( ccw ? 1 : -1 ) // angle change
- ) : (
- ( doMove ? 'm' : 'l' ) +
- ( isRight ? elW - shrinkX : shrinkX ) * mult + ',' +
- ( isBottom ? elH - shrinkY : shrinkY ) * mult
- );
- }
-
- function line( side, shrink, ccw, doMove ) {
- var
- start = (
- side === 't' ?
- floor( radius( 'x', 'tl') ) * mult + ',' + ceil( shrink ) * mult :
- side === 'r' ?
- ceil( elW - shrink ) * mult + ',' + floor( radius( 'y', 'tr') ) * mult :
- side === 'b' ?
- ceil( elW - radius( 'x', 'br') ) * mult + ',' + floor( elH - shrink ) * mult :
- // side === 'l' ?
- floor( shrink ) * mult + ',' + ceil( elH - radius( 'y', 'bl') ) * mult
- ),
- end = (
- side === 't' ?
- ceil( elW - radius( 'x', 'tr') ) * mult + ',' + ceil( shrink ) * mult :
- side === 'r' ?
- ceil( elW - shrink ) * mult + ',' + ceil( elH - radius( 'y', 'br') ) * mult :
- side === 'b' ?
- floor( radius( 'x', 'bl') ) * mult + ',' + floor( elH - shrink ) * mult :
- // side === 'l' ?
- floor( shrink ) * mult + ',' + floor( radius( 'y', 'tl') ) * mult
- );
- return ccw ? ( doMove ? 'm' + end : '' ) + 'l' + start :
- ( doMove ? 'm' + start : '' ) + 'l' + end;
- }
-
-
- function addSide( side, sideBefore, sideAfter, cornerBefore, cornerAfter, baseAngle ) {
- var vert = side === 'l' || side === 'r',
- sideW = pxWidths[ side ],
- beforeX, beforeY, afterX, afterY;
-
- if( sideW > 0 && styles[ side ] !== 'none' && colors[ side ].alpha() > 0 ) {
- beforeX = pxWidths[ vert ? side : sideBefore ];
- beforeY = pxWidths[ vert ? sideBefore : side ];
- afterX = pxWidths[ vert ? side : sideAfter ];
- afterY = pxWidths[ vert ? sideAfter : side ];
-
- if( styles[ side ] === 'dashed' || styles[ side ] === 'dotted' ) {
- segments.push( {
- path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) +
- curve( cornerBefore, 0, 0, baseAngle, 1, 0 ),
- fill: colors[ side ]
- } );
- segments.push( {
- path: line( side, sideW / 2, 0, 1 ),
- stroke: styles[ side ],
- weight: sideW,
- color: colors[ side ]
- } );
- segments.push( {
- path: curve( cornerAfter, afterX, afterY, baseAngle, 0, 1 ) +
- curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ),
- fill: colors[ side ]
- } );
- }
- else {
- segments.push( {
- path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) +
- line( side, sideW, 0, 0 ) +
- curve( cornerAfter, afterX, afterY, baseAngle, 0, 0 ) +
-
- ( styles[ side ] === 'double' && sideW > 2 ?
- curve( cornerAfter, afterX - floor( afterX / 3 ), afterY - floor( afterY / 3 ), baseAngle - 45, 1, 0 ) +
- line( side, ceil( sideW / 3 * 2 ), 1, 0 ) +
- curve( cornerBefore, beforeX - floor( beforeX / 3 ), beforeY - floor( beforeY / 3 ), baseAngle, 1, 0 ) +
- 'x ' +
- curve( cornerBefore, floor( beforeX / 3 ), floor( beforeY / 3 ), baseAngle + 45, 0, 1 ) +
- line( side, floor( sideW / 3 ), 1, 0 ) +
- curve( cornerAfter, floor( afterX / 3 ), floor( afterY / 3 ), baseAngle, 0, 0 )
- : '' ) +
-
- curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ) +
- line( side, 0, 1, 0 ) +
- curve( cornerBefore, 0, 0, baseAngle, 1, 0 ),
- fill: colors[ side ]
- } );
- }
- }
- }
-
- addSide( 't', 'l', 'r', 'tl', 'tr', 90 );
- addSide( 'r', 't', 'b', 'tr', 'br', 0 );
- addSide( 'b', 'r', 'l', 'br', 'bl', -90 );
- addSide( 'l', 'b', 't', 'bl', 'tl', -180 );
- }
- }
-
- return segments;
- },
-
- destroy: function() {
- var me = this;
- if (me.finalized || !me.styleInfos.borderImageInfo.isActive()) {
- me.targetElement.runtimeStyle.borderColor = '';
- }
- PIE.RendererBase.destroy.call( me );
- }
-
-
-} );
-/**
- * Renderer for border-image
- * @constructor
- * @param {Element} el The target element
- * @param {Object} styleInfos The StyleInfo objects
- * @param {PIE.RootRenderer} parent
- */
-PIE.BorderImageRenderer = PIE.RendererBase.newRenderer( {
-
- boxZIndex: 5,
- pieceNames: [ 't', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl', 'c' ],
-
- needsUpdate: function() {
- return this.styleInfos.borderImageInfo.changed();
- },
-
- isActive: function() {
- return this.styleInfos.borderImageInfo.isActive();
- },
-
- draw: function() {
- this.getBox(); //make sure pieces are created
-
- var props = this.styleInfos.borderImageInfo.getProps(),
- borderProps = this.styleInfos.borderInfo.getProps(),
- bounds = this.boundsInfo.getBounds(),
- el = this.targetElement,
- pieces = this.pieces;
-
- PIE.Util.withImageSize( props.src, function( imgSize ) {
- var elW = bounds.w,
- elH = bounds.h,
- zero = PIE.getLength( '0' ),
- widths = props.widths || ( borderProps ? borderProps.widths : { 't': zero, 'r': zero, 'b': zero, 'l': zero } ),
- widthT = widths['t'].pixels( el ),
- widthR = widths['r'].pixels( el ),
- widthB = widths['b'].pixels( el ),
- widthL = widths['l'].pixels( el ),
- slices = props.slice,
- sliceT = slices['t'].pixels( el ),
- sliceR = slices['r'].pixels( el ),
- sliceB = slices['b'].pixels( el ),
- sliceL = slices['l'].pixels( el );
-
- // Piece positions and sizes
- function setSizeAndPos( piece, w, h, x, y ) {
- var s = pieces[piece].style,
- max = Math.max;
- s.width = max(w, 0);
- s.height = max(h, 0);
- s.left = x;
- s.top = y;
- }
- setSizeAndPos( 'tl', widthL, widthT, 0, 0 );
- setSizeAndPos( 't', elW - widthL - widthR, widthT, widthL, 0 );
- setSizeAndPos( 'tr', widthR, widthT, elW - widthR, 0 );
- setSizeAndPos( 'r', widthR, elH - widthT - widthB, elW - widthR, widthT );
- setSizeAndPos( 'br', widthR, widthB, elW - widthR, elH - widthB );
- setSizeAndPos( 'b', elW - widthL - widthR, widthB, widthL, elH - widthB );
- setSizeAndPos( 'bl', widthL, widthB, 0, elH - widthB );
- setSizeAndPos( 'l', widthL, elH - widthT - widthB, 0, widthT );
- setSizeAndPos( 'c', elW - widthL - widthR, elH - widthT - widthB, widthL, widthT );
-
-
- // image croppings
- function setCrops( sides, crop, val ) {
- for( var i=0, len=sides.length; i < len; i++ ) {
- pieces[ sides[i] ]['imagedata'][ crop ] = val;
- }
- }
-
- // corners
- setCrops( [ 'tl', 't', 'tr' ], 'cropBottom', ( imgSize.h - sliceT ) / imgSize.h );
- setCrops( [ 'tl', 'l', 'bl' ], 'cropRight', ( imgSize.w - sliceL ) / imgSize.w );
- setCrops( [ 'bl', 'b', 'br' ], 'cropTop', ( imgSize.h - sliceB ) / imgSize.h );
- setCrops( [ 'tr', 'r', 'br' ], 'cropLeft', ( imgSize.w - sliceR ) / imgSize.w );
-
- // edges and center
- // TODO right now this treats everything like 'stretch', need to support other schemes
- //if( props.repeat.v === 'stretch' ) {
- setCrops( [ 'l', 'r', 'c' ], 'cropTop', sliceT / imgSize.h );
- setCrops( [ 'l', 'r', 'c' ], 'cropBottom', sliceB / imgSize.h );
- //}
- //if( props.repeat.h === 'stretch' ) {
- setCrops( [ 't', 'b', 'c' ], 'cropLeft', sliceL / imgSize.w );
- setCrops( [ 't', 'b', 'c' ], 'cropRight', sliceR / imgSize.w );
- //}
-
- // center fill
- pieces['c'].style.display = props.fill ? '' : 'none';
- }, this );
- },
-
- getBox: function() {
- var box = this.parent.getLayer( this.boxZIndex ),
- s, piece, i,
- pieceNames = this.pieceNames,
- len = pieceNames.length;
-
- if( !box ) {
- box = doc.createElement( 'border-image' );
- s = box.style;
- s.position = 'absolute';
-
- this.pieces = {};
-
- for( i = 0; i < len; i++ ) {
- piece = this.pieces[ pieceNames[i] ] = PIE.Util.createVmlElement( 'rect' );
- piece.appendChild( PIE.Util.createVmlElement( 'imagedata' ) );
- s = piece.style;
- s['behavior'] = 'url(#default#VML)';
- s.position = "absolute";
- s.top = s.left = 0;
- piece['imagedata'].src = this.styleInfos.borderImageInfo.getProps().src;
- piece.stroked = false;
- piece.filled = false;
- box.appendChild( piece );
- }
-
- this.parent.addLayer( this.boxZIndex, box );
- }
-
- return box;
- },
-
- prepareUpdate: function() {
- if (this.isActive()) {
- var me = this,
- el = me.targetElement,
- rs = el.runtimeStyle,
- widths = me.styleInfos.borderImageInfo.getProps().widths;
-
- // Force border-style to solid so it doesn't collapse
- rs.borderStyle = 'solid';
-
- // If widths specified in border-image shorthand, override border-width
- // NOTE px units needed here as this gets used by the IE9 renderer too
- if ( widths ) {
- rs.borderTopWidth = widths['t'].pixels( el ) + 'px';
- rs.borderRightWidth = widths['r'].pixels( el ) + 'px';
- rs.borderBottomWidth = widths['b'].pixels( el ) + 'px';
- rs.borderLeftWidth = widths['l'].pixels( el ) + 'px';
- }
-
- // Make the border transparent
- me.hideBorder();
- }
- },
-
- destroy: function() {
- var me = this,
- rs = me.targetElement.runtimeStyle;
- rs.borderStyle = '';
- if (me.finalized || !me.styleInfos.borderInfo.isActive()) {
- rs.borderColor = rs.borderWidth = '';
- }
- PIE.RendererBase.destroy.call( this );
- }
-
-} );
-/**
- * Renderer for outset box-shadows
- * @constructor
- * @param {Element} el The target element
- * @param {Object} styleInfos The StyleInfo objects
- * @param {PIE.RootRenderer} parent
- */
-PIE.BoxShadowOutsetRenderer = PIE.RendererBase.newRenderer( {
-
- boxZIndex: 1,
- boxName: 'outset-box-shadow',
-
- needsUpdate: function() {
- var si = this.styleInfos;
- return si.boxShadowInfo.changed() || si.borderRadiusInfo.changed();
- },
-
- isActive: function() {
- var boxShadowInfo = this.styleInfos.boxShadowInfo;
- return boxShadowInfo.isActive() && boxShadowInfo.getProps().outset[0];
- },
-
- draw: function() {
- var me = this,
- el = this.targetElement,
- box = this.getBox(),
- styleInfos = this.styleInfos,
- shadowInfos = styleInfos.boxShadowInfo.getProps().outset,
- radii = styleInfos.borderRadiusInfo.getProps(),
- len = shadowInfos.length,
- i = len, j,
- bounds = this.boundsInfo.getBounds(),
- w = bounds.w,
- h = bounds.h,
- clipAdjust = PIE.ieVersion === 8 ? 1 : 0, //workaround for IE8 bug where VML leaks out top/left of clip region by 1px
- corners = [ 'tl', 'tr', 'br', 'bl' ], corner,
- shadowInfo, shape, fill, ss, xOff, yOff, spread, blur, shrink, color, alpha, path,
- totalW, totalH, focusX, focusY, isBottom, isRight;
-
-
- function getShadowShape( index, corner, xOff, yOff, color, blur, path ) {
- var shape = me.getShape( 'shadow' + index + corner, 'fill', box, len - index ),
- fill = shape.fill;
-
- // Position and size
- shape['coordsize'] = w * 2 + ',' + h * 2;
- shape['coordorigin'] = '1,1';
-
- // Color and opacity
- shape['stroked'] = false;
- shape['filled'] = true;
- fill.color = color.colorValue( el );
- if( blur ) {
- fill['type'] = 'gradienttitle'; //makes the VML gradient follow the shape's outline - hooray for undocumented features?!?!
- fill['color2'] = fill.color;
- fill['opacity'] = 0;
- }
-
- // Path
- shape.path = path;
-
- // This needs to go last for some reason, to prevent rendering at incorrect size
- ss = shape.style;
- ss.left = xOff;
- ss.top = yOff;
- ss.width = w;
- ss.height = h;
-
- return shape;
- }
-
-
- while( i-- ) {
- shadowInfo = shadowInfos[ i ];
- xOff = shadowInfo.xOffset.pixels( el );
- yOff = shadowInfo.yOffset.pixels( el );
- spread = shadowInfo.spread.pixels( el );
- blur = shadowInfo.blur.pixels( el );
- color = shadowInfo.color;
- // Shape path
- shrink = -spread - blur;
- if( !radii && blur ) {
- // If blurring, use a non-null border radius info object so that getBoxPath will
- // round the corners of the expanded shadow shape rather than squaring them off.
- radii = PIE.BorderRadiusStyleInfo.ALL_ZERO;
- }
- path = this.getBoxPath( { t: shrink, r: shrink, b: shrink, l: shrink }, 2, radii );
-
- if( blur ) {
- totalW = ( spread + blur ) * 2 + w;
- totalH = ( spread + blur ) * 2 + h;
- 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
- // zero which results in ugly artifacts. Instead we create four shapes, each with its
- // gradient focus past center, and then clip them so each only shows the quadrant
- // opposite the focus.
- for( j = 4; j--; ) {
- corner = corners[j];
- isBottom = corner.charAt( 0 ) === 'b';
- isRight = corner.charAt( 1 ) === 'r';
- shape = getShadowShape( i, corner, xOff, yOff, color, blur, path );
- fill = shape.fill;
- fill['focusposition'] = ( isRight ? 1 - focusX : focusX ) + ',' +
- ( isBottom ? 1 - focusY : focusY );
- fill['focussize'] = '0,0';
-
- // Clip to show only the appropriate quadrant. Add 1px to the top/left clip values
- // in IE8 to prevent a bug where IE8 displays one pixel outside the clip region.
- shape.style.clip = 'rect(' + ( ( isBottom ? totalH / 2 : 0 ) + clipAdjust ) + 'px,' +
- ( isRight ? totalW : totalW / 2 ) + 'px,' +
- ( isBottom ? totalH : totalH / 2 ) + 'px,' +
- ( ( isRight ? totalW / 2 : 0 ) + clipAdjust ) + 'px)';
- }
- } else {
- // TODO delete old quadrant shapes if resizing expands past the barrier
- shape = getShadowShape( i, '', xOff, yOff, color, blur, path );
- fill = shape.fill;
- fill['focusposition'] = focusX + ',' + focusY;
- fill['focussize'] = ( 1 - focusX * 2 ) + ',' + ( 1 - focusY * 2 );
- }
- } else {
- shape = getShadowShape( i, '', xOff, yOff, color, blur, path );
- alpha = color.alpha();
- if( alpha < 1 ) {
- // shape.style.filter = 'alpha(opacity=' + ( alpha * 100 ) + ')';
- // ss.filter = 'progid:DXImageTransform.Microsoft.BasicImage(opacity=' + ( alpha ) + ')';
- shape.fill.opacity = alpha;
- }
- }
- }
- }
-
-} );
-/**
- * Renderer for re-rendering img elements using VML. Kicks in if the img has
- * a border-radius applied, or if the -pie-png-fix flag is set.
- * @constructor
- * @param {Element} el The target element
- * @param {Object} styleInfos The StyleInfo objects
- * @param {PIE.RootRenderer} parent
- */
-PIE.ImgRenderer = PIE.RendererBase.newRenderer( {
-
- boxZIndex: 6,
- boxName: 'imgEl',
-
- needsUpdate: function() {
- var si = this.styleInfos;
- return this.targetElement.src !== this._lastSrc || si.borderRadiusInfo.changed();
- },
-
- isActive: function() {
- var si = this.styleInfos;
- return si.borderRadiusInfo.isActive() || si.backgroundInfo.isPngFix();
- },
-
- draw: function() {
- this._lastSrc = src;
- this.hideActualImg();
-
- var shape = this.getShape( 'img', 'fill', this.getBox() ),
- fill = shape.fill,
- bounds = this.boundsInfo.getBounds(),
- w = bounds.w,
- h = bounds.h,
- borderProps = this.styleInfos.borderInfo.getProps(),
- borderWidths = borderProps && borderProps.widths,
- el = this.targetElement,
- src = el.src,
- round = Math.round,
- cs = el.currentStyle,
- getLength = PIE.getLength,
- s, zero;
-
- // In IE6, the BorderRenderer will have hidden the border by moving the border-width to
- // the padding; therefore we want to pretend the borders have no width so they aren't doubled
- // when adding in the current padding value below.
- if( !borderWidths || PIE.ieVersion < 7 ) {
- zero = PIE.getLength( '0' );
- borderWidths = { 't': zero, 'r': zero, 'b': zero, 'l': zero };
- }
-
- shape.stroked = false;
- fill.type = 'frame';
- fill.src = src;
- fill.position = (w ? 0.5 / w : 0) + ',' + (h ? 0.5 / h : 0);
- shape.coordsize = w * 2 + ',' + h * 2;
- shape.coordorigin = '1,1';
- shape.path = this.getBoxPath( {
- t: round( borderWidths['t'].pixels( el ) + getLength( cs.paddingTop ).pixels( el ) ),
- r: round( borderWidths['r'].pixels( el ) + getLength( cs.paddingRight ).pixels( el ) ),
- b: round( borderWidths['b'].pixels( el ) + getLength( cs.paddingBottom ).pixels( el ) ),
- l: round( borderWidths['l'].pixels( el ) + getLength( cs.paddingLeft ).pixels( el ) )
- }, 2 );
- s = shape.style;
- s.width = w;
- s.height = h;
- },
-
- hideActualImg: function() {
- this.targetElement.runtimeStyle.filter = 'alpha(opacity=0)';
- },
-
- destroy: function() {
- PIE.RendererBase.destroy.call( this );
- this.targetElement.runtimeStyle.filter = '';
- }
-
-} );
-/**
- * Root renderer for IE9; manages the rendering layers in the element's background
- * @param {Element} el The target element
- * @param {Object} styleInfos The StyleInfo objects
- */
-PIE.IE9RootRenderer = PIE.RendererBase.newRenderer( {
-
- updatePos: PIE.emptyFn,
- updateSize: PIE.emptyFn,
- updateVisibility: PIE.emptyFn,
- updateProps: PIE.emptyFn,
-
- outerCommasRE: /^,+|,+$/g,
- innerCommasRE: /,+/g,
-
- setBackgroundLayer: function(zIndex, bg) {
- var me = this,
- bgLayers = me._bgLayers || ( me._bgLayers = [] ),
- undef;
- bgLayers[zIndex] = bg || undef;
- },
-
- finishUpdate: function() {
- var me = this,
- bgLayers = me._bgLayers,
- bg;
- if( bgLayers && ( bg = bgLayers.join( ',' ).replace( me.outerCommasRE, '' ).replace( me.innerCommasRE, ',' ) ) !== me._lastBg ) {
- me._lastBg = me.targetElement.runtimeStyle.background = bg;
- }
- },
-
- destroy: function() {
- this.targetElement.runtimeStyle.background = '';
- delete this._bgLayers;
- }
-
-} );
-/**
- * Renderer for element backgrounds, specific for IE9. Only handles translating CSS3 gradients
- * to an equivalent SVG data URI.
- * @constructor
- * @param {Element} el The target element
- * @param {Object} styleInfos The StyleInfo objects
- */
-PIE.IE9BackgroundRenderer = PIE.RendererBase.newRenderer( {
-
- bgLayerZIndex: 1,
-
- needsUpdate: function() {
- var si = this.styleInfos;
- return si.backgroundInfo.changed();
- },
-
- isActive: function() {
- var si = this.styleInfos;
- return si.backgroundInfo.isActive() || si.borderImageInfo.isActive();
- },
-
- draw: function() {
- var me = this,
- props = me.styleInfos.backgroundInfo.getProps(),
- bg, images, i = 0, img, bgAreaSize, bgSize;
-
- if ( props ) {
- bg = [];
-
- images = props.bgImages;
- if ( images ) {
- while( img = images[ i++ ] ) {
- if (img.imgType === 'linear-gradient' ) {
- bgAreaSize = me.getBgAreaSize( img.bgOrigin );
- 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 ' +
- ( img.bgAttachment || '' ) + ' ' + ( img.bgOrigin || '' ) + ' ' + ( img.bgClip || '' )
- );
- } else {
- bg.push( img.origString );
- }
- }
- }
-
- if ( props.color ) {
- bg.push( props.color.val );
- }
-
- me.parent.setBackgroundLayer(me.bgLayerZIndex, bg.join(','));
- }
- },
-
- bgPositionToString: function( bgPosition ) {
- return bgPosition ? bgPosition.tokens.map(function(token) {
- return token.tokenValue;
- }).join(' ') : '0 0';
- },
-
- getBgAreaSize: function( bgOrigin ) {
- var me = this,
- el = me.targetElement,
- bounds = me.boundsInfo.getBounds(),
- elW = bounds.w,
- elH = bounds.h,
- w = elW,
- h = elH,
- borders, getLength, cs;
-
- if( bgOrigin !== 'border-box' ) {
- borders = me.styleInfos.borderInfo.getProps();
- if( borders && ( borders = borders.widths ) ) {
- w -= borders[ 'l' ].pixels( el ) + borders[ 'l' ].pixels( el );
- h -= borders[ 't' ].pixels( el ) + borders[ 'b' ].pixels( el );
- }
- }
-
- 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 );
- }
-
- return { w: w, h: h };
- },
-
- getGradientSvg: function( info, bgWidth, bgHeight ) {
- var el = this.targetElement,
- stopsInfo = info.stops,
- stopCount = stopsInfo.length,
- metrics = PIE.GradientUtil.getGradientMetrics( el, bgWidth, bgHeight, info ),
- startX = metrics.startX,
- startY = metrics.startY,
- endX = metrics.endX,
- endY = metrics.endY,
- lineLength = metrics.lineLength,
- stopPx,
- i, j, before, after,
- svg;
-
- // Find the pixel offsets along the CSS3 gradient-line for each stop.
- stopPx = [];
- for( i = 0; i < stopCount; i++ ) {
- stopPx.push( stopsInfo[i].offset ? stopsInfo[i].offset.pixels( el, lineLength ) :
- i === 0 ? 0 : i === stopCount - 1 ? lineLength : null );
- }
- // Fill in gaps with evenly-spaced offsets
- for( i = 1; i < stopCount; i++ ) {
- if( stopPx[ i ] === null ) {
- before = stopPx[ i - 1 ];
- j = i;
- do {
- after = stopPx[ ++j ];
- } while( after === null );
- stopPx[ i ] = before + ( after - before ) / ( j - i + 1 );
- }
- }
-
- svg = [
- '<svg width="' + bgWidth + '" height="' + bgHeight + '" xmlns="http://www.w3.org/2000/svg">' +
- '<defs>' +
- '<linearGradient id="g" gradientUnits="userSpaceOnUse"' +
- ' x1="' + ( startX / bgWidth * 100 ) + '%" y1="' + ( startY / bgHeight * 100 ) + '%" x2="' + ( endX / bgWidth * 100 ) + '%" y2="' + ( endY / bgHeight * 100 ) + '%">'
- ];
-
- // Convert to percentage along the SVG gradient line and add to the stops list
- for( i = 0; i < stopCount; i++ ) {
- svg.push(
- '<stop offset="' + ( stopPx[ i ] / lineLength ) +
- '" stop-color="' + stopsInfo[i].color.colorValue( el ) +
- '" stop-opacity="' + stopsInfo[i].color.alpha() + '"/>'
- );
- }
-
- svg.push(
- '</linearGradient>' +
- '</defs>' +
- '<rect width="100%" height="100%" fill="url(#g)"/>' +
- '</svg>'
- );
-
- return svg.join( '' );
- },
-
- destroy: function() {
- this.parent.setBackgroundLayer( this.bgLayerZIndex );
- }
-
-} );
-/**
- * Renderer for border-image
- * @constructor
- * @param {Element} el The target element
- * @param {Object} styleInfos The StyleInfo objects
- * @param {PIE.RootRenderer} parent
- */
-PIE.IE9BorderImageRenderer = PIE.RendererBase.newRenderer( {
-
- REPEAT: 'repeat',
- STRETCH: 'stretch',
- ROUND: 'round',
-
- bgLayerZIndex: 0,
-
- needsUpdate: function() {
- return this.styleInfos.borderImageInfo.changed();
- },
-
- isActive: function() {
- return this.styleInfos.borderImageInfo.isActive();
- },
-
- draw: function() {
- var me = this,
- props = me.styleInfos.borderImageInfo.getProps(),
- borderProps = me.styleInfos.borderInfo.getProps(),
- bounds = me.boundsInfo.getBounds(),
- repeat = props.repeat,
- repeatH = repeat.h,
- repeatV = repeat.v,
- el = me.targetElement,
- isAsync = 0;
-
- PIE.Util.withImageSize( props.src, function( imgSize ) {
- var elW = bounds.w,
- elH = bounds.h,
- imgW = imgSize.w,
- imgH = imgSize.h,
-
- // The image cannot be referenced as a URL directly in the SVG because IE9 throws a strange
- // security exception (perhaps due to cross-origin policy within data URIs?) Therefore we
- // work around this by converting the image data into a data URI itself using a transient
- // canvas. This unfortunately requires the border-image src to be within the same domain,
- // which isn't a limitation in true border-image, so we need to try and find a better fix.
- imgSrc = me.imageToDataURI( props.src, imgW, imgH ),
-
- REPEAT = me.REPEAT,
- STRETCH = me.STRETCH,
- ROUND = me.ROUND,
- ceil = Math.ceil,
-
- zero = PIE.getLength( '0' ),
- widths = props.widths || ( borderProps ? borderProps.widths : { 't': zero, 'r': zero, 'b': zero, 'l': zero } ),
- widthT = widths['t'].pixels( el ),
- widthR = widths['r'].pixels( el ),
- widthB = widths['b'].pixels( el ),
- widthL = widths['l'].pixels( el ),
- slices = props.slice,
- sliceT = slices['t'].pixels( el ),
- sliceR = slices['r'].pixels( el ),
- sliceB = slices['b'].pixels( el ),
- sliceL = slices['l'].pixels( el ),
- centerW = elW - widthL - widthR,
- middleH = elH - widthT - widthB,
- imgCenterW = imgW - sliceL - sliceR,
- imgMiddleH = imgH - sliceT - sliceB,
-
- // Determine the size of each tile - 'round' is handled below
- tileSizeT = repeatH === STRETCH ? centerW : imgCenterW * widthT / sliceT,
- tileSizeR = repeatV === STRETCH ? middleH : imgMiddleH * widthR / sliceR,
- tileSizeB = repeatH === STRETCH ? centerW : imgCenterW * widthB / sliceB,
- tileSizeL = repeatV === STRETCH ? middleH : imgMiddleH * widthL / sliceL,
-
- svg,
- patterns = [],
- rects = [],
- i = 0;
-
- // For 'round', subtract from each tile's size enough so that they fill the space a whole number of times
- if (repeatH === ROUND) {
- tileSizeT -= (tileSizeT - (centerW % tileSizeT || tileSizeT)) / ceil(centerW / tileSizeT);
- tileSizeB -= (tileSizeB - (centerW % tileSizeB || tileSizeB)) / ceil(centerW / tileSizeB);
- }
- if (repeatV === ROUND) {
- tileSizeR -= (tileSizeR - (middleH % tileSizeR || tileSizeR)) / ceil(middleH / tileSizeR);
- tileSizeL -= (tileSizeL - (middleH % tileSizeL || tileSizeL)) / ceil(middleH / tileSizeL);
- }
-
-
- // Build the SVG for the border-image rendering. Add each piece as a pattern, which is then stretched
- // or repeated as the fill of a rect of appropriate size.
- svg = [
- '<svg width="' + elW + '" height="' + elH + '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">'
- ];
-
- function addImage( x, y, w, h, cropX, cropY, cropW, cropH, tileW, tileH ) {
- patterns.push(
- '<pattern patternUnits="userSpaceOnUse" id="pattern' + i + '" ' +
- 'x="' + (repeatH === REPEAT ? x + w / 2 - tileW / 2 : x) + '" ' +
- 'y="' + (repeatV === REPEAT ? y + h / 2 - tileH / 2 : y) + '" ' +
- 'width="' + tileW + '" height="' + tileH + '">' +
- '<svg width="' + tileW + '" height="' + tileH + '" viewBox="' + cropX + ' ' + cropY + ' ' + cropW + ' ' + cropH + '" preserveAspectRatio="none">' +
- '<image xlink:href="' + imgSrc + '" x="0" y="0" width="' + imgW + '" height="' + imgH + '" />' +
- '</svg>' +
- '</pattern>'
- );
- rects.push(
- '<rect x="' + x + '" y="' + y + '" width="' + w + '" height="' + h + '" fill="url(#pattern' + i + ')" />'
- );
- i++;
- }
- addImage( 0, 0, widthL, widthT, 0, 0, sliceL, sliceT, widthL, widthT ); // top left
- addImage( widthL, 0, centerW, widthT, sliceL, 0, imgCenterW, sliceT, tileSizeT, widthT ); // top center
- addImage( elW - widthR, 0, widthR, widthT, imgW - sliceR, 0, sliceR, sliceT, widthR, widthT ); // top right
- addImage( 0, widthT, widthL, middleH, 0, sliceT, sliceL, imgMiddleH, widthL, tileSizeL ); // middle left
- if ( props.fill ) { // center fill
- addImage( widthL, widthT, centerW, middleH, sliceL, sliceT, imgCenterW, imgMiddleH,
- tileSizeT || tileSizeB || imgCenterW, tileSizeL || tileSizeR || imgMiddleH );
- }
- addImage( elW - widthR, widthT, widthR, middleH, imgW - sliceR, sliceT, sliceR, imgMiddleH, widthR, tileSizeR ); // middle right
- addImage( 0, elH - widthB, widthL, widthB, 0, imgH - sliceB, sliceL, sliceB, widthL, widthB ); // bottom left
- addImage( widthL, elH - widthB, centerW, widthB, sliceL, imgH - sliceB, imgCenterW, sliceB, tileSizeB, widthB ); // bottom center
- addImage( elW - widthR, elH - widthB, widthR, widthB, imgW - sliceR, imgH - sliceB, sliceR, sliceB, widthR, widthB ); // bottom right
-
- svg.push(
- '<defs>' +
- patterns.join('\n') +
- '</defs>' +
- rects.join('\n') +
- '</svg>'
- );
-
- me.parent.setBackgroundLayer( me.bgLayerZIndex, 'url(data:image/svg+xml,' + escape( svg.join( '' ) ) + ') no-repeat border-box border-box' );
-
- // If the border-image's src wasn't immediately available, the SVG for its background layer
- // will have been created asynchronously after the main element's update has finished; we'll
- // therefore need to force the root renderer to sync to the final background once finished.
- if( isAsync ) {
- me.parent.finishUpdate();
- }
- }, me );
-
- isAsync = 1;
- },
-
- /**
- * Convert a given image to a data URI
- */
- imageToDataURI: (function() {
- var uris = {};
- return function( src, width, height ) {
- var uri = uris[ src ],
- image, canvas;
- if ( !uri ) {
- image = new Image();
- canvas = doc.createElement( 'canvas' );
- image.src = src;
- canvas.width = width;
- canvas.height = height;
- canvas.getContext( '2d' ).drawImage( image, 0, 0 );
- uri = uris[ src ] = canvas.toDataURL();
- }
- return uri;
- }
- })(),
-
- prepareUpdate: PIE.BorderImageRenderer.prototype.prepareUpdate,
-
- destroy: function() {
- var me = this,
- rs = me.targetElement.runtimeStyle;
- me.parent.setBackgroundLayer( me.bgLayerZIndex );
- rs.borderColor = rs.borderStyle = rs.borderWidth = '';
- }
-
-} );
-
-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',
- firstChildClass = PIE.CLASS_PREFIX + 'first-child',
- ignorePropertyNames = { 'background':1, 'bgColor':1, 'display': 1 },
- classNameRegExes = {},
- dummyArray = [];
-
-
- function addClass( el, className ) {
- el.className += ' ' + className;
- }
-
- function removeClass( el, className ) {
- var re = classNameRegExes[ className ] ||
- ( classNameRegExes[ className ] = new RegExp( '\\b' + className + '\\b', 'g' ) );
- el.className = el.className.replace( re, '' );
- }
-
- function delayAddClass( el, className /*, className2*/ ) {
- var classes = dummyArray.slice.call( arguments, 1 ),
- i = classes.length;
- setTimeout( function() {
- if( el ) {
- while( i-- ) {
- addClass( el, classes[ i ] );
- }
- }
- }, 0 );
- }
-
- function delayRemoveClass( el, className /*, className2*/ ) {
- var classes = dummyArray.slice.call( arguments, 1 ),
- i = classes.length;
- setTimeout( function() {
- if( el ) {
- while( i-- ) {
- removeClass( el, classes[ i ] );
- }
- }
- }, 0 );
- }
-
-
-
- function Element( el ) {
- var renderers,
- rootRenderer,
- boundsInfo = new PIE.BoundsInfo( el ),
- styleInfos,
- styleInfosArr,
- initializing,
- initialized,
- eventsAttached,
- eventListeners = [],
- delayed,
- destroyed,
- poll;
-
- /**
- * Initialize PIE for this element.
- */
- function init() {
- if( !initialized ) {
- var docEl,
- bounds,
- 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
- 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();
-
- // 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 );
- }
- } 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 to list of polled elements in IE8
- if( poll ) {
- PIE.Heartbeat.observe( update );
- PIE.Heartbeat.run();
- }
-
- // Trigger rendering
- update( 1 );
- }
-
- if( !eventsAttached ) {
- eventsAttached = 1;
- if( ieDocMode < 9 ) {
- addListener( el, 'onmove', handleMoveOrResize );
- }
- addListener( el, 'onresize', handleMoveOrResize );
- addListener( el, 'onpropertychange', propChanged );
- 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 );
- }
- PIE.OnResize.observe( handleMoveOrResize );
-
- PIE.OnUnload.observe( removeEventListeners );
- }
-
- boundsInfo.unlock();
- }
- }
-
-
-
-
- /**
- * Event handler for onmove and onresize events. Invokes update() only if the element's
- * bounds have previously been calculated, to prevent multiple runs during page load when
- * the element has no initial CSS3 properties.
- */
- function handleMoveOrResize() {
- if( boundsInfo && boundsInfo.hasBeenQueried() ) {
- update();
- }
- }
-
-
- /**
- * Update position and/or size as necessary. Both move and resize events call
- * this rather than the updatePos/Size functions because sometimes, particularly
- * during page load, one will fire but the other won't.
- */
- function update( force ) {
- if( !destroyed ) {
- if( initialized ) {
- var i, len = renderers.length;
-
- lockAll();
- for( i = 0; i < len; i++ ) {
- renderers[i].prepareUpdate();
- }
- if( force || boundsInfo.positionChanged() ) {
- /* TODO just using getBoundingClientRect (used internally by BoundsInfo) for detecting
- position changes may not always be accurate; it's possible that
- an element will actually move relative to its positioning parent, but its position
- relative to the viewport will stay the same. Need to come up with a better way to
- track movement. The most accurate would be the same logic used in RootRenderer.updatePos()
- but that is a more expensive operation since it does some DOM walking, and we want this
- check to be as fast as possible. */
- for( i = 0; i < len; i++ ) {
- renderers[i].updatePos();
- }
- }
- if( force || boundsInfo.sizeChanged() ) {
- for( i = 0; i < len; i++ ) {
- renderers[i].updateSize();
- }
- }
- rootRenderer.finishUpdate();
- unlockAll();
- }
- else if( !initializing ) {
- init();
- }
- }
- }
-
- /**
- * Handle property changes to trigger update when appropriate.
- */
- function propChanged() {
- var i, len = renderers.length,
- renderer,
- e = event;
-
- // Some elements like <table> fire onpropertychange events for old-school background properties
- // ('background', 'bgColor') when runtimeStyle background properties are changed, which
- // results in an infinite loop; therefore we filter out those property names. Also, 'display'
- // 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 ) {
- lockAll();
- for( i = 0; i < len; i++ ) {
- renderers[i].prepareUpdate();
- }
- for( i = 0; i < len; i++ ) {
- renderer = renderers[i];
- // Make sure position is synced if the element hasn't already been rendered.
- // TODO this feels sloppy - look into merging propChanged and update functions
- if( !renderer.isPositioned ) {
- renderer.updatePos();
- }
- if( renderer.needsUpdate() ) {
- renderer.updateProps();
- }
- }
- rootRenderer.finishUpdate();
- unlockAll();
- }
- else if( !initializing ) {
- init();
- }
- }
- }
-
-
- /**
- * Handle mouseenter events. Adds a custom class to the element to allow IE6 to add
- * hover styles to non-link elements, and to trigger a propertychange update.
- */
- function mouseEntered() {
- //must delay this because the mouseenter event fires before the :hover styles are added.
- delayAddClass( el, hoverClass );
- }
-
- /**
- * Handle mouseleave events
- */
- function mouseLeft() {
- //must delay this because the mouseleave event fires before the :hover styles are removed.
- delayRemoveClass( el, hoverClass, activeClass );
- }
-
- /**
- * Handle mousedown events. Adds a custom class to the element to allow IE6 to add
- * active styles to non-link elements, and to trigger a propertychange update.
- */
- function mousePressed() {
- //must delay this because the mousedown event fires before the :active styles are added.
- delayAddClass( el, activeClass );
-
- // listen for mouseups on the document; can't just be on the element because the user might
- // have dragged out of the element while the mouse button was held down
- PIE.OnMouseup.observe( mouseReleased );
- }
-
- /**
- * Handle mouseup events
- */
- function mouseReleased() {
- //must delay this because the mouseup event fires before the :active styles are removed.
- delayRemoveClass( el, activeClass );
-
- PIE.OnMouseup.unobserve( mouseReleased );
- }
-
- /**
- * Handle focus events. Adds a custom class to the element to trigger a propertychange update.
- */
- function focused() {
- //must delay this because the focus event fires before the :focus styles are added.
- delayAddClass( el, focusClass );
- }
-
- /**
- * Handle blur events
- */
- function blurred() {
- //must delay this because the blur event fires before the :focus styles are removed.
- delayRemoveClass( el, focusClass );
- }
-
-
- /**
- * Handle property changes on ancestors of the element; see initAncestorEventListeners()
- * which adds these listeners as requested with the -pie-watch-ancestors CSS property.
- */
- function ancestorPropChanged() {
- var name = event.propertyName;
- if( name === 'className' || name === 'id' ) {
- propChanged();
- }
- }
-
- function lockAll() {
- boundsInfo.lock();
- for( var i = styleInfosArr.length; i--; ) {
- styleInfosArr[i].lock();
- }
- }
-
- function unlockAll() {
- for( var i = styleInfosArr.length; i--; ) {
- styleInfosArr[i].unlock();
- }
- boundsInfo.unlock();
- }
-
-
- function addListener( targetEl, type, handler ) {
- targetEl.attachEvent( type, handler );
- eventListeners.push( [ targetEl, type, handler ] );
- }
-
- /**
- * Remove all event listeners from the element and any monitored ancestors.
- */
- function removeEventListeners() {
- if (eventsAttached) {
- var i = eventListeners.length,
- listener;
-
- while( i-- ) {
- listener = eventListeners[ i ];
- listener[ 0 ].detachEvent( listener[ 1 ], listener[ 2 ] );
- }
-
- PIE.OnUnload.unobserve( removeEventListeners );
- eventsAttached = 0;
- eventListeners = [];
- }
- }
-
-
- /**
- * Clean everything up when the behavior is removed from the element, or the element
- * is manually destroyed.
- */
- function destroy() {
- if( !destroyed ) {
- var i, len;
-
- removeEventListeners();
-
- destroyed = 1;
-
- // destroy any active renderers
- if( renderers ) {
- for( i = 0, len = renderers.length; i < len; i++ ) {
- renderers[i].finalized = 1;
- renderers[i].destroy();
- }
- }
-
- // Remove from list of polled elements in IE8
- if( poll ) {
- PIE.Heartbeat.unobserve( update );
- }
- // Stop onresize listening
- PIE.OnResize.unobserve( update );
-
- // Kill references
- renderers = boundsInfo = styleInfos = styleInfosArr = el = null;
- }
- }
-
-
- /**
- * If requested via the custom -pie-watch-ancestors CSS property, add onpropertychange and
- * other event listeners to ancestor(s) of the element so we can pick up style changes
- * based on CSS rules using descendant selectors.
- */
- function initAncestorEventListeners() {
- var watch = el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'watch-ancestors' ),
- i, a;
- if( watch ) {
- watch = parseInt( watch, 10 );
- i = 0;
- a = el.parentNode;
- while( a && ( watch === 'NaN' || i++ < watch ) ) {
- addListener( a, 'onpropertychange', ancestorPropChanged );
- addListener( a, 'onmouseenter', mouseEntered );
- addListener( a, 'onmouseleave', mouseLeft );
- addListener( a, 'onmousedown', mousePressed );
- if( a.tagName in PIE.focusableElements ) {
- addListener( a, 'onfocus', focused );
- addListener( a, 'onblur', blurred );
- }
- a = a.parentNode;
- }
- }
- }
-
-
- /**
- * If the target element is a first child, add a pie_first-child class to it. This allows using
- * the added class as a workaround for the fact that PIE's rendering element breaks the :first-child
- * pseudo-class selector.
- */
- function initFirstChildPseudoClass() {
- var tmpEl = el,
- isFirst = 1;
- while( tmpEl = tmpEl.previousSibling ) {
- if( tmpEl.nodeType === 1 ) {
- isFirst = 0;
- break;
- }
- }
- if( isFirst ) {
- addClass( el, firstChildClass );
- }
- }
-
-
- // These methods are all already bound to this instance so there's no need to wrap them
- // in a closure to maintain the 'this' scope object when calling them.
- this.init = init;
- this.update = update;
- this.destroy = destroy;
- this.el = el;
- }
-
- Element.getInstance = function( el ) {
- var id = PIE.Util.getUID( el );
- return wrappers[ id ] || ( wrappers[ id ] = new Element( el ) );
- };
-
- Element.destroy = function( el ) {
- var id = PIE.Util.getUID( el ),
- wrapper = wrappers[ id ];
- if( wrapper ) {
- wrapper.destroy();
- delete wrappers[ id ];
- }
- };
-
- Element.destroyAll = function() {
- var els = [], wrapper;
- if( wrappers ) {
- for( var w in wrappers ) {
- if( wrappers.hasOwnProperty( w ) ) {
- wrapper = wrappers[ w ];
- els.push( wrapper.el );
- wrapper.destroy();
- }
- }
- wrappers = {};
- }
- return els;
- };
-
- return Element;
-})();
-
-/*
- * This file exposes the public API for invoking PIE.
- */
-
-
-/**
- * @property supportsVML
- * True if the current IE browser environment has a functioning VML engine. Should be true
- * in most IEs, but in rare cases may be false. If false, PIE will exit immediately when
- * attached to an element; this property may be used for debugging or by external scripts
- * to perform some special action when VML support is absent.
- * @type {boolean}
- */
-PIE[ 'supportsVML' ] = PIE.supportsVML;
-
-
-/**
- * Programatically attach PIE to a single element.
- * @param {Element} el
- */
-PIE[ 'attach' ] = function( el ) {
- if (PIE.ieDocMode < 10 && PIE.supportsVML) {
- PIE.Element.getInstance( el ).init();
- }
-};
-
-
-/**
- * Programatically detach PIE from a single element.
- * @param {Element} el
- */
-PIE[ 'detach' ] = function( el ) {
- PIE.Element.destroy( el );
-};
-
-
-} // if( !PIE )
+/* +PIE: CSS3 rendering for IE +Version 1.0.0 +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;var PIE = window['PIE']; + +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 + }, + + /** + * Elements that can receive user focus + */ + focusableElements: { + 'A':1, + 'INPUT':1, + 'TEXTAREA':1, + 'SELECT':1, + 'BUTTON':1 + }, + + /** + * Values of the type attribute for input elements displayed as buttons + */ + inputButtonTypes: { + 'submit':1, + 'button':1, + 'reset':1 + }, + + 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; + + // 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"); + }()); +/** + * Utility functions + */ +(function() { + var vmlCreatorDoc, + 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. + * @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; + }, + + + /** + * Execute a callback function, passing it the dimensions of a given image once + * they are known. + * @param {string} src The source URL of the image + * @param {function({w:number, h:number})} func The callback function to be called once the image dimensions are known + * @param {Object} ctx A context object which will be used as the 'this' value within the executed callback function + */ + withImageSize: function( src, func, ctx ) { + var size = imageSizes[ src ], img, queue; + if( size ) { + // If we have a queue, add to it + if( Object.prototype.toString.call( size ) === '[object Array]' ) { + size.push( [ func, ctx ] ); + } + // Already have the size cached, call func right away + else { + func.call( ctx, size ); + } + } else { + queue = imageSizes[ src ] = [ [ func, ctx ] ]; //create queue + img = new Image(); + img.onload = function() { + size = imageSizes[ src ] = { w: img.width, h: img.height }; + for( var i = 0, len = queue.length; i < len; i++ ) { + queue[ i ][ 0 ].call( queue[ i ][ 1 ], size ); + } + img.onload = null; + }; + img.src = src; + } + } + }; +})();/** + * Utility functions for handling gradients + */ +PIE.GradientUtil = { + + getGradientMetrics: function( el, width, height, gradientInfo ) { + var angle = gradientInfo.angle, + startPos = gradientInfo.gradientStart, + startX, startY, + endX, endY, + startCornerX, startCornerY, + endCornerX, endCornerY, + deltaX, deltaY, + p, UNDEF; + + // Find the "start" and "end" corners; these are the corners furthest along the gradient line. + // This is used below to find the start/end positions of the CSS3 gradient-line, and also in finding + // the total length of the VML rendered gradient-line corner to corner. + function findCorners() { + startCornerX = ( angle >= 90 && angle < 270 ) ? width : 0; + startCornerY = angle < 180 ? height : 0; + endCornerX = width - startCornerX; + endCornerY = height - startCornerY; + } + + // Normalize the angle to a value between [0, 360) + function normalizeAngle() { + while( angle < 0 ) { + angle += 360; + } + angle = angle % 360; + } + + // Find the start and end points of the gradient + if( startPos ) { + startPos = startPos.coords( el, width, height ); + startX = startPos.x; + startY = startPos.y; + } + if( angle ) { + angle = angle.degrees(); + + normalizeAngle(); + findCorners(); + + // If no start position was specified, then choose a corner as the starting point. + if( !startPos ) { + startX = startCornerX; + startY = startCornerY; + } + + // Find the end position by extending a perpendicular line from the gradient-line which + // intersects the corner opposite from the starting corner. + p = PIE.GradientUtil.perpendicularIntersect( startX, startY, angle, endCornerX, endCornerY ); + endX = p[0]; + endY = p[1]; + } + else if( startPos ) { + // Start position but no angle specified: find the end point by rotating 180deg around the center + endX = width - startX; + endY = height - startY; + } + else { + // Neither position nor angle specified; create vertical gradient from top to bottom + startX = startY = endX = 0; + endY = height; + } + deltaX = endX - startX; + deltaY = endY - startY; + + if( angle === UNDEF ) { + // Get the angle based on the change in x/y from start to end point. Checks first for horizontal + // or vertical angles so they get exact whole numbers rather than what atan2 gives. + angle = ( !deltaX ? ( deltaY < 0 ? 90 : 270 ) : + ( !deltaY ? ( deltaX < 0 ? 180 : 0 ) : + -Math.atan2( deltaY, deltaX ) / Math.PI * 180 + ) + ); + normalizeAngle(); + findCorners(); + } + + return { + angle: angle, + startX: startX, + startY: startY, + endX: endX, + endY: endY, + startCornerX: startCornerX, + startCornerY: startCornerY, + endCornerX: endCornerX, + endCornerY: endCornerY, + deltaX: deltaX, + deltaY: deltaY, + lineLength: PIE.GradientUtil.distance( startX, startY, endX, endY ) + } + }, + + /** + * Find the point along a given line (defined by a starting point and an angle), at which + * that line is intersected by a perpendicular line extending through another point. + * @param x1 - x coord of the starting point + * @param y1 - y coord of the starting point + * @param angle - angle of the line extending from the starting point (in degrees) + * @param x2 - x coord of point along the perpendicular line + * @param y2 - y coord of point along the perpendicular line + * @return [ x, y ] + */ + perpendicularIntersect: function( x1, y1, angle, x2, y2 ) { + // Handle straight vertical and horizontal angles, for performance and to avoid + // divide-by-zero errors. + if( angle === 0 || angle === 180 ) { + return [ x2, y1 ]; + } + else if( angle === 90 || angle === 270 ) { + return [ x1, y2 ]; + } + else { + // General approach: determine the Ax+By=C formula for each line (the slope of the second + // line is the negative inverse of the first) and then solve for where both formulas have + // the same x/y values. + var a1 = Math.tan( -angle * Math.PI / 180 ), + c1 = a1 * x1 - y1, + a2 = -1 / a1, + c2 = a2 * x2 - y2, + d = a2 - a1, + endX = ( c2 - c1 ) / d, + endY = ( a1 * c2 - a2 * c1 ) / d; + return [ endX, endY ]; + } + }, + + /** + * Find the distance between two points + * @param {Number} p1x + * @param {Number} p1y + * @param {Number} p2x + * @param {Number} p2y + * @return {Number} the distance + */ + distance: function( p1x, p1y, p2x, p2y ) { + var dx = p2x - p1x, + dy = p2y - p1y; + return Math.abs( + dx === 0 ? dy : + dy === 0 ? dx : + Math.sqrt( dx * dx + dy * dy ) + ); + } + +};/** + * + */ +PIE.Observable = function() { + /** + * List of registered observer functions + */ + this.observers = []; + + /** + * Hash of function ids to their position in the observers list, for fast lookup + */ + this.indexes = {}; +}; +PIE.Observable.prototype = { + + observe: function( fn ) { + var id = PIE.Util.getUID( fn ), + indexes = this.indexes, + observers = this.observers; + if( !( id in indexes ) ) { + indexes[ id ] = observers.length; + observers.push( fn ); + } + }, + + unobserve: function( fn ) { + var id = PIE.Util.getUID( fn ), + indexes = this.indexes; + if( id && id in indexes ) { + delete this.observers[ indexes[ id ] ]; + delete indexes[ id ]; + } + }, + + fire: function() { + var o = this.observers, + i = o.length; + while( i-- ) { + o[ i ] && o[ i ](); + } + } + +};/* + * 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-9 + * and false elsewhere. + */ + +PIE.Heartbeat = new PIE.Observable(); +PIE.Heartbeat.run = function() { + var me = this, + interval; + if( !me.running ) { + interval = doc.documentElement.currentStyle.getAttribute( PIE.CSS_PREFIX + 'poll-interval' ) || 250; + (function beat() { + me.fire(); + setTimeout(beat, interval); + })(); + me.running = 1; + } +}; +/** + * Create an observable listener for the onunload event + */ +(function() { + PIE.OnUnload = new PIE.Observable(); + + function handleUnload() { + PIE.OnUnload.fire(); + window.detachEvent( 'onunload', handleUnload ); + window[ 'PIE' ] = null; + } + + window.attachEvent( 'onunload', handleUnload ); + + /** + * Attach an event which automatically gets detached onunload + */ + PIE.OnUnload.attachManagedEvent = function( target, name, handler ) { + target.attachEvent( name, handler ); + this.observe( function() { + target.detachEvent( name, handler ); + } ); + }; +})()/** + * Create a single observable listener for window resize events. + */ +PIE.OnResize = new PIE.Observable(); + +PIE.OnUnload.attachManagedEvent( window, 'onresize', function() { PIE.OnResize.fire(); } ); +/** + * Create a single observable listener for scroll events. Used for lazy loading based + * on the viewport, and for fixed position backgrounds. + */ +(function() { + PIE.OnScroll = new PIE.Observable(); + + function scrolled() { + PIE.OnScroll.fire(); + } + + PIE.OnUnload.attachManagedEvent( window, 'onscroll', scrolled ); + + PIE.OnResize.observe( scrolled ); +})(); +/** + * Listen for printing events, destroy all active PIE instances when printing, and + * restore them afterward. + */ +(function() { + + var elements; + + function beforePrint() { + elements = PIE.Element.destroyAll(); + } + + function afterPrint() { + if( elements ) { + for( var i = 0, len = elements.length; i < len; i++ ) { + PIE[ 'attach' ]( elements[i] ); + } + elements = 0; + } + } + + if( PIE.ieDocMode < 9 ) { + PIE.OnUnload.attachManagedEvent( window, 'onbeforeprint', beforePrint ); + PIE.OnUnload.attachManagedEvent( window, 'onafterprint', afterPrint ); + } + +})();/** + * Create a single observable listener for document mouseup events. + */ +PIE.OnMouseup = new PIE.Observable(); + +PIE.OnUnload.attachManagedEvent( doc, 'onmouseup', function() { PIE.OnMouseup.fire(); } ); +/** + * Wrapper for length and percentage style values. The value is immutable. A singleton instance per unique + * value is returned from PIE.getLength() - always use that instead of instantiating directly. + * @constructor + * @param {string} val The CSS string representing the length. It is assumed that this will already have + * been validated as a valid length or percentage syntax. + */ +PIE.Length = (function() { + var lengthCalcEl = doc.createElement( 'length-calc' ), + parent = doc.body || doc.documentElement, + s = lengthCalcEl.style, + conversions = {}, + units = [ 'mm', 'cm', 'in', 'pt', 'pc' ], + i = units.length, + instances = {}; + + s.position = 'absolute'; + s.top = s.left = '-9999px'; + + parent.appendChild( lengthCalcEl ); + while( i-- ) { + s.width = '100' + units[i]; + conversions[ units[i] ] = lengthCalcEl.offsetWidth / 100; + } + parent.removeChild( lengthCalcEl ); + + // All calcs from here on will use 1em + s.width = '1em'; + + + function Length( val ) { + this.val = val; + } + Length.prototype = { + /** + * Regular expression for matching the length unit + * @private + */ + unitRE: /(px|em|ex|mm|cm|in|pt|pc|%)$/, + + /** + * Get the numeric value of the length + * @return {number} The value + */ + getNumber: function() { + var num = this.num, + UNDEF; + if( num === UNDEF ) { + num = this.num = parseFloat( this.val ); + } + return num; + }, + + /** + * Get the unit of the length + * @return {string} The unit + */ + getUnit: function() { + var unit = this.unit, + m; + if( !unit ) { + m = this.val.match( this.unitRE ); + unit = this.unit = ( m && m[0] ) || 'px'; + } + return unit; + }, + + /** + * Determine whether this is a percentage length value + * @return {boolean} + */ + isPercentage: function() { + return this.getUnit() === '%'; + }, + + /** + * Resolve this length into a number of pixels. + * @param {Element} el - the context element, used to resolve font-relative values + * @param {(function():number|number)=} pct100 - the number of pixels that equal a 100% percentage. This can be either a number or a + * function which will be called to return the number. + */ + pixels: function( el, pct100 ) { + var num = this.getNumber(), + unit = this.getUnit(); + switch( unit ) { + case "px": + return num; + case "%": + return num * ( typeof pct100 === 'function' ? pct100() : pct100 ) / 100; + case "em": + return num * this.getEmPixels( el ); + case "ex": + return num * this.getEmPixels( el ) / 2; + default: + return num * conversions[ unit ]; + } + }, + + /** + * The em and ex units are relative to the font-size of the current element, + * however if the font-size is set using non-pixel units then we get that value + * rather than a pixel conversion. To get around this, we keep a floating element + * with width:1em which we insert into the target element and then read its offsetWidth. + * For elements that won't accept a child we insert into the parent node and perform + * additional calculation. If the font-size *is* specified in pixels, then we use that + * directly to avoid the expensive DOM manipulation. + * @param {Element} el + * @return {number} + */ + getEmPixels: function( el ) { + var fs = el.currentStyle.fontSize, + px, parent, me; + + if( fs.indexOf( 'px' ) > 0 ) { + return parseFloat( fs ); + } + else if( el.tagName in PIE.childlessElements ) { + me = this; + parent = el.parentNode; + return PIE.getLength( fs ).pixels( parent, function() { + return me.getEmPixels( parent ); + } ); + } + else { + el.appendChild( lengthCalcEl ); + px = lengthCalcEl.offsetWidth; + if( lengthCalcEl.parentNode === el ) { //not sure how this could be false but it sometimes is + el.removeChild( lengthCalcEl ); + } + return px; + } + } + }; + + + /** + * Retrieve a PIE.Length instance for the given value. A shared singleton instance is returned for each unique value. + * @param {string} val The CSS string representing the length. It is assumed that this will already have + * been validated as a valid length or percentage syntax. + */ + PIE.getLength = function( val ) { + return instances[ val ] || ( instances[ val ] = new Length( val ) ); + }; + + return Length; +})(); +/** + * Wrapper for a CSS3 bg-position value. Takes up to 2 position keywords and 2 lengths/percentages. + * @constructor + * @param {Array.<PIE.Tokenizer.Token>} tokens The tokens making up the background position value. + */ +PIE.BgPosition = (function() { + + var length_fifty = PIE.getLength( '50%' ), + vert_idents = { 'top': 1, 'center': 1, 'bottom': 1 }, + horiz_idents = { 'left': 1, 'center': 1, 'right': 1 }; + + + function BgPosition( tokens ) { + this.tokens = tokens; + } + BgPosition.prototype = { + /** + * Normalize the values into the form: + * [ xOffsetSide, xOffsetLength, yOffsetSide, yOffsetLength ] + * where: xOffsetSide is either 'left' or 'right', + * yOffsetSide is either 'top' or 'bottom', + * and x/yOffsetLength are both PIE.Length objects. + * @return {Array} + */ + getValues: function() { + if( !this._values ) { + var tokens = this.tokens, + len = tokens.length, + Tokenizer = PIE.Tokenizer, + identType = Tokenizer.Type, + length_zero = PIE.getLength( '0' ), + type_ident = identType.IDENT, + type_length = identType.LENGTH, + type_percent = identType.PERCENT, + type, value, + vals = [ 'left', length_zero, 'top', length_zero ]; + + // If only one value, the second is assumed to be 'center' + if( len === 1 ) { + tokens.push( new Tokenizer.Token( type_ident, 'center' ) ); + len++; + } + + // Two values - CSS2 + if( len === 2 ) { + // If both idents, they can appear in either order, so switch them if needed + if( type_ident & ( tokens[0].tokenType | tokens[1].tokenType ) && + tokens[0].tokenValue in vert_idents && tokens[1].tokenValue in horiz_idents ) { + tokens.push( tokens.shift() ); + } + if( tokens[0].tokenType & type_ident ) { + if( tokens[0].tokenValue === 'center' ) { + vals[1] = length_fifty; + } else { + vals[0] = tokens[0].tokenValue; + } + } + else if( tokens[0].isLengthOrPercent() ) { + vals[1] = PIE.getLength( tokens[0].tokenValue ); + } + if( tokens[1].tokenType & type_ident ) { + if( tokens[1].tokenValue === 'center' ) { + vals[3] = length_fifty; + } else { + vals[2] = tokens[1].tokenValue; + } + } + else if( tokens[1].isLengthOrPercent() ) { + vals[3] = PIE.getLength( tokens[1].tokenValue ); + } + } + + // Three or four values - CSS3 + else { + // TODO + } + + this._values = vals; + } + return this._values; + }, + + /** + * Find the coordinates of the background image from the upper-left corner of the background area. + * Note that these coordinate values are not rounded. + * @param {Element} el + * @param {number} width - the width for percentages (background area width minus image width) + * @param {number} height - the height for percentages (background area height minus image height) + * @return {Object} { x: Number, y: Number } + */ + coords: function( el, width, height ) { + var vals = this.getValues(), + pxX = vals[1].pixels( el, width ), + pxY = vals[3].pixels( el, height ); + + return { + x: vals[0] === 'right' ? width - pxX : pxX, + y: vals[2] === 'bottom' ? height - pxY : pxY + }; + } + }; + + return BgPosition; +})(); +/** + * Wrapper for a CSS3 background-size value. + * @constructor + * @param {String|PIE.Length} w The width parameter + * @param {String|PIE.Length} h The height parameter, if any + */ +PIE.BgSize = (function() { + + var CONTAIN = 'contain', + COVER = 'cover', + AUTO = 'auto'; + + + function BgSize( w, h ) { + this.w = w; + this.h = h; + } + BgSize.prototype = { + + pixels: function( el, areaW, areaH, imgW, imgH ) { + var me = this, + w = me.w, + h = me.h, + areaRatio = areaW / areaH, + imgRatio = imgW / imgH; + + if ( w === CONTAIN ) { + w = imgRatio > areaRatio ? areaW : areaH * imgRatio; + h = imgRatio > areaRatio ? areaW / imgRatio : areaH; + } + else if ( w === COVER ) { + w = imgRatio < areaRatio ? areaW : areaH * imgRatio; + h = imgRatio < areaRatio ? areaW / imgRatio : areaH; + } + else if ( w === AUTO ) { + h = ( h === AUTO ? imgH : h.pixels( el, areaH ) ); + w = h * imgRatio; + } + else { + w = w.pixels( el, areaW ); + h = ( h === AUTO ? w / imgRatio : h.pixels( el, areaH ) ); + } + + return { w: w, h: h }; + } + + }; + + BgSize.DEFAULT = new BgSize( AUTO, AUTO ); + + return BgSize; +})(); +/** + * Wrapper for angle values; handles conversion to degrees from all allowed angle units + * @constructor + * @param {string} val The raw CSS value for the angle. It is assumed it has been pre-validated. + */ +PIE.Angle = (function() { + function Angle( val ) { + this.val = val; + } + Angle.prototype = { + unitRE: /[a-z]+$/i, + + /** + * @return {string} The unit of the angle value + */ + getUnit: function() { + return this._unit || ( this._unit = this.val.match( this.unitRE )[0].toLowerCase() ); + }, + + /** + * Get the numeric value of the angle in degrees. + * @return {number} The degrees value + */ + degrees: function() { + var deg = this._deg, u, n; + if( deg === undefined ) { + u = this.getUnit(); + n = parseFloat( this.val, 10 ); + deg = this._deg = ( u === 'deg' ? n : u === 'rad' ? n / Math.PI * 180 : u === 'grad' ? n / 400 * 360 : u === 'turn' ? n * 360 : 0 ); + } + return deg; + } + }; + + return Angle; +})();/** + * Abstraction for colors values. Allows detection of rgba values. A singleton instance per unique + * value is returned from PIE.getColor() - always use that instead of instantiating directly. + * @constructor + * @param {string} val The raw CSS string value for the color + */ +PIE.Color = (function() { + var instances = {}; + + function Color( val ) { + this.val = val; + } + + /** + * Regular expression for matching rgba colors and extracting their components + * @type {RegExp} + */ + 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.prototype = { + /** + * @private + */ + parse: function() { + if( !this._color ) { + var me = this, + v = me.val, + vLower, + m = v.match( Color.rgbaRE ); + if( m ) { + me._color = 'rgb(' + m[1] + ',' + m[2] + ',' + m[3] + ')'; + me._alpha = parseFloat( m[4] ); + } + else { + if( ( vLower = v.toLowerCase() ) in Color.names ) { + v = '#' + Color.names[vLower]; + } + me._color = v; + me._alpha = ( v === 'transparent' ? 0 : 1 ); + } + } + }, + + /** + * Retrieve the value of the color in a format usable by IE natively. This will be the same as + * the raw input value, except for rgba values which will be converted to an rgb value. + * @param {Element} el The context element, used to get 'currentColor' keyword value. + * @return {string} Color value + */ + colorValue: function( el ) { + this.parse(); + return this._color === 'currentColor' ? el.currentStyle.color : this._color; + }, + + /** + * Retrieve the alpha value of the color. Will be 1 for all values except for rgba values + * with an alpha component. + * @return {number} The alpha value, from 0 to 1. + */ + alpha: function() { + this.parse(); + return this._alpha; + } + }; + + + /** + * Retrieve a PIE.Color instance for the given value. A shared singleton instance is returned for each unique value. + * @param {string} val The CSS string representing the color. It is assumed that this will already have + * been validated as a valid color syntax. + */ + PIE.getColor = function(val) { + return instances[ val ] || ( instances[ val ] = new Color( val ) ); + }; + + return Color; +})();/** + * A tokenizer for CSS value strings. + * @constructor + * @param {string} css The CSS value string + */ +PIE.Tokenizer = (function() { + function Tokenizer( css ) { + this.css = css; + this.ch = 0; + this.tokens = []; + this.tokenIndex = 0; + } + + /** + * Enumeration of token type constants. + * @enum {number} + */ + var Type = Tokenizer.Type = { + ANGLE: 1, + CHARACTER: 2, + COLOR: 4, + DIMEN: 8, + FUNCTION: 16, + IDENT: 32, + LENGTH: 64, + NUMBER: 128, + OPERATOR: 256, + PERCENT: 512, + STRING: 1024, + URL: 2048 + }; + + /** + * A single token + * @constructor + * @param {number} type The type of the token - see PIE.Tokenizer.Type + * @param {string} value The value of the token + */ + Tokenizer.Token = function( type, value ) { + this.tokenType = type; + this.tokenValue = value; + }; + Tokenizer.Token.prototype = { + isLength: function() { + return this.tokenType & Type.LENGTH || ( this.tokenType & Type.NUMBER && this.tokenValue === '0' ); + }, + isLengthOrPercent: function() { + return this.isLength() || this.tokenType & Type.PERCENT; + } + }; + + Tokenizer.prototype = { + whitespace: /\s/, + number: /^[\+\-]?(\d*\.)?\d+/, + url: /^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i, + ident: /^\-?[_a-z][\w-]*/i, + string: /^("([^"]*)"|'([^']*)')/, + operator: /^[\/,]/, + hash: /^#[\w]+/, + hashColor: /^#([\da-f]{6}|[\da-f]{3})/i, + + unitTypes: { + 'px': Type.LENGTH, 'em': Type.LENGTH, 'ex': Type.LENGTH, + 'mm': Type.LENGTH, 'cm': Type.LENGTH, 'in': Type.LENGTH, + 'pt': Type.LENGTH, 'pc': Type.LENGTH, + 'deg': Type.ANGLE, 'rad': Type.ANGLE, 'grad': Type.ANGLE + }, + + colorFunctions: { + 'rgb': 1, 'rgba': 1, 'hsl': 1, 'hsla': 1 + }, + + + /** + * Advance to and return the next token in the CSS string. If the end of the CSS string has + * been reached, null will be returned. + * @param {boolean} forget - if true, the token will not be stored for the purposes of backtracking with prev(). + * @return {PIE.Tokenizer.Token} + */ + next: function( forget ) { + var css, ch, firstChar, match, val, + me = this; + + function newToken( type, value ) { + var tok = new Tokenizer.Token( type, value ); + if( !forget ) { + me.tokens.push( tok ); + me.tokenIndex++; + } + return tok; + } + function failure() { + me.tokenIndex++; + return null; + } + + // In case we previously backed up, return the stored token in the next slot + if( this.tokenIndex < this.tokens.length ) { + return this.tokens[ this.tokenIndex++ ]; + } + + // Move past leading whitespace characters + while( this.whitespace.test( this.css.charAt( this.ch ) ) ) { + this.ch++; + } + if( this.ch >= this.css.length ) { + return failure(); + } + + ch = this.ch; + css = this.css.substring( this.ch ); + firstChar = css.charAt( 0 ); + switch( firstChar ) { + case '#': + if( match = css.match( this.hashColor ) ) { + this.ch += match[0].length; + return newToken( Type.COLOR, match[0] ); + } + break; + + case '"': + case "'": + if( match = css.match( this.string ) ) { + this.ch += match[0].length; + return newToken( Type.STRING, match[2] || match[3] || '' ); + } + break; + + case "/": + case ",": + this.ch++; + return newToken( Type.OPERATOR, firstChar ); + + case 'u': + if( match = css.match( this.url ) ) { + this.ch += match[0].length; + return newToken( Type.URL, match[2] || match[3] || match[4] || '' ); + } + } + + // Numbers and values starting with numbers + if( match = css.match( this.number ) ) { + val = match[0]; + this.ch += val.length; + + // Check if it is followed by a unit + if( css.charAt( val.length ) === '%' ) { + this.ch++; + return newToken( Type.PERCENT, val + '%' ); + } + if( match = css.substring( val.length ).match( this.ident ) ) { + val += match[0]; + this.ch += match[0].length; + return newToken( this.unitTypes[ match[0].toLowerCase() ] || Type.DIMEN, val ); + } + + // Plain ol' number + return newToken( Type.NUMBER, val ); + } + + // Identifiers + if( match = css.match( this.ident ) ) { + val = match[0]; + this.ch += val.length; + + // Named colors + if( val.toLowerCase() in PIE.Color.names || val === 'currentColor' || val === 'transparent' ) { + return newToken( Type.COLOR, val ); + } + + // Functions + if( css.charAt( val.length ) === '(' ) { + this.ch++; + + // Color values in function format: rgb, rgba, hsl, hsla + if( val.toLowerCase() in this.colorFunctions ) { + function isNum( tok ) { + return tok && tok.tokenType & Type.NUMBER; + } + function isNumOrPct( tok ) { + return tok && ( tok.tokenType & ( Type.NUMBER | Type.PERCENT ) ); + } + function isValue( tok, val ) { + return tok && tok.tokenValue === val; + } + function next() { + return me.next( 1 ); + } + + if( ( val.charAt(0) === 'r' ? isNumOrPct( next() ) : isNum( next() ) ) && + isValue( next(), ',' ) && + isNumOrPct( next() ) && + isValue( next(), ',' ) && + isNumOrPct( next() ) && + ( val === 'rgb' || val === 'hsa' || ( + isValue( next(), ',' ) && + isNum( next() ) + ) ) && + isValue( next(), ')' ) ) { + return newToken( Type.COLOR, this.css.substring( ch, this.ch ) ); + } + return failure(); + } + + return newToken( Type.FUNCTION, val ); + } + + // Other identifier + return newToken( Type.IDENT, val ); + } + + // Standalone character + this.ch++; + return newToken( Type.CHARACTER, firstChar ); + }, + + /** + * Determine whether there is another token + * @return {boolean} + */ + hasNext: function() { + var next = this.next(); + this.prev(); + return !!next; + }, + + /** + * Back up and return the previous token + * @return {PIE.Tokenizer.Token} + */ + prev: function() { + return this.tokens[ this.tokenIndex-- - 2 ]; + }, + + /** + * Retrieve all the tokens in the CSS string + * @return {Array.<PIE.Tokenizer.Token>} + */ + all: function() { + while( this.next() ) {} + return this.tokens; + }, + + /** + * Return a list of tokens from the current position until the given function returns + * true. The final token will not be included in the list. + * @param {function():boolean} func - test function + * @param {boolean} require - if true, then if the end of the CSS string is reached + * before the test function returns true, null will be returned instead of the + * tokens that have been found so far. + * @return {Array.<PIE.Tokenizer.Token>} + */ + until: function( func, require ) { + var list = [], t, hit; + while( t = this.next() ) { + if( func( t ) ) { + hit = true; + this.prev(); + break; + } + list.push( t ); + } + return require && !hit ? null : list; + } + }; + + return Tokenizer; +})();/** + * Handles calculating, caching, and detecting changes to size and position of the element. + * @constructor + * @param {Element} el the target element + */ +PIE.BoundsInfo = function( el ) { + this.targetElement = el; +}; +PIE.BoundsInfo.prototype = { + + _locked: 0, + + positionChanged: function() { + var last = this._lastBounds, + bounds; + return !last || ( ( bounds = this.getBounds() ) && ( last.x !== bounds.x || last.y !== bounds.y ) ); + }, + + sizeChanged: function() { + var last = this._lastBounds, + bounds; + return !last || ( ( bounds = this.getBounds() ) && ( last.w !== bounds.w || last.h !== bounds.h ) ); + }, + + getLiveBounds: function() { + var el = this.targetElement, + rect = el.getBoundingClientRect(), + 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. 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 + }; + }, + + getBounds: function() { + return this._locked ? + ( this._lockedBounds || ( this._lockedBounds = this.getLiveBounds() ) ) : + this.getLiveBounds(); + }, + + hasBeenQueried: function() { + return !!this._lastBounds; + }, + + lock: function() { + ++this._locked; + }, + + unlock: function() { + if( !--this._locked ) { + if( this._lockedBounds ) this._lastBounds = this._lockedBounds; + this._lockedBounds = null; + } + } + +}; +(function() { + +function cacheWhenLocked( fn ) { + var uid = PIE.Util.getUID( fn ); + return function() { + if( this._locked ) { + var cache = this._lockedValues || ( this._lockedValues = {} ); + return ( uid in cache ) ? cache[ uid ] : ( cache[ uid ] = fn.call( this ) ); + } else { + return fn.call( this ); + } + } +} + + +PIE.StyleInfoBase = { + + _locked: 0, + + /** + * Create a new StyleInfo class, with the standard constructor, and augmented by + * the StyleInfoBase's members. + * @param proto + */ + newStyleInfo: function( proto ) { + function StyleInfo( el ) { + this.targetElement = el; + this._lastCss = this.getCss(); + } + PIE.Util.merge( StyleInfo.prototype, PIE.StyleInfoBase, proto ); + StyleInfo._propsCache = {}; + return StyleInfo; + }, + + /** + * Get an object representation of the target CSS style, caching it for each unique + * CSS value string. + * @return {Object} + */ + getProps: function() { + var css = this.getCss(), + cache = this.constructor._propsCache; + return css ? ( css in cache ? cache[ css ] : ( cache[ css ] = this.parseCss( css ) ) ) : null; + }, + + /** + * Get the raw CSS value for the target style + * @return {string} + */ + getCss: cacheWhenLocked( function() { + var el = this.targetElement, + ctor = this.constructor, + s = el.style, + cs = el.currentStyle, + cssProp = this.cssProperty, + styleProp = this.styleProperty, + prefixedCssProp = ctor._prefixedCssProp || ( ctor._prefixedCssProp = PIE.CSS_PREFIX + cssProp ), + prefixedStyleProp = ctor._prefixedStyleProp || ( ctor._prefixedStyleProp = PIE.STYLE_PREFIX + styleProp.charAt(0).toUpperCase() + styleProp.substring(1) ); + return s[ prefixedStyleProp ] || cs.getAttribute( prefixedCssProp ) || s[ styleProp ] || cs.getAttribute( cssProp ); + } ), + + /** + * Determine whether the target CSS style is active. + * @return {boolean} + */ + isActive: cacheWhenLocked( function() { + return !!this.getProps(); + } ), + + /** + * Determine whether the target CSS style has changed since the last time it was used. + * @return {boolean} + */ + changed: cacheWhenLocked( function() { + var currentCss = this.getCss(), + changed = currentCss !== this._lastCss; + this._lastCss = currentCss; + return changed; + } ), + + cacheWhenLocked: cacheWhenLocked, + + lock: function() { + ++this._locked; + }, + + unlock: function() { + if( !--this._locked ) { + delete this._lockedValues; + } + } +}; + +})();/** + * Handles parsing, caching, and detecting changes to background (and -pie-background) CSS + * @constructor + * @param {Element} el the target element + */ +PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( { + + cssProperty: PIE.CSS_PREFIX + 'background', + styleProperty: PIE.STYLE_PREFIX + 'Background', + + attachIdents: { 'scroll':1, 'fixed':1, 'local':1 }, + repeatIdents: { 'repeat-x':1, 'repeat-y':1, 'repeat':1, 'no-repeat':1 }, + originAndClipIdents: { 'padding-box':1, 'border-box':1, 'content-box':1 }, + positionIdents: { 'top':1, 'right':1, 'bottom':1, 'left':1, 'center':1 }, + sizeIdents: { 'contain':1, 'cover':1 }, + propertyNames: { + CLIP: 'backgroundClip', + COLOR: 'backgroundColor', + IMAGE: 'backgroundImage', + ORIGIN: 'backgroundOrigin', + POSITION: 'backgroundPosition', + REPEAT: 'backgroundRepeat', + SIZE: 'backgroundSize' + }, + + /** + * For background styles, we support the -pie-background property but fall back to the standard + * backround* properties. The reason we have to use the prefixed version is that IE natively + * parses the standard properties and if it sees something it doesn't know how to parse, for example + * multiple values or gradient definitions, it will throw that away and not make it available through + * currentStyle. + * + * Format of return object: + * { + * color: <PIE.Color>, + * bgImages: [ + * { + * imgType: 'image', + * imgUrl: 'image.png', + * imgRepeat: <'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'>, + * bgPosition: <PIE.BgPosition>, + * bgAttachment: <'scroll' | 'fixed' | 'local'>, + * bgOrigin: <'border-box' | 'padding-box' | 'content-box'>, + * bgClip: <'border-box' | 'padding-box'>, + * bgSize: <PIE.BgSize>, + * origString: 'url(img.png) no-repeat top left' + * }, + * { + * imgType: 'linear-gradient', + * gradientStart: <PIE.BgPosition>, + * angle: <PIE.Angle>, + * stops: [ + * { color: <PIE.Color>, offset: <PIE.Length> }, + * { color: <PIE.Color>, offset: <PIE.Length> }, ... + * ] + * } + * ] + * } + * @param {String} css + * @override + */ + parseCss: function( css ) { + var el = this.targetElement, + cs = el.currentStyle, + tokenizer, token, image, + tok_type = PIE.Tokenizer.Type, + type_operator = tok_type.OPERATOR, + type_ident = tok_type.IDENT, + type_color = tok_type.COLOR, + tokType, tokVal, + beginCharIndex = 0, + positionIdents = this.positionIdents, + gradient, stop, width, height, + props = { bgImages: [] }; + + function isBgPosToken( token ) { + return token && token.isLengthOrPercent() || ( token.tokenType & type_ident && token.tokenValue in positionIdents ); + } + + function sizeToken( token ) { + return token && ( ( token.isLengthOrPercent() && PIE.getLength( token.tokenValue ) ) || ( token.tokenValue === 'auto' && 'auto' ) ); + } + + // If the CSS3-specific -pie-background property is present, parse it + if( this.getCss3() ) { + tokenizer = new PIE.Tokenizer( css ); + image = {}; + + while( token = tokenizer.next() ) { + tokType = token.tokenType; + tokVal = token.tokenValue; + + if( !image.imgType && tokType & tok_type.FUNCTION && tokVal === 'linear-gradient' ) { + gradient = { stops: [], imgType: tokVal }; + stop = {}; + while( token = tokenizer.next() ) { + tokType = token.tokenType; + tokVal = token.tokenValue; + + // If we reached the end of the function and had at least 2 stops, flush the info + if( tokType & tok_type.CHARACTER && tokVal === ')' ) { + if( stop.color ) { + gradient.stops.push( stop ); + } + if( gradient.stops.length > 1 ) { + PIE.Util.merge( image, gradient ); + } + break; + } + + // Color stop - must start with color + if( tokType & type_color ) { + // if we already have an angle/position, make sure that the previous token was a comma + if( gradient.angle || gradient.gradientStart ) { + token = tokenizer.prev(); + if( token.tokenType !== type_operator ) { + break; //fail + } + tokenizer.next(); + } + + stop = { + color: PIE.getColor( tokVal ) + }; + // check for offset following color + token = tokenizer.next(); + if( token.isLengthOrPercent() ) { + stop.offset = PIE.getLength( token.tokenValue ); + } else { + tokenizer.prev(); + } + } + // Angle - can only appear in first spot + else if( tokType & tok_type.ANGLE && !gradient.angle && !stop.color && !gradient.stops.length ) { + gradient.angle = new PIE.Angle( token.tokenValue ); + } + else if( isBgPosToken( token ) && !gradient.gradientStart && !stop.color && !gradient.stops.length ) { + tokenizer.prev(); + gradient.gradientStart = new PIE.BgPosition( + tokenizer.until( function( t ) { + return !isBgPosToken( t ); + }, false ) + ); + } + else if( tokType & type_operator && tokVal === ',' ) { + if( stop.color ) { + gradient.stops.push( stop ); + stop = {}; + } + } + else { + // Found something we didn't recognize; fail without adding image + break; + } + } + } + else if( !image.imgType && tokType & tok_type.URL ) { + image.imgUrl = tokVal; + image.imgType = 'image'; + } + else if( isBgPosToken( token ) && !image.bgPosition ) { + tokenizer.prev(); + image.bgPosition = new PIE.BgPosition( + tokenizer.until( function( t ) { + return !isBgPosToken( t ); + }, false ) + ); + } + else if( tokType & type_ident ) { + if( tokVal in this.repeatIdents && !image.imgRepeat ) { + image.imgRepeat = tokVal; + } + else if( tokVal in this.originAndClipIdents && !image.bgOrigin ) { + image.bgOrigin = tokVal; + if( ( token = tokenizer.next() ) && ( token.tokenType & type_ident ) && + token.tokenValue in this.originAndClipIdents ) { + image.bgClip = token.tokenValue; + } else { + image.bgClip = tokVal; + tokenizer.prev(); + } + } + else if( tokVal in this.attachIdents && !image.bgAttachment ) { + image.bgAttachment = tokVal; + } + else { + return null; + } + } + else if( tokType & type_color && !props.color ) { + props.color = PIE.getColor( tokVal ); + } + else if( tokType & type_operator && tokVal === '/' && !image.bgSize && image.bgPosition ) { + // background size + token = tokenizer.next(); + if( token.tokenType & type_ident && token.tokenValue in this.sizeIdents ) { + image.bgSize = new PIE.BgSize( token.tokenValue ); + } + else if( width = sizeToken( token ) ) { + height = sizeToken( tokenizer.next() ); + if ( !height ) { + height = width; + tokenizer.prev(); + } + image.bgSize = new PIE.BgSize( width, height ); + } + else { + return null; + } + } + // new layer + else if( tokType & type_operator && tokVal === ',' && image.imgType ) { + image.origString = css.substring( beginCharIndex, tokenizer.ch - 1 ); + beginCharIndex = tokenizer.ch; + props.bgImages.push( image ); + image = {}; + } + else { + // Found something unrecognized; chuck everything + return null; + } + } + + // leftovers + if( image.imgType ) { + image.origString = css.substring( beginCharIndex ); + props.bgImages.push( image ); + } + } + + // Otherwise, use the standard background properties; let IE give us the values rather than parsing them + else { + this.withActualBg( PIE.ieDocMode < 9 ? + function() { + var propNames = this.propertyNames, + posX = cs[propNames.POSITION + 'X'], + posY = cs[propNames.POSITION + 'Y'], + img = cs[propNames.IMAGE], + color = cs[propNames.COLOR]; + + if( color !== 'transparent' ) { + props.color = PIE.getColor( color ) + } + if( img !== 'none' ) { + props.bgImages = [ { + imgType: 'image', + imgUrl: new PIE.Tokenizer( img ).next().tokenValue, + imgRepeat: cs[propNames.REPEAT], + bgPosition: new PIE.BgPosition( new PIE.Tokenizer( posX + ' ' + posY ).all() ) + } ]; + } + } : + function() { + var propNames = this.propertyNames, + splitter = /\s*,\s*/, + images = cs[propNames.IMAGE].split( splitter ), + color = cs[propNames.COLOR], + repeats, positions, origins, clips, sizes, i, len, image, sizeParts; + + if( color !== 'transparent' ) { + props.color = PIE.getColor( color ) + } + + len = images.length; + if( len && images[0] !== 'none' ) { + repeats = cs[propNames.REPEAT].split( splitter ); + positions = cs[propNames.POSITION].split( splitter ); + origins = cs[propNames.ORIGIN].split( splitter ); + clips = cs[propNames.CLIP].split( splitter ); + sizes = cs[propNames.SIZE].split( splitter ); + + props.bgImages = []; + for( i = 0; i < len; i++ ) { + image = images[ i ]; + if( image && image !== 'none' ) { + sizeParts = sizes[i].split( ' ' ); + props.bgImages.push( { + origString: image + ' ' + repeats[ i ] + ' ' + positions[ i ] + ' / ' + sizes[ i ] + ' ' + + origins[ i ] + ' ' + clips[ i ], + imgType: 'image', + imgUrl: new PIE.Tokenizer( image ).next().tokenValue, + imgRepeat: repeats[ i ], + bgPosition: new PIE.BgPosition( new PIE.Tokenizer( positions[ i ] ).all() ), + bgOrigin: origins[ i ], + bgClip: clips[ i ], + bgSize: new PIE.BgSize( sizeParts[ 0 ], sizeParts[ 1 ] ) + } ); + } + } + } + } + ); + } + + return ( props.color || props.bgImages[0] ) ? props : null; + }, + + /** + * Execute a function with the actual background styles (not overridden with runtimeStyle + * properties set by the renderers) available via currentStyle. + * @param fn + */ + withActualBg: function( fn ) { + var isIE9 = PIE.ieDocMode > 8, + propNames = this.propertyNames, + rs = this.targetElement.runtimeStyle, + rsImage = rs[propNames.IMAGE], + rsColor = rs[propNames.COLOR], + rsRepeat = rs[propNames.REPEAT], + rsClip, rsOrigin, rsSize, rsPosition, ret; + + if( rsImage ) rs[propNames.IMAGE] = ''; + if( rsColor ) rs[propNames.COLOR] = ''; + if( rsRepeat ) rs[propNames.REPEAT] = ''; + if( isIE9 ) { + rsClip = rs[propNames.CLIP]; + rsOrigin = rs[propNames.ORIGIN]; + rsPosition = rs[propNames.POSITION]; + rsSize = rs[propNames.SIZE]; + if( rsClip ) rs[propNames.CLIP] = ''; + if( rsOrigin ) rs[propNames.ORIGIN] = ''; + if( rsPosition ) rs[propNames.POSITION] = ''; + if( rsSize ) rs[propNames.SIZE] = ''; + } + + ret = fn.call( this ); + + if( rsImage ) rs[propNames.IMAGE] = rsImage; + if( rsColor ) rs[propNames.COLOR] = rsColor; + if( rsRepeat ) rs[propNames.REPEAT] = rsRepeat; + if( isIE9 ) { + if( rsClip ) rs[propNames.CLIP] = rsClip; + if( rsOrigin ) rs[propNames.ORIGIN] = rsOrigin; + if( rsPosition ) rs[propNames.POSITION] = rsPosition; + if( rsSize ) rs[propNames.SIZE] = rsSize; + } + + return ret; + }, + + getCss: PIE.StyleInfoBase.cacheWhenLocked( function() { + return this.getCss3() || + this.withActualBg( function() { + var cs = this.targetElement.currentStyle, + propNames = this.propertyNames; + return cs[propNames.COLOR] + ' ' + cs[propNames.IMAGE] + ' ' + cs[propNames.REPEAT] + ' ' + + cs[propNames.POSITION + 'X'] + ' ' + cs[propNames.POSITION + 'Y']; + } ); + } ), + + getCss3: PIE.StyleInfoBase.cacheWhenLocked( function() { + var el = this.targetElement; + return el.style[ this.styleProperty ] || el.currentStyle.getAttribute( this.cssProperty ); + } ), + + /** + * Tests if style.PiePngFix or the -pie-png-fix property is set to true in IE6. + */ + isPngFix: function() { + var val = 0, el; + if( PIE.ieVersion < 7 ) { + el = this.targetElement; + val = ( '' + ( el.style[ PIE.STYLE_PREFIX + 'PngFix' ] || el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'png-fix' ) ) === 'true' ); + } + return val; + }, + + /** + * The isActive logic is slightly different, because getProps() always returns an object + * even if it is just falling back to the native background properties. But we only want + * to report is as being "active" if either the -pie-background override property is present + * and parses successfully or '-pie-png-fix' is set to true in IE6. + */ + isActive: PIE.StyleInfoBase.cacheWhenLocked( function() { + return (this.getCss3() || this.isPngFix()) && !!this.getProps(); + } ) + +} );/** + * Handles parsing, caching, and detecting changes to border CSS + * @constructor + * @param {Element} el the target element + */ +PIE.BorderStyleInfo = PIE.StyleInfoBase.newStyleInfo( { + + sides: [ 'Top', 'Right', 'Bottom', 'Left' ], + namedWidths: { + 'thin': '1px', + 'medium': '3px', + 'thick': '5px' + }, + + parseCss: function( css ) { + var w = {}, + s = {}, + c = {}, + active = false, + colorsSame = true, + stylesSame = true, + widthsSame = true; + + this.withActualBorder( function() { + var el = this.targetElement, + cs = el.currentStyle, + i = 0, + style, color, width, lastStyle, lastColor, lastWidth, side, ltr; + for( ; i < 4; i++ ) { + side = this.sides[ i ]; + + ltr = side.charAt(0).toLowerCase(); + style = s[ ltr ] = cs[ 'border' + side + 'Style' ]; + color = cs[ 'border' + side + 'Color' ]; + width = cs[ 'border' + side + 'Width' ]; + + if( i > 0 ) { + if( style !== lastStyle ) { stylesSame = false; } + if( color !== lastColor ) { colorsSame = false; } + if( width !== lastWidth ) { widthsSame = false; } + } + lastStyle = style; + lastColor = color; + lastWidth = width; + + c[ ltr ] = PIE.getColor( color ); + + width = w[ ltr ] = PIE.getLength( s[ ltr ] === 'none' ? '0' : ( this.namedWidths[ width ] || width ) ); + if( width.pixels( this.targetElement ) > 0 ) { + active = true; + } + } + } ); + + return active ? { + widths: w, + styles: s, + colors: c, + widthsSame: widthsSame, + colorsSame: colorsSame, + stylesSame: stylesSame + } : null; + }, + + getCss: PIE.StyleInfoBase.cacheWhenLocked( function() { + var el = this.targetElement, + cs = el.currentStyle, + css; + + // Don't redraw or hide borders for cells in border-collapse:collapse tables + if( !( el.tagName in PIE.tableCellTags && el.offsetParent.currentStyle.borderCollapse === 'collapse' ) ) { + this.withActualBorder( function() { + css = cs.borderWidth + '|' + cs.borderStyle + '|' + cs.borderColor; + } ); + } + return css; + } ), + + /** + * Execute a function with the actual border styles (not overridden with runtimeStyle + * properties set by the renderers) available via currentStyle. + * @param fn + */ + withActualBorder: function( fn ) { + var rs = this.targetElement.runtimeStyle, + rsWidth = rs.borderWidth, + rsColor = rs.borderColor, + ret; + + if( rsWidth ) rs.borderWidth = ''; + if( rsColor ) rs.borderColor = ''; + + ret = fn.call( this ); + + if( rsWidth ) rs.borderWidth = rsWidth; + if( rsColor ) rs.borderColor = rsColor; + + return ret; + } + +} ); +/** + * Handles parsing, caching, and detecting changes to border-radius CSS + * @constructor + * @param {Element} el the target element + */ +(function() { + +PIE.BorderRadiusStyleInfo = PIE.StyleInfoBase.newStyleInfo( { + + cssProperty: 'border-radius', + styleProperty: 'borderRadius', + + parseCss: function( css ) { + var p = null, x, y, + tokenizer, token, length, + hasNonZero = false; + + if( css ) { + tokenizer = new PIE.Tokenizer( css ); + + function collectLengths() { + var arr = [], num; + while( ( token = tokenizer.next() ) && token.isLengthOrPercent() ) { + length = PIE.getLength( token.tokenValue ); + num = length.getNumber(); + if( num < 0 ) { + return null; + } + if( num > 0 ) { + hasNonZero = true; + } + arr.push( length ); + } + return arr.length > 0 && arr.length < 5 ? { + 'tl': arr[0], + 'tr': arr[1] || arr[0], + 'br': arr[2] || arr[0], + 'bl': arr[3] || arr[1] || arr[0] + } : null; + } + + // Grab the initial sequence of lengths + if( x = collectLengths() ) { + // See if there is a slash followed by more lengths, for the y-axis radii + if( token ) { + if( token.tokenType & PIE.Tokenizer.Type.OPERATOR && token.tokenValue === '/' ) { + y = collectLengths(); + } + } else { + y = x; + } + + // Treat all-zero values the same as no value + if( hasNonZero && x && y ) { + p = { x: x, y : y }; + } + } + } + + return p; + } +} ); + +var zero = PIE.getLength( '0' ), + zeros = { 'tl': zero, 'tr': zero, 'br': zero, 'bl': zero }; +PIE.BorderRadiusStyleInfo.ALL_ZERO = { x: zeros, y: zeros }; + +})();/** + * Handles parsing, caching, and detecting changes to border-image CSS + * @constructor + * @param {Element} el the target element + */ +PIE.BorderImageStyleInfo = PIE.StyleInfoBase.newStyleInfo( { + + cssProperty: 'border-image', + styleProperty: 'borderImage', + + repeatIdents: { 'stretch':1, 'round':1, 'repeat':1, 'space':1 }, + + parseCss: function( css ) { + var p = null, tokenizer, token, type, value, + slices, widths, outsets, + slashCount = 0, + Type = PIE.Tokenizer.Type, + IDENT = Type.IDENT, + NUMBER = Type.NUMBER, + PERCENT = Type.PERCENT; + + if( css ) { + tokenizer = new PIE.Tokenizer( css ); + p = {}; + + function isSlash( token ) { + return token && ( token.tokenType & Type.OPERATOR ) && ( token.tokenValue === '/' ); + } + + function isFillIdent( token ) { + return token && ( token.tokenType & IDENT ) && ( token.tokenValue === 'fill' ); + } + + function collectSlicesEtc() { + slices = tokenizer.until( function( tok ) { + return !( tok.tokenType & ( NUMBER | PERCENT ) ); + } ); + + if( isFillIdent( tokenizer.next() ) && !p.fill ) { + p.fill = true; + } else { + tokenizer.prev(); + } + + if( isSlash( tokenizer.next() ) ) { + slashCount++; + widths = tokenizer.until( function( token ) { + return !token.isLengthOrPercent() && !( ( token.tokenType & IDENT ) && token.tokenValue === 'auto' ); + } ); + + if( isSlash( tokenizer.next() ) ) { + slashCount++; + outsets = tokenizer.until( function( token ) { + return !token.isLength(); + } ); + } + } else { + tokenizer.prev(); + } + } + + while( token = tokenizer.next() ) { + type = token.tokenType; + value = token.tokenValue; + + // Numbers and/or 'fill' keyword: slice values. May be followed optionally by width values, followed optionally by outset values + if( type & ( NUMBER | PERCENT ) && !slices ) { + tokenizer.prev(); + collectSlicesEtc(); + } + else if( isFillIdent( token ) && !p.fill ) { + p.fill = true; + collectSlicesEtc(); + } + + // Idents: one or values for 'repeat' + else if( ( type & IDENT ) && this.repeatIdents[value] && !p.repeat ) { + p.repeat = { h: value }; + if( token = tokenizer.next() ) { + if( ( token.tokenType & IDENT ) && this.repeatIdents[token.tokenValue] ) { + p.repeat.v = token.tokenValue; + } else { + tokenizer.prev(); + } + } + } + + // URL of the image + else if( ( type & Type.URL ) && !p.src ) { + p.src = value; + } + + // Found something unrecognized; exit. + else { + return null; + } + } + + // Validate what we collected + if( !p.src || !slices || slices.length < 1 || slices.length > 4 || + ( widths && widths.length > 4 ) || ( slashCount === 1 && widths.length < 1 ) || + ( outsets && outsets.length > 4 ) || ( slashCount === 2 && outsets.length < 1 ) ) { + return null; + } + + // Fill in missing values + if( !p.repeat ) { + p.repeat = { h: 'stretch' }; + } + if( !p.repeat.v ) { + p.repeat.v = p.repeat.h; + } + + function distributeSides( tokens, convertFn ) { + return { + 't': convertFn( tokens[0] ), + 'r': convertFn( tokens[1] || tokens[0] ), + 'b': convertFn( tokens[2] || tokens[0] ), + 'l': convertFn( tokens[3] || tokens[1] || tokens[0] ) + }; + } + + p.slice = distributeSides( slices, function( tok ) { + return PIE.getLength( ( tok.tokenType & NUMBER ) ? tok.tokenValue + 'px' : tok.tokenValue ); + } ); + + if( widths && widths[0] ) { + p.widths = distributeSides( widths, function( tok ) { + return tok.isLengthOrPercent() ? PIE.getLength( tok.tokenValue ) : tok.tokenValue; + } ); + } + + if( outsets && outsets[0] ) { + p.outset = distributeSides( outsets, function( tok ) { + return tok.isLength() ? PIE.getLength( tok.tokenValue ) : tok.tokenValue; + } ); + } + } + + return p; + } + +} );/** + * Handles parsing, caching, and detecting changes to box-shadow CSS + * @constructor + * @param {Element} el the target element + */ +PIE.BoxShadowStyleInfo = PIE.StyleInfoBase.newStyleInfo( { + + cssProperty: 'box-shadow', + styleProperty: 'boxShadow', + + parseCss: function( css ) { + var props, + getLength = PIE.getLength, + Type = PIE.Tokenizer.Type, + tokenizer; + + if( css ) { + tokenizer = new PIE.Tokenizer( css ); + props = { outset: [], inset: [] }; + + function parseItem() { + var token, type, value, color, lengths, inset, len; + + while( token = tokenizer.next() ) { + value = token.tokenValue; + type = token.tokenType; + + if( type & Type.OPERATOR && value === ',' ) { + break; + } + else if( token.isLength() && !lengths ) { + tokenizer.prev(); + lengths = tokenizer.until( function( token ) { + return !token.isLength(); + } ); + } + else if( type & Type.COLOR && !color ) { + color = value; + } + else if( type & Type.IDENT && value === 'inset' && !inset ) { + inset = true; + } + else { //encountered an unrecognized token; fail. + return false; + } + } + + len = lengths && lengths.length; + if( len > 1 && len < 5 ) { + ( inset ? props.inset : props.outset ).push( { + xOffset: getLength( lengths[0].tokenValue ), + yOffset: getLength( lengths[1].tokenValue ), + blur: getLength( lengths[2] ? lengths[2].tokenValue : '0' ), + spread: getLength( lengths[3] ? lengths[3].tokenValue : '0' ), + color: PIE.getColor( color || 'currentColor' ) + } ); + return true; + } + return false; + } + + while( parseItem() ) {} + } + + return props && ( props.inset.length || props.outset.length ) ? props : null; + } +} ); +/** + * Retrieves the state of the element's visibility and display + * @constructor + * @param {Element} el the target element + */ +PIE.VisibilityStyleInfo = PIE.StyleInfoBase.newStyleInfo( { + + getCss: PIE.StyleInfoBase.cacheWhenLocked( function() { + var cs = this.targetElement.currentStyle; + return cs.visibility + '|' + cs.display; + } ), + + parseCss: function() { + var el = this.targetElement, + rs = el.runtimeStyle, + cs = el.currentStyle, + rsVis = rs.visibility, + csVis; + + rs.visibility = ''; + csVis = cs.visibility; + rs.visibility = rsVis; + + return { + visible: csVis !== 'hidden', + displayed: cs.display !== 'none' + } + }, + + /** + * Always return false for isActive, since this property alone will not trigger + * a renderer to do anything. + */ + isActive: function() { + return false; + } + +} ); +PIE.RendererBase = { + + /** + * Create a new Renderer class, with the standard constructor, and augmented by + * the RendererBase's members. + * @param proto + */ + newRenderer: function( proto ) { + function Renderer( el, boundsInfo, styleInfos, parent ) { + this.targetElement = el; + this.boundsInfo = boundsInfo; + this.styleInfos = styleInfos; + this.parent = parent; + } + PIE.Util.merge( Renderer.prototype, PIE.RendererBase, proto ); + return Renderer; + }, + + /** + * Flag indicating the element has already been positioned at least once. + * @type {boolean} + */ + isPositioned: false, + + /** + * Determine if the renderer needs to be updated + * @return {boolean} + */ + needsUpdate: function() { + return false; + }, + + /** + * Run any preparation logic that would affect the main update logic of this + * renderer or any of the other renderers, e.g. things that might affect the + * element's size or style properties. + */ + prepareUpdate: PIE.emptyFn, + + /** + * Tell the renderer to update based on modified properties + */ + updateProps: function() { + this.destroy(); + if( this.isActive() ) { + this.draw(); + } + }, + + /** + * Tell the renderer to update based on modified element position + */ + updatePos: function() { + this.isPositioned = true; + }, + + /** + * Tell the renderer to update based on modified element dimensions + */ + updateSize: function() { + if( this.isActive() ) { + this.draw(); + } else { + this.destroy(); + } + }, + + + /** + * 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; + } +}; +/** + * Root renderer; creates the outermost container element and handles keeping it aligned + * with the target element's size and position. + * @param {Element} el The target element + * @param {Object} styleInfos The StyleInfo objects + */ +PIE.RootRenderer = PIE.RendererBase.newRenderer( { + + isActive: function() { + var children = this.childRenderers; + for( var i in children ) { + if( children.hasOwnProperty( i ) && children[ i ].isActive() ) { + return true; + } + } + return false; + }, + + needsUpdate: function() { + return this.styleInfos.visibilityInfo.changed(); + }, + + updatePos: function() { + if( this.isActive() ) { + var el = this.getPositioningElement(), + par = el, + docEl, + parRect, + tgtCS = el.currentStyle, + tgtPos = tgtCS.position, + boxPos, + s = this.getBox().style, cs, + x = 0, y = 0, + elBounds = this.boundsInfo.getBounds(), + logicalZoomRatio = elBounds.logicalZoomRatio; + + if( tgtPos === 'fixed' && PIE.ieVersion > 6 ) { + x = elBounds.x * logicalZoomRatio; + y = elBounds.y * logicalZoomRatio; + boxPos = tgtPos; + } else { + // Get the element's offsets from its nearest positioned ancestor. Uses + // getBoundingClientRect for accuracy and speed. + do { + par = par.offsetParent; + } while( par && ( par.currentStyle.position === 'static' ) ); + if( par ) { + parRect = par.getBoundingClientRect(); + cs = par.currentStyle; + 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 ) * logicalZoomRatio; + y = ( elBounds.y + docEl.scrollTop - docEl.clientTop ) * logicalZoomRatio; + } + boxPos = 'absolute'; + } + + s.position = boxPos; + s.left = x; + s.top = y; + s.zIndex = tgtPos === 'static' ? -1 : tgtCS.zIndex; + this.isPositioned = true; + } + }, + + updateSize: PIE.emptyFn, + + updateVisibility: function() { + var vis = this.styleInfos.visibilityInfo.getProps(); + this.getBox().style.display = ( vis.visible && vis.displayed ) ? '' : 'none'; + }, + + updateProps: function() { + if( this.isActive() ) { + this.updateVisibility(); + } else { + this.destroy(); + } + }, + + getPositioningElement: function() { + var el = this.targetElement; + return el.tagName in PIE.tableCellTags ? el.offsetParent : el; + }, + + getBox: function() { + var box = this._box, el; + if( !box ) { + el = this.getPositioningElement(); + box = this._box = doc.createElement( 'css3-container' ); + box.style['direction'] = 'ltr'; //fix positioning bug in rtl environments + + this.updateVisibility(); + + el.parentNode.insertBefore( box, el ); + } + return box; + }, + + finishUpdate: PIE.emptyFn, + + destroy: function() { + var box = this._box, par; + if( box && ( par = box.parentNode ) ) { + par.removeChild( box ); + } + delete this._box; + delete this._layers; + } + +} ); +/** + * Renderer for element backgrounds. + * @constructor + * @param {Element} el The target element + * @param {Object} styleInfos The StyleInfo objects + * @param {PIE.RootRenderer} parent + */ +PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( { + + boxZIndex: 2, + boxName: 'background', + + needsUpdate: function() { + var si = this.styleInfos; + return si.backgroundInfo.changed() || si.borderRadiusInfo.changed(); + }, + + isActive: function() { + var si = this.styleInfos; + return si.borderImageInfo.isActive() || + si.borderRadiusInfo.isActive() || + si.backgroundInfo.isActive() || + ( si.boxShadowInfo.isActive() && si.boxShadowInfo.getProps().inset ); + }, + + /** + * Draw the shapes + */ + draw: function() { + var bounds = this.boundsInfo.getBounds(); + if( bounds.w && bounds.h ) { + this.drawBgColor(); + this.drawBgImages(); + } + }, + + /** + * Draw the background color shape + */ + drawBgColor: function() { + var props = this.styleInfos.backgroundInfo.getProps(), + bounds = this.boundsInfo.getBounds(), + el = this.targetElement, + color = props && props.color, + shape, w, h, s, alpha; + + if( color && color.alpha() > 0 ) { + this.hideBackground(); + + shape = this.getShape( 'bgColor', 'fill', this.getBox(), 1 ); + w = bounds.w; + h = bounds.h; + shape.stroked = false; + shape.coordsize = w * 2 + ',' + h * 2; + shape.coordorigin = '1,1'; + shape.path = this.getBoxPath( null, 2 ); + s = shape.style; + s.width = w; + s.height = h; + shape.fill.color = color.colorValue( el ); + + alpha = color.alpha(); + if( alpha < 1 ) { + shape.fill.opacity = alpha; + } + } else { + this.deleteShape( 'bgColor' ); + } + }, + + /** + * Draw all the background image layers + */ + drawBgImages: function() { + var props = this.styleInfos.backgroundInfo.getProps(), + bounds = this.boundsInfo.getBounds(), + images = props && props.bgImages, + img, shape, w, h, s, i; + + if( images ) { + this.hideBackground(); + + w = bounds.w; + h = bounds.h; + + i = images.length; + while( i-- ) { + img = images[i]; + shape = this.getShape( 'bgImage' + i, 'fill', this.getBox(), 2 ); + + shape.stroked = false; + shape.fill.type = 'tile'; + shape.fillcolor = 'none'; + shape.coordsize = w * 2 + ',' + h * 2; + shape.coordorigin = '1,1'; + shape.path = this.getBoxPath( 0, 2 ); + s = shape.style; + s.width = w; + s.height = h; + + if( img.imgType === 'linear-gradient' ) { + this.addLinearGradient( shape, img ); + } + else { + shape.fill.src = img.imgUrl; + this.positionBgImage( shape, i ); + } + } + } + + // Delete any bgImage shapes previously created which weren't used above + i = images ? images.length : 0; + while( this.deleteShape( 'bgImage' + i++ ) ) {} + }, + + + /** + * Set the position and clipping of the background image for a layer + * @param {Element} shape + * @param {number} index + */ + positionBgImage: function( shape, index ) { + var me = this; + PIE.Util.withImageSize( shape.fill.src, function( size ) { + var el = me.targetElement, + bounds = me.boundsInfo.getBounds(), + elW = bounds.w, + elH = bounds.h; + + // 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 fill = shape.fill, + si = me.styleInfos, + border = si.borderInfo.getProps(), + bw = border && border.widths, + bwT = bw ? bw['t'].pixels( el ) : 0, + bwR = bw ? bw['r'].pixels( el ) : 0, + bwB = bw ? bw['b'].pixels( el ) : 0, + bwL = bw ? bw['l'].pixels( el ) : 0, + bg = si.backgroundInfo.getProps().bgImages[ index ], + bgPos = bg.bgPosition ? bg.bgPosition.coords( el, elW - size.w - bwL - bwR, elH - size.h - bwT - bwB ) : { x:0, y:0 }, + repeat = bg.imgRepeat, + pxX, pxY, + clipT = 0, clipL = 0, + clipR = elW + 1, clipB = elH + 1, //make sure the default clip region is not inside the box (by a subpixel) + clipAdjust = PIE.ieVersion === 8 ? 0 : 1; //prior to IE8 requires 1 extra pixel in the image clip region + + // Positioning - find the pixel offset from the top/left and convert to a ratio + // The position is shifted by half a pixel, to adjust for the half-pixel coordorigin shift which is + // needed to fix antialiasing but makes the bg image fuzzy. + pxX = Math.round( bgPos.x ) + bwL + 0.5; + 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' ) { + clipT = pxY + 1; + clipB = pxY + size.h + clipAdjust; + } + if( repeat === 'repeat-y' || repeat === 'no-repeat' ) { + clipL = pxX + 1; + clipR = pxX + size.w + clipAdjust; + } + shape.style.clip = 'rect(' + clipT + 'px,' + clipR + 'px,' + clipB + 'px,' + clipL + 'px)'; + } + } + } ); + }, + + + /** + * Draw the linear gradient for a gradient layer + * @param {Element} shape + * @param {Object} info The object holding the information about the gradient + */ + addLinearGradient: function( shape, info ) { + var el = this.targetElement, + bounds = this.boundsInfo.getBounds(), + w = bounds.w, + h = bounds.h, + fill = shape.fill, + stops = info.stops, + stopCount = stops.length, + PI = Math.PI, + GradientUtil = PIE.GradientUtil, + perpendicularIntersect = GradientUtil.perpendicularIntersect, + distance = GradientUtil.distance, + metrics = GradientUtil.getGradientMetrics( el, w, h, info ), + angle = metrics.angle, + startX = metrics.startX, + startY = metrics.startY, + startCornerX = metrics.startCornerX, + startCornerY = metrics.startCornerY, + endCornerX = metrics.endCornerX, + endCornerY = metrics.endCornerY, + deltaX = metrics.deltaX, + deltaY = metrics.deltaY, + lineLength = metrics.lineLength, + vmlAngle, vmlGradientLength, vmlColors, + stopPx, vmlOffsetPct, + p, i, j, before, after; + + // In VML land, the angle of the rendered gradient depends on the aspect ratio of the shape's + // bounding box; for example specifying a 45 deg angle actually results in a gradient + // drawn diagonally from one corner to its opposite corner, which will only appear to the + // viewer as 45 degrees if the shape is equilateral. We adjust for this by taking the x/y deltas + // between the start and end points, multiply one of them by the shape's aspect ratio, + // and get their arctangent, resulting in an appropriate VML angle. If the angle is perfectly + // horizontal or vertical then we don't need to do this conversion. + vmlAngle = ( angle % 90 ) ? Math.atan2( deltaX * w / h, deltaY ) / PI * 180 : ( angle + 90 ); + + // VML angles are 180 degrees offset from CSS angles + vmlAngle += 180; + vmlAngle = vmlAngle % 360; + + // Add all the stops to the VML 'colors' list, including the first and last stops. + // For each, we find its pixel offset along the gradient-line; if the offset of a stop is less + // than that of its predecessor we increase it to be equal. We then map that pixel offset to a + // percentage along the VML gradient-line, which runs from shape corner to corner. + p = perpendicularIntersect( startCornerX, startCornerY, angle, endCornerX, endCornerY ); + vmlGradientLength = distance( startCornerX, startCornerY, p[0], p[1] ); + vmlColors = []; + p = perpendicularIntersect( startX, startY, angle, startCornerX, startCornerY ); + vmlOffsetPct = distance( startX, startY, p[0], p[1] ) / vmlGradientLength * 100; + + // Find the pixel offsets along the CSS3 gradient-line for each stop. + stopPx = []; + for( i = 0; i < stopCount; i++ ) { + stopPx.push( stops[i].offset ? stops[i].offset.pixels( el, lineLength ) : + i === 0 ? 0 : i === stopCount - 1 ? lineLength : null ); + } + // Fill in gaps with evenly-spaced offsets + for( i = 1; i < stopCount; i++ ) { + if( stopPx[ i ] === null ) { + before = stopPx[ i - 1 ]; + j = i; + do { + after = stopPx[ ++j ]; + } while( after === null ); + stopPx[ i ] = before + ( after - before ) / ( j - i + 1 ); + } + // Make sure each stop's offset is no less than the one before it + stopPx[ i ] = Math.max( stopPx[ i ], stopPx[ i - 1 ] ); + } + + // Convert to percentage along the VML gradient line and add to the VML 'colors' value + for( i = 0; i < stopCount; i++ ) { + vmlColors.push( + ( vmlOffsetPct + ( stopPx[ i ] / vmlGradientLength * 100 ) ) + '% ' + stops[i].color.colorValue( el ) + ); + } + + // Now, finally, we're ready to render the gradient fill. Set the start and end colors to + // the first and last stop colors; this just sets outer bounds for the gradient. + fill['angle'] = vmlAngle; + fill['type'] = 'gradient'; + fill['method'] = 'sigma'; + fill['color'] = stops[0].color.colorValue( el ); + fill['color2'] = stops[stopCount - 1].color.colorValue( el ); + if( fill['colors'] ) { //sometimes the colors object isn't initialized so we have to assign it directly (?) + fill['colors'].value = vmlColors.join( ',' ); + } else { + fill['colors'] = vmlColors.join( ',' ); + } + }, + + + /** + * Hide the actual background image and color of the element. + */ + hideBackground: function() { + var rs = this.targetElement.runtimeStyle; + rs.backgroundImage = 'url(about:blank)'; //ensures the background area reacts to mouse events + rs.backgroundColor = 'transparent'; + }, + + destroy: function() { + PIE.RendererBase.destroy.call( this ); + var rs = this.targetElement.runtimeStyle; + rs.backgroundImage = rs.backgroundColor = ''; + } + +} ); +/** + * Renderer for element borders. + * @constructor + * @param {Element} el The target element + * @param {Object} styleInfos The StyleInfo objects + * @param {PIE.RootRenderer} parent + */ +PIE.BorderRenderer = PIE.RendererBase.newRenderer( { + + boxZIndex: 4, + boxName: 'border', + + needsUpdate: function() { + var si = this.styleInfos; + return si.borderInfo.changed() || si.borderRadiusInfo.changed(); + }, + + isActive: function() { + var si = this.styleInfos; + return si.borderRadiusInfo.isActive() && + !si.borderImageInfo.isActive() && + si.borderInfo.isActive(); //check BorderStyleInfo last because it's the most expensive + }, + + /** + * Draw the border shape(s) + */ + draw: function() { + var el = this.targetElement, + props = this.styleInfos.borderInfo.getProps(), + bounds = this.boundsInfo.getBounds(), + w = bounds.w, + h = bounds.h, + shape, stroke, s, + segments, seg, i, len; + + if( props ) { + this.hideBorder(); + + segments = this.getBorderSegments( 2 ); + for( i = 0, len = segments.length; i < len; i++) { + seg = segments[i]; + shape = this.getShape( 'borderPiece' + i, seg.stroke ? 'stroke' : 'fill', this.getBox() ); + shape.coordsize = w * 2 + ',' + h * 2; + shape.coordorigin = '1,1'; + shape.path = seg.path; + s = shape.style; + s.width = w; + s.height = h; + + shape.filled = !!seg.fill; + shape.stroked = !!seg.stroke; + if( seg.stroke ) { + stroke = shape.stroke; + stroke['weight'] = seg.weight + 'px'; + stroke.color = seg.color.colorValue( el ); + stroke['dashstyle'] = seg.stroke === 'dashed' ? '2 2' : seg.stroke === 'dotted' ? '1 1' : 'solid'; + stroke['linestyle'] = seg.stroke === 'double' && seg.weight > 2 ? 'ThinThin' : 'Single'; + } else { + shape.fill.color = seg.fill.colorValue( el ); + } + } + + // remove any previously-created border shapes which didn't get used above + while( this.deleteShape( 'borderPiece' + i++ ) ) {} + } + }, + + + /** + * Get the VML path definitions for the border segment(s). + * @param {number=} mult If specified, all coordinates will be multiplied by this number + * @return {Array.<string>} + */ + getBorderSegments: function( mult ) { + var el = this.targetElement, + bounds, elW, elH, + borderInfo = this.styleInfos.borderInfo, + segments = [], + floor, ceil, wT, wR, wB, wL, + round = Math.round, + borderProps, radiusInfo, radii, widths, styles, colors; + + if( borderInfo.isActive() ) { + borderProps = borderInfo.getProps(); + + widths = borderProps.widths; + styles = borderProps.styles; + colors = borderProps.colors; + + if( borderProps.widthsSame && borderProps.stylesSame && borderProps.colorsSame ) { + if( colors['t'].alpha() > 0 ) { + // shortcut for identical border on all sides - only need 1 stroked shape + wT = widths['t'].pixels( el ); //thickness + wR = wT / 2; //shrink + segments.push( { + path: this.getBoxPath( { t: wR, r: wR, b: wR, l: wR }, mult ), + stroke: styles['t'], + color: colors['t'], + weight: wT + } ); + } + } + else { + mult = mult || 1; + bounds = this.boundsInfo.getBounds(); + elW = bounds.w; + elH = bounds.h; + + wT = round( widths['t'].pixels( el ) ); + wR = round( widths['r'].pixels( el ) ); + wB = round( widths['b'].pixels( el ) ); + wL = round( widths['l'].pixels( el ) ); + var pxWidths = { + 't': wT, + 'r': wR, + 'b': wB, + 'l': wL + }; + + radiusInfo = this.styleInfos.borderRadiusInfo; + if( radiusInfo.isActive() ) { + radii = this.getRadiiPixels( radiusInfo.getProps() ); + } + + floor = Math.floor; + ceil = Math.ceil; + + function radius( xy, corner ) { + return radii ? radii[ xy ][ corner ] : 0; + } + + function curve( corner, shrinkX, shrinkY, startAngle, ccw, doMove ) { + var rx = radius( 'x', corner), + ry = radius( 'y', corner), + deg = 65535, + isRight = corner.charAt( 1 ) === 'r', + isBottom = corner.charAt( 0 ) === 'b'; + return ( rx > 0 && ry > 0 ) ? + ( doMove ? 'al' : 'ae' ) + + ( isRight ? ceil( elW - rx ) : floor( rx ) ) * mult + ',' + // center x + ( isBottom ? ceil( elH - ry ) : floor( ry ) ) * mult + ',' + // center y + ( floor( rx ) - shrinkX ) * mult + ',' + // width + ( floor( ry ) - shrinkY ) * mult + ',' + // height + ( startAngle * deg ) + ',' + // start angle + ( 45 * deg * ( ccw ? 1 : -1 ) // angle change + ) : ( + ( doMove ? 'm' : 'l' ) + + ( isRight ? elW - shrinkX : shrinkX ) * mult + ',' + + ( isBottom ? elH - shrinkY : shrinkY ) * mult + ); + } + + function line( side, shrink, ccw, doMove ) { + var + start = ( + side === 't' ? + floor( radius( 'x', 'tl') ) * mult + ',' + ceil( shrink ) * mult : + side === 'r' ? + ceil( elW - shrink ) * mult + ',' + floor( radius( 'y', 'tr') ) * mult : + side === 'b' ? + ceil( elW - radius( 'x', 'br') ) * mult + ',' + floor( elH - shrink ) * mult : + // side === 'l' ? + floor( shrink ) * mult + ',' + ceil( elH - radius( 'y', 'bl') ) * mult + ), + end = ( + side === 't' ? + ceil( elW - radius( 'x', 'tr') ) * mult + ',' + ceil( shrink ) * mult : + side === 'r' ? + ceil( elW - shrink ) * mult + ',' + ceil( elH - radius( 'y', 'br') ) * mult : + side === 'b' ? + floor( radius( 'x', 'bl') ) * mult + ',' + floor( elH - shrink ) * mult : + // side === 'l' ? + floor( shrink ) * mult + ',' + floor( radius( 'y', 'tl') ) * mult + ); + return ccw ? ( doMove ? 'm' + end : '' ) + 'l' + start : + ( doMove ? 'm' + start : '' ) + 'l' + end; + } + + + function addSide( side, sideBefore, sideAfter, cornerBefore, cornerAfter, baseAngle ) { + var vert = side === 'l' || side === 'r', + sideW = pxWidths[ side ], + beforeX, beforeY, afterX, afterY; + + if( sideW > 0 && styles[ side ] !== 'none' && colors[ side ].alpha() > 0 ) { + beforeX = pxWidths[ vert ? side : sideBefore ]; + beforeY = pxWidths[ vert ? sideBefore : side ]; + afterX = pxWidths[ vert ? side : sideAfter ]; + afterY = pxWidths[ vert ? sideAfter : side ]; + + if( styles[ side ] === 'dashed' || styles[ side ] === 'dotted' ) { + segments.push( { + path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) + + curve( cornerBefore, 0, 0, baseAngle, 1, 0 ), + fill: colors[ side ] + } ); + segments.push( { + path: line( side, sideW / 2, 0, 1 ), + stroke: styles[ side ], + weight: sideW, + color: colors[ side ] + } ); + segments.push( { + path: curve( cornerAfter, afterX, afterY, baseAngle, 0, 1 ) + + curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ), + fill: colors[ side ] + } ); + } + else { + segments.push( { + path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) + + line( side, sideW, 0, 0 ) + + curve( cornerAfter, afterX, afterY, baseAngle, 0, 0 ) + + + ( styles[ side ] === 'double' && sideW > 2 ? + curve( cornerAfter, afterX - floor( afterX / 3 ), afterY - floor( afterY / 3 ), baseAngle - 45, 1, 0 ) + + line( side, ceil( sideW / 3 * 2 ), 1, 0 ) + + curve( cornerBefore, beforeX - floor( beforeX / 3 ), beforeY - floor( beforeY / 3 ), baseAngle, 1, 0 ) + + 'x ' + + curve( cornerBefore, floor( beforeX / 3 ), floor( beforeY / 3 ), baseAngle + 45, 0, 1 ) + + line( side, floor( sideW / 3 ), 1, 0 ) + + curve( cornerAfter, floor( afterX / 3 ), floor( afterY / 3 ), baseAngle, 0, 0 ) + : '' ) + + + curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ) + + line( side, 0, 1, 0 ) + + curve( cornerBefore, 0, 0, baseAngle, 1, 0 ), + fill: colors[ side ] + } ); + } + } + } + + addSide( 't', 'l', 'r', 'tl', 'tr', 90 ); + addSide( 'r', 't', 'b', 'tr', 'br', 0 ); + addSide( 'b', 'r', 'l', 'br', 'bl', -90 ); + addSide( 'l', 'b', 't', 'bl', 'tl', -180 ); + } + } + + return segments; + }, + + destroy: function() { + var me = this; + if (me.finalized || !me.styleInfos.borderImageInfo.isActive()) { + me.targetElement.runtimeStyle.borderColor = ''; + } + PIE.RendererBase.destroy.call( me ); + } + + +} ); +/** + * Renderer for border-image + * @constructor + * @param {Element} el The target element + * @param {Object} styleInfos The StyleInfo objects + * @param {PIE.RootRenderer} parent + */ +PIE.BorderImageRenderer = PIE.RendererBase.newRenderer( { + + boxZIndex: 5, + pieceNames: [ 't', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl', 'c' ], + + needsUpdate: function() { + return this.styleInfos.borderImageInfo.changed(); + }, + + isActive: function() { + return this.styleInfos.borderImageInfo.isActive(); + }, + + draw: function() { + this.getBox(); //make sure pieces are created + + var props = this.styleInfos.borderImageInfo.getProps(), + borderProps = this.styleInfos.borderInfo.getProps(), + bounds = this.boundsInfo.getBounds(), + el = this.targetElement, + pieces = this.pieces; + + PIE.Util.withImageSize( props.src, function( imgSize ) { + var elW = bounds.w, + elH = bounds.h, + zero = PIE.getLength( '0' ), + widths = props.widths || ( borderProps ? borderProps.widths : { 't': zero, 'r': zero, 'b': zero, 'l': zero } ), + widthT = widths['t'].pixels( el ), + widthR = widths['r'].pixels( el ), + widthB = widths['b'].pixels( el ), + widthL = widths['l'].pixels( el ), + slices = props.slice, + sliceT = slices['t'].pixels( el ), + sliceR = slices['r'].pixels( el ), + sliceB = slices['b'].pixels( el ), + sliceL = slices['l'].pixels( el ); + + // Piece positions and sizes + function setSizeAndPos( piece, w, h, x, y ) { + var s = pieces[piece].style, + max = Math.max; + s.width = max(w, 0); + s.height = max(h, 0); + s.left = x; + s.top = y; + } + setSizeAndPos( 'tl', widthL, widthT, 0, 0 ); + setSizeAndPos( 't', elW - widthL - widthR, widthT, widthL, 0 ); + setSizeAndPos( 'tr', widthR, widthT, elW - widthR, 0 ); + setSizeAndPos( 'r', widthR, elH - widthT - widthB, elW - widthR, widthT ); + setSizeAndPos( 'br', widthR, widthB, elW - widthR, elH - widthB ); + setSizeAndPos( 'b', elW - widthL - widthR, widthB, widthL, elH - widthB ); + setSizeAndPos( 'bl', widthL, widthB, 0, elH - widthB ); + setSizeAndPos( 'l', widthL, elH - widthT - widthB, 0, widthT ); + setSizeAndPos( 'c', elW - widthL - widthR, elH - widthT - widthB, widthL, widthT ); + + + // image croppings + function setCrops( sides, crop, val ) { + for( var i=0, len=sides.length; i < len; i++ ) { + pieces[ sides[i] ]['imagedata'][ crop ] = val; + } + } + + // corners + setCrops( [ 'tl', 't', 'tr' ], 'cropBottom', ( imgSize.h - sliceT ) / imgSize.h ); + setCrops( [ 'tl', 'l', 'bl' ], 'cropRight', ( imgSize.w - sliceL ) / imgSize.w ); + setCrops( [ 'bl', 'b', 'br' ], 'cropTop', ( imgSize.h - sliceB ) / imgSize.h ); + setCrops( [ 'tr', 'r', 'br' ], 'cropLeft', ( imgSize.w - sliceR ) / imgSize.w ); + + // edges and center + // TODO right now this treats everything like 'stretch', need to support other schemes + //if( props.repeat.v === 'stretch' ) { + setCrops( [ 'l', 'r', 'c' ], 'cropTop', sliceT / imgSize.h ); + setCrops( [ 'l', 'r', 'c' ], 'cropBottom', sliceB / imgSize.h ); + //} + //if( props.repeat.h === 'stretch' ) { + setCrops( [ 't', 'b', 'c' ], 'cropLeft', sliceL / imgSize.w ); + setCrops( [ 't', 'b', 'c' ], 'cropRight', sliceR / imgSize.w ); + //} + + // center fill + pieces['c'].style.display = props.fill ? '' : 'none'; + }, this ); + }, + + getBox: function() { + var box = this.parent.getLayer( this.boxZIndex ), + s, piece, i, + pieceNames = this.pieceNames, + len = pieceNames.length; + + if( !box ) { + box = doc.createElement( 'border-image' ); + s = box.style; + s.position = 'absolute'; + + this.pieces = {}; + + for( i = 0; i < len; i++ ) { + piece = this.pieces[ pieceNames[i] ] = PIE.Util.createVmlElement( 'rect' ); + piece.appendChild( PIE.Util.createVmlElement( 'imagedata' ) ); + s = piece.style; + s['behavior'] = 'url(#default#VML)'; + s.position = "absolute"; + s.top = s.left = 0; + piece['imagedata'].src = this.styleInfos.borderImageInfo.getProps().src; + piece.stroked = false; + piece.filled = false; + box.appendChild( piece ); + } + + this.parent.addLayer( this.boxZIndex, box ); + } + + return box; + }, + + prepareUpdate: function() { + if (this.isActive()) { + var me = this, + el = me.targetElement, + rs = el.runtimeStyle, + widths = me.styleInfos.borderImageInfo.getProps().widths; + + // Force border-style to solid so it doesn't collapse + rs.borderStyle = 'solid'; + + // If widths specified in border-image shorthand, override border-width + // NOTE px units needed here as this gets used by the IE9 renderer too + if ( widths ) { + rs.borderTopWidth = widths['t'].pixels( el ) + 'px'; + rs.borderRightWidth = widths['r'].pixels( el ) + 'px'; + rs.borderBottomWidth = widths['b'].pixels( el ) + 'px'; + rs.borderLeftWidth = widths['l'].pixels( el ) + 'px'; + } + + // Make the border transparent + me.hideBorder(); + } + }, + + destroy: function() { + var me = this, + rs = me.targetElement.runtimeStyle; + rs.borderStyle = ''; + if (me.finalized || !me.styleInfos.borderInfo.isActive()) { + rs.borderColor = rs.borderWidth = ''; + } + PIE.RendererBase.destroy.call( this ); + } + +} ); +/** + * Renderer for outset box-shadows + * @constructor + * @param {Element} el The target element + * @param {Object} styleInfos The StyleInfo objects + * @param {PIE.RootRenderer} parent + */ +PIE.BoxShadowOutsetRenderer = PIE.RendererBase.newRenderer( { + + boxZIndex: 1, + boxName: 'outset-box-shadow', + + needsUpdate: function() { + var si = this.styleInfos; + return si.boxShadowInfo.changed() || si.borderRadiusInfo.changed(); + }, + + isActive: function() { + var boxShadowInfo = this.styleInfos.boxShadowInfo; + return boxShadowInfo.isActive() && boxShadowInfo.getProps().outset[0]; + }, + + draw: function() { + var me = this, + el = this.targetElement, + box = this.getBox(), + styleInfos = this.styleInfos, + shadowInfos = styleInfos.boxShadowInfo.getProps().outset, + radii = styleInfos.borderRadiusInfo.getProps(), + len = shadowInfos.length, + i = len, j, + bounds = this.boundsInfo.getBounds(), + w = bounds.w, + h = bounds.h, + clipAdjust = PIE.ieVersion === 8 ? 1 : 0, //workaround for IE8 bug where VML leaks out top/left of clip region by 1px + corners = [ 'tl', 'tr', 'br', 'bl' ], corner, + shadowInfo, shape, fill, ss, xOff, yOff, spread, blur, shrink, color, alpha, path, + totalW, totalH, focusX, focusY, isBottom, isRight; + + + function getShadowShape( index, corner, xOff, yOff, color, blur, path ) { + var shape = me.getShape( 'shadow' + index + corner, 'fill', box, len - index ), + fill = shape.fill; + + // Position and size + shape['coordsize'] = w * 2 + ',' + h * 2; + shape['coordorigin'] = '1,1'; + + // Color and opacity + shape['stroked'] = false; + shape['filled'] = true; + fill.color = color.colorValue( el ); + if( blur ) { + fill['type'] = 'gradienttitle'; //makes the VML gradient follow the shape's outline - hooray for undocumented features?!?! + fill['color2'] = fill.color; + fill['opacity'] = 0; + } + + // Path + shape.path = path; + + // This needs to go last for some reason, to prevent rendering at incorrect size + ss = shape.style; + ss.left = xOff; + ss.top = yOff; + ss.width = w; + ss.height = h; + + return shape; + } + + + while( i-- ) { + shadowInfo = shadowInfos[ i ]; + xOff = shadowInfo.xOffset.pixels( el ); + yOff = shadowInfo.yOffset.pixels( el ); + spread = shadowInfo.spread.pixels( el ); + blur = shadowInfo.blur.pixels( el ); + color = shadowInfo.color; + // Shape path + shrink = -spread - blur; + if( !radii && blur ) { + // If blurring, use a non-null border radius info object so that getBoxPath will + // round the corners of the expanded shadow shape rather than squaring them off. + radii = PIE.BorderRadiusStyleInfo.ALL_ZERO; + } + path = this.getBoxPath( { t: shrink, r: shrink, b: shrink, l: shrink }, 2, radii ); + + if( blur ) { + totalW = ( spread + blur ) * 2 + w; + totalH = ( spread + blur ) * 2 + h; + 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 + // zero which results in ugly artifacts. Instead we create four shapes, each with its + // gradient focus past center, and then clip them so each only shows the quadrant + // opposite the focus. + for( j = 4; j--; ) { + corner = corners[j]; + isBottom = corner.charAt( 0 ) === 'b'; + isRight = corner.charAt( 1 ) === 'r'; + shape = getShadowShape( i, corner, xOff, yOff, color, blur, path ); + fill = shape.fill; + fill['focusposition'] = ( isRight ? 1 - focusX : focusX ) + ',' + + ( isBottom ? 1 - focusY : focusY ); + fill['focussize'] = '0,0'; + + // Clip to show only the appropriate quadrant. Add 1px to the top/left clip values + // in IE8 to prevent a bug where IE8 displays one pixel outside the clip region. + shape.style.clip = 'rect(' + ( ( isBottom ? totalH / 2 : 0 ) + clipAdjust ) + 'px,' + + ( isRight ? totalW : totalW / 2 ) + 'px,' + + ( isBottom ? totalH : totalH / 2 ) + 'px,' + + ( ( isRight ? totalW / 2 : 0 ) + clipAdjust ) + 'px)'; + } + } else { + // TODO delete old quadrant shapes if resizing expands past the barrier + shape = getShadowShape( i, '', xOff, yOff, color, blur, path ); + fill = shape.fill; + fill['focusposition'] = focusX + ',' + focusY; + fill['focussize'] = ( 1 - focusX * 2 ) + ',' + ( 1 - focusY * 2 ); + } + } else { + shape = getShadowShape( i, '', xOff, yOff, color, blur, path ); + alpha = color.alpha(); + if( alpha < 1 ) { + // shape.style.filter = 'alpha(opacity=' + ( alpha * 100 ) + ')'; + // ss.filter = 'progid:DXImageTransform.Microsoft.BasicImage(opacity=' + ( alpha ) + ')'; + shape.fill.opacity = alpha; + } + } + } + } + +} ); +/** + * Renderer for re-rendering img elements using VML. Kicks in if the img has + * a border-radius applied, or if the -pie-png-fix flag is set. + * @constructor + * @param {Element} el The target element + * @param {Object} styleInfos The StyleInfo objects + * @param {PIE.RootRenderer} parent + */ +PIE.ImgRenderer = PIE.RendererBase.newRenderer( { + + boxZIndex: 6, + boxName: 'imgEl', + + needsUpdate: function() { + var si = this.styleInfos; + return this.targetElement.src !== this._lastSrc || si.borderRadiusInfo.changed(); + }, + + isActive: function() { + var si = this.styleInfos; + return si.borderRadiusInfo.isActive() || si.backgroundInfo.isPngFix(); + }, + + draw: function() { + this._lastSrc = src; + this.hideActualImg(); + + var shape = this.getShape( 'img', 'fill', this.getBox() ), + fill = shape.fill, + bounds = this.boundsInfo.getBounds(), + w = bounds.w, + h = bounds.h, + borderProps = this.styleInfos.borderInfo.getProps(), + borderWidths = borderProps && borderProps.widths, + el = this.targetElement, + src = el.src, + round = Math.round, + cs = el.currentStyle, + getLength = PIE.getLength, + s, zero; + + // In IE6, the BorderRenderer will have hidden the border by moving the border-width to + // the padding; therefore we want to pretend the borders have no width so they aren't doubled + // when adding in the current padding value below. + if( !borderWidths || PIE.ieVersion < 7 ) { + zero = PIE.getLength( '0' ); + borderWidths = { 't': zero, 'r': zero, 'b': zero, 'l': zero }; + } + + shape.stroked = false; + fill.type = 'frame'; + fill.src = src; + fill.position = (w ? 0.5 / w : 0) + ',' + (h ? 0.5 / h : 0); + shape.coordsize = w * 2 + ',' + h * 2; + shape.coordorigin = '1,1'; + shape.path = this.getBoxPath( { + t: round( borderWidths['t'].pixels( el ) + getLength( cs.paddingTop ).pixels( el ) ), + r: round( borderWidths['r'].pixels( el ) + getLength( cs.paddingRight ).pixels( el ) ), + b: round( borderWidths['b'].pixels( el ) + getLength( cs.paddingBottom ).pixels( el ) ), + l: round( borderWidths['l'].pixels( el ) + getLength( cs.paddingLeft ).pixels( el ) ) + }, 2 ); + s = shape.style; + s.width = w; + s.height = h; + }, + + hideActualImg: function() { + this.targetElement.runtimeStyle.filter = 'alpha(opacity=0)'; + }, + + destroy: function() { + PIE.RendererBase.destroy.call( this ); + this.targetElement.runtimeStyle.filter = ''; + } + +} ); +/** + * Root renderer for IE9; manages the rendering layers in the element's background + * @param {Element} el The target element + * @param {Object} styleInfos The StyleInfo objects + */ +PIE.IE9RootRenderer = PIE.RendererBase.newRenderer( { + + updatePos: PIE.emptyFn, + updateSize: PIE.emptyFn, + updateVisibility: PIE.emptyFn, + updateProps: PIE.emptyFn, + + outerCommasRE: /^,+|,+$/g, + innerCommasRE: /,+/g, + + setBackgroundLayer: function(zIndex, bg) { + var me = this, + bgLayers = me._bgLayers || ( me._bgLayers = [] ), + undef; + bgLayers[zIndex] = bg || undef; + }, + + finishUpdate: function() { + var me = this, + bgLayers = me._bgLayers, + bg; + if( bgLayers && ( bg = bgLayers.join( ',' ).replace( me.outerCommasRE, '' ).replace( me.innerCommasRE, ',' ) ) !== me._lastBg ) { + me._lastBg = me.targetElement.runtimeStyle.background = bg; + } + }, + + destroy: function() { + this.targetElement.runtimeStyle.background = ''; + delete this._bgLayers; + } + +} ); +/** + * Renderer for element backgrounds, specific for IE9. Only handles translating CSS3 gradients + * to an equivalent SVG data URI. + * @constructor + * @param {Element} el The target element + * @param {Object} styleInfos The StyleInfo objects + */ +PIE.IE9BackgroundRenderer = PIE.RendererBase.newRenderer( { + + bgLayerZIndex: 1, + + needsUpdate: function() { + var si = this.styleInfos; + return si.backgroundInfo.changed(); + }, + + isActive: function() { + var si = this.styleInfos; + return si.backgroundInfo.isActive() || si.borderImageInfo.isActive(); + }, + + draw: function() { + var me = this, + props = me.styleInfos.backgroundInfo.getProps(), + bg, images, i = 0, img, bgAreaSize, bgSize; + + if ( props ) { + bg = []; + + images = props.bgImages; + if ( images ) { + while( img = images[ i++ ] ) { + if (img.imgType === 'linear-gradient' ) { + bgAreaSize = me.getBgAreaSize( img.bgOrigin ); + 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 ' + + ( img.bgAttachment || '' ) + ' ' + ( img.bgOrigin || '' ) + ' ' + ( img.bgClip || '' ) + ); + } else { + bg.push( img.origString ); + } + } + } + + if ( props.color ) { + bg.push( props.color.val ); + } + + me.parent.setBackgroundLayer(me.bgLayerZIndex, bg.join(',')); + } + }, + + bgPositionToString: function( bgPosition ) { + return bgPosition ? bgPosition.tokens.map(function(token) { + return token.tokenValue; + }).join(' ') : '0 0'; + }, + + getBgAreaSize: function( bgOrigin ) { + var me = this, + el = me.targetElement, + bounds = me.boundsInfo.getBounds(), + elW = bounds.w, + elH = bounds.h, + w = elW, + h = elH, + borders, getLength, cs; + + if( bgOrigin !== 'border-box' ) { + borders = me.styleInfos.borderInfo.getProps(); + if( borders && ( borders = borders.widths ) ) { + w -= borders[ 'l' ].pixels( el ) + borders[ 'l' ].pixels( el ); + h -= borders[ 't' ].pixels( el ) + borders[ 'b' ].pixels( el ); + } + } + + 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 ); + } + + return { w: w, h: h }; + }, + + getGradientSvg: function( info, bgWidth, bgHeight ) { + var el = this.targetElement, + stopsInfo = info.stops, + stopCount = stopsInfo.length, + metrics = PIE.GradientUtil.getGradientMetrics( el, bgWidth, bgHeight, info ), + startX = metrics.startX, + startY = metrics.startY, + endX = metrics.endX, + endY = metrics.endY, + lineLength = metrics.lineLength, + stopPx, + i, j, before, after, + svg; + + // Find the pixel offsets along the CSS3 gradient-line for each stop. + stopPx = []; + for( i = 0; i < stopCount; i++ ) { + stopPx.push( stopsInfo[i].offset ? stopsInfo[i].offset.pixels( el, lineLength ) : + i === 0 ? 0 : i === stopCount - 1 ? lineLength : null ); + } + // Fill in gaps with evenly-spaced offsets + for( i = 1; i < stopCount; i++ ) { + if( stopPx[ i ] === null ) { + before = stopPx[ i - 1 ]; + j = i; + do { + after = stopPx[ ++j ]; + } while( after === null ); + stopPx[ i ] = before + ( after - before ) / ( j - i + 1 ); + } + } + + svg = [ + '<svg width="' + bgWidth + '" height="' + bgHeight + '" xmlns="http://www.w3.org/2000/svg">' + + '<defs>' + + '<linearGradient id="g" gradientUnits="userSpaceOnUse"' + + ' x1="' + ( startX / bgWidth * 100 ) + '%" y1="' + ( startY / bgHeight * 100 ) + '%" x2="' + ( endX / bgWidth * 100 ) + '%" y2="' + ( endY / bgHeight * 100 ) + '%">' + ]; + + // Convert to percentage along the SVG gradient line and add to the stops list + for( i = 0; i < stopCount; i++ ) { + svg.push( + '<stop offset="' + ( stopPx[ i ] / lineLength ) + + '" stop-color="' + stopsInfo[i].color.colorValue( el ) + + '" stop-opacity="' + stopsInfo[i].color.alpha() + '"/>' + ); + } + + svg.push( + '</linearGradient>' + + '</defs>' + + '<rect width="100%" height="100%" fill="url(#g)"/>' + + '</svg>' + ); + + return svg.join( '' ); + }, + + destroy: function() { + this.parent.setBackgroundLayer( this.bgLayerZIndex ); + } + +} ); +/** + * Renderer for border-image + * @constructor + * @param {Element} el The target element + * @param {Object} styleInfos The StyleInfo objects + * @param {PIE.RootRenderer} parent + */ +PIE.IE9BorderImageRenderer = PIE.RendererBase.newRenderer( { + + REPEAT: 'repeat', + STRETCH: 'stretch', + ROUND: 'round', + + bgLayerZIndex: 0, + + needsUpdate: function() { + return this.styleInfos.borderImageInfo.changed(); + }, + + isActive: function() { + return this.styleInfos.borderImageInfo.isActive(); + }, + + draw: function() { + var me = this, + props = me.styleInfos.borderImageInfo.getProps(), + borderProps = me.styleInfos.borderInfo.getProps(), + bounds = me.boundsInfo.getBounds(), + repeat = props.repeat, + repeatH = repeat.h, + repeatV = repeat.v, + el = me.targetElement, + isAsync = 0; + + PIE.Util.withImageSize( props.src, function( imgSize ) { + var elW = bounds.w, + elH = bounds.h, + imgW = imgSize.w, + imgH = imgSize.h, + + // The image cannot be referenced as a URL directly in the SVG because IE9 throws a strange + // security exception (perhaps due to cross-origin policy within data URIs?) Therefore we + // work around this by converting the image data into a data URI itself using a transient + // canvas. This unfortunately requires the border-image src to be within the same domain, + // which isn't a limitation in true border-image, so we need to try and find a better fix. + imgSrc = me.imageToDataURI( props.src, imgW, imgH ), + + REPEAT = me.REPEAT, + STRETCH = me.STRETCH, + ROUND = me.ROUND, + ceil = Math.ceil, + + zero = PIE.getLength( '0' ), + widths = props.widths || ( borderProps ? borderProps.widths : { 't': zero, 'r': zero, 'b': zero, 'l': zero } ), + widthT = widths['t'].pixels( el ), + widthR = widths['r'].pixels( el ), + widthB = widths['b'].pixels( el ), + widthL = widths['l'].pixels( el ), + slices = props.slice, + sliceT = slices['t'].pixels( el ), + sliceR = slices['r'].pixels( el ), + sliceB = slices['b'].pixels( el ), + sliceL = slices['l'].pixels( el ), + centerW = elW - widthL - widthR, + middleH = elH - widthT - widthB, + imgCenterW = imgW - sliceL - sliceR, + imgMiddleH = imgH - sliceT - sliceB, + + // Determine the size of each tile - 'round' is handled below + tileSizeT = repeatH === STRETCH ? centerW : imgCenterW * widthT / sliceT, + tileSizeR = repeatV === STRETCH ? middleH : imgMiddleH * widthR / sliceR, + tileSizeB = repeatH === STRETCH ? centerW : imgCenterW * widthB / sliceB, + tileSizeL = repeatV === STRETCH ? middleH : imgMiddleH * widthL / sliceL, + + svg, + patterns = [], + rects = [], + i = 0; + + // For 'round', subtract from each tile's size enough so that they fill the space a whole number of times + if (repeatH === ROUND) { + tileSizeT -= (tileSizeT - (centerW % tileSizeT || tileSizeT)) / ceil(centerW / tileSizeT); + tileSizeB -= (tileSizeB - (centerW % tileSizeB || tileSizeB)) / ceil(centerW / tileSizeB); + } + if (repeatV === ROUND) { + tileSizeR -= (tileSizeR - (middleH % tileSizeR || tileSizeR)) / ceil(middleH / tileSizeR); + tileSizeL -= (tileSizeL - (middleH % tileSizeL || tileSizeL)) / ceil(middleH / tileSizeL); + } + + + // Build the SVG for the border-image rendering. Add each piece as a pattern, which is then stretched + // or repeated as the fill of a rect of appropriate size. + svg = [ + '<svg width="' + elW + '" height="' + elH + '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + ]; + + function addImage( x, y, w, h, cropX, cropY, cropW, cropH, tileW, tileH ) { + patterns.push( + '<pattern patternUnits="userSpaceOnUse" id="pattern' + i + '" ' + + 'x="' + (repeatH === REPEAT ? x + w / 2 - tileW / 2 : x) + '" ' + + 'y="' + (repeatV === REPEAT ? y + h / 2 - tileH / 2 : y) + '" ' + + 'width="' + tileW + '" height="' + tileH + '">' + + '<svg width="' + tileW + '" height="' + tileH + '" viewBox="' + cropX + ' ' + cropY + ' ' + cropW + ' ' + cropH + '" preserveAspectRatio="none">' + + '<image xlink:href="' + imgSrc + '" x="0" y="0" width="' + imgW + '" height="' + imgH + '" />' + + '</svg>' + + '</pattern>' + ); + rects.push( + '<rect x="' + x + '" y="' + y + '" width="' + w + '" height="' + h + '" fill="url(#pattern' + i + ')" />' + ); + i++; + } + addImage( 0, 0, widthL, widthT, 0, 0, sliceL, sliceT, widthL, widthT ); // top left + addImage( widthL, 0, centerW, widthT, sliceL, 0, imgCenterW, sliceT, tileSizeT, widthT ); // top center + addImage( elW - widthR, 0, widthR, widthT, imgW - sliceR, 0, sliceR, sliceT, widthR, widthT ); // top right + addImage( 0, widthT, widthL, middleH, 0, sliceT, sliceL, imgMiddleH, widthL, tileSizeL ); // middle left + if ( props.fill ) { // center fill + addImage( widthL, widthT, centerW, middleH, sliceL, sliceT, imgCenterW, imgMiddleH, + tileSizeT || tileSizeB || imgCenterW, tileSizeL || tileSizeR || imgMiddleH ); + } + addImage( elW - widthR, widthT, widthR, middleH, imgW - sliceR, sliceT, sliceR, imgMiddleH, widthR, tileSizeR ); // middle right + addImage( 0, elH - widthB, widthL, widthB, 0, imgH - sliceB, sliceL, sliceB, widthL, widthB ); // bottom left + addImage( widthL, elH - widthB, centerW, widthB, sliceL, imgH - sliceB, imgCenterW, sliceB, tileSizeB, widthB ); // bottom center + addImage( elW - widthR, elH - widthB, widthR, widthB, imgW - sliceR, imgH - sliceB, sliceR, sliceB, widthR, widthB ); // bottom right + + svg.push( + '<defs>' + + patterns.join('\n') + + '</defs>' + + rects.join('\n') + + '</svg>' + ); + + me.parent.setBackgroundLayer( me.bgLayerZIndex, 'url(data:image/svg+xml,' + escape( svg.join( '' ) ) + ') no-repeat border-box border-box' ); + + // If the border-image's src wasn't immediately available, the SVG for its background layer + // will have been created asynchronously after the main element's update has finished; we'll + // therefore need to force the root renderer to sync to the final background once finished. + if( isAsync ) { + me.parent.finishUpdate(); + } + }, me ); + + isAsync = 1; + }, + + /** + * Convert a given image to a data URI + */ + imageToDataURI: (function() { + var uris = {}; + return function( src, width, height ) { + var uri = uris[ src ], + image, canvas; + if ( !uri ) { + image = new Image(); + canvas = doc.createElement( 'canvas' ); + image.src = src; + canvas.width = width; + canvas.height = height; + canvas.getContext( '2d' ).drawImage( image, 0, 0 ); + uri = uris[ src ] = canvas.toDataURL(); + } + return uri; + } + })(), + + prepareUpdate: PIE.BorderImageRenderer.prototype.prepareUpdate, + + destroy: function() { + var me = this, + rs = me.targetElement.runtimeStyle; + me.parent.setBackgroundLayer( me.bgLayerZIndex ); + rs.borderColor = rs.borderStyle = rs.borderWidth = ''; + } + +} ); + +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', + firstChildClass = PIE.CLASS_PREFIX + 'first-child', + ignorePropertyNames = { 'background':1, 'bgColor':1, 'display': 1 }, + classNameRegExes = {}, + dummyArray = []; + + + function addClass( el, className ) { + el.className += ' ' + className; + } + + function removeClass( el, className ) { + var re = classNameRegExes[ className ] || + ( classNameRegExes[ className ] = new RegExp( '\\b' + className + '\\b', 'g' ) ); + el.className = el.className.replace( re, '' ); + } + + function delayAddClass( el, className /*, className2*/ ) { + var classes = dummyArray.slice.call( arguments, 1 ), + i = classes.length; + setTimeout( function() { + if( el ) { + while( i-- ) { + addClass( el, classes[ i ] ); + } + } + }, 0 ); + } + + function delayRemoveClass( el, className /*, className2*/ ) { + var classes = dummyArray.slice.call( arguments, 1 ), + i = classes.length; + setTimeout( function() { + if( el ) { + while( i-- ) { + removeClass( el, classes[ i ] ); + } + } + }, 0 ); + } + + + + function Element( el ) { + var renderers, + rootRenderer, + boundsInfo = new PIE.BoundsInfo( el ), + styleInfos, + styleInfosArr, + initializing, + initialized, + eventsAttached, + eventListeners = [], + delayed, + destroyed, + poll; + + /** + * Initialize PIE for this element. + */ + function init() { + if( !initialized ) { + var docEl, + bounds, + 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 + 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(); + + // 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 ); + } + } 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 to list of polled elements in IE8 + if( poll ) { + PIE.Heartbeat.observe( update ); + PIE.Heartbeat.run(); + } + + // Trigger rendering + update( 1 ); + } + + if( !eventsAttached ) { + eventsAttached = 1; + if( ieDocMode < 9 ) { + addListener( el, 'onmove', handleMoveOrResize ); + } + addListener( el, 'onresize', handleMoveOrResize ); + addListener( el, 'onpropertychange', propChanged ); + 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 ); + } + PIE.OnResize.observe( handleMoveOrResize ); + + PIE.OnUnload.observe( removeEventListeners ); + } + + boundsInfo.unlock(); + } + } + + + + + /** + * Event handler for onmove and onresize events. Invokes update() only if the element's + * bounds have previously been calculated, to prevent multiple runs during page load when + * the element has no initial CSS3 properties. + */ + function handleMoveOrResize() { + if( boundsInfo && boundsInfo.hasBeenQueried() ) { + update(); + } + } + + + /** + * Update position and/or size as necessary. Both move and resize events call + * this rather than the updatePos/Size functions because sometimes, particularly + * during page load, one will fire but the other won't. + */ + function update( force ) { + if( !destroyed ) { + if( initialized ) { + var i, len = renderers.length; + + lockAll(); + for( i = 0; i < len; i++ ) { + renderers[i].prepareUpdate(); + } + if( force || boundsInfo.positionChanged() ) { + /* TODO just using getBoundingClientRect (used internally by BoundsInfo) for detecting + position changes may not always be accurate; it's possible that + an element will actually move relative to its positioning parent, but its position + relative to the viewport will stay the same. Need to come up with a better way to + track movement. The most accurate would be the same logic used in RootRenderer.updatePos() + but that is a more expensive operation since it does some DOM walking, and we want this + check to be as fast as possible. */ + for( i = 0; i < len; i++ ) { + renderers[i].updatePos(); + } + } + if( force || boundsInfo.sizeChanged() ) { + for( i = 0; i < len; i++ ) { + renderers[i].updateSize(); + } + } + rootRenderer.finishUpdate(); + unlockAll(); + } + else if( !initializing ) { + init(); + } + } + } + + /** + * Handle property changes to trigger update when appropriate. + */ + function propChanged() { + var i, len = renderers.length, + renderer, + e = event; + + // Some elements like <table> fire onpropertychange events for old-school background properties + // ('background', 'bgColor') when runtimeStyle background properties are changed, which + // results in an infinite loop; therefore we filter out those property names. Also, 'display' + // 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 ) { + lockAll(); + for( i = 0; i < len; i++ ) { + renderers[i].prepareUpdate(); + } + for( i = 0; i < len; i++ ) { + renderer = renderers[i]; + // Make sure position is synced if the element hasn't already been rendered. + // TODO this feels sloppy - look into merging propChanged and update functions + if( !renderer.isPositioned ) { + renderer.updatePos(); + } + if( renderer.needsUpdate() ) { + renderer.updateProps(); + } + } + rootRenderer.finishUpdate(); + unlockAll(); + } + else if( !initializing ) { + init(); + } + } + } + + + /** + * Handle mouseenter events. Adds a custom class to the element to allow IE6 to add + * hover styles to non-link elements, and to trigger a propertychange update. + */ + function mouseEntered() { + //must delay this because the mouseenter event fires before the :hover styles are added. + delayAddClass( el, hoverClass ); + } + + /** + * Handle mouseleave events + */ + function mouseLeft() { + //must delay this because the mouseleave event fires before the :hover styles are removed. + delayRemoveClass( el, hoverClass, activeClass ); + } + + /** + * Handle mousedown events. Adds a custom class to the element to allow IE6 to add + * active styles to non-link elements, and to trigger a propertychange update. + */ + function mousePressed() { + //must delay this because the mousedown event fires before the :active styles are added. + delayAddClass( el, activeClass ); + + // listen for mouseups on the document; can't just be on the element because the user might + // have dragged out of the element while the mouse button was held down + PIE.OnMouseup.observe( mouseReleased ); + } + + /** + * Handle mouseup events + */ + function mouseReleased() { + //must delay this because the mouseup event fires before the :active styles are removed. + delayRemoveClass( el, activeClass ); + + PIE.OnMouseup.unobserve( mouseReleased ); + } + + /** + * Handle focus events. Adds a custom class to the element to trigger a propertychange update. + */ + function focused() { + //must delay this because the focus event fires before the :focus styles are added. + delayAddClass( el, focusClass ); + } + + /** + * Handle blur events + */ + function blurred() { + //must delay this because the blur event fires before the :focus styles are removed. + delayRemoveClass( el, focusClass ); + } + + + /** + * Handle property changes on ancestors of the element; see initAncestorEventListeners() + * which adds these listeners as requested with the -pie-watch-ancestors CSS property. + */ + function ancestorPropChanged() { + var name = event.propertyName; + if( name === 'className' || name === 'id' ) { + propChanged(); + } + } + + function lockAll() { + boundsInfo.lock(); + for( var i = styleInfosArr.length; i--; ) { + styleInfosArr[i].lock(); + } + } + + function unlockAll() { + for( var i = styleInfosArr.length; i--; ) { + styleInfosArr[i].unlock(); + } + boundsInfo.unlock(); + } + + + function addListener( targetEl, type, handler ) { + targetEl.attachEvent( type, handler ); + eventListeners.push( [ targetEl, type, handler ] ); + } + + /** + * Remove all event listeners from the element and any monitored ancestors. + */ + function removeEventListeners() { + if (eventsAttached) { + var i = eventListeners.length, + listener; + + while( i-- ) { + listener = eventListeners[ i ]; + listener[ 0 ].detachEvent( listener[ 1 ], listener[ 2 ] ); + } + + PIE.OnUnload.unobserve( removeEventListeners ); + eventsAttached = 0; + eventListeners = []; + } + } + + + /** + * Clean everything up when the behavior is removed from the element, or the element + * is manually destroyed. + */ + function destroy() { + if( !destroyed ) { + var i, len; + + removeEventListeners(); + + destroyed = 1; + + // destroy any active renderers + if( renderers ) { + for( i = 0, len = renderers.length; i < len; i++ ) { + renderers[i].finalized = 1; + renderers[i].destroy(); + } + } + + // Remove from list of polled elements in IE8 + if( poll ) { + PIE.Heartbeat.unobserve( update ); + } + // Stop onresize listening + PIE.OnResize.unobserve( update ); + + // Kill references + renderers = boundsInfo = styleInfos = styleInfosArr = el = null; + } + } + + + /** + * If requested via the custom -pie-watch-ancestors CSS property, add onpropertychange and + * other event listeners to ancestor(s) of the element so we can pick up style changes + * based on CSS rules using descendant selectors. + */ + function initAncestorEventListeners() { + var watch = el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'watch-ancestors' ), + i, a; + if( watch ) { + watch = parseInt( watch, 10 ); + i = 0; + a = el.parentNode; + while( a && ( watch === 'NaN' || i++ < watch ) ) { + addListener( a, 'onpropertychange', ancestorPropChanged ); + addListener( a, 'onmouseenter', mouseEntered ); + addListener( a, 'onmouseleave', mouseLeft ); + addListener( a, 'onmousedown', mousePressed ); + if( a.tagName in PIE.focusableElements ) { + addListener( a, 'onfocus', focused ); + addListener( a, 'onblur', blurred ); + } + a = a.parentNode; + } + } + } + + + /** + * If the target element is a first child, add a pie_first-child class to it. This allows using + * the added class as a workaround for the fact that PIE's rendering element breaks the :first-child + * pseudo-class selector. + */ + function initFirstChildPseudoClass() { + var tmpEl = el, + isFirst = 1; + while( tmpEl = tmpEl.previousSibling ) { + if( tmpEl.nodeType === 1 ) { + isFirst = 0; + break; + } + } + if( isFirst ) { + addClass( el, firstChildClass ); + } + } + + + // These methods are all already bound to this instance so there's no need to wrap them + // in a closure to maintain the 'this' scope object when calling them. + this.init = init; + this.update = update; + this.destroy = destroy; + this.el = el; + } + + Element.getInstance = function( el ) { + var id = PIE.Util.getUID( el ); + return wrappers[ id ] || ( wrappers[ id ] = new Element( el ) ); + }; + + Element.destroy = function( el ) { + var id = PIE.Util.getUID( el ), + wrapper = wrappers[ id ]; + if( wrapper ) { + wrapper.destroy(); + delete wrappers[ id ]; + } + }; + + Element.destroyAll = function() { + var els = [], wrapper; + if( wrappers ) { + for( var w in wrappers ) { + if( wrappers.hasOwnProperty( w ) ) { + wrapper = wrappers[ w ]; + els.push( wrapper.el ); + wrapper.destroy(); + } + } + wrappers = {}; + } + return els; + }; + + return Element; +})(); + +/* + * This file exposes the public API for invoking PIE. + */ + + +/** + * @property supportsVML + * True if the current IE browser environment has a functioning VML engine. Should be true + * in most IEs, but in rare cases may be false. If false, PIE will exit immediately when + * attached to an element; this property may be used for debugging or by external scripts + * to perform some special action when VML support is absent. + * @type {boolean} + */ +PIE[ 'supportsVML' ] = PIE.supportsVML; + + +/** + * Programatically attach PIE to a single element. + * @param {Element} el + */ +PIE[ 'attach' ] = function( el ) { + if (PIE.ieDocMode < 10 && PIE.supportsVML) { + PIE.Element.getInstance( el ).init(); + } +}; + + +/** + * Programatically detach PIE from a single element. + * @param {Element} el + */ +PIE[ 'detach' ] = function( el ) { + PIE.Element.destroy( el ); +}; + + +} // if( !PIE ) })();
\ No newline at end of file |