survivalkit 0.3.2 → 0.3.3

data/templates/drupal/sources/pie/sources/BorderStyleInfo.js

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

data/templates/drupal/sources/pie/sources/BoundsInfo.js

@@ -0,0 +1,56 @@
+/**
+ * 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 rect = this.targetElement.getBoundingClientRect();
+        return {
+            x: rect.left,
+            y: rect.top,
+            w: rect.right - rect.left,
+            h: rect.bottom - rect.top
+        };
+    },
+
+    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;
+        }
+    }
+
+};

data/templates/drupal/sources/pie/sources/BoxShadowInsetRenderer.js

@@ -0,0 +1,31 @@
+/**
+ * Renderer for inset box-shadows
+ * @constructor
+ * @param {Element} el The target element
+ * @param {Object} styleInfos The StyleInfo objects
+ * @param {PIE.RootRenderer} parent
+ */
+PIE.BoxShadowInsetRenderer = PIE.RendererBase.newRenderer( {
+
+    boxZIndex: 3,
+    boxName: 'inset-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().inset[0];
+    },
+
+    updateSize: function() {
+        // TODO
+    },
+
+    updateProps: function() {
+        // TODO
+    }
+    
+} );

data/templates/drupal/sources/pie/sources/BoxShadowOutsetRenderer.js

@@ -0,0 +1,136 @@
+/**
+ * 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 = blur * 2 / totalW;
+                focusY = blur * 2 / totalH;
+                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;
+                }
+            }
+        }
+    }
+
+} );

data/templates/drupal/sources/pie/sources/BoxShadowStyleInfo.js

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

data/templates/drupal/sources/pie/sources/Color.js

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