https://www.babylock.co.jp/member/js/bootstrap-switch.js

1/* ========================================================================
2 * bootstrap-switch - v3.0.1
3 * http://www.bootstrap-switch.org
4 * ========================================================================
5 * Copyright 2012-2013 Mattia Larentis
6 *
7 * ========================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
11 *
12 *     http://www.apache.org/licenses/LICENSE-2.0
13 *
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ========================================================================
20 */
21
22(function() {
23  var __slice = [].slice;
24
25  (function($, window) {
26    "use strict";
27    var BootstrapSwitch;
28    BootstrapSwitch = (function() {
29      function BootstrapSwitch(element, options) {
30        if (options == null) {
31          options = {};
32        }
33        this.$element = $(element);
34        this.options = $.extend({}, $.fn.bootstrapSwitch.defaults, options, {
35          state: this.$element.is(":checked"),
36          size: this.$element.data("size"),
37          animate: this.$element.data("animate"),
38          disabled: this.$element.is(":disabled"),
39          readonly: this.$element.is("[readonly]"),
40          indeterminate: this.$element.data("indeterminate"),
41          onColor: this.$element.data("on-color"),
42          offColor: this.$element.data("off-color"),
43          onText: this.$element.data("on-text"),
44          offText: this.$element.data("off-text"),
45          labelText: this.$element.data("label-text"),
46          baseClass: this.$element.data("base-class"),
47          wrapperClass: this.$element.data("wrapper-class")
48        });
49        this.$wrapper = $("<div>", {
50          "class": (function(_this) {
51            return function() {
52              var classes;
53              classes = ["" + _this.options.baseClass].concat(_this._getClasses(_this.options.wrapperClass));
54              classes.push(_this.options.state ? "" + _this.options.baseClass + "-on" : "" + _this.options.baseClass + "-off");
55              if (_this.options.size != null) {
56                classes.push("" + _this.options.baseClass + "-" + _this.options.size);
57              }
58              if (_this.options.animate) {
59                classes.push("" + _this.options.baseClass + "-animate");
60              }
61              if (_this.options.disabled) {
62                classes.push("" + _this.options.baseClass + "-disabled");
63              }
64              if (_this.options.readonly) {
65                classes.push("" + _this.options.baseClass + "-readonly");
66              }
67              if (_this.options.indeterminate) {
68                classes.push("" + _this.options.baseClass + "-indeterminate");
69              }
70              if (_this.$element.attr("id")) {
71                classes.push("" + _this.options.baseClass + "-id-" + (_this.$element.attr("id")));
72              }
73              return classes.join(" ");
74            };
75          })(this)()
76        });
77        this.$container = $("<div>", {
78          "class": "" + this.options.baseClass + "-container"
79        });
80        this.$on = $("<span>", {
81          html: this.options.onText,
82          "class": "" + this.options.baseClass + "-handle-on " + this.options.baseClass + "-" + this.options.onColor
83        });
84        this.$off = $("<span>", {
85          html: this.options.offText,
86          "class": "" + this.options.baseClass + "-handle-off " + this.options.baseClass + "-" + this.options.offColor
87        });
88        this.$label = $("<label>", {
89          "for": this.$element.attr("id"),
90          html: this.options.labelText,
91          "class": "" + this.options.baseClass + "-label"
92        });
93        if (this.options.indeterminate) {
94          this.$element.prop("indeterminate", true);
95        }
96        this.$element.on("init.bootstrapSwitch", (function(_this) {
97          return function() {
98            return _this.options.onInit.apply(element, arguments);
99          };
100        })(this));
101        this.$element.on("switchChange.bootstrapSwitch", (function(_this) {
102          return function() {
103            return _this.options.onSwitchChange.apply(element, arguments);
104          };
105        })(this));
106        this.$container = this.$element.wrap(this.$container).parent();
107        this.$wrapper = this.$container.wrap(this.$wrapper).parent();
108        this.$element.before(this.$on).before(this.$label).before(this.$off).trigger("init.bootstrapSwitch");
109        this._elementHandlers();
110        this._handleHandlers();
111        this._labelHandlers();
112        this._formHandler();
113      }
114
115      BootstrapSwitch.prototype._constructor = BootstrapSwitch;
116
117      BootstrapSwitch.prototype.state = function(value, skip) {
118        if (typeof value === "undefined") {
119          return this.options.state;
120        }
121        if (this.options.disabled || this.options.readonly || this.options.indeterminate) {
122          return this.$element;
123        }
124        value = !!value;
125        this.$element.prop("checked", value).trigger("change.bootstrapSwitch", skip);
126        return this.$element;
127      };
128
129      BootstrapSwitch.prototype.toggleState = function(skip) {
130        if (this.options.disabled || this.options.readonly || this.options.indeterminate) {
131          return this.$element;
132        }
133        return this.$element.prop("checked", !this.options.state).trigger("change.bootstrapSwitch", skip);
134      };
135
136      BootstrapSwitch.prototype.size = function(value) {
137        if (typeof value === "undefined") {
138          return this.options.size;
139        }
140        if (this.options.size != null) {
141          this.$wrapper.removeClass("" + this.options.baseClass + "-" + this.options.size);
142        }
143        if (value) {
144          this.$wrapper.addClass("" + this.options.baseClass + "-" + value);
145        }
146        this.options.size = value;
147        return this.$element;
148      };
149
150      BootstrapSwitch.prototype.animate = function(value) {
151        if (typeof value === "undefined") {
152          return this.options.animate;
153        }
154        value = !!value;
155        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-animate");
156        this.options.animate = value;
157        return this.$element;
158      };
159
160      BootstrapSwitch.prototype.disabled = function(value) {
161        if (typeof value === "undefined") {
162          return this.options.disabled;
163        }
164        value = !!value;
165        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-disabled");
166        this.$element.prop("disabled", value);
167        this.options.disabled = value;
168        return this.$element;
169      };
170
171      BootstrapSwitch.prototype.toggleDisabled = function() {
172        this.$element.prop("disabled", !this.options.disabled);
173        this.$wrapper.toggleClass("" + this.options.baseClass + "-disabled");
174        this.options.disabled = !this.options.disabled;
175        return this.$element;
176      };
177
178      BootstrapSwitch.prototype.readonly = function(value) {
179        if (typeof value === "undefined") {
180          return this.options.readonly;
181        }
182        value = !!value;
183        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-readonly");
184        this.$element.prop("readonly", value);
185        this.options.readonly = value;
186        return this.$element;
187      };
188
189      BootstrapSwitch.prototype.toggleReadonly = function() {

190        this.$element.prop("readonly", !this.options.readonly);
191        this.$wrapper.toggleClass("" + this.options.baseClass + "-readonly");
192        this.options.readonly = !this.options.readonly;
193        return this.$element;
194      };
195
196      BootstrapSwitch.prototype.indeterminate = function(value) {
197        if (typeof value === "undefined") {
198          return this.options.indeterminate;
199        }
200        value = !!value;
201        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-indeterminate");
202        this.$element.prop("indeterminate", value);
203        this.options.indeterminate = value;
204        return this.$element;
205      };
206
207      BootstrapSwitch.prototype.toggleIndeterminate = function() {
208        this.$element.prop("indeterminate", !this.options.indeterminate);
209        this.$wrapper.toggleClass("" + this.options.baseClass + "-indeterminate");
210        this.options.indeterminate = !this.options.indeterminate;
211        return this.$element;
212      };
213
214      BootstrapSwitch.prototype.onColor = function(value) {
215        var color;
216        color = this.options.onColor;
217        if (typeof value === "undefined") {
218          return color;
219        }
220        if (color != null) {
221          this.$on.removeClass("" + this.options.baseClass + "-" + color);
222        }
223        this.$on.addClass("" + this.options.baseClass + "-" + value);
224        this.options.onColor = value;
225        return this.$element;
226      };
227
228      BootstrapSwitch.prototype.offColor = function(value) {
229        var color;
230        color = this.options.offColor;
231        if (typeof value === "undefined") {
232          return color;
233        }
234        if (color != null) {
235          this.$off.removeClass("" + this.options.baseClass + "-" + color);
236        }
237        this.$off.addClass("" + this.options.baseClass + "-" + value);
238        this.options.offColor = value;
239        return this.$element;
240      };
241
242      BootstrapSwitch.prototype.onText = function(value) {
243        if (typeof value === "undefined") {
244          return this.options.onText;
245        }
246        this.$on.html(value);
247        this.options.onText = value;
248        return this.$element;
249      };
250
251      BootstrapSwitch.prototype.offText = function(value) {
252        if (typeof value === "undefined") {
253          return this.options.offText;
254        }
255        this.$off.html(value);
256        this.options.offText = value;
257        return this.$element;
258      };
259
260      BootstrapSwitch.prototype.labelText = function(value) {
261        if (typeof value === "undefined") {
262          return this.options.labelText;
263        }
264        this.$label.html(value);
265        this.options.labelText = value;
266        return this.$element;
267      };
268
269      BootstrapSwitch.prototype.baseClass = function(value) {
270        return this.options.baseClass;
271      };
272
273      BootstrapSwitch.prototype.wrapperClass = function(value) {
274        if (typeof value === "undefined") {
275          return this.options.wrapperClass;
276        }
277        if (!value) {
278          value = $.fn.bootstrapSwitch.defaults.wrapperClass;
279        }
280        this.$wrapper.removeClass(this._getClasses(this.options.wrapperClass).join(" "));
281        this.$wrapper.addClass(this._getClasses(value).join(" "));
282        this.options.wrapperClass = value;
283        return this.$element;
284      };
285
286      BootstrapSwitch.prototype.destroy = function() {
287        var $form;
288        $form = this.$element.closest("form");
289        if ($form.length) {
290          $form.off("reset.bootstrapSwitch").removeData("bootstrap-switch");
291        }
292        this.$container.children().not(this.$element).remove();
293        this.$element.unwrap().unwrap().off(".bootstrapSwitch").removeData("bootstrap-switch");
294        return this.$element;
295      };
296
297      BootstrapSwitch.prototype._elementHandlers = function() {
298        return this.$element.on({
299          "change.bootstrapSwitch": (function(_this) {
300            return function(e, skip) {
301              var checked;
302              e.preventDefault();
303              e.stopPropagation();
304              e.stopImmediatePropagation();
305              checked = _this.$element.is(":checked");
306              if (checked === _this.options.state) {
307                return;
308              }
309              _this.options.state = checked;
310              _this.$wrapper.removeClass(checked ? "" + _this.options.baseClass + "-off" : "" + _this.options.baseClass + "-on").addClass(checked ? "" + _this.options.baseClass + "-on" : "" + _this.options.baseClass + "-off");
311              if (!skip) {
312                if (_this.$element.is(":radio")) {
313                  $("[name='" + (_this.$element.attr('name')) + "']").not(_this.$element).prop("checked", false).trigger("change.bootstrapSwitch", true);
314                }
315                return _this.$element.trigger("switchChange.bootstrapSwitch", [checked]);
316              }
317            };
318          })(this),
319          "focus.bootstrapSwitch": (function(_this) {
320            return function(e) {
321              e.preventDefault();
322              e.stopPropagation();
323              e.stopImmediatePropagation();
324              return _this.$wrapper.addClass("" + _this.options.baseClass + "-focused");
325            };
326          })(this),
327          "blur.bootstrapSwitch": (function(_this) {
328            return function(e) {
329              e.preventDefault();
330              e.stopPropagation();
331              e.stopImmediatePropagation();
332              return _this.$wrapper.removeClass("" + _this.options.baseClass + "-focused");
333            };
334          })(this),
335          "keydown.bootstrapSwitch": (function(_this) {
336            return function(e) {
337              if (!e.which || _this.options.disabled || _this.options.readonly || _this.options.indeterminate) {
338                return;
339              }
340              switch (e.which) {
341                case 32:
342                  e.preventDefault();
343                  e.stopPropagation();
344                  e.stopImmediatePropagation();
345                  return _this.toggleState();
346                case 37:
347                  e.preventDefault();
348                  e.stopPropagation();
349                  e.stopImmediatePropagation();
350                  return _this.state(false);
351                case 39:
352                  e.preventDefault();
353                  e.stopPropagation();
354                  e.stopImmediatePropagation();
355                  return _this.state(true);
356              }
357            };
358          })(this)
359        });
360      };
361
362      BootstrapSwitch.prototype._handleHandlers = function() {
363        this.$on.on("click.bootstrapSwitch", (function(_this) {
364          return function(e) {
365            _this.state(false);
366            return _this.$element.trigger("focus.bootstrapSwitch");
367          };
368        })(this));
369        return this.$off.on("click.bootstrapSwitch", (function(_this) {
370          return function(e) {
371            _this.state(true);
372            return _this.$element.trigger("focus.bootstrapSwitch");
373          };
374        })(this));
375      };
376
377      BootstrapSwitch.prototype._labelHandlers = function() {
378        return this.$label.on({
379          "mousemove.bootstrapSwitch touchmove.bootstrapSwitch": (function(_this) {
380            return function(e) {
381              var left, pageX, percent, right;
382              if (!_this.drag) {
383                return;
384              }
385              e.preventDefault();
386              pageX = e.pageX || e.originalEvent.touches[0].pageX;
387              percent = ((pageX - _this.$wrapper.offset().left) / _this.$wrapper.width()) * 100;
388              left = 25;
389              right = 75;
390              if (percent < left) {
391                percent = left;
392              } else if (percent > right) {
393                percent = right;
394              }
395              _this.$container.css("margin-left", "" + (percent - right) + "%");
396              return _this.$element.trigger("focus.bootstrapSwitch");
397            };
398          })(this),
399          "mousedown.bootstrapSwitch touchstart.bootstrapSwitch": (function(_this) {
400            return function(e) {
401              if (_this.drag || _this.options.disabled || _this.options.readonly || _this.options.indeterminate) {
402                return;
403              }
404              e.preventDefault();
405              _this.drag = true;
406              if (_this.options.animate) {
407                _this.$wrapper.removeClass("" + _this.options.baseClass + "-animate");
408              }
409              return _this.$element.trigger("focus.bootstrapSwitch");
410            };
411          })(this),
412          "mouseup.bootstrapSwitch touchend.bootstrapSwitch": (function(_this) {
413            return function(e) {
414              if (!_this.drag) {
415                return;
416              }
417              e.preventDefault();
418              _this.drag = false;

419              _this.$element.prop("checked", parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6)).trigger("change.bootstrapSwitch");
420              _this.$container.css("margin-left", "");
421              if (_this.options.animate) {
422                return _this.$wrapper.addClass("" + _this.options.baseClass + "-animate");
423              }
424            };
425          })(this),
426          "mouseleave.bootstrapSwitch": (function(_this) {
427            return function(e) {
428              return _this.$label.trigger("mouseup.bootstrapSwitch");
429            };
430          })(this),
431          "click.bootstrapSwitch": (function(_this) {
432            return function(e) {
433              _this.toggleState();
434              return _this.$element.trigger("focus.bootstrapSwitch");
435            };
436          })(this)
437        });
438      };
439
440      BootstrapSwitch.prototype._formHandler = function() {
441        var $form;
442        $form = this.$element.closest("form");
443        if ($form.data("bootstrap-switch")) {
444          return;
445        }
446        return $form.on("reset.bootstrapSwitch", function() {
447          return window.setTimeout(function() {
448            return $form.find("input").filter(function() {
449              return $(this).data("bootstrap-switch");
450            }).each(function() {
451              return $(this).bootstrapSwitch("state", this.checked);
452            });
453          }, 1);
454        }).data("bootstrap-switch", true);
455      };
456
457      BootstrapSwitch.prototype._getClasses = function(classes) {
458        var c, cls, _i, _len;
459        if (!$.isArray(classes)) {
460          return ["" + this.options.baseClass + "-" + classes];
461        }
462        cls = [];
463        for (_i = 0, _len = classes.length; _i < _len; _i++) {
464          c = classes[_i];
465          cls.push("" + this.options.baseClass + "-" + c);
466        }
467        return cls;
468      };
469
470      return BootstrapSwitch;
471
472    })();
473    $.fn.bootstrapSwitch = function() {
474      var args, option, ret;
475      option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
476      ret = this;
477      this.each(function() {
478        var $this, data;
479        $this = $(this);
480        data = $this.data("bootstrap-switch");
481        if (!data) {
482          $this.data("bootstrap-switch", data = new BootstrapSwitch(this, option));
483        }
484        if (typeof option === "string") {
485          return ret = data[option].apply(data, args);
486        }
487      });
488      return ret;
489    };
490    $.fn.bootstrapSwitch.Constructor = BootstrapSwitch;
491    return $.fn.bootstrapSwitch.defaults = {
492      state: true,
493      size: null,
494      animate: true,
495      disabled: false,
496      readonly: false,
497      indeterminate: false,
498      onColor: "primary",
499      offColor: "default",
500      onText: "ON",
501      offText: "OFF",
502      labelText: "&nbsp;",
503      baseClass: "switch",
504      wrapperClass: "wrapper",
505      onInit: function() {},
506      onSwitchChange: function() {}
507    };
508  })(window.jQuery, window);
509
510}).call(this);