WordPress.org
Get WordPress

Plugin Directory

Changeset 683091


Ignore:
Timestamp:
03/17/2013 04:41:44 AM (13 years ago)
Author:
bmsterling
Message:

Update the color animation code

File:
1 edited

Legend:

Unmodified
Added
Removed

  • photoxhibit/trunk/common/js/core.js

    r40525 r683091  
    15631563var imageGroup = Array();
    15641564
    1565 /*
    1566  * jQuery Color Animations
    1567  * Copyright 2007 John Resig
     1565/**!
     1566 * @preserve Color animation 20120928
     1567 * http://www.bitstorm.org/jquery/color-animation/
     1568 * Copyright 2011, 2012 Edwin Martin <edwin@bitstorm.org>
    15681569 * Released under the MIT and GPL licenses.
    15691570 */
    15701571
    1571 (function(jQuery){
    1572 
    1573     // We override the animation for all of these color styles
    1574     jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
    1575         jQuery.fx.step[attr] = function(fx){
    1576             if ( fx.state == 0 ) {
    1577                 fx.start = getColor( fx.elem, attr );
    1578                 fx.end = getRGB( fx.end );
     1572(function($) {
     1573    /**
     1574     * Check whether the browser supports RGBA color mode.
     1575     *
     1576     * Author Mehdi Kabab <http://pioupioum.fr>
     1577     * @return {boolean} True if the browser support RGBA. False otherwise.
     1578     */
     1579    function isRGBACapable() {
     1580        var $script = $('script:first'),
     1581                color = $script.css('color'),
     1582                result = false;
     1583        if (/^rgba/.test(color)) {
     1584            result = true;
     1585        } else {
     1586            try {
     1587                result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') );
     1588                $script.css('color', color);
     1589            } catch (e) {
    15791590            }
    1580 
    1581             fx.elem.style[attr] = "rgb(" + [
    1582                 Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
    1583                 Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
    1584                 Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
    1585             ].join(",") + ")";
     1591        }
     1592
     1593        return result;
     1594    }
     1595
     1596    $.extend(true, $, {
     1597        support: {
     1598            'rgba': isRGBACapable()
    15861599        }
    15871600    });
    15881601
    1589     // Color Conversion functions from highlightFade
    1590     // By Blair Mitchelmore
    1591     // http://jquery.offput.ca/highlightFade/
    1592 
    1593     // Parse strings looking for color tuples [255,255,255]
    1594     function getRGB(color) {
    1595         var result;
    1596 
    1597         // Check if we're already dealing with an array of colors
    1598         if ( color && color.constructor == Array && color.length == 3 )
    1599             return color;
    1600 
    1601         // Look for rgb(num,num,num)
    1602         if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
    1603             return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
    1604 
    1605         // Look for rgb(num%,num%,num%)
    1606         if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
    1607             return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
    1608 
    1609         // Look for #a0b1c2
    1610         if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
    1611             return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
    1612 
    1613         // Look for #fff
    1614         if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
    1615             return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
    1616 
    1617         // Otherwise, we're most likely dealing with a named color
    1618         return colors[jQuery.trim(color).toLowerCase()];
     1602    var properties = ['color', 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'outlineColor'];
     1603    $.each(properties, function(i, property) {
     1604        $.Tween.propHooks[ property ] = {
     1605            get: function(tween) {
     1606                return $(tween.elem).css(property);
     1607            },
     1608            set: function(tween) {
     1609                var style = tween.elem.style;
     1610                var p_begin = parseColor($(tween.elem).css(property));
     1611                var p_end = parseColor(tween.end);
     1612                tween.run = function(progress) {
     1613                    style[property] = calculateColor(p_begin, p_end, progress);
     1614                }
     1615            }
     1616        }
     1617    });
     1618
     1619    // borderColor doesn't fit in standard fx.step above.
     1620    $.Tween.propHooks.borderColor = {
     1621        set: function(tween) {
     1622            var style = tween.elem.style;
     1623            var p_begin = [];
     1624            var borders = properties.slice(2, 6); // All four border properties
     1625            $.each(borders, function(i, property) {
     1626                p_begin[property] = parseColor($(tween.elem).css(property));
     1627            });
     1628            var p_end = parseColor(tween.end);
     1629            tween.run = function(progress) {
     1630                $.each(borders, function(i, property) {
     1631                    style[property] = calculateColor(p_begin[property], p_end, progress);
     1632                });
     1633            }
     1634        }
    16191635    }
    1620    
    1621     function getColor(elem, attr) {
    1622         var color;
    1623 
    1624         do {
    1625             color = jQuery.curCSS(elem, attr);
    1626 
    1627             // Keep going until we find an element that has color, or we hit the body
    1628             if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
    1629                 break;
    1630 
    1631             attr = "backgroundColor";
    1632         } while ( elem = elem.parentNode );
    1633 
    1634         return getRGB(color);
    1635     };
    1636    
    1637     // Some named colors to work with
    1638     // From Interface by Stefan Petre
    1639     // http://interface.eyecon.ro/
    1640 
    1641     var colors = {
    1642         aqua:[0,255,255],
    1643         azure:[240,255,255],
    1644         beige:[245,245,220],
    1645         black:[0,0,0],
    1646         blue:[0,0,255],
    1647         brown:[165,42,42],
    1648         cyan:[0,255,255],
    1649         darkblue:[0,0,139],
    1650         darkcyan:[0,139,139],
    1651         darkgrey:[169,169,169],
    1652         darkgreen:[0,100,0],
    1653         darkkhaki:[189,183,107],
    1654         darkmagenta:[139,0,139],
    1655         darkolivegreen:[85,107,47],
    1656         darkorange:[255,140,0],
    1657         darkorchid:[153,50,204],
    1658         darkred:[139,0,0],
    1659         darksalmon:[233,150,122],
    1660         darkviolet:[148,0,211],
    1661         fuchsia:[255,0,255],
    1662         gold:[255,215,0],
    1663         green:[0,128,0],
    1664         indigo:[75,0,130],
    1665         khaki:[240,230,140],
    1666         lightblue:[173,216,230],
    1667         lightcyan:[224,255,255],
    1668         lightgreen:[144,238,144],
    1669         lightgrey:[211,211,211],
    1670         lightpink:[255,182,193],
    1671         lightyellow:[255,255,224],
    1672         lime:[0,255,0],
    1673         magenta:[255,0,255],
    1674         maroon:[128,0,0],
    1675         navy:[0,0,128],
    1676         olive:[128,128,0],
    1677         orange:[255,165,0],
    1678         pink:[255,192,203],
    1679         purple:[128,0,128],
    1680         violet:[128,0,128],
    1681         red:[255,0,0],
    1682         silver:[192,192,192],
    1683         white:[255,255,255],
    1684         yellow:[255,255,0],
    1685         transparent: [255,255,255]
    1686     };
    1687    
     1636
     1637    // Calculate an in-between color. Returns "#aabbcc"-like string.
     1638    function calculateColor(begin, end, pos) {
     1639        var color = 'rgb' + ($.support['rgba'] ? 'a' : '') + '('
     1640                + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ','
     1641                + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ','
     1642                + parseInt((begin[2] + pos * (end[2] - begin[2])), 10);
     1643        if ($.support['rgba']) {
     1644            color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1);
     1645        }
     1646        color += ')';
     1647        return color;
     1648    }
     1649
     1650    // Parse an CSS-syntax color. Outputs an array [r, g, b]
     1651    function parseColor(color) {
     1652        var match, triplet;
     1653
     1654        // Match #aabbcc
     1655        if (match = /#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(color)) {
     1656            triplet = [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16), 1];
     1657
     1658            // Match #abc
     1659        } else if (match = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(color)) {
     1660            triplet = [parseInt(match[1], 16) * 17, parseInt(match[2], 16) * 17, parseInt(match[3], 16) * 17, 1];
     1661
     1662            // Match rgb(n, n, n)
     1663        } else if (match = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) {
     1664            triplet = [parseInt(match[1]), parseInt(match[2]), parseInt(match[3]), 1];
     1665
     1666        } else if (match = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(color)) {
     1667            triplet = [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10),parseFloat(match[4])];
     1668
     1669            // No browser returns rgb(n%, n%, n%), so little reason to support this format.
     1670        }
     1671        return triplet;
     1672    }
    16881673})(jQuery);
    16891674
Note: See TracChangeset for help on using the changeset viewer.