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 ) 2000 - 2011 Samsung Electronics Co., Ltd.
9 * Copyright ( c ) 2011 by Intel Corporation Ltd.
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:
18 * The above copyright notice and this permission notice shall be included in
19 * all copies or substantial portions of the Software.
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 * ***************************************************************************
30 * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
33 // Displays a button which, when pressed, opens a popupwindow
34 // containing hsvpicker.
36 // To apply, add the attribute data-role="colorpickerbutton" to a <div>
37 // element inside a page. Alternatively, call colorpickerbutton() on an
42 // color: String; color displayed on the button and the base color
43 // of the hsvpicker ( see hsvpicker ).
44 // initial color can be specified in html using the
45 // data-color="#ff00ff" attribute or when constructed in
47 // $( "#mycolorpickerbutton" ).colorpickerbutton( { color: "#ff00ff" } );
48 // where the html might be :
49 // <div id="colorpickerbutton"></div>
50 // The color can be changed post-construction like this :
51 // $( "#mycolorpickerbutton" ).colorpickerbutton( "option", "color", "#ABCDEF" );
54 // buttonMarkup: String; markup to use for the close button on the popupwindow, eg :
55 // $( "#mycolorpickerbutton" ).colorpickerbutton( "option","buttonMarkup",
56 // "<a href='#' data-role='button'>ignored</a>" );
58 // closeText: String; the text to display on the close button on the popupwindow.
59 // The text set in the buttonMarkup will be ignored and this used instead.
63 // colorchanged: emitted when the color has been changed and the popupwindow is closed.
65 ( function ( $, undefined ) {
67 $.widget( "tizen.colorpickerbutton", $.tizen.colorwidget, {
77 initSelector: "input[type='color'], :jqmData(type='color'), :jqmData(role='colorpickerbutton')"
82 button: "#colorpickerbutton-button",
83 buttonContents: "#colorpickerbutton-button-contents",
84 popup: "#colorpickerbutton-popup-container",
85 hsvpicker: "#colorpickerbutton-popup-hsvpicker",
86 closeButton: "#colorpickerbutton-popup-close-button",
87 closeButtonText: "#colorpickerbutton-popup-close-button-text"
91 _create: function () {
95 .css( "display", "none" )
96 .after( this._ui.button );
98 /* Tear apart the proto */
99 this._ui.popup.insertBefore( this.element ).popupwindow();
100 this._ui.hsvpicker.hsvpicker();
102 $.tizen.popupwindow.bindPopupToButton( this._ui.button, this._ui.popup );
104 this._ui.closeButton.bind( "vclick", function ( event ) {
105 self._setColor( self._ui.hsvpicker.hsvpicker( "option", "color" ) );
109 this.element.bind( "change keyup blur", function () {
110 self._setColor( self.element.val() );
114 _setHideInput: function ( value ) {
115 this.element[value ? "addClass" : "removeClass"]( "ui-colorpickerbutton-input-hidden" );
116 this.element[value ? "removeClass" : "addClass"]( "ui-colorpickerbutton-input" );
117 this.element.attr( "data-" + ( $.mobile.ns || "" ) + "hide-input", value );
120 _setColor: function ( clr ) {
121 if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
122 var clrlib = $.tizen.colorwidget.clrlib;
124 this._ui.hsvpicker.hsvpicker( "option", "color", this.options.color );
125 $.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.buttonContents,
126 clrlib.RGBToHSL( clrlib.HTMLToRGB( this.options.color ) ), "color" );
130 _setButtonMarkup: function ( value ) {
131 this._ui.button.buttonMarkup( value );
132 this.options.buttonMarkup = value;
133 value.inline = false;
134 this._ui.closeButton.buttonMarkup( value );
137 _setCloseText: function ( value ) {
138 this._ui.closeButtonText.text( value );
139 this.options.closeText = value;
140 this.element.attr( "data-" + ( $.mobile.ns || "" ) + "close-text", value );
143 _setDisabled: function ( value ) {
144 $.tizen.widgetex.prototype._setDisabled.call( this, value );
145 this._ui.popup.popupwindow( "option", "disabled", value );
146 this._ui.button[value ? "addClass" : "removeClass"]( "ui-disabled" );
147 $.tizen.colorwidget.prototype._displayDisabledState.call( this, this._ui.button );
151 this._ui.popup.popupwindow( "open",
152 this._ui.button.offset().left + this._ui.button.outerWidth() / 2,
153 this._ui.button.offset().top + this._ui.button.outerHeight() / 2 );
156 _focusButton : function () {
158 setTimeout( function () {
159 self._ui.button.focus();
165 this._ui.popup.popupwindow( "close" );
169 //auto self-init widgets
170 $( document ).bind( "pagecreate create", function ( e ) {
171 $( $.tizen.colorpickerbutton.prototype.options.initSelector, e.target )
172 .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
173 .colorpickerbutton();