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);