src/widgets/colortitle/js/jquery.mobile.tizen.colortitle.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) 2011 by Intel Corporation Ltd.
   9  *
  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:
  16  *
  17  * The above copyright notice and this permission notice shall be included in
  18  * all copies or substantial portions of the Software.
  19  *
  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  * ***************************************************************************
  28  *
  29  * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
  30  */
  31
  32 // Displays the color in text of the form '#RRGGBB' where
  33 // RR, GG, and BB are in hexadecimal.
  34 //
  35 // Apply a colortitle by adding the attribute data-role="colortitle"
  36 // to a <div> element inside a page. Alternatively, call colortitle()
  37 // on an element (see below).
  38 //
  39 // Options:
  40 //
  41 //     color: String; the initial color can be specified in html using
  42 //            the data-color="#ff00ff" attribute or when constructed
  43 //            in javascipt eg
  44 //                $("#mycolortitle").colortitle({ color: "#ff00ff" });
  45 //            where the html might be :
  46 //                <div id="mycolortitle"></div>
  47 //            The color can be changed post-construction :
  48 //                $("#mycolortitle").colortitle("option", "color", "#ABCDEF");
  49 //            Default: "#1a8039".
  50
  51 (function ( $, undefined ) {
  52
  53         $.widget( "tizen.colortitle", $.tizen.colorwidget, {
  54                 options: {
  55                         initSelector: ":jqmData(role='colortitle')"
  56                 },
  57
  58                 _htmlProto: {
  59                         ui: {
  60                                 clrtitle: "#colortitle",
  61                                 header:   "#colortitle-string"
  62                         }
  63                 },
  64
  65                 _create: function () {
  66                         this.element
  67                                 .css( "display", "none" )
  68                                 .after( this._ui.clrtitle );
  69
  70                 },
  71
  72                 widget: function () { return this._ui.clrtitle; },
  73
  74                 _setDisabled: function ( value ) {
  75                         $.tizen.widgetex.prototype._setDisabled.call( this, value );
  76                         this._ui.clrtitle[value ? "addClass" : "removeClass"]( "ui-disabled" );
  77                 },
  78
  79                 _setColor: function ( clr ) {
  80                         if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
  81                                 this._ui.header.text( this.options.color );
  82                                 $( this._ui.header ).parent().css( "color", this.options.color );
  83                         }
  84                 }
  85         } );
  86
  87         $( document ).bind( "pagecreate create", function ( e ) {
  88                 $( $.tizen.colortitle.prototype.options.initSelector, e.target )
  89                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
  90                         .colortitle();
  91         } );
  92
  93 }( jQuery ) );