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 ) 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 button which, when pressed, opens a popupwindow
  34 // containing hsvpicker.
  35 //
  36 // To apply, add the attribute data-role="colorpickerbutton" to a <div>
  37 // element inside a page. Alternatively, call colorpickerbutton() on an
  38 // element.
  39 //
  40 // Options:
  41 //
  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
  46 //      javascript, eg :
  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" );
  52 //      Default: "#1a8039"
  53 //
  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>" );
  57 //
  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.
  60 //
  61 // Events:
  62 //
  63 //   colorchanged: emitted when the color has been changed and the popupwindow is closed.
  64
  65 ( function ( $, undefined ) {
  66
  67         $.widget( "tizen.colorpickerbutton", $.tizen.colorwidget, {
  68                 options: {
  69                         buttonMarkup: {
  70                                 theme: null,
  71                                 inline: true,
  72                                 corners: true,
  73                                 shadow: true
  74                         },
  75                         hideInput: true,
  76                         closeText: "Close",
  77                         initSelector: ":jqmData(type='color'), :jqmData(role='colorpickerbutton')"
  78                 },
  79
  80                 _htmlProto: {
  81                         ui: {
  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"
  88                         }
  89                 },
  90
  91                 _create: function () {
  92                         var self = this;
  93
  94                         this.element
  95                                 .css( "display", "none" )
  96                                 .after( this._ui.button );
  97
  98                         /* Tear apart the proto */
  99                         this._ui.popup.insertBefore( this.element ).popupwindow();
 100                         this._ui.hsvpicker.hsvpicker();
 101
 102                         $.tizen.popupwindow.bindPopupToButton( this._ui.button, this._ui.popup );
 103
 104                         this._ui.closeButton.bind( "vclick", function ( event ) {
 105                                 self._setColor( self._ui.hsvpicker.hsvpicker( "option", "color" ) );
 106                                 self.close();
 107                         } );
 108
 109                         this.element.bind( "change keyup blur", function () {
 110                                 self._setColor( self.element.val() );
 111                         } );
 112                 },
 113
 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 );
 118                 },
 119
 120                 _setColor: function ( clr ) {
 121                         if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
 122                                 var clrlib = $.tizen.colorwidget.clrlib;
 123
 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" );
 127                         }
 128                 },
 129
 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 );
 135                 },
 136
 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 );
 141                 },
 142
 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 );
 148                 },
 149
 150                 open: function () {
 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 );
 154                 },
 155
 156                 _focusButton : function () {
 157                         var self = this;
 158                         setTimeout( function () {
 159                                 self._ui.button.focus();
 160                         }, 40 );
 161                 },
 162
 163                 close: function () {
 164                         this._focusButton();
 165                         this._ui.popup.popupwindow( "close" );
 166                 }
 167         } );
 168
 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();
 174         } );
 175
 176 }( jQuery ) );