1 | /*! ============================================================ |
---|
2 | * bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru |
---|
3 | * http://www.larentis.eu/ |
---|
4 | * |
---|
5 | * Enhanced for radiobuttons by Stein, Peter @BdMdesigN |
---|
6 | * http://www.bdmdesign.org/ |
---|
7 | * |
---|
8 | * Project site: |
---|
9 | * http://www.larentis.eu/switch/ |
---|
10 | * ============================================================ |
---|
11 | * Licensed under the Apache License, Version 2.0 |
---|
12 | * http://www.apache.org/licenses/LICENSE-2.0 |
---|
13 | * ============================================================ */ |
---|
14 | |
---|
15 | !function ($) { |
---|
16 | "use strict"; |
---|
17 | |
---|
18 | $.fn['bootstrapSwitch'] = function (method) { |
---|
19 | var inputSelector = 'input[type!="hidden"]'; |
---|
20 | var methods = { |
---|
21 | init: function () { |
---|
22 | return this.each(function () { |
---|
23 | var $element = $(this) |
---|
24 | , $div |
---|
25 | , $switchLeft |
---|
26 | , $switchRight |
---|
27 | , $label |
---|
28 | , $form = $element.closest('form') |
---|
29 | , myClasses = "" |
---|
30 | , classes = $element.attr('class') |
---|
31 | , color |
---|
32 | , moving |
---|
33 | , onLabel = "ON" |
---|
34 | , offLabel = "OFF" |
---|
35 | , icon = false |
---|
36 | , textLabel = false; |
---|
37 | |
---|
38 | $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) { |
---|
39 | if (classes.indexOf(el) >= 0) |
---|
40 | myClasses = el; |
---|
41 | }); |
---|
42 | |
---|
43 | $element.addClass('has-switch'); |
---|
44 | |
---|
45 | if ($element.data('on') !== undefined) |
---|
46 | color = "switch-" + $element.data('on'); |
---|
47 | |
---|
48 | if ($element.data('on-label') !== undefined) |
---|
49 | onLabel = $element.data('on-label'); |
---|
50 | |
---|
51 | if ($element.data('off-label') !== undefined) |
---|
52 | offLabel = $element.data('off-label'); |
---|
53 | |
---|
54 | if ($element.data('label-icon') !== undefined) |
---|
55 | icon = $element.data('label-icon'); |
---|
56 | |
---|
57 | if ($element.data('text-label') !== undefined) |
---|
58 | textLabel = $element.data('text-label'); |
---|
59 | |
---|
60 | $switchLeft = $('<span>') |
---|
61 | .addClass("switch-left") |
---|
62 | .addClass(myClasses) |
---|
63 | .addClass(color) |
---|
64 | .html('' + onLabel + ''); |
---|
65 | |
---|
66 | color = ''; |
---|
67 | if ($element.data('off') !== undefined) |
---|
68 | color = "switch-" + $element.data('off'); |
---|
69 | |
---|
70 | $switchRight = $('<span>') |
---|
71 | .addClass("switch-right") |
---|
72 | .addClass(myClasses) |
---|
73 | .addClass(color) |
---|
74 | .html('' + offLabel + ''); |
---|
75 | |
---|
76 | $label = $('<label>') |
---|
77 | .html(" ") |
---|
78 | .addClass(myClasses) |
---|
79 | .attr('for', $element.find(inputSelector).attr('id')); |
---|
80 | |
---|
81 | if (icon) { |
---|
82 | $label.html('<i class="icon ' + icon + '"></i>'); |
---|
83 | } |
---|
84 | |
---|
85 | if (textLabel) { |
---|
86 | $label.html('' + textLabel + ''); |
---|
87 | } |
---|
88 | |
---|
89 | $div = $element.find(inputSelector).wrap($('<div>')).parent().data('animated', false); |
---|
90 | |
---|
91 | if ($element.data('animated') !== false) |
---|
92 | $div.addClass('switch-animate').data('animated', true); |
---|
93 | |
---|
94 | $div |
---|
95 | .append($switchLeft) |
---|
96 | .append($label) |
---|
97 | .append($switchRight); |
---|
98 | |
---|
99 | $element.find('>div').addClass( |
---|
100 | $element.find(inputSelector).is(':checked') ? 'switch-on' : 'switch-off' |
---|
101 | ); |
---|
102 | |
---|
103 | if ($element.find(inputSelector).is(':disabled')) |
---|
104 | $(this).addClass('deactivate'); |
---|
105 | |
---|
106 | var changeStatus = function ($this) { |
---|
107 | if ($element.parent('label').is('.label-change-switch')) { |
---|
108 | |
---|
109 | } else { |
---|
110 | $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click'); |
---|
111 | } |
---|
112 | }; |
---|
113 | |
---|
114 | $element.on('keydown', function (e) { |
---|
115 | if (e.keyCode === 32) { |
---|
116 | e.stopImmediatePropagation(); |
---|
117 | e.preventDefault(); |
---|
118 | changeStatus($(e.target).find('span:first')); |
---|
119 | } |
---|
120 | }); |
---|
121 | |
---|
122 | $switchLeft.on('click', function (e) { |
---|
123 | changeStatus($(this)); |
---|
124 | }); |
---|
125 | |
---|
126 | $switchRight.on('click', function (e) { |
---|
127 | changeStatus($(this)); |
---|
128 | }); |
---|
129 | |
---|
130 | $element.find(inputSelector).on('change', function (e, skipOnChange) { |
---|
131 | var $this = $(this) |
---|
132 | , $element = $this.parent() |
---|
133 | , thisState = $this.is(':checked') |
---|
134 | , state = $element.is('.switch-off'); |
---|
135 | |
---|
136 | e.preventDefault(); |
---|
137 | |
---|
138 | $element.css('left', ''); |
---|
139 | |
---|
140 | if (state === thisState) { |
---|
141 | |
---|
142 | if (thisState) |
---|
143 | $element.removeClass('switch-off').addClass('switch-on'); |
---|
144 | else $element.removeClass('switch-on').addClass('switch-off'); |
---|
145 | |
---|
146 | if ($element.data('animated') !== false) |
---|
147 | $element.addClass("switch-animate"); |
---|
148 | |
---|
149 | if (typeof skipOnChange === 'boolean' && skipOnChange) |
---|
150 | return; |
---|
151 | |
---|
152 | $element.parent().trigger('switch-change', {'el': $this, 'value': thisState}) |
---|
153 | } |
---|
154 | }); |
---|
155 | |
---|
156 | $element.find('label').on('mousedown touchstart', function (e) { |
---|
157 | var $this = $(this); |
---|
158 | moving = false; |
---|
159 | |
---|
160 | e.preventDefault(); |
---|
161 | e.stopImmediatePropagation(); |
---|
162 | |
---|
163 | $this.closest('div').removeClass('switch-animate'); |
---|
164 | |
---|
165 | if ($this.closest('.has-switch').is('.deactivate')) { |
---|
166 | $this.unbind('click'); |
---|
167 | } else if ($this.closest('.switch-on').parent().is('.radio-no-uncheck')) { |
---|
168 | $this.unbind('click'); |
---|
169 | } else { |
---|
170 | $this.on('mousemove touchmove', function (e) { |
---|
171 | var $element = $(this).closest('.make-switch') |
---|
172 | , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left |
---|
173 | , percent = (relativeX / $element.width()) * 100 |
---|
174 | , left = 25 |
---|
175 | , right = 75; |
---|
176 | |
---|
177 | moving = true; |
---|
178 | |
---|
179 | if (percent < left) |
---|
180 | percent = left; |
---|
181 | else if (percent > right) |
---|
182 | percent = right; |
---|
183 | |
---|
184 | $element.find('>div').css('left', (percent - right) + "%") |
---|
185 | }); |
---|
186 | |
---|
187 | $this.on('click touchend', function (e) { |
---|
188 | var $this = $(this) |
---|
189 | , $myInputBox = $this.siblings('input'); |
---|
190 | |
---|
191 | e.stopImmediatePropagation(); |
---|
192 | e.preventDefault(); |
---|
193 | |
---|
194 | $this.unbind('mouseleave'); |
---|
195 | |
---|
196 | if (moving) |
---|
197 | $myInputBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)); |
---|
198 | else |
---|
199 | $myInputBox.prop("checked", !$myInputBox.is(":checked")); |
---|
200 | |
---|
201 | moving = false; |
---|
202 | $myInputBox.trigger('change'); |
---|
203 | }); |
---|
204 | |
---|
205 | $this.on('mouseleave', function (e) { |
---|
206 | var $this = $(this) |
---|
207 | , $myInputBox = $this.siblings('input'); |
---|
208 | |
---|
209 | e.preventDefault(); |
---|
210 | e.stopImmediatePropagation(); |
---|
211 | |
---|
212 | $this.unbind('mouseleave mousemove'); |
---|
213 | $this.trigger('mouseup'); |
---|
214 | |
---|
215 | $myInputBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change'); |
---|
216 | }); |
---|
217 | |
---|
218 | $this.on('mouseup', function (e) { |
---|
219 | e.stopImmediatePropagation(); |
---|
220 | e.preventDefault(); |
---|
221 | |
---|
222 | $(this).trigger('mouseleave'); |
---|
223 | }); |
---|
224 | } |
---|
225 | }); |
---|
226 | |
---|
227 | if ($form.data('bootstrapSwitch') !== 'injected') { |
---|
228 | $form.bind('reset', function () { |
---|
229 | setTimeout(function () { |
---|
230 | $form.find('.make-switch').each(function () { |
---|
231 | var $input = $(this).find(inputSelector); |
---|
232 | |
---|
233 | $input.prop('checked', $input.is(':checked')).trigger('change'); |
---|
234 | }); |
---|
235 | }, 1); |
---|
236 | }); |
---|
237 | $form.data('bootstrapSwitch', 'injected'); |
---|
238 | } |
---|
239 | } |
---|
240 | ); |
---|
241 | }, |
---|
242 | toggleActivation: function () { |
---|
243 | var $this = $(this); |
---|
244 | |
---|
245 | $this.toggleClass('deactivate'); |
---|
246 | $this.find(inputSelector).prop('disabled', $this.is('.deactivate')); |
---|
247 | }, |
---|
248 | isActive: function () { |
---|
249 | return !$(this).hasClass('deactivate'); |
---|
250 | }, |
---|
251 | setActive: function (active) { |
---|
252 | var $this = $(this); |
---|
253 | |
---|
254 | if (active) { |
---|
255 | $this.removeClass('deactivate'); |
---|
256 | $this.find(inputSelector).removeAttr('disabled'); |
---|
257 | } |
---|
258 | else { |
---|
259 | $this.addClass('deactivate'); |
---|
260 | $this.find(inputSelector).attr('disabled', 'disabled'); |
---|
261 | } |
---|
262 | }, |
---|
263 | toggleState: function (skipOnChange) { |
---|
264 | var $input = $(this).find(':checkbox'); |
---|
265 | $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange); |
---|
266 | }, |
---|
267 | toggleRadioState: function (skipOnChange) { |
---|
268 | var $radioinput = $(this).find(':radio'); |
---|
269 | $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange); |
---|
270 | }, |
---|
271 | toggleRadioStateAllowUncheck: function (uncheck, skipOnChange) { |
---|
272 | var $radioinput = $(this).find(':radio'); |
---|
273 | if (uncheck) { |
---|
274 | $radioinput.not(':checked').trigger('change', skipOnChange); |
---|
275 | } |
---|
276 | else { |
---|
277 | $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange); |
---|
278 | } |
---|
279 | }, |
---|
280 | setState: function (value, skipOnChange) { |
---|
281 | $(this).find(inputSelector).prop('checked', value).trigger('change', skipOnChange); |
---|
282 | }, |
---|
283 | setOnLabel: function (value) { |
---|
284 | var $switchLeft = $(this).find(".switch-left"); |
---|
285 | $switchLeft.html(value); |
---|
286 | }, |
---|
287 | setOffLabel: function (value) { |
---|
288 | var $switchRight = $(this).find(".switch-right"); |
---|
289 | $switchRight.html(value); |
---|
290 | }, |
---|
291 | setOnClass: function (value) { |
---|
292 | var $switchLeft = $(this).find(".switch-left"); |
---|
293 | var color = ''; |
---|
294 | if (value !== undefined) { |
---|
295 | if ($(this).attr('data-on') !== undefined) { |
---|
296 | color = "switch-" + $(this).attr('data-on') |
---|
297 | } |
---|
298 | $switchLeft.removeClass(color); |
---|
299 | color = "switch-" + value; |
---|
300 | $switchLeft.addClass(color); |
---|
301 | } |
---|
302 | }, |
---|
303 | setOffClass: function (value) { |
---|
304 | var $switchRight = $(this).find(".switch-right"); |
---|
305 | var color = ''; |
---|
306 | if (value !== undefined) { |
---|
307 | if ($(this).attr('data-off') !== undefined) { |
---|
308 | color = "switch-" + $(this).attr('data-off') |
---|
309 | } |
---|
310 | $switchRight.removeClass(color); |
---|
311 | color = "switch-" + value; |
---|
312 | $switchRight.addClass(color); |
---|
313 | } |
---|
314 | }, |
---|
315 | setAnimated: function (value) { |
---|
316 | var $element = $(this).find(inputSelector).parent(); |
---|
317 | if (value === undefined) value = false; |
---|
318 | $element.data('animated', value); |
---|
319 | $element.attr('data-animated', value); |
---|
320 | |
---|
321 | if ($element.data('animated') !== false) { |
---|
322 | $element.addClass("switch-animate"); |
---|
323 | } else { |
---|
324 | $element.removeClass("switch-animate"); |
---|
325 | } |
---|
326 | }, |
---|
327 | setSizeClass: function (value) { |
---|
328 | var $element = $(this); |
---|
329 | var $switchLeft = $element.find(".switch-left"); |
---|
330 | var $switchRight = $element.find(".switch-right"); |
---|
331 | var $label = $element.find("label"); |
---|
332 | $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) { |
---|
333 | if (el !== value) { |
---|
334 | $switchLeft.removeClass(el); |
---|
335 | $switchRight.removeClass(el); |
---|
336 | $label.removeClass(el); |
---|
337 | } else { |
---|
338 | $switchLeft.addClass(el); |
---|
339 | $switchRight.addClass(el); |
---|
340 | $label.addClass(el); |
---|
341 | } |
---|
342 | }); |
---|
343 | }, |
---|
344 | status: function () { |
---|
345 | return $(this).find(inputSelector).is(':checked'); |
---|
346 | }, |
---|
347 | destroy: function () { |
---|
348 | var $element = $(this) |
---|
349 | , $div = $element.find('div') |
---|
350 | , $form = $element.closest('form') |
---|
351 | , $inputbox; |
---|
352 | |
---|
353 | $div.find(':not(input)').remove(); |
---|
354 | |
---|
355 | $inputbox = $div.children(); |
---|
356 | $inputbox.unwrap().unwrap(); |
---|
357 | |
---|
358 | $inputbox.unbind('change'); |
---|
359 | |
---|
360 | if ($form) { |
---|
361 | $form.unbind('reset'); |
---|
362 | $form.removeData('bootstrapSwitch'); |
---|
363 | } |
---|
364 | |
---|
365 | return $inputbox; |
---|
366 | } |
---|
367 | }; |
---|
368 | |
---|
369 | if (methods[method]) |
---|
370 | return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); |
---|
371 | else if (typeof method === 'object' || !method) |
---|
372 | return methods.init.apply(this, arguments); |
---|
373 | else |
---|
374 | $.error('Method ' + method + ' does not exist!'); |
---|
375 | }; |
---|
376 | }(jQuery); |
---|
377 | |
---|
378 | (function ($) { |
---|
379 | $(function () { |
---|
380 | $('.make-switch')['bootstrapSwitch'](); |
---|
381 | }); |
---|
382 | })(jQuery); |
---|