3 * jQuery Mobile Widget @VERSION
5 * This software is licensed under the MIT licence (as defined by the OSI at
6 * http://www.opensource.org/licenses/mit-license.php)
8 * ***************************************************************************
9 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
10 * Copyright (c) 2011 by Intel Corporation Ltd.
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:
19 * The above copyright notice and this permission notice shall be included in
20 * all copies or substantial portions of the Software.
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 * ***************************************************************************
31 * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
34 // It displays a grid two rows by five columns of colors.
36 // The colors are automatically computed based on the hue
37 // of the color set by the color attribute (see below).
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).
43 // To apply, add the attribute data-role="colorpalette" to a <div>
44 // element inside a page. Alternatively, call colorpalette() on an
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");
60 * Colorpalette displays a grid two rows by five columns of colors.
62 * The colors are automatically computed based on the hue
63 * of the color set by the color attribute (see below).
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).
71 * To apply, add the attribute data-role="colorpalette" to a <div>
72 * element inside a page. Alternatively, call colorpalette() on an
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");
87 * $('obj').colorpalette() : Make an object to a colorpalette widget.
93 * <div data-role="colorpalette" data-color: "#ffffff"></div>
95 * <div id="toBeColorpalette"></div>
97 * $("#toBeColorpalette").colorpalette({ color: "#ffffff" });
102 ( function ( $, undefined ) {
104 $.widget( "tizen.colorpalette", $.tizen.colorwidget, {
107 initSelector: ":jqmData(role='colorpalette')"
112 clrpalette: "#colorpalette",
113 preview: "#colorpalette-preview",
114 previewContainer: "#colorpalette-preview-container"
118 _create: function () {
122 .css( "display", "none" )
123 .after( this._ui.clrpalette );
125 this._ui.clrpalette.find( "[data-colorpalette-choice]" ).bind( "vclick", function ( e ) {
126 var clr = $.tizen.colorwidget.prototype._getElementColor.call(this, $(e.target)),
128 nChoices = self._ui.clrpalette.attr( "data-" + ( $.mobile.ns || "" ) + "n-choices" ),
132 rgbMatches = clr.match(/rgb\(([0-9]*), *([0-9]*), *([0-9]*)\)/);
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] );
141 for ( Nix = 0 ; Nix < nChoices ; Nix++ ) {
142 self._ui.clrpalette.find( "[data-colorpalette-choice=" + Nix + "]" ).removeClass( "colorpalette-choice-active" );
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" );
151 _setShowPreview: function ( show ) {
153 this._ui.previewContainer.removeAttr( "style" );
155 this._ui.previewContainer.css( "display", "none" );
158 this.element.attr( "data-" + ( $.mobile.ns || "" ) + "show-preview", show );
159 this.options.showPreview = show;
162 widget: function ( value ) {
163 return this._ui.clrpalette;
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 );
172 _setColor: function ( clr ) {
173 if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
174 clr = this.options.color;
178 nChoices = this._ui.clrpalette.attr( "data-" + ( $.mobile.ns || "" ) + "n-choices" ),
179 hsl = $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( clr ) ),
181 offset = hsl[0] / 36,
182 theFloor = Math.floor( offset ),
186 $.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.preview,
187 $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( clr ) ), "background" );
189 offset = ( offset - theFloor < 0.5 )
190 ? ( offset - theFloor )
191 : ( offset - ( theFloor + 1 ) );
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] ) );
199 if ( hsl[0] === origHue ) {
203 newClr = $.tizen.colorwidget.clrlib.RGBToHTML( $.tizen.colorwidget.clrlib.HSLToRGB( hsl ) );
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" );
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" );
220 $( document ).bind( "pagecreate create", function ( e ) {
221 $( $.tizen.colorpalette.prototype.options.initSelector, e.target )
222 .not( ":jqmData(role='none'), :jqmData(role='nojs')" )