2 * jQuery Mobile Widget @VERSION
4 * This software is licensed under the MIT licence (as defined by the OSI at
5 * http://www.opensource.org/licenses/mit-license.php)
7 * ***************************************************************************
8 * Copyright (C) 2011 by Intel Corporation Ltd.
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:
17 * The above copyright notice and this permission notice shall be included in
18 * all copies or substantial portions of the Software.
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 * ***************************************************************************
29 * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
32 // Displays a button which, when pressed, opens a popupwindow
33 // containing hsvpicker.
35 // To apply, add the attribute data-role="colorpickerbutton" to a <div>
36 // element inside a page. Alternatively, call colorpickerbutton() on an
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
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");
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>");
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.
62 // colorchanged: emitted when the color has been changed and the popupwindow is closed.
64 (function($, undefined) {
66 $.widget("tizen.colorpickerbutton", $.tizen.colorwidget, {
76 initSelector: "input[type='color'], :jqmData(type='color'), :jqmData(role='colorpickerbutton')"
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"
94 .css("display", "none")
95 .after(this._ui.button);
97 /* Tear apart the proto */
98 this._ui.popup.insertBefore(this.element).popupwindow();
99 this._ui.hsvpicker.hsvpicker();
101 $.tizen.popupwindow.bindPopupToButton(this._ui.button, this._ui.popup);
103 this._ui.closeButton.bind("vclick", function(event) {
104 self._setColor(self._ui.hsvpicker.hsvpicker("option", "color"));
108 this.element.bind("change keyup blur", function() {
109 self._setColor(self.element.val());
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);
119 _setColor: function(clr) {
120 if ($.tizen.colorwidget.prototype._setColor.call(this, clr)) {
121 var clrlib = $.tizen.colorwidget.clrlib;
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");
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);
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);
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);
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);
155 _focusButton : function(){
157 setTimeout(function() {
158 self._ui.button.focus();
164 this._ui.popup.popupwindow("close");
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();