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 //     style: String; the style of toggleswitch (default: image)
  49 //
  50 // Events:
  51 //     change: Emitted when the switch is changed.
  52
  53 /**
  54         @class ToggleSwitch
  55         The toggle switch widget shows a 2-state switch on the screen.
  56
  57         To add a toggle switch widget to the application, use the following code:
  58
  59                 // Off state
  60                 <div id="switch-1" data-role="toggleswitch" data-checked="false" data-textoff="Disabled"></div>
  61                 // On state
  62                 <div id="switch-2" data-role="toggleswitch" data-texton="Enabled"></div>
  63                 <script>
  64                 $("#switch-1").bind("changed", function(e, state)
  65                 {
  66                         alert(state);
  67                 });
  68                 </script>
  69 */
  70 /**
  71         @property {Boolean} data-checked
  72         Sets the toggle switch state.
  73         The default value is true.
  74 */
  75 /**
  76         @property {String} data-texton
  77         Sets the label text value for the toggle switch 'on' state.
  78         The default value is On.
  79 */
  80 /**
  81         @property {String} data-textoff
  82         Sets the label text value for the toggle switch 'off' state.
  83         The default value is Off.
  84 */
  85 /**
  86         @event change
  87         The toggle switch can define a callback for the change event, which is fired when the toggle switch state is changed.
  88
  89                 <div id="switch-1" data-role="toggleswitch"></div>
  90                 <script>
  91                 $("#switch-1").bind("change", function(e, state)
  92                 {
  93                         alert(state);
  94                 });
  95                 </script>
  96 */
  97
  98 (function ( $, undefined ) {
  99
 100         $.widget( "tizen.toggleswitch", $.tizen.widgetex, {
 101                 options: {
 102                         texton                  : "On",
 103                         textoff                 : "Off",
 104                         checked                 : true,
 105                         style                           : "image",
 106                         initSelector    : ":jqmData(role='toggleswitch')"
 107                 },
 108
 109                 _htmlProto: {
 110                         ui: {
 111                                 container: "#container",
 112                                 mover: "#mover",
 113                                 on: "#on-span",
 114                                 off: "#off-span"
 115                         }
 116                 },
 117
 118                 destroy: function () {
 119                         this._ui.container.remove();
 120                         // restore original element
 121                         this.element.show();
 122                 },
 123
 124                 _value: {
 125                         attr: "data-" + ($.mobile.ns || "") + "checked",
 126                         signal: "change"
 127                 },
 128
 129                 _setTexton: function ( text ) {
 130                         this._ui.on.text( text );
 131                         this.options.texton = text;
 132                         this.element.attr( "data-" + ($.mobile.ns || "") + "texton", text );
 133                 },
 134
 135                 _setTextoff: function ( text ) {
 136                         this._ui.off.text( text );
 137                         this.options.textoff = text;
 138                         this.element.attr( "data-" + ($.mobile.ns || "") + "textoff", text );
 139                 },
 140
 141                 _setChecked: function ( checked ) {
 142                         if ( checked == this.options.checked ) {
 143                                 return;
 144                         }
 145
 146                         this.options.checked = checked;
 147                         this._setValue( checked );
 148                         if ( checked ) {
 149                                 this._ui.container.addClass("ui-toggleswitch-state-checked");
 150                         } else {
 151                                 this._ui.container.removeClass("ui-toggleswitch-state-checked");
 152                         }
 153                 },
 154
 155                 _setStyle: function ( style ) {
 156                         if ( style ) {
 157                                 this.options.style = style;
 158                         }
 159                 },
 160
 161                 _setDisabled: function ( value ) {
 162                         $.tizen.widgetex.prototype._setDisabled.call( this, value );
 163                         this._ui.container[value ? "addClass" : "removeClass"]( "ui-disabled" );
 164                 },
 165
 166                 _create: function () {
 167                         var self = this;
 168                         this.element.hide().after( this._ui.container );
 169                         self._setStyle( this.element.jqmData("style") );
 170                         if ( this.options.style != "text" ) {
 171                                 this._ui.container.addClass("ui-toggleswitch-image-style");
 172                                 this._ui.container.find(".ui-toggleswitch-text").hide();
 173                                 this._ui.container.find(".ui-toggleswitch-reed").hide();
 174                                 this._ui.container.find(".ui-toggleswitch-img").show();
 175                         } else {
 176                                 this._ui.container.find(".ui-toggleswitch-img").hide();
 177                         }
 178
 179                         $( this._ui.mover ).bind( "vclick", function () {
 180                                 self._setChecked( !self.options.checked );
 181                                 return false;
 182                         });
 183                 },
 184
 185         });
 186
 187         $( document ).bind( "pagecreate create", function ( e ) {
 188                 $( $.tizen.toggleswitch.prototype.options.initSelector, e.target )
 189                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 190                         .toggleswitch();
 191         });
 192
 193
 194 }( jQuery ));