lib/yuilib/3.13.0/color-hsl/color-hsl.js

   1 /*
   2 YUI 3.13.0 (build 508226d)
   3 Copyright 2013 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7
   8 YUI.add('color-hsl', function (Y, NAME) {
   9
  10 /**
  11 Color provides static methods for color conversion to hsl values.
  12
  13     Y.Color.toHSL('f00'); // hsl(0, 100%, 50%)
  14
  15     Y.Color.toHSLA('rgb(255, 255, 0'); // hsla(60, 100%, 50%, 1)
  16
  17 @module color
  18 @submodule color-hsl
  19 @class HSL
  20 @namespace Color
  21 @since 3.8.0
  22 **/
  23 Color = {
  24
  25     /**
  26     @static
  27     @property REGEX_HSL
  28     @type RegExp
  29     @default /hsla?\(([.\d]*), ?([.\d]*)%, ?([.\d]*)%,? ?([.\d]*)?\)/
  30     @since 3.8.0
  31     **/
  32     REGEX_HSL: /hsla?\(([.\d]*), ?([.\d]*)%, ?([.\d]*)%,? ?([.\d]*)?\)/,
  33
  34     /**
  35     @static
  36     @property STR_HSL
  37     @type String
  38     @default hsl({*}, {*}%, {*}%)
  39     @since 3.8.0
  40     **/
  41     STR_HSL: 'hsl({*}, {*}%, {*}%)',
  42
  43     /**
  44     @static
  45     @property STR_HSLA
  46     @type String
  47     @default hsla({*}, {*}%, {*}%, {*})
  48     @since 3.8.0
  49     **/
  50     STR_HSLA: 'hsla({*}, {*}%, {*}%, {*})',
  51
  52     /**
  53     Converts provided color value to an HSL string.
  54     @public
  55     @method toHSL
  56     @param {String} str
  57     @return {String}
  58     @since 3.8.0
  59     **/
  60     toHSL: function (str) {
  61         var clr = Y.Color._convertTo(str, 'hsl');
  62         return clr.toLowerCase();
  63     },
  64
  65     /**
  66     Converts provided color value to an HSLA string.
  67     @public
  68     @method toHSLA
  69     @param {String} str
  70     @return {String}
  71     @since 3.8.0
  72     **/
  73     toHSLA: function (str) {
  74         var clr = Y.Color._convertTo(str, 'hsla');
  75         return clr.toLowerCase();
  76     },
  77
  78     /**
  79     Parses the RGB string into h, s, l values. Will return an Array
  80         of values or an HSL string.
  81     @protected
  82     @method _rgbToHsl
  83     @param {String} str
  84     @param {Boolean} [toArray]
  85     @return {String|Array}
  86     @since 3.8.0
  87     **/
  88     _rgbToHsl: function (str, toArray) {
  89         var h, s, l,
  90             rgb = Y.Color.REGEX_RGB.exec(str),
  91             r = rgb[1] / 255,
  92             g = rgb[2] / 255,
  93             b = rgb[3] / 255,
  94             max = Math.max(r, g, b),
  95             min = Math.min(r, g, b),
  96             isGrayScale = false,
  97             sub = max - min,
  98             sum = max + min;
  99
 100
 101         if (r === g && g === b) {
 102             isGrayScale = true;
 103         }
 104
 105         // hue
 106         if (sub === 0) {
 107             h = 0;
 108         } else if (r === max) {
 109             h = ((60 * (g - b) / sub) + 360) % 360;
 110         } else if (g === max) {
 111             h = (60 * (b - r) / sub) + 120;
 112         } else {
 113             h = (60 * (r - g) / sub) + 240;
 114         }
 115
 116         // lightness
 117         l = sum / 2;
 118
 119         // saturation
 120         if (l === 0 || l === 1) {
 121             s = l;
 122         } else if (l <= 0.5) {
 123             s = sub / sum;
 124         } else {
 125             s = sub / (2 - sum);
 126         }
 127
 128         if (isGrayScale) {
 129             s = 0;
 130         }
 131
 132         // clean up hsl
 133         h = Math.round(h);
 134         s = Math.round(s * 100);
 135         l = Math.round(l * 100);
 136
 137         if (toArray) {
 138             return [h, s, l];
 139         }
 140
 141         return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
 142     },
 143
 144     /**
 145     Parses the HSL string into r, b, g values. Will return an Array
 146         of values or an RGB string.
 147     @protected
 148     @method _hslToRgb
 149     @param {String} str
 150     @param {Boolean} [toArray]
 151     @return {String|Array}
 152     @since 3.8.0
 153     **/
 154     _hslToRgb: function (str, toArray) {
 155         // assume input is [h, s, l]
 156         // TODO: Find legals for use of formula
 157         var hsl = Y.Color.REGEX_HSL.exec(str),
 158             h = parseInt(hsl[1], 10) / 360,
 159             s = parseInt(hsl[2], 10) / 100,
 160             l = parseInt(hsl[3], 10) / 100,
 161             r,
 162             g,
 163             b,
 164             p,
 165             q;
 166
 167         if (l <= 0.5) {
 168             q = l * (s + 1);
 169         } else {
 170             q = (l + s) - (l * s);
 171         }
 172
 173         p = 2 * l - q;
 174
 175         r = Math.round(Color._hueToRGB(p, q, h + 1/3) * 255);
 176         g = Math.round(Color._hueToRGB(p, q, h) * 255);
 177         b = Math.round(Color._hueToRGB(p, q, h - 1/3) * 255);
 178
 179         if (toArray) {
 180             return [r, g, b];
 181         }
 182
 183         return 'rgb(' + r + ', ' + g + ', ' + b + ')';
 184     },
 185
 186     /**
 187     Converts the HSL hue to the different channels for RGB
 188
 189     @protected
 190     @method _hueToRGB
 191     @param {Number} p
 192     @param {Number} q
 193     @param {Number} hue
 194     @return {Number} value for requested channel
 195     @since 3.8.0
 196     **/
 197     _hueToRGB: function(p, q, hue) {
 198         // TODO: Find legals for use of formula
 199         if (hue < 0) {
 200             hue += 1;
 201         } else if (hue > 1) {
 202             hue -= 1;
 203         }
 204
 205         if (hue * 6 < 1) {
 206             return p + (q - p) * 6 * hue;
 207         }
 208         if (hue * 2 < 1) {
 209             return q;
 210         }
 211         if (hue * 3 < 2) {
 212             return p + (q - p) * (2/3 - hue) * 6;
 213         }
 214         return p;
 215     }
 216
 217 };
 218
 219 Y.Color = Y.mix(Color, Y.Color);
 220
 221 Y.Color.TYPES = Y.mix(Y.Color.TYPES, {'HSL':'hsl', 'HSLA':'hsla'});
 222 Y.Color.CONVERTS = Y.mix(Y.Color.CONVERTS, {'hsl': 'toHSL', 'hsla': 'toHSLA'});
 223
 224
 225 }, '3.13.0', {"requires": ["color-base"]});