r79686 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r79685‎ | r79686 | r79687 >
Date:23:24, 5 January 2011
Author:krinkle
Status:ok
Tags:
Comment:
Wrote jquery.colorUtil plugin.
* Introduces rgbToHsl and hslToRgb functions
* Introdoces a simple way to get a brigher or darker color
* Moved getRGB() function and colors-array from jquery.color to it so they are publically available.
* Applied fixed from JSLint to all of this
* Made jquery.color use these instead to avoid duplication and added dependency for it
Modified paths:
  • /trunk/phase3/resources/Resources.php (modified) (history)
  • /trunk/phase3/resources/jquery/jquery.color.js (modified) (history)
  • /trunk/phase3/resources/jquery/jquery.colorUtil.js (added) (history)

Diff [purge]

Index: trunk/phase3/resources/jquery/jquery.colorUtil.js
——@@ -0,0 +1,195 @@
 2+/*
 3+ * jQuery Color Utilities
 4+ * Written by Krinkle in 2011
 5+ * Released under the MIT and GPL licenses.
 6+ * Mostly based on other plugins and functions (taken through JSLint and optimized a little).
 7+ * Sources cited locally.
 8+ */
 9+( function( $ ) {
 10+
 11+ $.colorUtil = {
 12+
 13+ // Color Conversion function from highlightFade
 14+ // By Blair Mitchelmore
 15+ // http://jquery.offput.ca/highlightFade/
 16+ // Parse strings looking for color tuples [255,255,255]
 17+ getRGB : function( color ) {
 18+ var result;
 19+
 20+ // Check if we're already dealing with an array of colors
 21+ if ( color && color.constructor == Array && color.length == 3 ){
 22+ return color;
 23+ }
 24+
 25+ // Look for rgb(num,num,num)
 26+ if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) {
 27+ return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)];
 28+ }
 29+
 30+ // Look for rgb(num%,num%,num%)
 31+ if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) {
 32+ return [parseFloat(result[1],10)*2.55, parseFloat(result[2],10)*2.55, parseFloat(result[3])*2.55];
 33+ }
 34+
 35+ // Look for #a0b1c2
 36+ if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) {
 37+ return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
 38+ }
 39+
 40+ // Look for #fff
 41+ if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) {
 42+ return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
 43+ }
 44+
 45+ // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
 46+ if (result = /rgba\(0, 0, 0, 0\)/.exec(color)) {
 47+ return $.colorUtil.colors.transparent;
 48+ }
 49+
 50+ // Otherwise, we're most likely dealing with a named color
 51+ return $.colorUtil.colors[jQuery.trim(color).toLowerCase()];
 52+ },
 53+
 54+ // Some named colors to work with
 55+ // From Interface by Stefan Petre
 56+ // http://interface.eyecon.ro/
 57+ colors: {
 58+ aqua:[0,255,255],
 59+ azure:[240,255,255],
 60+ beige:[245,245,220],
 61+ black:[0,0,0],
 62+ blue:[0,0,255],
 63+ brown:[165,42,42],
 64+ cyan:[0,255,255],
 65+ darkblue:[0,0,139],
 66+ darkcyan:[0,139,139],
 67+ darkgrey:[169,169,169],
 68+ darkgreen:[0,100,0],
 69+ darkkhaki:[189,183,107],
 70+ darkmagenta:[139,0,139],
 71+ darkolivegreen:[85,107,47],
 72+ darkorange:[255,140,0],
 73+ darkorchid:[153,50,204],
 74+ darkred:[139,0,0],
 75+ darksalmon:[233,150,122],
 76+ darkviolet:[148,0,211],
 77+ fuchsia:[255,0,255],
 78+ gold:[255,215,0],
 79+ green:[0,128,0],
 80+ indigo:[75,0,130],
 81+ khaki:[240,230,140],
 82+ lightblue:[173,216,230],
 83+ lightcyan:[224,255,255],
 84+ lightgreen:[144,238,144],
 85+ lightgrey:[211,211,211],
 86+ lightpink:[255,182,193],
 87+ lightyellow:[255,255,224],
 88+ lime:[0,255,0],
 89+ magenta:[255,0,255],
 90+ maroon:[128,0,0],
 91+ navy:[0,0,128],
 92+ olive:[128,128,0],
 93+ orange:[255,165,0],
 94+ pink:[255,192,203],
 95+ purple:[128,0,128],
 96+ violet:[128,0,128],
 97+ red:[255,0,0],
 98+ silver:[192,192,192],
 99+ white:[255,255,255],
 100+ yellow:[255,255,0],
 101+ transparent: [255,255,255]
 102+ },
 103+ /**
 104+ * http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
 105+ * Converts an RGB color value to HSL. Conversion formula
 106+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 107+ * Assumes r, g, and b are contained in the set [0, 255] and
 108+ * returns h, s, and l in the set [0, 1].
 109+ *
 110+ * @param Number R The red color value
 111+ * @param Number G The green color value
 112+ * @param Number B The blue color value
 113+ * @return Array The HSL representation
 114+ */
 115+ rgbToHsl: function( R, G, B ) {
 116+ var r = R / 255,
 117+ g = G / 255,
 118+ b = B / 255;
 119+ var max = Math.max(r, g, b), min = Math.min(r, g, b);
 120+ var h, s, l = (max + min) / 2;
 121+
 122+ if(max == min){
 123+ h = s = 0; // achromatic
 124+ }else{
 125+ var d = max - min;
 126+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
 127+ switch(max){
 128+ case r: h = (g - b) / d + (g < b ? 6 : 0); break;
 129+ case g: h = (b - r) / d + 2; break;
 130+ case b: h = (r - g) / d + 4; break;
 131+ }
 132+ h /= 6;
 133+ }
 134+
 135+ return [h, s, l];
 136+ },
 137+ /**
 138+ * http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
 139+ * Converts an HSL color value to RGB. Conversion formula
 140+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 141+ * Assumes h, s, and l are contained in the set [0, 1] and
 142+ * returns r, g, and b in the set [0, 255].
 143+ *
 144+ * @param Number h The hue
 145+ * @param Number s The saturation
 146+ * @param Number l The lightness
 147+ * @return Array The RGB representation
 148+ */
 149+ hslToRgb: function( h, s, l ) {
 150+ var r, g, b;
 151+
 152+ if(s === 0){
 153+ r = g = b = l; // achromatic
 154+ }else{
 155+ var hue2rgb = function(p, q, t){
 156+ if(t < 0){ t += 1; }
 157+ if(t > 1){ t -= 1; }
 158+ if(t < 1/6){ return p + (q - p) * 6 * t; }
 159+ if(t < 1/2){ return q; }
 160+ if(t < 2/3){ return p + (q - p) * (2/3 - t) * 6; }
 161+ return p;
 162+ };
 163+
 164+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
 165+ var p = 2 * l - q;
 166+ r = hue2rgb(p, q, h + 1/3);
 167+ g = hue2rgb(p, q, h);
 168+ b = hue2rgb(p, q, h - 1/3);
 169+ }
 170+
 171+ return [r * 255, g * 255, b * 255];
 172+ },
 173+ /**
 174+ * Get's a brighter or darker rgb() value string.
 175+ *
 176+ * @author Krinkle
 177+ *
 178+ * @example getCSSColorMod( 'red', +0.1 )
 179+ * @example getCSSColorMod( 'rgb(200,50,50)', -0.2 )
 180+ *
 181+ * @param Mixed currentColor current value in css
 182+ * @param Number mod wanted brightness modification between -1 and 1
 183+ * @return String 'rgb(r,g,b)'
 184+ */
 185+ getColorBrightness: function( currentColor, mod ) {
 186+ var rgbArr = $.colorUtil.getRGB( currentColor ),
 187+ hslArr = $.colorUtil.rgbToHsl(rgbArr[0], rgbArr[1], rgbArr[2] );
 188+ rgbArr = $.colorUtil.hslToRgb(hslArr[0], hslArr[1], hslArr[2]+mod);
 189+ return 'rgb(' +
 190+ [parseInt( rgbArr[0], 10), parseInt( rgbArr[1], 10 ), parseInt( rgbArr[2], 10 )].join( ',' ) +
 191+ ')';
 192+ }
 193+
 194+ };
 195+
 196+} )( jQuery );
