src/widgets/toggleswitch/js/jquery.mobile.tizen.toggleswitch.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 a simple two-state switch.
  33 //
  34 // To apply, add the attribute data-role="switch" to a <div>
  35 // element inside a page. Alternatively, call switch()
  36 // on an element, like this :
  37 //
  38 //     $("#myswitch").toggleswitch();
  39 // where the html might be :
  40 //     <div id="myswitch"></div>
  41 //
  42 // Options:
  43 //     checked: Boolean; the state of the switch
  44 //     Default: true (up)
  45 //
  46 // Events:
  47 //     changed: Emitted when the switch is changed
  48
  49 (function($, undefined) {
  50
  51 $.widget("tizen.toggleswitch", $.tizen.widgetex, {
  52     options: {
  53         onText       : "On",
  54         offText      : "Off",
  55         checked      : true,
  56         initSelector : ":jqmData(role='toggleswitch')"
  57     },
  58
  59     _htmlProto: {
  60         ui: {
  61             outer     : "#outer",
  62             bg        : "#bg",
  63             txtMovers : {
  64                 normal : "#normal",
  65                 active : "#active"
  66             },
  67             btn       : "#button",
  68             btnSpan   : "#btn-span",
  69             txt       : {
  70                 normal : "[data-normal-text]",
  71                 active : "[data-active-text]",
  72             },
  73         }
  74     },
  75
  76     _value: {
  77         attr: "data-" + ($.mobile.ns || "") + "checked",
  78         signal: "changed"
  79     },
  80
  81     _create: function() {
  82         var self = this;
  83
  84         this.element
  85             .css("display", "none")
  86             .after(this._ui.outer);
  87
  88         this._ui.outer.find("a").buttonMarkup();
  89         this._ui.txtMovers.normal
  90             .add(this._ui.txtMovers.active)
  91             .find("*")
  92             .css({"border-color": "transparent"});
  93         this._ui.btn.addClass("toggleswitch-button");
  94 /*
  95         // Crutches for IE: It does not seem to understand opacity specified in a class, nor that opacity of an element
  96         // affects all its children
  97         if ($.mobile.browser.ie) {
  98             // Remove this class, because it has no effect in IE :-S
  99             this._ui.outer.find("*").removeClass("toggleswitch-button-transparent");
 100             // After adding the button markup, make everything transparent
 101             this._ui.normalBackground.find("*").css("opacity", 0.0);
 102             this._ui.activeBackground.find("*").css("opacity", 0.0);
 103             this._ui.refButton.add(this._ui.refButton.find("*")).css("opacity", 0.0);
 104             this._ui.realButton.add(this._ui.realButton.find("*")).css("opacity", 0.0);
 105             // ... except the buttons that display the inital position of the switch
 106             this._ui.initButtons
 107                 .add(this._ui.initButtons.find("*"))
 108                 .add(this._ui.fButton.find("*"))
 109                 .add(this._ui.fButton)
 110                 .css("opacity", 1.0);
 111         }
 112 */
 113         $.extend(this, {
 114             _initial: true
 115         });
 116
 117         this._ui.btn
 118             .add(this._ui.outer)
 119             .bind("vclick", function(e) {
 120                 self._setChecked(!(self.options.checked));
 121                 e.stopPropagation();
 122             });
 123     },
 124 /*
 125     _makeTransparent: function(obj, b) {
 126         if ($.mobile.browser.ie)
 127             obj.add(obj.find("*")).css("opacity", b ? 0.0 : 1.0);
 128         else
 129             obj[b ? "addClass" : "removeClass"]("toggleswitch-button-transparent");
 130     },
 131 */
 132     _setDisabled: function(value) {
 133         $.tizen.widgetex.prototype._setDisabled.call(this, value);
 134         this._ui.outer[value ? "addClass" : "removeClass"]("ui-disabled");
 135     },
 136
 137
 138     _updateBtnText: function() {
 139         var noText = (((this.options.offText || "") === "" &&
 140                        (this.options.onText  || "") === ""));
 141         this._ui.btnSpan.html((noText ? "" : "&nbsp;"));
 142         this._ui.outer.find("a")[(noText ? "addClass" : "removeClass")]("ui-btn-icon-notext");
 143     },
 144
 145     _setOnText: function(value) {
 146         this._ui.txt.active.text(value);
 147         this.options.onText = value;
 148         this.element.attr("data-" + ($.mobile.ns || "") + "on-text", value);
 149         this._updateBtnText();
 150     },
 151
 152     _setOffText: function(value) {
 153         this._ui.txt.normal.text(value);
 154         this.options.offText = value;
 155         this.element.attr("data-" + ($.mobile.ns || "") + "off-text", value);
 156         this._updateBtnText();
 157     },
 158
 159     _setChecked: function(checked) {
 160         if (this.options.checked != checked) {
 161             var dst = checked
 162                     ? {bg:  "0%", normalTop: "-50%", activeBot:   "0%"}
 163                     : {bg: "50%", normalTop:   "0%", activeBot: "-50%"},
 164                 method = (this._initial ? "css" : "animate")
 165
 166             this._ui.btn.add(this._ui.bg)[method]({top: dst.bg});
 167             this._ui.txtMovers.normal[method]({top: dst.normalTop});
 168             this._ui.txtMovers.active[method]({bottom: dst.activeBot});
 169
 170             this._initial = false;
 171
 172             this.options.checked = checked;
 173             this.element.attr("data-" + ($.mobile.ns || "") + "checked", checked);
 174             this._setValue(checked);
 175         }
 176     }
 177 });
 178
 179 $(document).bind("pagecreate create", function(e) {
 180     $($.tizen.toggleswitch.prototype.options.initSelector, e.target)
 181         .not(":jqmData(role='none'), :jqmData(role='nojs')")
 182         .toggleswitch();
 183 });
 184
 185 })(jQuery);