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