https://my.cazloyd.com/js/bootstrap-switch.js

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("&nbsp;")
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});