Statistics
| Revision:

root / hci / trunk / eneraptor-web-app / web-app / js / flot / jquery.colorhelpers.js @ 11

History | View | Annotate | Download (5.78 KB)

1
/* Plugin for jQuery for working with colors.
2
 * 
3
 * Version 1.0.
4
 * 
5
 * Inspiration from jQuery color animation plugin by John Resig.
6
 *
7
 * Released under the MIT license by Ole Laursen, October 2009.
8
 *
9
 * Examples:
10
 *
11
 *   $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
12
 *   var c = $.color.extract($("#mydiv"), 'background-color');
13
 *   console.log(c.r, c.g, c.b, c.a);
14
 *   $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
15
 *
16
 * Note that .scale() and .add() work in-place instead of returning
17
 * new objects.
18
 */ 
19

    
20
(function() {
21
    jQuery.color = {};
22

    
23
    // construct color object with some convenient chainable helpers
24
    jQuery.color.make = function (r, g, b, a) {
25
        var o = {};
26
        o.r = r || 0;
27
        o.g = g || 0;
28
        o.b = b || 0;
29
        o.a = a != null ? a : 1;
30

    
31
        o.add = function (c, d) {
32
            for (var i = 0; i < c.length; ++i)
33
                o[c.charAt(i)] += d;
34
            return o.normalize();
35
        };
36
        
37
        o.scale = function (c, f) {
38
            for (var i = 0; i < c.length; ++i)
39
                o[c.charAt(i)] *= f;
40
            return o.normalize();
41
        };
42
        
43
        o.toString = function () {
44
            if (o.a >= 1.0) {
45
                return "rgb("+[o.r, o.g, o.b].join(",")+")";
46
            } else {
47
                return "rgba("+[o.r, o.g, o.b, o.a].join(",")+")";
48
            }
49
        };
50

    
51
        o.normalize = function () {
52
            function clamp(min, value, max) {
53
                return value < min ? min: (value > max ? max: value);
54
            }
55
            
56
            o.r = clamp(0, parseInt(o.r), 255);
57
            o.g = clamp(0, parseInt(o.g), 255);
58
            o.b = clamp(0, parseInt(o.b), 255);
59
            o.a = clamp(0, o.a, 1);
60
            return o;
61
        };
62

    
63
        o.clone = function () {
64
            return jQuery.color.make(o.r, o.b, o.g, o.a);
65
        };
66

    
67
        return o.normalize();
68
    }
69

    
70
    // extract CSS color property from element, going up in the DOM
71
    // if it's "transparent"
72
    jQuery.color.extract = function (elem, css) {
73
        var c;
74
        do {
75
            c = elem.css(css).toLowerCase();
76
            // keep going until we find an element that has color, or
77
            // we hit the body
78
            if (c != '' && c != 'transparent')
79
                break;
80
            elem = elem.parent();
81
        } while (!jQuery.nodeName(elem.get(0), "body"));
82

    
83
        // catch Safari's way of signalling transparent
84
        if (c == "rgba(0, 0, 0, 0)")
85
            c = "transparent";
86
        
87
        return jQuery.color.parse(c);
88
    }
89
    
90
    // parse CSS color string (like "rgb(10, 32, 43)" or "#fff"),
91
    // returns color object
92
    jQuery.color.parse = function (str) {
93
        var res, m = jQuery.color.make;
94

    
95
        // Look for rgb(num,num,num)
96
        if (res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))
97
            return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10));
98
        
99
        // Look for rgba(num,num,num,num)
100
        if (res = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
101
            return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4]));
102
            
103
        // Look for rgb(num%,num%,num%)
104
        if (res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))
105
            return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55);
106

    
107
        // Look for rgba(num%,num%,num%,num)
108
        if (res = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
109
            return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55, parseFloat(res[4]));
110
        
111
        // Look for #a0b1c2
112
        if (res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))
113
            return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16));
114

    
115
        // Look for #fff
116
        if (res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))
117
            return m(parseInt(res[1]+res[1], 16), parseInt(res[2]+res[2], 16), parseInt(res[3]+res[3], 16));
118

    
119
        // Otherwise, we're most likely dealing with a named color
120
        var name = jQuery.trim(str).toLowerCase();
121
        if (name == "transparent")
122
            return m(255, 255, 255, 0);
123
        else {
124
            res = lookupColors[name];
125
            return m(res[0], res[1], res[2]);
126
        }
127
    }
128
    
129
    var lookupColors = {
130
        aqua:[0,255,255],
131
        azure:[240,255,255],
132
        beige:[245,245,220],
133
        black:[0,0,0],
134
        blue:[0,0,255],
135
        brown:[165,42,42],
136
        cyan:[0,255,255],
137
        darkblue:[0,0,139],
138
        darkcyan:[0,139,139],
139
        darkgrey:[169,169,169],
140
        darkgreen:[0,100,0],
141
        darkkhaki:[189,183,107],
142
        darkmagenta:[139,0,139],
143
        darkolivegreen:[85,107,47],
144
        darkorange:[255,140,0],
145
        darkorchid:[153,50,204],
146
        darkred:[139,0,0],
147
        darksalmon:[233,150,122],
148
        darkviolet:[148,0,211],
149
        fuchsia:[255,0,255],
150
        gold:[255,215,0],
151
        green:[0,128,0],
152
        indigo:[75,0,130],
153
        khaki:[240,230,140],
154
        lightblue:[173,216,230],
155
        lightcyan:[224,255,255],
156
        lightgreen:[144,238,144],
157
        lightgrey:[211,211,211],
158
        lightpink:[255,182,193],
159
        lightyellow:[255,255,224],
160
        lime:[0,255,0],
161
        magenta:[255,0,255],
162
        maroon:[128,0,0],
163
        navy:[0,0,128],
164
        olive:[128,128,0],
165
        orange:[255,165,0],
166
        pink:[255,192,203],
167
        purple:[128,0,128],
168
        violet:[128,0,128],
169
        red:[255,0,0],
170
        silver:[192,192,192],
171
        white:[255,255,255],
172
        yellow:[255,255,0]
173
    };    
174
})();