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  *          Daehyeon Jung <darrenh.jung@samsung.com>
  32  */
  33
  34 // Displays a simple two-state switch.
  35 //
  36 // To apply, add the attribute data-role="switch" to a <div>
  37 // element inside a page. Alternatively, call switch()
  38 // on an element, like this :
  39 //
  40 //     $("#myswitch").toggleswitch();
  41 // where the html might be :
  42 //     <div id="myswitch"></div>
  43 //
  44 // Options:
  45 //     checked: Boolean; the state of the switch.(default: true)
  46 //     texton: String; "On";
  47 //     textoff: String; "Off";
  48 //
  49 // Events:
  50 //     change: Emitted when the switch is changed.
  51
  52 (function ( $, undefined ) {
  53
  54         $.widget( "tizen.toggleswitch", $.tizen.widgetex, {
  55                 options: {
  56                         texton                  : "On",
  57                         textoff                 : "Off",
  58                         checked                 : true,
  59                         initSelector    : ":jqmData(role='toggleswitch')"
  60                 },
  61
  62                 _htmlProto: {
  63                         ui: {
  64                                 container: "#container",
  65                                 mover: "#mover",
  66                                 on: "#on-span",
  67                                 off: "#off-span"
  68                         }
  69                 },
  70
  71                 destroy: function () {
  72                         this._ui.container.remove();
  73                         // restore original element
  74                         this.element.show();
  75                 },
  76
  77                 _value: {
  78                         attr: "data-" + ($.mobile.ns || "") + "checked",
  79                         signal: "change"
  80                 },
  81
  82                 _setTexton: function ( text ) {
  83                         this._ui.on.text( text );
  84                         this.options.texton = text;
  85                         this.element.attr( "data-" + ($.mobile.ns || "") + "texton", text );
  86                 },
  87
  88                 _setTextoff: function ( text ) {
  89                         this._ui.off.text( text );
  90                         this.options.textoff = text;
  91                         this.element.attr( "data-" + ($.mobile.ns || "") + "textoff", text );
  92                 },
  93
  94                 _setChecked: function ( checked ) {
  95                         if ( checked == this.options.checked ) {
  96                                 return;
  97                         }
  98
  99                         this.options.checked = checked;
 100                         this._setValue( checked );
 101                         if ( checked ) {
 102                                 this._ui.container.addClass("ui-toggleswitch-state-checked");
 103                         } else {
 104                                 this._ui.container.removeClass("ui-toggleswitch-state-checked");
 105                         }
 106                 },
 107
 108                 _setDisabled: function ( value ) {
 109                         $.tizen.widgetex.prototype._setDisabled.call( this, value );
 110                         this._ui.container[value ? "addClass" : "removeClass"]( "ui-disabled" );
 111                 },
 112
 113                 _create: function () {
 114                         var self = this;
 115                         this.element.hide().after( this._ui.container );
 116                         if ( this.element.jqmData("icon") ) {
 117                                 this._ui.container.addClass("ui-toggleswitch-image-style");
 118                                 this._ui.container.find(".ui-toggleswitch-text").hide();
 119                                 this._ui.container.find(".ui-toggleswitch-reed").hide();
 120                                 this._ui.container.find(".ui-toggleswitch-img").show();
 121                         } else {
 122                                 this._ui.container.find(".ui-toggleswitch-img").hide();
 123                         }
 124
 125                         $( this._ui.mover ).bind( "vclick", function () {
 126                                 self._setChecked( !self.options.checked );
 127                                 return false;
 128                         });
 129                 },
 130
 131         });
 132
 133         $( document ).bind( "pagecreate create", function ( e ) {
 134                 $( $.tizen.toggleswitch.prototype.options.initSelector, e.target )
 135                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 136                         .toggleswitch();
 137         });
 138
 139
 140 }( jQuery ));