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) 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 simple two-state switch.
  34 //
  35 // To apply, add the attribute data-role="switch" to a <div>
  36 // element inside a page. Alternatively, call switch()
  37 // on an element, like this :
  38 //
  39 //     $( "#myswitch" ).toggleswitch();
  40 // where the html might be :
  41 //     <div id="myswitch"></div>
  42 //
  43 // Options:
  44 //     checked: Boolean; the state of the switch
  45 //     Default: true (up)
  46 //
  47 // Events:
  48 //     changed: Emitted when the switch is changed
  49
  50 (function ( $, undefined ) {
  51
  52         $.widget( "tizen.toggleswitch", $.tizen.widgetex, {
  53                 options: {
  54                         onText                  : "On",
  55                         offText                 : "Off",
  56                         checked                 : true,
  57                         initSelector    : ":jqmData(role='toggleswitch')"
  58                 },
  59
  60                 _htmlProto: {
  61                         ui: {
  62                                 outer           : "#outer",
  63                                 bg                      : "#bg",
  64                                 txtMovers       : {
  65                                         normal  : "#normal",
  66                                         active  : "#active"
  67                                 },
  68                                 btn                     : "#button",
  69                                 btnSpan         : "#btn-span",
  70                                 txt                     : {
  71                                         normal  : "[data-normal-text]",
  72                                         active  : "[data-active-text]"
  73                                 }
  74                         }
  75                 },
  76
  77                 _value: {
  78                         attr: "data-" + ( $.mobile.ns || "" ) + "checked",
  79                         signal: "changed"
  80                 },
  81
  82                 _create: function () {
  83                         var self = this;
  84
  85                         this.element
  86                                 .css( "display", "none" )
  87                                 .after( this._ui.outer );
  88
  89                         this._ui.outer.find( "a" ).buttonMarkup();
  90                         this._ui.txtMovers.normal
  91                                 .add( this._ui.txtMovers.active )
  92                                 .find( "*" )
  93                                 .css( { "border-color": "transparent" } );
  94                         this._ui.btn.addClass( "toggleswitch-button" );
  95 /*
  96                 // Crutches for IE: It does not seem to understand opacity specified in a class, nor that opacity of an element
  97                 // affects all its children
  98                 if ($.mobile.browser.ie) {
  99                         // Remove this class, because it has no effect in IE :-S
 100                         this._ui.outer.find( "*" ).removeClass( "toggleswitch-button-transparent" );
 101                         // After adding the button markup, make everything transparent
 102                         this._ui.normalBackground.find( "*" ).css( "opacity", 0.0);
 103                         this._ui.activeBackground.find( "*" ).css( "opacity", 0.0);
 104                         this._ui.refButton.add( this._ui.refButton.find( "*" )).css( "opacity", 0.0);
 105                         this._ui.realButton.add( this._ui.realButton.find( "*" )).css( "opacity", 0.0);
 106                         // ... except the buttons that display the inital position of the switch
 107                         this._ui.initButtons
 108                                 .add( this._ui.initButtons.find( "*" ))
 109                                 .add( this._ui.fButton.find( "*" ))
 110                                 .add( this._ui.fButton)
 111                                 .css( "opacity", 1.0);
 112                 }
 113 */
 114                         $.extend( this, {
 115                                 _initial: true
 116                         } );
 117
 118                         this._ui.btn
 119                                 .add( this._ui.outer )
 120                                 .bind( "vclick", function ( e ) {
 121                                         self._setChecked( !( self.options.checked ) );
 122                                         e.stopPropagation();
 123                                 } );
 124                 },
 125 /*
 126                 _makeTransparent: function (obj, b) {
 127                         if ($.mobile.browser.ie)
 128                                 obj.add(obj.find( "*" )).css( "opacity", b ? 0.0 : 1.0);
 129                         else
 130                                 obj[b ? "addClass" : "removeClass"]( "toggleswitch-button-transparent" );
 131                 },
 132 */
 133                 _setDisabled: function ( value ) {
 134                         $.tizen.widgetex.prototype._setDisabled.call( this, value );
 135                         this._ui.outer[value ? "addClass" : "removeClass"]( "ui-disabled" );
 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 ) );