1
|
/* ============================================================
|
2
|
* bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
|
3
|
* http://www.larentis.eu/switch/
|
4
|
* ============================================================
|
5
|
* Licensed under the Apache License, Version 2.0
|
6
|
* http://www.apache.org/licenses/LICENSE-2.0
|
7
|
* ============================================================ */
|
8
|
|
9
|
!function ($) {
|
10
|
"use strict";
|
11
|
|
12
|
$.fn['bootstrapSwitch'] = function (method) {
|
13
|
var methods = {
|
14
|
init: function () {
|
15
|
return this.each(function () {
|
16
|
var $element = $(this)
|
17
|
, $div
|
18
|
, $switchLeft
|
19
|
, $switchRight
|
20
|
, $label
|
21
|
, myClasses = ""
|
22
|
, classes = $element.attr('class')
|
23
|
, color
|
24
|
, moving
|
25
|
, onLabel = "ON"
|
26
|
, offLabel = "OFF"
|
27
|
, icon = false;
|
28
|
|
29
|
$.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
|
30
|
if (classes.indexOf(el) >= 0)
|
31
|
myClasses = el;
|
32
|
});
|
33
|
|
34
|
$element.addClass('has-switch');
|
35
|
|
36
|
if ($element.data('on') !== undefined)
|
37
|
color = "switch-" + $element.data('on');
|
38
|
|
39
|
if ($element.data('on-label') !== undefined)
|
40
|
onLabel = $element.data('on-label');
|
41
|
|
42
|
if ($element.data('off-label') !== undefined)
|
43
|
offLabel = $element.data('off-label');
|
44
|
|
45
|
if ($element.data('icon') !== undefined)
|
46
|
icon = $element.data('icon');
|
47
|
|
48
|
$switchLeft = $('<span>')
|
49
|
.addClass("switch-left")
|
50
|
.addClass(myClasses)
|
51
|
.addClass(color)
|
52
|
.html(onLabel);
|
53
|
|
54
|
color = '';
|
55
|
if ($element.data('off') !== undefined)
|
56
|
color = "switch-" + $element.data('off');
|
57
|
|
58
|
$switchRight = $('<span>')
|
59
|
.addClass("switch-right")
|
60
|
.addClass(myClasses)
|
61
|
.addClass(color)
|
62
|
.html(offLabel);
|
63
|
|
64
|
$label = $('<label>')
|
65
|
.html(" ")
|
66
|
.addClass(myClasses)
|
67
|
.attr('for', $element.find('input').attr('id'));
|
68
|
|
69
|
if (icon) {
|
70
|
$label.html('<i class="' + icon + '"></i>');
|
71
|
}
|
72
|
|
73
|
$div = $element.find(':checkbox').wrap($('<div>')).parent().data('animated', false);
|
74
|
|
75
|
if ($element.data('animated') !== false)
|
76
|
$div.addClass('switch-animate').data('animated', true);
|
77
|
|
78
|
$div
|
79
|
.append($switchLeft)
|
80
|
.append($label)
|
81
|
.append($switchRight);
|
82
|
|
83
|
$element.find('>div').addClass(
|
84
|
$element.find('input').is(':checked') ? 'switch-on' : 'switch-off'
|
85
|
);
|
86
|
|
87
|
if ($element.find('input').is(':disabled'))
|
88
|
$(this).addClass('deactivate');
|
89
|
|
90
|
var changeStatus = function ($this) {
|
91
|
$this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
|
92
|
};
|
93
|
|
94
|
$element.on('keydown', function (e) {
|
95
|
if (e.keyCode === 32) {
|
96
|
e.stopImmediatePropagation();
|
97
|
e.preventDefault();
|
98
|
changeStatus($(e.target).find('span:first'));
|
99
|
}
|
100
|
});
|
101
|
|
102
|
$switchLeft.on('click', function (e) {
|
103
|
changeStatus($(this));
|
104
|
});
|
105
|
|
106
|
$switchRight.on('click', function (e) {
|
107
|
changeStatus($(this));
|
108
|
});
|
109
|
|
110
|
$element.find('input').on('change', function (e) {
|
111
|
var $this = $(this)
|
112
|
, $element = $this.parent()
|
113
|
, thisState = $this.is(':checked')
|
114
|
, state = $element.is('.switch-off');
|
115
|
|
116
|
e.preventDefault();
|
117
|
|
118
|
$element.css('left', '');
|
119
|
|
120
|
if (state === thisState) {
|
121
|
|
122
|
if (thisState)
|
123
|
$element.removeClass('switch-off').addClass('switch-on');
|
124
|
else $element.removeClass('switch-on').addClass('switch-off');
|
125
|
|
126
|
if ($element.data('animated') !== false)
|
127
|
$element.addClass("switch-animate");
|
128
|
|
129
|
$element.parent().trigger('switch-change', {'el': $this, 'value': thisState})
|
130
|
}
|
131
|
});
|
132
|
|
133
|
$element.find('label').on('mousedown touchstart', function (e) {
|
134
|
var $this = $(this);
|
135
|
moving = false;
|
136
|
|
137
|
e.preventDefault();
|
138
|
e.stopImmediatePropagation();
|
139
|
|
140
|
$this.closest('div').removeClass('switch-animate');
|
141
|
|
142
|
if ($this.closest('.has-switch').is('.deactivate'))
|
143
|
$this.unbind('click');
|
144
|
else {
|
145
|
$this.on('mousemove touchmove', function (e) {
|
146
|
var $element = $(this).closest('.switch')
|
147
|
, relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
|
148
|
, percent = (relativeX / $element.width()) * 100
|
149
|
, left = 25
|
150
|
, right = 75;
|
151
|
|
152
|
moving = true;
|
153
|
|
154
|
if (percent < left)
|
155
|
percent = left;
|
156
|
else if (percent > right)
|
157
|
percent = right;
|
158
|
|
159
|
$element.find('>div').css('left', (percent - right) + "%")
|
160
|
});
|
161
|
|
162
|
$this.on('click touchend', function (e) {
|
163
|
var $this = $(this)
|
164
|
, $target = $(e.target)
|
165
|
, $myCheckBox = $target.siblings('input');
|
166
|
|
167
|
e.stopImmediatePropagation();
|
168
|
e.preventDefault();
|
169
|
|
170
|
$this.unbind('mouseleave');
|
171
|
|
172
|
if (moving)
|
173
|
$myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25));
|
174
|
else $myCheckBox.prop("checked", !$myCheckBox.is(":checked"));
|
175
|
|
176
|
moving = false;
|
177
|
$myCheckBox.trigger('change');
|
178
|
});
|
179
|
|
180
|
$this.on('mouseleave', function (e) {
|
181
|
var $this = $(this)
|
182
|
, $myCheckBox = $this.siblings('input');
|
183
|
|
184
|
e.preventDefault();
|
185
|
e.stopImmediatePropagation();
|
186
|
|
187
|
$this.unbind('mouseleave');
|
188
|
$this.trigger('mouseup');
|
189
|
|
190
|
$myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
|
191
|
});
|
192
|
|
193
|
$this.on('mouseup', function (e) {
|
194
|
e.stopImmediatePropagation();
|
195
|
e.preventDefault();
|
196
|
|
197
|
$(this).unbind('mousemove');
|
198
|
});
|
199
|
}
|
200
|
});
|
201
|
}
|
202
|
);
|
203
|
},
|
204
|
toggleActivation: function () {
|
205
|
$(this).toggleClass('deactivate');
|
206
|
},
|
207
|
isActive: function () {
|
208
|
return !$(this).hasClass('deactivate');
|
209
|
},
|
210
|
setActive: function (active) {
|
211
|
if (active)
|
212
|
$(this).removeClass('deactivate');
|
213
|
else $(this).addClass('deactivate');
|
214
|
},
|
215
|
toggleState: function (skipOnChange) {
|
216
|
var $input = $(this).find('input:checkbox');
|
217
|
$input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
|
218
|
},
|
219
|
setState: function (value, skipOnChange) {
|
220
|
$(this).find('input:checkbox').prop('checked', value).trigger('change', skipOnChange);
|
221
|
},
|
222
|
status: function () {
|
223
|
return $(this).find('input:checkbox').is(':checked');
|
224
|
},
|
225
|
destroy: function () {
|
226
|
var $div = $(this).find('div')
|
227
|
, $checkbox;
|
228
|
|
229
|
$div.find(':not(input:checkbox)').remove();
|
230
|
|
231
|
$checkbox = $div.children();
|
232
|
$checkbox.unwrap().unwrap();
|
233
|
|
234
|
$checkbox.unbind('change');
|
235
|
|
236
|
return $checkbox;
|
237
|
}
|
238
|
};
|
239
|
|
240
|
if (methods[method])
|
241
|
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
242
|
else if (typeof method === 'object' || !method)
|
243
|
return methods.init.apply(this, arguments);
|
244
|
else
|
245
|
$.error('Method ' + method + ' does not exist!');
|
246
|
};
|
247
|
}(jQuery);
|
248
|
|
249
|
$(function () {
|
250
|
$('.switch')['bootstrapSwitch']();
|
251
|
});
|