Project

General

Profile

Download (8.01 KB) Statistics
| Branch: | Revision:
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
});
(2-2/6)