survivalkit 0.1

data/templates/project/sources/pie/sources/BackgroundStyleInfo.js

@@ -0,0 +1,295 @@
+/**
+ * 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 },
+    originIdents: { 'padding-box':1, 'border-box':1, 'content-box':1 },
+    clipIdents: { 'padding-box':1, 'border-box':1 },
+    positionIdents: { 'top':1, 'right':1, 'bottom':1, 'left':1, 'center':1 },
+    sizeIdents: { 'contain':1, 'cover':1 },
+
+    /**
+     * 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>,
+     *             attachment: <'scroll' | 'fixed' | 'local'>,
+     *             bgOrigin: <'border-box' | 'padding-box' | 'content-box'>,
+     *             clip: <'border-box' | 'padding-box'>,
+     *             size: <'contain' | 'cover' | { w: <'auto' | PIE.Length>, h: <'auto' | PIE.Length> }>
+     *         },
+     *         {
+     *             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,
+            positionIdents = this.positionIdents,
+            gradient, stop,
+            props = null;
+
+        function isBgPosToken( token ) {
+            return token.isLengthOrPercent() || ( token.tokenType & type_ident && token.tokenValue in positionIdents );
+        }
+
+        function sizeToken( token ) {
+            return ( 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 );
+            props = { bgImages: [] };
+            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.size ) {
+                    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 = tokVal;
+                    }
+                    else if( tokVal in this.originIdents ) {
+                        image.bgOrigin = tokVal;
+                        if( tokVal in this.clipIdents ) {
+                            image.clip = tokVal;
+                        }
+                    }
+                    else if( tokVal in this.attachIdents ) {
+                        image.attachment = tokVal;
+                    }
+                }
+                else if( tokType & type_color && !props.color ) {
+                    props.color = PIE.getColor( tokVal );
+                }
+                else if( tokType & type_operator ) {
+                    // background size
+                    if( tokVal === '/' ) {
+                        token = tokenizer.next();
+                        tokType = token.tokenType;
+                        tokVal = token.tokenValue;
+                        if( tokType & type_ident && tokVal in this.sizeIdents ) {
+                            image.size = tokVal;
+                        }
+                        else if( tokVal = sizeToken( token ) ) {
+                            image.size = {
+                                w: tokVal,
+                                h: sizeToken( tokenizer.next() ) || ( tokenizer.prev() && tokVal )
+                            };
+                        }
+                    }
+                    // new layer
+                    else if( tokVal === ',' && image.imgType ) {
+                        props.bgImages.push( image );
+                        image = {};
+                    }
+                }
+                else {
+                    // Found something unrecognized; chuck everything
+                    return null;
+                }
+            }
+
+            // leftovers
+            if( image.imgType ) {
+                props.bgImages.push( image );
+            }
+        }
+
+        // Otherwise, use the standard background properties; let IE give us the values rather than parsing them
+        else {
+            this.withActualBg( function() {
+                var posX = cs.backgroundPositionX,
+                    posY = cs.backgroundPositionY,
+                    img = cs.backgroundImage,
+                    color = cs.backgroundColor;
+
+                props = {};
+                if( color !== 'transparent' ) {
+                    props.color = PIE.getColor( color )
+                }
+                if( img !== 'none' ) {
+                    props.bgImages = [ {
+                        imgType: 'image',
+                        imgUrl: new PIE.Tokenizer( img ).next().tokenValue,
+                        imgRepeat: cs.backgroundRepeat,
+                        bgPosition: new PIE.BgPosition( new PIE.Tokenizer( posX + ' ' + posY ).all() )
+                    } ];
+                }
+            } );
+        }
+
+        return ( props && ( props.color || ( props.bgImages && 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 rs = this.targetElement.runtimeStyle,
+            rsImage = rs.backgroundImage,
+            rsColor = rs.backgroundColor,
+            ret;
+
+        if( rsImage ) rs.backgroundImage = '';
+        if( rsColor ) rs.backgroundColor = '';
+
+        ret = fn.call( this );
+
+        if( rsImage ) rs.backgroundImage = rsImage;
+        if( rsColor ) rs.backgroundColor = rsColor;
+
+        return ret;
+    },
+
+    getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
+        return this.getCss3() ||
+               this.withActualBg( function() {
+                   var cs = this.targetElement.currentStyle;
+                   return cs.backgroundColor + ' ' + cs.backgroundImage + ' ' + cs.backgroundRepeat + ' ' +
+                   cs.backgroundPositionX + ' ' + cs.backgroundPositionY;
+               } );
+    } ),
+
+    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();
+    } )
+
+} );

data/templates/project/sources/pie/sources/BgPosition.js

@@ -0,0 +1,104 @@
+/**
+ * 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;
+})();

data/templates/project/sources/pie/sources/BorderImageRenderer.js

@@ -0,0 +1,124 @@
+/**
+ * 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(),
+            bounds = this.boundsInfo.getBounds(),
+            el = this.targetElement,
+            pieces = this.pieces;
+
+        PIE.Util.withImageSize( props.src, function( imgSize ) {
+            var elW = bounds.w,
+                elH = bounds.h,
+
+                widths = props.width,
+                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
+            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;
+    }
+
+} );