src/widgets/colorpicker/js/jquery.mobile.tizen.colorpicker.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) 2000 - 2011 Samsung Electronics Co., Ltd.
   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 // Displays a 2D hue/saturation spectrum and a lightness slider.
  34 //
  35 // To apply, add the attribute data-role="colorpicker" to a <div>
  36 // element inside a page. Alternatively, call colorpicker()
  37 // on an element (see below).
  38 //
  39 //Options:
  40 //      color: String; can be specified in html using the
  41 //              data-color="#ff00ff" attribute or when constructed
  42 //                      $("#mycolorpicker").colorpicker({ color: "#ff00ff" });
  43 //              where the html might be :
  44 //                      <div id="mycolorpicker"/>
  45
  46 (function ( $, undefined ) {
  47
  48         $.widget( "tizen.colorpicker", $.tizen.colorwidget, {
  49                 options: {
  50                         initSelector: ":jqmData(role='colorpicker')"
  51                 },
  52
  53                 _htmlProto: {
  54                         ui: {
  55                                 clrpicker: "#colorpicker",
  56                                 hs: {
  57                                         hueGradient: "#colorpicker-hs-hue-gradient",
  58                                         gradient:    "#colorpicker-hs-sat-gradient",
  59                                         eventSource: "[data-event-source='hs']",
  60                                         valMask:     "#colorpicker-hs-val-mask",
  61                                         selector:    "#colorpicker-hs-selector"
  62                                 },
  63                                 l: {
  64                                         gradient:    "#colorpicker-l-gradient",
  65                                         eventSource: "[data-event-source='l']",
  66                                         selector:    "#colorpicker-l-selector"
  67                                 }
  68                         }
  69                 },
  70
  71                 _create: function () {
  72                         var self = this;
  73
  74                         this.element
  75                                 .css( "display", "none" )
  76                                 .after( this._ui.clrpicker );
  77
  78                         this._ui.hs.hueGradient.huegradient();
  79
  80                         $.extend( self, {
  81                                 dragging: false,
  82                                 draggingHS: false,
  83                                 selectorDraggingOffset: {
  84                                         x : -1,
  85                                         y : -1
  86                                 },
  87                                 dragging_hsl: undefined
  88                         } );
  89
  90                         $( document )
  91                                 .bind( "vmousemove", function ( event ) {
  92                                         if ( self.dragging ) {
  93                                                 event.stopPropagation();
  94                                                 event.preventDefault();
  95                                         }
  96                                 } )
  97                                 .bind( "vmouseup", function ( event ) {
  98                                         if ( self.dragging ) {
  99                                                 self.dragging = false;
 100                                         }
 101                                 } );
 102
 103                         this._bindElements( "hs" );
 104                         this._bindElements( "l" );
 105                 },
 106
 107                 _bindElements: function ( which ) {
 108                         var self = this,
 109                                 stopDragging = function ( event ) {
 110                                         self.dragging = false;
 111                                         event.stopPropagation();
 112                                         event.preventDefault();
 113                                 };
 114
 115                         this._ui[which].eventSource
 116                                 .bind( "vmousedown mousedown", function ( event ) { self._handleMouseDown( event, which, false ); } )
 117                                 .bind( "vmousemove"          , function ( event ) { self._handleMouseMove( event, which, false ); } )
 118                                 .bind( "vmouseup"            , stopDragging );
 119
 120                         this._ui[which].selector
 121                                 .bind( "vmousedown mousedown", function ( event ) { self._handleMouseDown( event, which, true); } )
 122                                 .bind( "touchmove vmousemove", function ( event ) { self._handleMouseMove( event, which, true); } )
 123                                 .bind( "vmouseup"            , stopDragging );
 124                 },
 125
 126                 _handleMouseDown: function ( event, containerStr, isSelector ) {
 127                         var coords = $.mobile.tizen.targetRelativeCoordsFromEvent( event ),
 128                                 widgetStr = isSelector ? "selector" : "eventSource";
 129                         if ( ( coords.x >= 0 && coords.x <= this._ui[containerStr][widgetStr].width() &&
 130                                         coords.y >= 0 && coords.y <= this._ui[containerStr][widgetStr].height() ) || isSelector ) {
 131                                 this.dragging = true;
 132                                 this.draggingHS = ( "hs" === containerStr );
 133
 134                                 if ( isSelector ) {
 135                                         this.selectorDraggingOffset.x = coords.x;
 136                                         this.selectorDraggingOffset.y = coords.y;
 137                                 }
 138
 139                                 this._handleMouseMove( event, containerStr, isSelector, coords );
 140                         }
 141                 },
 142
 143                 _handleMouseMove: function ( event, containerStr, isSelector, coords ) {
 144                         var potential_h,
 145                                 potential_s,
 146                                 potential_l;
 147
 148                         if ( this.dragging &&
 149                                         !( ( this.draggingHS && containerStr === "l" ) ||
 150                                                 ( !this.draggingHS && containerStr === "hs" ) ) ) {
 151                                 coords = ( coords || $.mobile.tizen.targetRelativeCoordsFromEvent( event ) );
 152
 153                                 if ( this.draggingHS ) {
 154                                         potential_h = isSelector
 155                                                 ? this.dragging_hsl[0] / 360 + ( coords.x - this.selectorDraggingOffset.x ) / this._ui[containerStr].eventSource.width()
 156                                                 : coords.x / this._ui[containerStr].eventSource.width();
 157                                         potential_s = isSelector
 158                                                 ? this.dragging_hsl[1] + ( coords.y - this.selectorDraggingOffset.y ) / this._ui[containerStr].eventSource.height()
 159                                                 : coords.y / this._ui[containerStr].eventSource.height();
 160
 161                                         this.dragging_hsl[0] = Math.min( 1.0, Math.max( 0.0, potential_h ) ) * 360;
 162                                         this.dragging_hsl[1] = Math.min( 1.0, Math.max( 0.0, potential_s ) );
 163                                 } else {
 164                                         potential_l = isSelector
 165                                                 ? this.dragging_hsl[2] + ( coords.y - this.selectorDraggingOffset.y ) / this._ui[containerStr].eventSource.height()
 166                                                 : coords.y / this._ui[containerStr].eventSource.height();
 167
 168                                         this.dragging_hsl[2] = Math.min( 1.0, Math.max( 0.0, potential_l ) );
 169                                 }
 170
 171                                 if ( !isSelector ) {
 172                                         this.selectorDraggingOffset.x = Math.ceil( this._ui[containerStr].selector.outerWidth()  / 2.0 );
 173                                         this.selectorDraggingOffset.y = Math.ceil( this._ui[containerStr].selector.outerHeight() / 2.0 );
 174                                 }
 175
 176                                 this._updateSelectors( this.dragging_hsl );
 177                                 event.stopPropagation();
 178                                 event.preventDefault();
 179                         }
 180                 },
 181
 182                 _updateSelectors: function ( hsl ) {
 183                         var clr = $.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.hs.selector, [hsl[0], 1.0 - hsl[1], hsl[2]], "background" ).clr,
 184                                 gray = $.tizen.colorwidget.clrlib.RGBToHTML( [hsl[2], hsl[2], hsl[2]] );
 185
 186                         this._ui.hs.valMask.css((hsl[2] < 0.5)
 187                                 ? { background : "#000000" , opacity : ( 1.0 - hsl[2] * 2.0 )   }
 188                                 : { background : "#ffffff" , opacity : ( ( hsl[2] - 0.5 ) * 2.0 ) } );
 189                         this._ui.hs.selector.css( {
 190                                 left : ( hsl[0] / 360 * this._ui.hs.eventSource.width() ),
 191                                 top : ( hsl[1] * this._ui.hs.eventSource.height() )
 192                         });
 193                         this._ui.l.selector.css({
 194                                 top : ( hsl[2] * this._ui.l.eventSource.height() ),
 195                                 background : gray
 196                         } );
 197                         $.tizen.colorwidget.prototype._setColor.call( this, clr );
 198                 },
 199
 200                 widget: function () { return this._ui.clrpicker; },
 201
 202                 _setDisabled: function ( value ) {
 203                         $.tizen.widgetex.prototype._setDisabled.call( this, value );
 204                         this._ui.hs.hueGradient.huegradient( "option", "disabled", value );
 205                         this._ui.clrpicker[value ? "addClass" : "removeClass"]( "ui-disabled" );
 206                         $.tizen.colorwidget.prototype._displayDisabledState.call( this, this._ui.clrpicker );
 207                 },
 208
 209                 _setColor: function ( clr ) {
 210                         if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
 211                                 this.dragging_hsl = $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( this.options.color ) );
 212                                 this.dragging_hsl[1] = 1.0 - this.dragging_hsl[1];
 213                                 this._updateSelectors( this.dragging_hsl );
 214                         }
 215                 }
 216         } );
 217
 218         $( document ).bind( "pagecreate create", function ( e ) {
 219                 $( $.tizen.colorpicker.prototype.options.initSelector, e.target )
 220                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 221                         .colorpicker();
 222         } );
 223
 224 }( jQuery ) );