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

   1 /*
   2  * jQuery Mobile Widget @VERSION
   3  *
   4  * This software is licensed under the MIT licence (as defined by the OSI at
   5  * http://www.opensource.org/licenses/mit-license.php)
   6  *
   7  * ***************************************************************************
   8  * Copyright (C) 2011 by Intel Corporation Ltd.
   9  *
  10  * Permission is hereby granted, free of charge, to any person obtaining a
  11  * copy of this software and associated documentation files (the "Software"),
  12  * to deal in the Software without restriction, including without limitation
  13  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  14  * and/or sell copies of the Software, and to permit persons to whom the
  15  * Software is furnished to do so, subject to the following conditions:
  16  *
  17  * The above copyright notice and this permission notice shall be included in
  18  * all copies or substantial portions of the Software.
  19  *
  20  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  21  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  22  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  23  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  24  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  25  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  26  * DEALINGS IN THE SOFTWARE.
  27  * ***************************************************************************
  28  *
  29  * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
  30  */
  31
  32 // Displays a button which, when pressed, opens a popupwindow
  33 // containing hsvpicker.
  34 //
  35 // To apply, add the attribute data-role="colorpickerbutton" to a <div>
  36 // element inside a page. Alternatively, call colorpickerbutton() on an
  37 // element.
  38 //
  39 // Options:
  40 //
  41 //     color: String; color displayed on the button and the base color
  42 //            of the hsvpicker (see hsvpicker).
  43 //            initial color can be specified in html using the
  44 //            data-color="#ff00ff" attribute or when constructed in
  45 //            javascript, eg :
  46 //                $("#mycolorpickerbutton").colorpickerbutton({ color: "#ff00ff" });
  47 //            where the html might be :
  48 //                <div id="colorpickerbutton"></div>
  49 //            The color can be changed post-construction like this :
  50 //                $("#mycolorpickerbutton").colorpickerbutton("option", "color", "#ABCDEF");
  51 //            Default: "#1a8039"
  52 //
  53 //     buttonMarkup: String; markup to use for the close button on the popupwindow, eg :
  54 //                   $("#mycolorpickerbutton").colorpickerbutton("option","buttonMarkup",
  55 //                     "<a href='#' data-role='button'>ignored</a>");
  56 //
  57 //     closeText: String; the text to display on the close button on the popupwindow.
  58 //                The text set in the buttonMarkup will be ignored and this used instead.
  59 //
  60 // Events:
  61 //
  62 //     colorchanged: emitted when the color has been changed and the popupwindow is closed.
  63
  64 (function($, undefined) {
  65
  66 $.widget("tizen.colorpickerbutton", $.tizen.colorwidget, {
  67     options: {
  68         buttonMarkup: {
  69             theme: null,
  70             inline: true,
  71             corners: true,
  72             shadow: true
  73         },
  74         hideInput: true,
  75         closeText: "Close",
  76         initSelector: "input[type='color'], :jqmData(type='color'), :jqmData(role='colorpickerbutton')"
  77     },
  78
  79     _htmlProto: {
  80         ui: {
  81             button:          "#colorpickerbutton-button",
  82             buttonContents:  "#colorpickerbutton-button-contents",
  83             popup:           "#colorpickerbutton-popup-container",
  84             hsvpicker:       "#colorpickerbutton-popup-hsvpicker",
  85             closeButton:     "#colorpickerbutton-popup-close-button",
  86             closeButtonText: "#colorpickerbutton-popup-close-button-text"
  87         }
  88     },
  89
  90     _create: function() {
  91         var self = this;
  92
  93         this.element
  94             .css("display", "none")
  95             .after(this._ui.button);
  96
  97         /* Tear apart the proto */
  98         this._ui.popup.insertBefore(this.element).popupwindow();
  99         this._ui.hsvpicker.hsvpicker();
 100
 101         $.tizen.popupwindow.bindPopupToButton(this._ui.button, this._ui.popup);
 102
 103         this._ui.closeButton.bind("vclick", function(event) {
 104             self._setColor(self._ui.hsvpicker.hsvpicker("option", "color"));
 105             self.close();
 106         });
 107
 108         this.element.bind("change keyup blur", function() {
 109             self._setColor(self.element.val());
 110         });
 111     },
 112
 113     _setHideInput: function(value) {
 114         this.element[value ? "addClass" : "removeClass"]("ui-colorpickerbutton-input-hidden");
 115         this.element[value ? "removeClass" : "addClass"]("ui-colorpickerbutton-input");
 116         this.element.attr("data-" + ($.mobile.ns || "") + "hide-input", value);
 117     },
 118
 119     _setColor: function(clr) {
 120         if ($.tizen.colorwidget.prototype._setColor.call(this, clr)) {
 121             var clrlib = $.tizen.colorwidget.clrlib;
 122
 123             this._ui.hsvpicker.hsvpicker("option", "color", this.options.color);
 124             $.tizen.colorwidget.prototype._setElementColor.call(this, this._ui.buttonContents,
 125                 clrlib.RGBToHSL(clrlib.HTMLToRGB(this.options.color)), "color");
 126         }
 127     },
 128
 129     _setButtonMarkup: function(value) {
 130         this._ui.button.buttonMarkup(value);
 131         this.options.buttonMarkup = value;
 132         value["inline"] = false;
 133         this._ui.closeButton.buttonMarkup(value);
 134     },
 135
 136     _setCloseText: function(value) {
 137         this._ui.closeButtonText.text(value);
 138         this.options.closeText = value;
 139         this.element.attr("data-" + ($.mobile.ns || "") + "close-text", value);
 140     },
 141
 142     _setDisabled: function(value) {
 143         $.tizen.widgetex.prototype._setDisabled.call(this, value);
 144         this._ui.popup.popupwindow("option", "disabled", value);
 145         this._ui.button[value ? "addClass" : "removeClass"]("ui-disabled");
 146         $.tizen.colorwidget.prototype._displayDisabledState.call(this, this._ui.button);
 147     },
 148
 149     open: function() {
 150         this._ui.popup.popupwindow("open",
 151             this._ui.button.offset().left + this._ui.button.outerWidth()  / 2,
 152             this._ui.button.offset().top  + this._ui.button.outerHeight() / 2);
 153     },
 154
 155     _focusButton : function(){
 156         var self = this;
 157         setTimeout(function() {
 158             self._ui.button.focus();
 159         }, 40);
 160     },
 161
 162     close: function() {
 163         this._focusButton();
 164         this._ui.popup.popupwindow("close");
 165     }
 166 });
 167
 168 //auto self-init widgets
 169 $(document).bind("pagecreate create", function(e) {
 170     $($.tizen.colorpickerbutton.prototype.options.initSelector, e.target)
 171         .not(":jqmData(role='none'), :jqmData(role='nojs')")
 172         .colorpickerbutton();
 173 });
 174
 175 })(jQuery);