[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 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.17.2', {"requires": ["color-base"]});