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                                 el;
  64
  65                         dst.add( toplevel.find( sel ) )
  66                                 .each( function () {
  67                                         el = $( this );
  68                                         el.css( el.jqmData( "cssProp" ), el.jqmData( self.options.disabled ? "dclr" : "clr" ) );
  69                                 } );
  70                 },
  71                 _isValidColorCode: function( value ) {
  72                         return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test( value );
  73                 },
  74                 _setColor: function ( value ) {
  75                         var currentValue = ( this.options.color ),
  76                                 self = this;
  77
  78                         if( !self._isValidColorCode( value ) )
  79                         {
  80                                 console.log( " Color code is invalid " );
  81                                 value = "#000000";
  82                         }
  83
  84                         value = value.match(/#[0-9A-Fa-f]{6}/)
  85                                 ? value
  86                                         : currentValue.match(/#[0-9A-Fa-f]{6}/)
  87                                         ? currentValue
  88                                                         : $.tizen.colorwidget.prototype.options.color;
  89
  90                         if ( this.options.color !== value ) {
  91                                 this.options.color = value;
  92                                 this._setValue( value );
  93                                 return true;
  94                         }
  95                         return false;
  96                 }
  97         } );
  98
  99         $.tizen.colorwidget.clrlib = {
 100                 nearestInt: function ( val ) {
 101                         var theFloor = Math.floor( val );
 102
 103                         return ( ( ( val - theFloor ) > 0.5 ) ? ( theFloor + 1 ) : theFloor );
 104                 },
 105
 106                 // Converts html color string to rgb array.
 107                 //
 108                 // Input: string clr_str, where
 109                 // clr_str is of the form "#aabbcc"
 110                 //
 111                 // Returns: [ r, g, b ], where
 112                 // r is in [0, 1]
 113                 // g is in [0, 1]
 114                 // b is in [0, 1]
 115                 HTMLToRGB: function ( clr_str ) {
 116                         clr_str = ( ( '#' == clr_str.charAt( 0 ) ) ? clr_str.substring( 1 ) : clr_str );
 117
 118                         return [ parseInt(clr_str.substring(0, 2), 16) / 255.0,
 119                                         parseInt(clr_str.substring(2, 4), 16) / 255.0,
 120                                         parseInt(clr_str.substring(4, 6), 16) / 255.0 ];
 121                 },
 122
 123                 // Converts rgb array to html color string.
 124                 //
 125                 // Input: [ r, g, b ], where
 126                 // r is in [0, 1]
 127                 // g is in [0, 1]
 128                 // b is in [0, 1]
 129                 //
 130                 // Returns: string of the form "#aabbcc"
 131                 RGBToHTML: function ( rgb ) {
 132                         var ret = "#", val, theFloor,
 133                                 Nix;
 134                         for ( Nix in rgb ) {
 135                                 val = rgb[Nix] * 255;
 136                                 theFloor = Math.floor( val );
 137                                 val = ( ( val - theFloor > 0.5 ) ? ( theFloor + 1 ) : theFloor );
 138                                 ret = ret + ( ( ( val < 16 ) ? "0" : "" ) + ( val & 0xff ).toString( 16 ) );
 139                         }
 140
 141                         return ret;
 142                 },
 143
 144                 // Converts hsl to rgb.
 145                 //
 146                 // From http://130.113.54.154/~monger/hsl-rgb.html
 147                 //
 148                 // Input: [ h, s, l ], where
 149                 // h is in [0, 360]
 150                 // s is in [0,   1]
 151                 // l is in [0,   1]
 152                 //
 153                 // Returns: [ r, g, b ], where
 154                 // r is in [0, 1]
 155                 // g is in [0, 1]
 156                 // b is in [0, 1]
 157                 HSLToRGB: function ( hsl ) {
 158                         var h = hsl[0] / 360.0, s = hsl[1], l = hsl[2],
 159                                 temp1,
 160                                 temp2,
 161                                 temp3,
 162                                 ret;
 163
 164                         if ( 0 === s ) {
 165                                 return [ l, l, l ];
 166                         }
 167
 168                         temp2 = ( ( l < 0.5 )
 169                                         ? l * ( 1.0 + s )
 170                                         : l + s - l * s);
 171
 172                         temp1 = 2.0 * l - temp2;
 173                         temp3 = {
 174                                 r: h + 1.0 / 3.0,
 175                                 g: h,
 176                                 b: h - 1.0 / 3.0
 177                         };
 178
 179                         temp3.r = ( ( temp3.r < 0 ) ? ( temp3.r + 1.0 ) : ( ( temp3.r > 1 ) ? ( temp3.r - 1.0 ) : temp3.r ) );
 180                         temp3.g = ( ( temp3.g < 0 ) ? ( temp3.g + 1.0 ) : ( ( temp3.g > 1 ) ? ( temp3.g - 1.0 ) : temp3.g ) );
 181                         temp3.b = ( ( temp3.b < 0 ) ? ( temp3.b + 1.0 ) : ( ( temp3.b > 1 ) ? ( temp3.b - 1.0 ) : temp3.b ) );
 182
 183                         ret = [( ( ( 6.0 * temp3.r ) < 1 ) ? ( temp1 + ( temp2 - temp1 ) * 6.0 * temp3.r ) :
 184                                         ( ( ( 2.0 * temp3.r ) < 1 ) ? temp2 :
 185                                                         ( ( ( 3.0 * temp3.r ) < 2 ) ? ( temp1 + ( temp2 - temp1 ) * ( ( 2.0 / 3.0 ) - temp3.r ) * 6.0 ) :
 186                                                                         temp1) ) ),
 187                                                 ( ( ( 6.0 * temp3.g ) < 1) ? ( temp1 + ( temp2 - temp1 ) * 6.0 * temp3.g ) :
 188                                                         ( ( ( 2.0 * temp3.g ) < 1 ) ? temp2 :
 189                                                                 ( ( ( 3.0 * temp3.g ) < 2 ) ? ( temp1 + ( temp2 - temp1 ) * ( ( 2.0 / 3.0 ) - temp3.g ) * 6.0 ) :
 190                                                                                 temp1 ) ) ),
 191                                                                         ( ( ( 6.0 * temp3.b ) < 1 ) ? ( temp1 + ( temp2 - temp1 ) * 6.0 * temp3.b ) :
 192                                                                                 ( ( ( 2.0 * temp3.b ) < 1 ) ? temp2 :
 193                                                                                         ( ( ( 3.0 * temp3.b ) < 2 ) ? ( temp1 + ( temp2 - temp1 ) * ( ( 2.0 / 3.0 ) - temp3.b ) * 6.0 ) :
 194                                                                                                 temp1 ) ) )];
 195
 196                         return ret;
 197                 },
 198
 199                 // Converts hsv to rgb.
 200                 //
 201                 // Input: [ h, s, v ], where
 202                 // h is in [0, 360]
 203                 // s is in [0,   1]
 204                 // v is in [0,   1]
 205                 //
 206                 // Returns: [ r, g, b ], where
 207                 // r is in [0, 1]
 208                 // g is in [0, 1]
 209                 // b is in [0, 1]
 210                 HSVToRGB: function ( hsv ) {
 211                         return $.tizen.colorwidget.clrlib.HSLToRGB( $.tizen.colorwidget.clrlib.HSVToHSL( hsv ) );
 212                 },
 213
 214                 // Converts rgb to hsv.
 215                 //
 216                 // from http://coecsl.ece.illinois.edu/ge423/spring05/group8/FinalProject/HSV_writeup.pdf
 217                 //
 218                 // Input: [ r, g, b ], where
 219                 // r is in [0,   1]
 220                 // g is in [0,   1]
 221                 // b is in [0,   1]
 222                 //
 223                 // Returns: [ h, s, v ], where
 224                 // h is in [0, 360]
 225                 // s is in [0,   1]
 226                 // v is in [0,   1]
 227                 RGBToHSV: function ( rgb ) {
 228                         var min, max, delta, h, s, v, r = rgb[0], g = rgb[1], b = rgb[2];
 229
 230                         min = Math.min( r, Math.min( g, b ) );
 231                         max = Math.max( r, Math.max( g, b ) );
 232                         delta = max - min;
 233
 234                         h = 0;
 235                         s = 0;
 236                         v = max;
 237
 238                         if ( delta > 0.00001 ) {
 239                                 s = delta / max;
 240
 241                                 if ( r === max ) {
 242                                         h = ( g - b ) / delta;
 243                                 } else {
 244                                         if ( g === max ) {
 245                                                 h = 2 + ( b - r ) / delta;
 246                                         } else {
 247                                                 h = 4 + ( r - g ) / delta;
 248                                         }
 249                                 }
 250                                 h *= 60;
 251
 252                                 if ( h < 0 ) {
 253                                         h += 360;
 254                                 }
 255                         }
 256
 257                         return [h, s, v];
 258                 },
 259
 260                 // Converts hsv to hsl.
 261                 //
 262                 // Input: [ h, s, v ], where
 263                 // h is in [0, 360]
 264                 // s is in [0,   1]
 265                 // v is in [0,   1]
 266                 //
 267                 // Returns: [ h, s, l ], where
 268                 // h is in [0, 360]
 269                 // s is in [0,   1]
 270                 // l is in [0,   1]
 271                 HSVToHSL: function ( hsv ) {
 272                         var max = hsv[2],
 273                                 delta = hsv[1] * max,
 274                                 min = max - delta,
 275                                 sum = max + min,
 276                                 half_sum = sum / 2,
 277                                 s_divisor = ( ( half_sum < 0.5 ) ? sum : ( 2 - max - min ) );
 278
 279                         return [ hsv[0], ( ( 0 == s_divisor ) ? 0 : ( delta / s_divisor ) ), half_sum ];
 280                 },
 281
 282                 // Converts rgb to hsl
 283                 //
 284                 // Input: [ r, g, b ], where
 285                 // r is in [0,   1]
 286                 // g is in [0,   1]
 287                 // b is in [0,   1]
 288                 //
 289                 // Returns: [ h, s, l ], where
 290                 // h is in [0, 360]
 291                 // s is in [0,   1]
 292                 // l is in [0,   1]
 293                 RGBToHSL: function ( rgb ) {
 294                         return $.tizen.colorwidget.clrlib.HSVToHSL( $.tizen.colorwidget.clrlib.RGBToHSV( rgb ) );
 295                 },
 296
 297                 // Converts hsl to grayscale
 298                 // Full-saturation magic grayscale values were taken from the Gimp
 299                 //
 300                 // Input: [ h, s, l ], where
 301                 // h is in [0, 360]
 302                 // s is in [0,   1]
 303                 // l is in [0,   1]
 304                 //
 305                 // Returns: [ r, g, b ], where
 306                 // r is in [0,   1]
 307                 // g is in [0,   1]
 308                 // b is in [0,   1]
 309                 HSLToGray: function ( hsl ) {
 310                         var intrinsic_vals = [0.211764706, 0.929411765, 0.71372549, 0.788235294, 0.070588235, 0.28627451, 0.211764706],
 311                                 idx = Math.floor(hsl[0] / 60),
 312                                 lowerHalfPercent,
 313                                 upperHalfPercent,
 314                                 begVal,
 315                                 endVal,
 316                                 val;
 317
 318                         // Find hue interval
 319                         begVal = intrinsic_vals[idx];
 320                         endVal = intrinsic_vals[idx + 1];
 321
 322                         // Adjust for lum
 323                         if ( hsl[2] < 0.5 ) {
 324                                 lowerHalfPercent = hsl[2] * 2;
 325                                 begVal *= lowerHalfPercent;
 326                                 endVal *= lowerHalfPercent;
 327                         } else {
 328                                 upperHalfPercent = ( hsl[2] - 0.5 ) * 2;
 329                                 begVal += ( 1.0 - begVal ) * upperHalfPercent;
 330                                 endVal += ( 1.0 - endVal ) * upperHalfPercent;
 331                         }
 332
 333                         // This is the gray value at full sat, whereas hsl[2] is the gray value at 0 sat.
 334                         val = begVal + ( ( endVal - begVal ) * ( hsl[0] - ( idx * 60 ) ) ) / 60;
 335
 336                         // Get value at hsl[1]
 337                         val = val + ( hsl[2] - val ) * ( 1.0 - hsl[1] );
 338
 339                         return [val, val, val];
 340                 }
 341         };
 342
 343 }( jQuery ));