src/widgets/010_colorwidget/js/jquery.mobile.tizen.colorwidget.js

   1 /*
   2  *
   3  * This software is licensed under the MIT licence (as defined by the OSI at
   4  * http://www.opensource.org/licenses/mit-license.php)
   5  *
   6  * ***************************************************************************
   7  * Copyright (C) 2011 by Intel Corporation Ltd.
   8  *
   9  * Permission is hereby granted, free of charge, to any person obtaining a
  10  * copy of this software and associated documentation files (the "Software"),
  11  * to deal in the Software without restriction, including without limitation
  12  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  13  * and/or sell copies of the Software, and to permit persons to whom the
  14  * Software is furnished to do so, subject to the following conditions:
  15  *
  16  * The above copyright notice and this permission notice shall be included in
  17  * all copies or substantial portions of the Software.
  18  *
  19  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  20  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  21  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  22  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  23  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  24  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  25  * DEALINGS IN THE SOFTWARE.
  26  * ***************************************************************************
  27  */
  28
  29 (function($, undefined) {
  30
  31 $.widget("tizen.colorwidget", $.tizen.widgetex, {
  32     options: {
  33         color: "#ff0972"
  34     },
  35
  36     _value: {
  37         attr: "data-" + ($.mobile.ns || "") + "color",
  38         signal: "colorchanged"
  39     },
  40
  41     _getElementColor: function(el, cssProp) {
  42         return el.jqmData("clr");
  43     },
  44
  45     _setElementColor: function(el, hsl, cssProp) {
  46         var clrlib = $.tizen.colorwidget.clrlib,
  47             clr = clrlib.RGBToHTML(clrlib.HSLToRGB(hsl)),
  48             dclr = clrlib.RGBToHTML(clrlib.HSLToGray(hsl));
  49
  50         el.jqmData("clr", clr);
  51         el.jqmData("dclr", dclr);
  52         el.jqmData("cssProp", cssProp);
  53         el.attr("data-" + ($.mobile.ns || "") + "has-dclr", true);
  54         el.css(cssProp, this.options.disabled ? dclr : clr);
  55
  56         return { clr: clr, dclr: dclr };
  57     },
  58
  59     _displayDisabledState: function(toplevel) {
  60         var self = this,
  61             sel = ":jqmData(has-dclr='true')",
  62             dst = toplevel.is(sel) ? toplevel : $([]);
  63         dst
  64             .add(toplevel.find(sel))
  65             .each(function() {
  66                 el = $(this);
  67
  68                 el.css(el.jqmData("cssProp"), el.jqmData(self.options.disabled ? "dclr" : "clr"));
  69             });
  70     },
  71
  72     _setColor: function(value) {
  73         var currentValue = (this.options.color + "");
  74
  75         value = value + "";
  76         value = value.match(/#[0-9A-Fa-f]{6}/)
  77             ? value
  78             : currentValue.match(/#[0-9A-Fa-f]{6}/)
  79                 ? currentValue
  80                 : $.tizen.colorwidget.prototype.options.color;
  81
  82         if (this.options.color !== value) {
  83             this.options.color = value;
  84             this._setValue(value);
  85             return true;
  86         }
  87         return false;
  88     }
  89 });
  90
  91 $.tizen.colorwidget.clrlib = {
  92     nearestInt: function(val) {
  93         var theFloor = Math.floor(val);
  94
  95         return (((val - theFloor) > 0.5) ? (theFloor + 1) : theFloor);
  96     },
  97
  98     // Converts html color string to rgb array.
  99     //
 100     // Input: string clr_str, where
 101     // clr_str is of the form "#aabbcc"
 102     //
 103     // Returns: [ r, g, b ], where
 104     // r is in [0, 1]
 105     // g is in [0, 1]
 106     // b is in [0, 1]
 107     HTMLToRGB: function(clr_str) {
 108         clr_str = (('#' == clr_str.charAt(0)) ? clr_str.substring(1) : clr_str);
 109
 110         return [ parseInt(clr_str.substring(0, 2), 16) / 255.0,
 111                  parseInt(clr_str.substring(2, 4), 16) / 255.0,
 112                  parseInt(clr_str.substring(4, 6), 16) / 255.0 ];
 113     },
 114
 115     // Converts rgb array to html color string.
 116     //
 117     // Input: [ r, g, b ], where
 118     // r is in [0, 1]
 119     // g is in [0, 1]
 120     // b is in [0, 1]
 121     //
 122     // Returns: string of the form "#aabbcc"
 123     RGBToHTML: function(rgb) {
 124         var ret = "#", val, theFloor;
 125         for (var Nix in rgb) {
 126             val = rgb[Nix] * 255;
 127             theFloor = Math.floor(val);
 128             val = ((val - theFloor > 0.5) ? (theFloor + 1) : theFloor);
 129             ret = ret + (((val < 16) ? "0" : "") + (val & 0xff).toString(16));
 130         }
 131
 132         return ret;
 133     },
 134
 135     // Converts hsl to rgb.
 136     //
 137     // From http://130.113.54.154/~monger/hsl-rgb.html
 138     //
 139     // Input: [ h, s, l ], where
 140     // h is in [0, 360]
 141     // s is in [0,   1]
 142     // l is in [0,   1]
 143     //
 144     // Returns: [ r, g, b ], where
 145     // r is in [0, 1]
 146     // g is in [0, 1]
 147     // b is in [0, 1]
 148     HSLToRGB: function(hsl) {
 149         var h = hsl[0] / 360.0, s = hsl[1], l = hsl[2];
 150
 151         if (0 === s)
 152             return [ l, l, l ];
 153
 154         var temp2 = ((l < 0.5)
 155                 ? l * (1.0 + s)
 156                 : l + s - l * s),
 157             temp1 = 2.0 * l - temp2,
 158             temp3 = {
 159                 r: h + 1.0 / 3.0,
 160                 g: h,
 161                 b: h - 1.0 / 3.0
 162             };
 163
 164         temp3.r = ((temp3.r < 0) ? (temp3.r + 1.0) : ((temp3.r > 1) ? (temp3.r - 1.0) : temp3.r));
 165         temp3.g = ((temp3.g < 0) ? (temp3.g + 1.0) : ((temp3.g > 1) ? (temp3.g - 1.0) : temp3.g));
 166         temp3.b = ((temp3.b < 0) ? (temp3.b + 1.0) : ((temp3.b > 1) ? (temp3.b - 1.0) : temp3.b));
 167
 168         ret = [
 169             (((6.0 * temp3.r) < 1) ? (temp1 + (temp2 - temp1) * 6.0 * temp3.r) :
 170             (((2.0 * temp3.r) < 1) ? temp2 :
 171             (((3.0 * temp3.r) < 2) ? (temp1 + (temp2 - temp1) * ((2.0 / 3.0) - temp3.r) * 6.0) :
 172              temp1))),
 173             (((6.0 * temp3.g) < 1) ? (temp1 + (temp2 - temp1) * 6.0 * temp3.g) :
 174             (((2.0 * temp3.g) < 1) ? temp2 :
 175             (((3.0 * temp3.g) < 2) ? (temp1 + (temp2 - temp1) * ((2.0 / 3.0) - temp3.g) * 6.0) :
 176              temp1))),
 177             (((6.0 * temp3.b) < 1) ? (temp1 + (temp2 - temp1) * 6.0 * temp3.b) :
 178             (((2.0 * temp3.b) < 1) ? temp2 :
 179             (((3.0 * temp3.b) < 2) ? (temp1 + (temp2 - temp1) * ((2.0 / 3.0) - temp3.b) * 6.0) :
 180              temp1)))];
 181
 182         return ret;
 183     },
 184
 185     // Converts hsv to rgb.
 186     //
 187     // Input: [ h, s, v ], where
 188     // h is in [0, 360]
 189     // s is in [0,   1]
 190     // v is in [0,   1]
 191     //
 192     // Returns: [ r, g, b ], where
 193     // r is in [0, 1]
 194     // g is in [0, 1]
 195     // b is in [0, 1]
 196     HSVToRGB: function(hsv) {
 197         return $.tizen.colorwidget.clrlib.HSLToRGB($.tizen.colorwidget.clrlib.HSVToHSL(hsv));
 198     },
 199
 200     // Converts rgb to hsv.
 201     //
 202     // from http://coecsl.ece.illinois.edu/ge423/spring05/group8/FinalProject/HSV_writeup.pdf
 203     //
 204     // Input: [ r, g, b ], where
 205     // r is in [0,   1]
 206     // g is in [0,   1]
 207     // b is in [0,   1]
 208     //
 209     // Returns: [ h, s, v ], where
 210     // h is in [0, 360]
 211     // s is in [0,   1]
 212     // v is in [0,   1]
 213     RGBToHSV: function(rgb) {
 214         var min, max, delta, h, s, v, r = rgb[0], g = rgb[1], b = rgb[2];
 215
 216         min = Math.min(r, Math.min(g, b));
 217         max = Math.max(r, Math.max(g, b));
 218         delta = max - min;
 219
 220         h = 0;
 221         s = 0;
 222         v = max;
 223
 224         if (delta > 0.00001) {
 225             s = delta / max;
 226
 227             if (r === max)
 228                 h = (g - b) / delta ;
 229             else
 230             if (g === max)
 231                 h = 2 + (b - r) / delta ;
 232             else
 233                 h = 4 + (r - g) / delta ;
 234
 235             h *= 60 ;
 236
 237             if (h < 0)
 238                 h += 360 ;
 239         }
 240
 241         return [h, s, v];
 242     },
 243
 244     // Converts hsv to hsl.
 245     //
 246     // Input: [ h, s, v ], where
 247     // h is in [0, 360]
 248     // s is in [0,   1]
 249     // v is in [0,   1]
 250     //
 251     // Returns: [ h, s, l ], where
 252     // h is in [0, 360]
 253     // s is in [0,   1]
 254     // l is in [0,   1]
 255     HSVToHSL: function(hsv) {
 256         var max = hsv[2],
 257             delta = hsv[1] * max,
 258             min = max - delta,
 259             sum = max + min,
 260             half_sum = sum / 2,
 261             s_divisor = ((half_sum < 0.5) ? sum : (2 - max - min));
 262
 263         return [ hsv[0], ((0 == s_divisor) ? 0 : (delta / s_divisor)), half_sum ];
 264     },
 265
 266     // Converts rgb to hsl
 267     //
 268     // Input: [ r, g, b ], where
 269     // r is in [0,   1]
 270     // g is in [0,   1]
 271     // b is in [0,   1]
 272     //
 273     // Returns: [ h, s, l ], where
 274     // h is in [0, 360]
 275     // s is in [0,   1]
 276     // l is in [0,   1]
 277     RGBToHSL: function(rgb) {
 278         return $.tizen.colorwidget.clrlib.HSVToHSL($.tizen.colorwidget.clrlib.RGBToHSV(rgb));
 279     },
 280
 281     // Converts hsl to grayscale
 282     // Full-saturation magic grayscale values were taken from the Gimp
 283     //
 284     // Input: [ h, s, l ], where
 285     // h is in [0, 360]
 286     // s is in [0,   1]
 287     // l is in [0,   1]
 288     //
 289     // Returns: [ r, g, b ], where
 290     // r is in [0,   1]
 291     // g is in [0,   1]
 292     // b is in [0,   1]
 293     HSLToGray: function(hsl) {
 294         var intrinsic_vals = [0.211764706, 0.929411765, 0.71372549, 0.788235294, 0.070588235, 0.28627451, 0.211764706],
 295             idx = Math.floor(hsl[0] / 60),
 296             begVal, endVal, val;
 297
 298         // Find hue interval
 299         begVal = intrinsic_vals[idx];
 300         endVal = intrinsic_vals[idx + 1];
 301
 302         // Adjust for lum
 303         if (hsl[2] < 0.5) {
 304             var lowerHalfPercent = hsl[2] * 2;
 305             begVal *= lowerHalfPercent;
 306             endVal *= lowerHalfPercent;
 307         }
 308         else {
 309             var upperHalfPercent = (hsl[2] - 0.5) * 2;
 310             begVal += (1.0 - begVal) * upperHalfPercent;
 311             endVal += (1.0 - endVal) * upperHalfPercent;
 312         }
 313
 314         // This is the gray value at full sat, whereas hsl[2] is the gray value at 0 sat.
 315         val = begVal + ((endVal - begVal) * (hsl[0] - (idx * 60))) / 60;
 316
 317         // Get value at hsl[1]
 318         val = val + (hsl[2] - val) * (1.0 - hsl[1]);
 319
 320         return [val, val, val];
 321     }
 322 };
 323
 324 })(jQuery);