2 * jQuery Mobile Widget @VERSION
4 * This software is licensed under the MIT licence (as defined by the OSI at
5 * http://www.opensource.org/licenses/mit-license.php)
7 * ***************************************************************************
8 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
9 * Copyright (c) 2011 by Intel Corporation Ltd.
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:
18 * The above copyright notice and this permission notice shall be included in
19 * all copies or substantial portions of the Software.
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 * ***************************************************************************
30 * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
33 // Displays a simple two-state switch.
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 :
39 // $( "#myswitch" ).toggleswitch();
40 // where the html might be :
41 // <div id="myswitch"></div>
44 // checked: Boolean; the state of the switch
48 // changed: Emitted when the switch is changed
50 (function ( $, undefined ) {
52 $.widget( "tizen.toggleswitch", $.tizen.widgetex, {
57 initSelector : ":jqmData(role='toggleswitch')"
69 btnSpan : "#btn-span",
71 normal : "[data-normal-text]",
72 active : "[data-active-text]"
78 attr: "data-" + ( $.mobile.ns || "" ) + "checked",
82 _create: function () {
86 .css( "display", "none" )
87 .after( this._ui.outer );
89 this._ui.outer.find( "a" ).buttonMarkup();
90 this._ui.txtMovers.normal
91 .add( this._ui.txtMovers.active )
93 .css( { "border-color": "transparent" } );
94 this._ui.btn.addClass( "toggleswitch-button" );
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
108 .add( this._ui.initButtons.find( "*" ))
109 .add( this._ui.fButton.find( "*" ))
110 .add( this._ui.fButton)
111 .css( "opacity", 1.0);
119 .add( this._ui.outer )
120 .bind( "vclick", function ( e ) {
121 self._setChecked( !( self.options.checked ) );
126 _makeTransparent: function (obj, b) {
127 if ($.mobile.browser.ie)
128 obj.add(obj.find( "*" )).css( "opacity", b ? 0.0 : 1.0);
130 obj[b ? "addClass" : "removeClass"]( "toggleswitch-button-transparent" );
133 _setDisabled: function ( value ) {
134 $.tizen.widgetex.prototype._setDisabled.call( this, value );
135 this._ui.outer[value ? "addClass" : "removeClass"]( "ui-disabled" );
138 _updateBtnText: function () {
139 var noText = ( ( ( this.options.offText || "" ) === "" &&
140 ( this.options.onText || "" ) === "" ) );
141 this._ui.btnSpan.html( ( noText ? "" : " " ) );
142 this._ui.outer.find( "a" )[( noText ? "addClass" : "removeClass" )]( "ui-btn-icon-notext" );
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();
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();
159 _setChecked: function ( checked ) {
160 if ( this.options.checked != checked ) {
162 ? { bg: "0%", normalTop: "-50%", activeBot: "0%" }
163 : { bg: "50%", normalTop: "0%", activeBot: "-50%" },
164 method = ( this._initial ? "css" : "animate" );
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 } );
170 this._initial = false;
172 this.options.checked = checked;
173 this.element.attr( "data-" + ( $.mobile.ns || "" ) + "checked", checked );
174 this._setValue( checked );
179 $( document ).bind( "pagecreate create", function ( e ) {
180 $( $.tizen.toggleswitch.prototype.options.initSelector, e.target )
181 .not( ":jqmData(role='none'), :jqmData(role='nojs')" )