\ No newline at end of file
Property changes on: trunk/phase3/resources/jquery/jquery.colorUtil.js
___________________________________________________________________
Added: svn:eol-style
1197 + native
Index: trunk/phase3/resources/jquery/jquery.color.js
——@@ -2,6 +2,8 @@
33 * jQuery Color Animations
44 * Copyright 2007 John Resig
55 * Released under the MIT and GPL licenses.
 6+ *
 7+ * - 2011-01-05: Modified by Krinkle to use the jQuery.colorUtil plugin (needs to be loaded first)
68 */
79
810 (function(jQuery){
——@@ -11,7 +13,7 @@
1214 jQuery.fx.step[attr] = function(fx){
1315 if ( fx.state == 0 ) {
1416 fx.start = getColor( fx.elem, attr );
15 - fx.end = getRGB( fx.end );
 17+ fx.end = $.colorUtil.getRGB( fx.end );
1618 }
1719
1820 fx.elem.style[attr] = "rgb(" + [
——@@ -21,38 +23,6 @@
2224 ].join(",") + ")";
2325 }
2426 });
25 -
26 - // Color Conversion functions from highlightFade
27 - // By Blair Mitchelmore
28 - // http://jquery.offput.ca/highlightFade/
29 -
30 - // Parse strings looking for color tuples [255,255,255]
31 - function getRGB(color) {
32 - var result;
33 -
34 - // Check if we're already dealing with an array of colors
35 - if ( color && color.constructor == Array && color.length == 3 )
36 - return color;
37 -
38 - // Look for rgb(num,num,num)
39 - if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
40 - return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
41 -
42 - // Look for rgb(num%,num%,num%)
43 - if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*\)/.exec(color))
44 - return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
45 -
46 - // Look for #a0b1c2
47 - if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
48 - return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
49 -
50 - // Look for #fff
51 - if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
52 - return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
53 -
54 - // Otherwise, we're most likely dealing with a named color
55 - return colors[jQuery.trim(color).toLowerCase()];
56 - }
5727
5828 function getColor(elem, attr) {
5929 var color;
——@@ -67,57 +37,7 @@
6838 attr = "backgroundColor";
6939 } while ( elem = elem.parentNode );
7040
71 - return getRGB(color);
 41+ return $.colorUtil.getRGB(color);
