src/widgets/colorpalette/js/jquery.mobile.tizen.colorpalette.js

   1 /* TBD */
   2 /*
   3  * jQuery Mobile Widget @VERSION
   4  *
   5  * This software is licensed under the MIT licence (as defined by the OSI at
   6  * http://www.opensource.org/licenses/mit-license.php)
   7  *
   8  * ***************************************************************************
   9  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
  10  * Copyright (c) 2011 by Intel Corporation Ltd.
  11  *
  12  * Permission is hereby granted, free of charge, to any person obtaining a
  13  * copy of this software and associated documentation files (the "Software"),
  14  * to deal in the Software without restriction, including without limitation
  15  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  16  * and/or sell copies of the Software, and to permit persons to whom the
  17  * Software is furnished to do so, subject to the following conditions:
  18  *
  19  * The above copyright notice and this permission notice shall be included in
  20  * all copies or substantial portions of the Software.
  21  *
  22  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  23  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  24  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  25  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  26  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  27  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  28  * DEALINGS IN THE SOFTWARE.
  29  * ***************************************************************************
  30  *
  31  * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
  32  */
  33
  34 // It displays a grid two rows by five columns of colors.
  35 //
  36 // The colors are automatically computed based on the hue
  37 // of the color set by the color attribute (see below).
  38 //
  39 // One of the displayed colors is the color attribute itself
  40 // and the others are multiples of 360/10 away from that color;
  41 // 10 is the total number of colors displayed (2 rows by 5 columns).
  42 //
  43 // To apply, add the attribute data-role="colorpalette" to a <div>
  44 // element inside a page. Alternatively, call colorpalette() on an
  45 // element.
  46 //
  47 // Options:
  48 //
  49 //     color: String; initial color can be specified in html
  50 //            using the data-color="#ff00ff" attribute or
  51 //            when constructed in javascript, eg :
  52 //                $("#mycolorpalette").colorpalette({ color: "#ff00ff" });
  53 //            where the html might be :
  54 //                <div id="mycolorpalette"></div>
  55 //            The color can be changed post-construction like this :
  56 //                $("#mycolorpalette").colorpalette("option", "color", "#ABCDEF");
  57 //            Default: "#1a8039"
  58
  59 /*
  60  * Colorpalette displays a grid two rows by five columns of colors.
  61  *
  62  * The colors are automatically computed based on the hue
  63  * of the color set by the color attribute (see below).
  64  *
  65  * One of the displayed colors is the color attribute itself
  66  * and the others are multiples of 360/10 away from that color;
  67  * 10 is the total number of colors displayed (2 rows by 5 columns).
  68  *
  69  * HTML attributes:
  70  *
  71  * To apply, add the attribute data-role="colorpalette" to a <div>
  72  * element inside a page. Alternatively, call colorpalette() on an
  73  * element.
  74  *
  75  *     data-role: Myst have 'colorpalette'.
  76  *     data-color: String; initial color can be specified in html
  77  *            using the data-color="#ff00ff" attribute or
  78  *            when constructed in javascript, eg :
  79  *                $("#mycolorpalette").colorpalette({ color: "#ff00ff" });
  80  *            where the html might be :
  81  *                <div id="mycolorpalette"></div>
  82  *            The color can be changed post-construction like this :
  83  *                $("#mycolorpalette").colorpalette("option", "color", "#ABCDEF");
  84  *            Default: "#1a8039"
  85  *
  86  *APIs:
  87  *              $('obj').colorpalette() : Make an object to a colorpalette widget.
  88  *
  89  *Events:
  90  *              No event.
  91  *
  92  *Examples:
  93  *              <div data-role="colorpalette" data-color: "#ffffff"></div>
  94  *
  95  *              <div id="toBeColorpalette"></div>
  96  *              <script>
  97  *                      $("#toBeColorpalette").colorpalette({ color: "#ffffff" });
  98  *              </script>
  99  *
 100  */
 101
 102 ( function ( $, undefined ) {
 103
 104         $.widget( "tizen.colorpalette", $.tizen.colorwidget, {
 105                 options: {
 106                         showPreview: false,
 107                         initSelector: ":jqmData(role='colorpalette')"
 108                 },
 109
 110                 _htmlProto: {
 111                         ui: {
 112                                 clrpalette: "#colorpalette",
 113                                 preview: "#colorpalette-preview",
 114                                 previewContainer: "#colorpalette-preview-container"
 115                         }
 116                 },
 117
 118                 _create: function () {
 119                         var self = this;
 120
 121                         this.element
 122                                 .css( "display", "none" )
 123                                 .after( this._ui.clrpalette );
 124
 125                         this._ui.clrpalette.find( "[data-colorpalette-choice]" ).bind( "vclick", function ( e ) {
 126                                 var clr = $.tizen.colorwidget.prototype._getElementColor.call(this, $(e.target)),
 127                                         Nix,
 128                                         nChoices = self._ui.clrpalette.attr( "data-" + ( $.mobile.ns || "" ) + "n-choices" ),
 129                                         choiceId,
 130                                         rgbMatches;
 131
 132                                 rgbMatches = clr.match(/rgb\(([0-9]*), *([0-9]*), *([0-9]*)\)/);
 133
 134                                 if ( rgbMatches && rgbMatches.length > 3 ) {
 135                                         clr = $.tizen.colorwidget.clrlib.RGBToHTML( [
 136                                                 parseInt(rgbMatches[1], 10) / 255,
 137                                                 parseInt(rgbMatches[2], 10) / 255,
 138                                                 parseInt(rgbMatches[3], 10) / 255] );
 139                                 }
 140
 141                                 for ( Nix = 0 ; Nix < nChoices ; Nix++ ) {
 142                                         self._ui.clrpalette.find( "[data-colorpalette-choice=" + Nix + "]" ).removeClass( "colorpalette-choice-active" );
 143                                 }
 144
 145                                 $(e.target).addClass( "colorpalette-choice-active" );
 146                                 $.tizen.colorwidget.prototype._setColor.call( self, clr );
 147                                 $.tizen.colorwidget.prototype._setElementColor.call( self, self._ui.preview, $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( clr ) ), "background" );
 148                         } );
 149                 },
 150
 151                 _setShowPreview: function ( show ) {
 152                         if ( show ) {
 153                                 this._ui.previewContainer.removeAttr( "style" );
 154                         } else {
 155                                 this._ui.previewContainer.css( "display", "none" );
 156                         }
 157
 158                         this.element.attr( "data-" + ( $.mobile.ns || "" ) + "show-preview", show );
 159                         this.options.showPreview = show;
 160                 },
 161
 162                 widget: function ( value ) {
 163                         return this._ui.clrpalette;
 164                 },
 165
 166                 _setDisabled: function ( value ) {
 167                         $.tizen.widgetex.prototype._setDisabled.call( this, value );
 168                         this._ui.clrpalette[value ? "addClass" : "removeClass"]( "ui-disabled" );
 169                         $.tizen.colorwidget.prototype._displayDisabledState.call( this, this._ui.clrpalette );
 170                 },
 171
 172                 _setColor: function ( clr ) {
 173                         if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
 174                                 clr = this.options.color;
 175
 176                                 var Nix,
 177                                         activeIdx = -1,
 178                                         nChoices = this._ui.clrpalette.attr( "data-" + ( $.mobile.ns || "" ) + "n-choices" ),
 179                                         hsl = $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( clr ) ),
 180                                         origHue = hsl[0],
 181                                         offset = hsl[0] / 36,
 182                                         theFloor = Math.floor( offset ),
 183                                         newClr,
 184                                         currentlyActive;
 185
 186                                 $.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.preview,
 187                                                 $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( clr ) ), "background" );
 188
 189                                 offset = ( offset - theFloor < 0.5 )
 190                                         ? ( offset - theFloor )
 191                                         : ( offset - ( theFloor + 1 ) );
 192
 193                                 offset *= 36;
 194
 195                                 for ( Nix = 0 ; Nix < nChoices ; Nix++ ) {
 196                                         hsl[0] = Nix * 36 + offset;
 197                                         hsl[0] = ( ( hsl[0] < 0) ? ( hsl[0] + 360 ) : ( ( hsl[0] > 360 ) ? ( hsl[0] - 360 ) : hsl[0] ) );
 198
 199                                         if ( hsl[0] === origHue ) {
 200                                                 activeIdx = Nix;
 201                                         }
 202
 203                                         newClr = $.tizen.colorwidget.clrlib.RGBToHTML( $.tizen.colorwidget.clrlib.HSLToRGB( hsl ) );
 204
 205                                         $.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.clrpalette.find( "[data-colorpalette-choice=" + Nix + "]" ),
 206                                                         $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( newClr ) ), "background" );
 207                                 }
 208
 209                                 if (activeIdx != -1) {
 210                                         currentlyActive = parseInt( this._ui.clrpalette.find( ".colorpalette-choice-active" ).attr( "data-" + ($.mobile.ns || "" ) + "colorpalette-choice" ), 10 );
 211                                         if ( currentlyActive != activeIdx ) {
 212                                                 this._ui.clrpalette.find( "[data-colorpalette-choice=" + currentlyActive + "]" ).removeClass( "colorpalette-choice-active" );
 213                                                 this._ui.clrpalette.find( "[data-colorpalette-choice=" + activeIdx + "]" ).addClass( "colorpalette-choice-active" );
 214                                         }
 215                                 }
 216                         }
 217                 }
 218         });
 219
 220         $( document ).bind( "pagecreate create", function ( e ) {
 221                 $( $.tizen.colorpalette.prototype.options.initSelector, e.target )
 222                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 223                         .colorpalette();
 224         });
 225
 226 }( jQuery ) );