[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-base', function (Y, NAME) {
   9  
  10  /**
  11  Color provides static methods for color conversion.
  12  
  13      Y.Color.toRGB('f00'); // rgb(255, 0, 0)
  14  
  15      Y.Color.toHex('rgb(255, 255, 0)'); // #ffff00
  16  
  17  @module color
  18  @submodule color-base
  19  @class Color
  20  @since 3.8.0
  21  **/
  22  
  23  var REGEX_HEX = /^#?([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})(\ufffe)?/,
  24      REGEX_HEX3 = /^#?([\da-fA-F]{1})([\da-fA-F]{1})([\da-fA-F]{1})(\ufffe)?/,
  25      REGEX_RGB = /rgba?\(([\d]{1,3}), ?([\d]{1,3}), ?([\d]{1,3}),? ?([.\d]*)?\)/,
  26      TYPES = { 'HEX': 'hex', 'RGB': 'rgb', 'RGBA': 'rgba' },
  27      CONVERTS = { 'hex': 'toHex', 'rgb': 'toRGB', 'rgba': 'toRGBA' };
  28  
  29  
  30  Y.Color = {
  31      /**
  32      @static
  33      @property KEYWORDS
  34      @type Object
  35      @since 3.8.0
  36      **/
  37      KEYWORDS: {
  38          'black': '000', 'silver': 'c0c0c0', 'gray': '808080', 'white': 'fff',
  39          'maroon': '800000', 'red': 'f00', 'purple': '800080', 'fuchsia': 'f0f',
  40          'green': '008000', 'lime': '0f0', 'olive': '808000', 'yellow': 'ff0',
  41          'navy': '000080', 'blue': '00f', 'teal': '008080', 'aqua': '0ff'
  42      },
  43  
  44      /**
  45          NOTE: `(\ufffe)?` is added to the Regular Expression to carve out a
  46          place for the alpha channel that is returned from toArray
  47          without compromising any usage of the Regular Expression
  48  
  49      @static
  50      @property REGEX_HEX
  51      @type RegExp
  52      @default /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})(\ufffe)?/
  53      @since 3.8.0
  54      **/
  55      REGEX_HEX: REGEX_HEX,
  56  
  57      /**
  58          NOTE: `(\ufffe)?` is added to the Regular Expression to carve out a
  59          place for the alpha channel that is returned from toArray
  60          without compromising any usage of the Regular Expression
  61  
  62      @static
  63      @property REGEX_HEX3
  64      @type RegExp
  65      @default /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})(\ufffe)?/
  66      @since 3.8.0
  67      **/
  68      REGEX_HEX3: REGEX_HEX3,
  69  
  70      /**
  71      @static
  72      @property REGEX_RGB
  73      @type RegExp
  74      @default /rgba?\(([0-9]{1,3}), ?([0-9]{1,3}), ?([0-9]{1,3}),? ?([.0-9]{1,3})?\)/
  75      @since 3.8.0
  76      **/
  77      REGEX_RGB: REGEX_RGB,
  78  
  79      re_RGB: REGEX_RGB,
  80  
  81      re_hex: REGEX_HEX,
  82  
  83      re_hex3: REGEX_HEX3,
  84  
  85      /**
  86      @static
  87      @property STR_HEX
  88      @type String
  89      @default #{*}{*}{*}
  90      @since 3.8.0
  91      **/
  92      STR_HEX: '#{*}{*}{*}',
  93  
  94      /**
  95      @static
  96      @property STR_RGB
  97      @type String
  98      @default rgb({*}, {*}, {*})
  99      @since 3.8.0
 100      **/
 101      STR_RGB: 'rgb({*}, {*}, {*})',
 102  
 103      /**
 104      @static
 105      @property STR_RGBA
 106      @type String
 107      @default rgba({*}, {*}, {*}, {*})
 108      @since 3.8.0
 109      **/
 110      STR_RGBA: 'rgba({*}, {*}, {*}, {*})',
 111  
 112      /**
 113      @static
 114      @property TYPES
 115      @type Object
 116      @default {'rgb':'rgb', 'rgba':'rgba'}
 117      @since 3.8.0
 118      **/
 119      TYPES: TYPES,
 120  
 121      /**
 122      @static
 123      @property CONVERTS
 124      @type Object
 125      @default {}
 126      @since 3.8.0
 127      **/
 128      CONVERTS: CONVERTS,
 129  
 130      /**
 131       Converts the provided string to the provided type.
 132       You can use the `Y.Color.TYPES` to get a valid `to` type.
 133       If the color cannot be converted, the original color will be returned.
 134  
 135       @public
 136       @method convert
 137       @param {String} str
 138       @param {String} to
 139       @return {String}
 140       @since 3.8.0
 141       **/
 142      convert: function (str, to) {
 143          var convert = Y.Color.CONVERTS[to.toLowerCase()],
 144              clr = str;
 145  
 146          if (convert && Y.Color[convert]) {
 147              clr = Y.Color[convert](str);
 148          }
 149  
 150          return clr;
 151      },
 152  
 153      /**
 154      Converts provided color value to a hex value string
 155  
 156      @public
 157      @method toHex
 158      @param {String} str Hex or RGB value string
 159      @return {String} returns array of values or CSS string if options.css is true
 160      @since 3.8.0
 161      **/
 162      toHex: function (str) {
 163          var clr = Y.Color._convertTo(str, 'hex'),
 164              isTransparent = clr.toLowerCase() === 'transparent';
 165  
 166          if (clr.charAt(0) !== '#' && !isTransparent) {
 167              clr = '#' + clr;
 168          }
 169  
 170          return isTransparent ? clr.toLowerCase() : clr.toUpperCase();
 171      },
 172  
 173      /**
 174      Converts provided color value to an RGB value string
 175      @public
 176      @method toRGB
 177      @param {String} str Hex or RGB value string
 178      @return {String}
 179      @since 3.8.0
 180      **/
 181      toRGB: function (str) {
 182          var clr = Y.Color._convertTo(str, 'rgb');
 183          return clr.toLowerCase();
 184      },
 185  
 186      /**
 187      Converts provided color value to an RGB value string
 188      @public
 189      @method toRGBA
 190      @param {String} str Hex or RGB value string
 191      @return {String}
 192      @since 3.8.0
 193      **/
 194      toRGBA: function (str) {
 195          var clr = Y.Color._convertTo(str, 'rgba' );
 196          return clr.toLowerCase();
 197      },
 198  
 199      /**
 200      Converts the provided color string to an array of values where the
 201          last value is the alpha value. Will return an empty array if
 202          the provided string is not able to be parsed.
 203  
 204          NOTE: `(\ufffe)?` is added to `HEX` and `HEX3` Regular Expressions to
 205          carve out a place for the alpha channel that is returned from
 206          toArray without compromising any usage of the Regular Expression
 207  
 208          Y.Color.toArray('fff');              // ['ff', 'ff', 'ff', 1]
 209          Y.Color.toArray('rgb(0, 0, 0)');     // ['0', '0', '0', 1]
 210          Y.Color.toArray('rgba(0, 0, 0, 0)'); // ['0', '0', '0', 1]
 211  
 212  
 213  
 214      @public
 215      @method toArray
 216      @param {String} str
 217      @return {Array}
 218      @since 3.8.0
 219      **/
 220      toArray: function(str) {
 221          // parse with regex and return "matches" array
 222          var type = Y.Color.findType(str).toUpperCase(),
 223              regex,
 224              arr,
 225              length,
 226              lastItem;
 227  
 228          if (type === 'HEX' && str.length < 5) {
 229              type = 'HEX3';
 230          }
 231  
 232          if (type.charAt(type.length - 1) === 'A') {
 233              type = type.slice(0, -1);
 234          }
 235  
 236          regex = Y.Color['REGEX_' + type];
 237  
 238          if (regex) {
 239              arr = regex.exec(str) || [];
 240              length = arr.length;
 241  
 242              if (length) {
 243  
 244                  arr.shift();
 245                  length--;
 246  
 247                  if (type === 'HEX3') {
 248                      arr[0] += arr[0];
 249                      arr[1] += arr[1];
 250                      arr[2] += arr[2];
 251                  }
 252  
 253                  lastItem = arr[length - 1];
 254                  if (!lastItem) {
 255                      arr[length - 1] = 1;
 256                  }
 257              }
 258          }
 259  
 260          return arr;
 261  
 262      },
 263  
 264      /**
 265      Converts the array of values to a string based on the provided template.
 266      @public
 267      @method fromArray
 268      @param {Array} arr
 269      @param {String} template
 270      @return {String}
 271      @since 3.8.0
 272      **/
 273      fromArray: function(arr, template) {
 274          arr = arr.concat();
 275  
 276          if (typeof template === 'undefined') {
 277              return arr.join(', ');
 278          }
 279  
 280          var replace = '{*}';
 281  
 282          template = Y.Color['STR_' + template.toUpperCase()];
 283  
 284          if (arr.length === 3 && template.match(/\{\*\}/g).length === 4) {
 285              arr.push(1);
 286          }
 287  
 288          while ( template.indexOf(replace) >= 0 && arr.length > 0) {
 289              template = template.replace(replace, arr.shift());
 290          }
 291  
 292          return template;
 293      },
 294  
 295      /**
 296      Finds the value type based on the str value provided.
 297      @public
 298      @method findType
 299      @param {String} str
 300      @return {String}
 301      @since 3.8.0
 302      **/
 303      findType: function (str) {
 304          if (Y.Color.KEYWORDS[str]) {
 305              return 'keyword';
 306          }
 307  
 308          var index = str.indexOf('('),
 309              key;
 310  
 311          if (index > 0) {
 312              key = str.substr(0, index);
 313          }
 314  
 315          if (key && Y.Color.TYPES[key.toUpperCase()]) {
 316              return Y.Color.TYPES[key.toUpperCase()];
 317          }
 318  
 319          return 'hex';
 320  
 321      }, // return 'keyword', 'hex', 'rgb'
 322  
 323      /**
 324      Retrives the alpha channel from the provided string. If no alpha
 325          channel is present, `1` will be returned.
 326      @protected
 327      @method _getAlpha
 328      @param {String} clr
 329      @return {Number}
 330      @since 3.8.0
 331      **/
 332      _getAlpha: function (clr) {
 333          var alpha,
 334              arr = Y.Color.toArray(clr);
 335  
 336          if (arr.length > 3) {
 337              alpha = arr.pop();
 338          }
 339  
 340          return +alpha || 1;
 341      },
 342  
 343      /**
 344      Returns the hex value string if found in the KEYWORDS object
 345      @protected
 346      @method _keywordToHex
 347      @param {String} clr
 348      @return {String}
 349      @since 3.8.0
 350      **/
 351      _keywordToHex: function (clr) {
 352          var keyword = Y.Color.KEYWORDS[clr];
 353  
 354          if (keyword) {
 355              return keyword;
 356          }
 357      },
 358  
 359      /**
 360      Converts the provided color string to the value type provided as `to`
 361      @protected
 362      @method _convertTo
 363      @param {String} clr
 364      @param {String} to
 365      @return {String}
 366      @since 3.8.0
 367      **/
 368      _convertTo: function(clr, to) {
 369  
 370          if (clr === 'transparent') {
 371              return clr;
 372          }
 373  
 374          var from = Y.Color.findType(clr),
 375              originalTo = to,
 376              needsAlpha,
 377              alpha,
 378              method,
 379              ucTo;
 380  
 381          if (from === 'keyword') {
 382              clr = Y.Color._keywordToHex(clr);
 383              from = 'hex';
 384          }
 385  
 386          if (from === 'hex' && clr.length < 5) {
 387              if (clr.charAt(0) === '#') {
 388                  clr = clr.substr(1);
 389              }
 390  
 391              clr = '#' + clr.charAt(0) + clr.charAt(0) +
 392                          clr.charAt(1) + clr.charAt(1) +
 393                          clr.charAt(2) + clr.charAt(2);
 394          }
 395  
 396          if (from === to) {
 397              return clr;
 398          }
 399  
 400          if (from.charAt(from.length - 1) === 'a') {
 401              from = from.slice(0, -1);
 402          }
 403  
 404          needsAlpha = (to.charAt(to.length - 1) === 'a');
 405          if (needsAlpha) {
 406              to = to.slice(0, -1);
 407              alpha = Y.Color._getAlpha(clr);
 408          }
 409  
 410          ucTo = to.charAt(0).toUpperCase() + to.substr(1).toLowerCase();
 411          method = Y.Color['_' + from + 'To' + ucTo ];
 412  
 413          // check to see if need conversion to rgb first
 414          // check to see if there is a direct conversion method
 415          // convertions are: hex <-> rgb <-> hsl
 416          if (!method) {
 417              if (from !== 'rgb' && to !== 'rgb') {
 418                  clr = Y.Color['_' + from + 'ToRgb'](clr);
 419                  from = 'rgb';
 420                  method = Y.Color['_' + from + 'To' + ucTo ];
 421              }
 422          }
 423  
 424          if (method) {
 425              clr = ((method)(clr, needsAlpha));
 426          }
 427  
 428          // process clr from arrays to strings after conversions if alpha is needed
 429          if (needsAlpha) {
 430              if (!Y.Lang.isArray(clr)) {
 431                  clr = Y.Color.toArray(clr);
 432              }
 433              clr.push(alpha);
 434              clr = Y.Color.fromArray(clr, originalTo.toUpperCase());
 435          }
 436  
 437          return clr;
 438      },
 439  
 440      /**
 441      Processes the hex string into r, g, b values. Will return values as
 442          an array, or as an rgb string.
 443      @protected
 444      @method _hexToRgb
 445      @param {String} str
 446      @param {Boolean} [toArray]
 447      @return {String|Array}
 448      @since 3.8.0
 449      **/
 450      _hexToRgb: function (str, toArray) {
 451          var r, g, b;
 452  
 453          /*jshint bitwise:false*/
 454          if (str.charAt(0) === '#') {
 455              str = str.substr(1);
 456          }
 457  
 458          str = parseInt(str, 16);
 459  
 460          r = str >> 16;
 461          g = str >> 8 & 0xFF;
 462          b = str & 0xFF;
 463  
 464          if (toArray) {
 465              return [r, g, b];
 466          }
 467  
 468          return 'rgb(' + r + ', ' + g + ', ' + b + ')';
 469      },
 470  
 471      /**
 472      Processes the rgb string into r, g, b values. Will return values as
 473          an array, or as a hex string.
 474      @protected
 475      @method _rgbToHex
 476      @param {String} str
 477      @param {Boolean} [toArray]
 478      @return {String|Array}
 479      @since 3.8.0
 480      **/
 481      _rgbToHex: function (str) {
 482          /*jshint bitwise:false*/
 483          var rgb = Y.Color.toArray(str),
 484              hex = rgb[2] | (rgb[1] << 8) | (rgb[0] << 16);
 485  
 486          hex = (+hex).toString(16);
 487  
 488          while (hex.length < 6) {
 489              hex = '0' + hex;
 490          }
 491  
 492          return '#' + hex;
 493      }
 494  
 495  };
 496  
 497  
 498  
 499  }, '3.17.2', {"requires": ["yui-base"]});