7242 };
7343
74 - // Some named colors to work with
75 - // From Interface by Stefan Petre
76 - // http://interface.eyecon.ro/
77 -
78 - var colors = {
79 - aqua:[0,255,255],
80 - azure:[240,255,255],
81 - beige:[245,245,220],
82 - black:[0,0,0],
83 - blue:[0,0,255],
84 - brown:[165,42,42],
85 - cyan:[0,255,255],
86 - darkblue:[0,0,139],
87 - darkcyan:[0,139,139],
88 - darkgrey:[169,169,169],
89 - darkgreen:[0,100,0],
90 - darkkhaki:[189,183,107],
91 - darkmagenta:[139,0,139],
92 - darkolivegreen:[85,107,47],
93 - darkorange:[255,140,0],
94 - darkorchid:[153,50,204],
95 - darkred:[139,0,0],
96 - darksalmon:[233,150,122],
97 - darkviolet:[148,0,211],
98 - fuchsia:[255,0,255],
99 - gold:[255,215,0],
100 - green:[0,128,0],
101 - indigo:[75,0,130],
102 - khaki:[240,230,140],
103 - lightblue:[173,216,230],
104 - lightcyan:[224,255,255],
105 - lightgreen:[144,238,144],
106 - lightgrey:[211,211,211],
107 - lightpink:[255,182,193],
108 - lightyellow:[255,255,224],
109 - lime:[0,255,0],
110 - magenta:[255,0,255],
111 - maroon:[128,0,0],
112 - navy:[0,0,128],
113 - olive:[128,128,0],
114 - orange:[255,165,0],
115 - pink:[255,192,203],
116 - purple:[128,0,128],
117 - violet:[128,0,128],
118 - red:[255,0,0],
119 - silver:[192,192,192],
120 - white:[255,255,255],
121 - yellow:[255,255,0]
122 - };
123 -
12444 })(jQuery);
Index: trunk/phase3/resources/Resources.php
——@@ -47,8 +47,12 @@
4848 'jquery.collapsibleTabs' => array(
4949 'scripts' => 'resources/jquery/jquery.collapsibleTabs.js'
5050 ),
 51+ 'jquery.colorUtil' => array(
 52+ 'scripts' => 'resources/jquery/jquery.colorUtil.js'
 53+ ),
5154 'jquery.color' => array(
52 - 'scripts' => 'resources/jquery/jquery.color.js'
 55+ 'scripts' => 'resources/jquery/jquery.color.js',
 56+ 'dependencies' => 'jquery.colorUtil'
5357 ),
5458 'jquery.cookie' => array(
5559 'scripts' => 'resources/jquery/jquery.cookie.js'

Sign-offs

UserFlagDate
😂inspected20:37, 12 July 2011

Status & tagging log