Update bootstrap-switch to 3.3.1

public/css/bootstrap-switch.css

@@ -1,5 +1,5 @@
 /* ========================================================================
- * bootstrap-switch - v3.0.2
+ * bootstrap-switch - v3.3.1
  * http://www.bootstrap-switch.org
  * ========================================================================
  * Copyright 2012-2013 Mattia Larentis
@@ -21,6 +21,7 @@
 
 .bootstrap-switch {
   display: inline-block;
+  direction: ltr;
   cursor: pointer;
   border-radius: 4px;
   border: 1px solid;
@@ -34,91 +35,11 @@
   -ms-user-select: none;
   user-select: none;
   vertical-align: middle;
-  min-width: 100px;
   -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }
-.bootstrap-switch.bootstrap-switch-mini {
-  min-width: 71px;
-}
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
-  padding-bottom: 4px;
-  padding-top: 4px;
-  font-size: 10px;
-  line-height: 9px;
-}
-.bootstrap-switch.bootstrap-switch-small {
-  min-width: 79px;
-}
-.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
-  padding-bottom: 3px;
-  padding-top: 3px;
-  font-size: 12px;
-  line-height: 18px;
-}
-.bootstrap-switch.bootstrap-switch-large {
-  min-width: 120px;
-}
-.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
-  padding-bottom: 9px;
-  padding-top: 9px;
-  font-size: 16px;
-  line-height: normal;
-}
-.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
-  -webkit-transition: margin-left 0.5s;
-  transition: margin-left 0.5s;
-}
-.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container {
-  margin-left: 0%;
-}
-.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container {
-  margin-left: -50%;
-}
-.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-container {
-  margin-left: -25%;
-}
-.bootstrap-switch.bootstrap-switch-disabled,
-.bootstrap-switch.bootstrap-switch-readonly,
-.bootstrap-switch.bootstrap-switch-indeterminate {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-  cursor: default !important;
-}
-.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
-  cursor: default !important;
-}
-.bootstrap-switch.bootstrap-switch-focused {
-  border-color: #66afe9;
-  outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
-}
 .bootstrap-switch .bootstrap-switch-container {
   display: inline-block;
-  width: 150%;
   top: 0;
   border-radius: 4px;
   -webkit-transform: translate3d(0, 0, 0);
@@ -133,8 +54,7 @@
   cursor: pointer;
   display: inline-block !important;
   height: 100%;
-  padding-bottom: 4px;
+  padding: 6px 12px;
-  padding-top: 4px;
   font-size: 14px;
   line-height: 20px;
 }
@@ -142,7 +62,6 @@
 .bootstrap-switch .bootstrap-switch-handle-off {
   text-align: center;
   z-index: 1;
-  width: 33.333333333%;
 }
 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
@@ -174,23 +93,22 @@
   color: #000;
   background: #eeeeee;
 }
-.bootstrap-switch .bootstrap-switch-handle-on {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.bootstrap-switch .bootstrap-switch-handle-off {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
 .bootstrap-switch .bootstrap-switch-label {
   text-align: center;
   margin-top: -1px;
   margin-bottom: -1px;
   z-index: 100;
-  width: 33.333333333%;
   color: #333333;
   background: #ffffff;
 }
+.bootstrap-switch .bootstrap-switch-handle-on {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bootstrap-switch .bootstrap-switch-handle-off {
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
 .bootstrap-switch input[type='radio'],
 .bootstrap-switch input[type='checkbox'] {
   position: absolute !important;
@@ -204,3 +122,74 @@
 .bootstrap-switch input[type='checkbox'].form-control {
   height: auto;
 }
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
+  padding: 1px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
+  padding: 6px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+}
+.bootstrap-switch.bootstrap-switch-disabled,
+.bootstrap-switch.bootstrap-switch-readonly,
+.bootstrap-switch.bootstrap-switch-indeterminate {
+  cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
+  -webkit-transition: margin-left 0.5s;
+  transition: margin-left 0.5s;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-focused {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}

public/js/bootstrap-switch.js

@@ -1,5 +1,5 @@
 /* ========================================================================
- * bootstrap-switch - v3.0.2
+ * bootstrap-switch - v3.3.1
  * http://www.bootstrap-switch.org
  * ========================================================================
  * Copyright 2012-2013 Mattia Larentis
@@ -27,6 +27,7 @@
     var BootstrapSwitch;
     BootstrapSwitch = (function() {
       function BootstrapSwitch(element, options) {
+        var initInterval;
         if (options == null) {
           options = {};
         }
@@ -38,14 +39,17 @@
           disabled: this.$element.is(":disabled"),
           readonly: this.$element.is("[readonly]"),
           indeterminate: this.$element.data("indeterminate"),
+          inverse: this.$element.data("inverse"),
+          radioAllOff: this.$element.data("radio-all-off"),
           onColor: this.$element.data("on-color"),
           offColor: this.$element.data("off-color"),
           onText: this.$element.data("on-text"),
           offText: this.$element.data("off-text"),
           labelText: this.$element.data("label-text"),
+          handleWidth: this.$element.data("handle-width"),
+          labelWidth: this.$element.data("label-width"),
           baseClass: this.$element.data("base-class"),
-          wrapperClass: this.$element.data("wrapper-class"),
+          wrapperClass: this.$element.data("wrapper-class")
-          radioAllOff: this.$element.data("radio-all-off")
         }, options);
         this.$wrapper = $("<div>", {
           "class": (function(_this) {
@@ -56,9 +60,6 @@
               if (_this.options.size != null) {
                 classes.push("" + _this.options.baseClass + "-" + _this.options.size);
               }
-              if (_this.options.animate) {
-                classes.push("" + _this.options.baseClass + "-animate");
-              }
               if (_this.options.disabled) {
                 classes.push("" + _this.options.baseClass + "-disabled");
               }
@@ -68,6 +69,9 @@
               if (_this.options.indeterminate) {
                 classes.push("" + _this.options.baseClass + "-indeterminate");
               }
+              if (_this.options.inverse) {
+                classes.push("" + _this.options.baseClass + "-inverse");
+              }
               if (_this.$element.attr("id")) {
                 classes.push("" + _this.options.baseClass + "-id-" + (_this.$element.attr("id")));
               }
@@ -86,13 +90,10 @@
           html: this.options.offText,
           "class": "" + this.options.baseClass + "-handle-off " + this.options.baseClass + "-" + this.options.offColor
         });
-        this.$label = $("<label>", {
+        this.$label = $("<span>", {
           html: this.options.labelText,
           "class": "" + this.options.baseClass + "-label"
         });
-        if (this.options.indeterminate) {
-          this.$element.prop("indeterminate", true);
-        }
         this.$element.on("init.bootstrapSwitch", (function(_this) {
           return function() {
             return _this.options.onInit.apply(element, arguments);
@@ -105,11 +106,29 @@
         })(this));
         this.$container = this.$element.wrap(this.$container).parent();
         this.$wrapper = this.$container.wrap(this.$wrapper).parent();
-        this.$element.before(this.$on).before(this.$label).before(this.$off).trigger("init.bootstrapSwitch");
+        this.$element.before(this.options.inverse ? this.$off : this.$on).before(this.$label).before(this.options.inverse ? this.$on : this.$off);
+        if (this.options.indeterminate) {
+          this.$element.prop("indeterminate", true);
+        }
+        initInterval = window.setInterval((function(_this) {
+          return function() {
+            if (_this.$wrapper.is(":visible")) {
+              _this._width();
+              _this._containerPosition(null, function() {
+                if (_this.options.animate) {
+                  return _this.$wrapper.addClass("" + _this.options.baseClass + "-animate");
+                }
+              });
+              return window.clearInterval(initInterval);
+            }
+          };
+        })(this), 50);
         this._elementHandlers();
         this._handleHandlers();
         this._labelHandlers();
         this._formHandler();
+        this._externalLabelHandler();
+        this.$element.trigger("init.bootstrapSwitch");
       }
 
       BootstrapSwitch.prototype._constructor = BootstrapSwitch;
@@ -118,22 +137,30 @@
         if (typeof value === "undefined") {
           return this.options.state;
         }
-        if (this.options.disabled || this.options.readonly || this.options.indeterminate) {
+        if (this.options.disabled || this.options.readonly) {
           return this.$element;
         }
-        if (this.options.state && !this.options.radioAllOff && this.$element.is(':radio')) {
+        if (this.options.state && !this.options.radioAllOff && this.$element.is(":radio")) {
           return this.$element;
         }
+        if (this.options.indeterminate) {
+          this.indeterminate(false);
+        }
         value = !!value;
         this.$element.prop("checked", value).trigger("change.bootstrapSwitch", skip);
         return this.$element;
       };
 
       BootstrapSwitch.prototype.toggleState = function(skip) {
-        if (this.options.disabled || this.options.readonly || this.options.indeterminate) {
+        if (this.options.disabled || this.options.readonly) {
           return this.$element;
         }
+        if (this.options.indeterminate) {
+          this.indeterminate(false);
+          return this.state(true);
+        } else {
           return this.$element.prop("checked", !this.options.state).trigger("change.bootstrapSwitch", skip);
+        }
       };
 
       BootstrapSwitch.prototype.size = function(value) {
@@ -146,6 +173,8 @@
         if (value) {
           this.$wrapper.addClass("" + this.options.baseClass + "-" + value);
         }
+        this._width();
+        this._containerPosition();
         this.options.size = value;
         return this.$element;
       };
@@ -155,8 +184,15 @@
           return this.options.animate;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-animate");
+        if (value === this.options.animate) {
-        this.options.animate = value;
+          return this.$element;
+        }
+        return this.toggleAnimate();
+      };
+
+      BootstrapSwitch.prototype.toggleAnimate = function() {
+        this.options.animate = !this.options.animate;
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-animate");
         return this.$element;
       };
 
@@ -165,16 +201,16 @@
           return this.options.disabled;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-disabled");
+        if (value === this.options.disabled) {
-        this.$element.prop("disabled", value);
-        this.options.disabled = value;
           return this.$element;
+        }
+        return this.toggleDisabled();
       };
 
       BootstrapSwitch.prototype.toggleDisabled = function() {
-        this.$element.prop("disabled", !this.options.disabled);
-        this.$wrapper.toggleClass("" + this.options.baseClass + "-disabled");
         this.options.disabled = !this.options.disabled;
+        this.$element.prop("disabled", this.options.disabled);
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-disabled");
         return this.$element;
       };
 
@@ -183,16 +219,16 @@
           return this.options.readonly;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-readonly");
+        if (value === this.options.readonly) {
-        this.$element.prop("readonly", value);
-        this.options.readonly = value;
           return this.$element;
+        }
+        return this.toggleReadonly();
       };
 
       BootstrapSwitch.prototype.toggleReadonly = function() {
-        this.$element.prop("readonly", !this.options.readonly);
-        this.$wrapper.toggleClass("" + this.options.baseClass + "-readonly");
         this.options.readonly = !this.options.readonly;
+        this.$element.prop("readonly", this.options.readonly);
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-readonly");
         return this.$element;
       };
 
@@ -201,16 +237,41 @@
           return this.options.indeterminate;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-indeterminate");
+        if (value === this.options.indeterminate) {
-        this.$element.prop("indeterminate", value);
-        this.options.indeterminate = value;
           return this.$element;
+        }
+        return this.toggleIndeterminate();
       };
 
       BootstrapSwitch.prototype.toggleIndeterminate = function() {
-        this.$element.prop("indeterminate", !this.options.indeterminate);
-        this.$wrapper.toggleClass("" + this.options.baseClass + "-indeterminate");
         this.options.indeterminate = !this.options.indeterminate;
+        this.$element.prop("indeterminate", this.options.indeterminate);
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-indeterminate");
+        this._containerPosition();
+        return this.$element;
+      };
+
+      BootstrapSwitch.prototype.inverse = function(value) {
+        if (typeof value === "undefined") {
+          return this.options.inverse;
+        }
+        value = !!value;
+        if (value === this.options.inverse) {
+          return this.$element;
+        }
+        return this.toggleInverse();
+      };
+
+      BootstrapSwitch.prototype.toggleInverse = function() {
+        var $off, $on;
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-inverse");
+        $on = this.$on.clone(true);
+        $off = this.$off.clone(true);
+        this.$on.replaceWith($off);
+        this.$off.replaceWith($on);
+        this.$on = $off;
+        this.$off = $on;
+        this.options.inverse = !this.options.inverse;
         return this.$element;
       };
 
@@ -247,6 +308,8 @@
           return this.options.onText;
         }
         this.$on.html(value);
+        this._width();
+        this._containerPosition();
         this.options.onText = value;
         return this.$element;
       };
@@ -256,6 +319,8 @@
           return this.options.offText;
         }
         this.$off.html(value);
+        this._width();
+        this._containerPosition();
         this.options.offText = value;
         return this.$element;
       };
@@ -265,10 +330,31 @@
           return this.options.labelText;
         }
         this.$label.html(value);
+        this._width();
         this.options.labelText = value;
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.handleWidth = function(value) {
+        if (typeof value === "undefined") {
+          return this.options.handleWidth;
+        }
+        this.options.handleWidth = value;
+        this._width();
+        this._containerPosition();
+        return this.$element;
+      };
+
+      BootstrapSwitch.prototype.labelWidth = function(value) {
+        if (typeof value === "undefined") {
+          return this.options.labelWidth;
+        }
+        this.options.labelWidth = value;
+        this._width();
+        this._containerPosition();
+        return this.$element;
+      };
+
       BootstrapSwitch.prototype.baseClass = function(value) {
         return this.options.baseClass;
       };
@@ -290,6 +376,10 @@
         if (typeof value === "undefined") {
           return this.options.radioAllOff;
         }
+        value = !!value;
+        if (value === this.options.radioAllOff) {
+          return this.$element;
+        }
         this.options.radioAllOff = value;
         return this.$element;
       };
@@ -327,24 +417,83 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype._width = function() {
+        var $handles, handleWidth;
+        $handles = this.$on.add(this.$off);
+        $handles.add(this.$label).css("width", "");
+        handleWidth = this.options.handleWidth === "auto" ? Math.max(this.$on.width(), this.$off.width()) : this.options.handleWidth;
+        $handles.width(handleWidth);
+        this.$label.width((function(_this) {
+          return function(index, width) {
+            if (_this.options.labelWidth !== "auto") {
+              return _this.options.labelWidth;
+            }
+            if (width < handleWidth) {
+              return handleWidth;
+            } else {
+              return width;
+            }
+          };
+        })(this));
+        this._handleWidth = this.$on.outerWidth();
+        this._labelWidth = this.$label.outerWidth();
+        this.$container.width((this._handleWidth * 2) + this._labelWidth);
+        return this.$wrapper.width(this._handleWidth + this._labelWidth);
+      };
+
+      BootstrapSwitch.prototype._containerPosition = function(state, callback) {
+        if (state == null) {
+          state = this.options.state;
+        }
+        this.$container.css("margin-left", (function(_this) {
+          return function() {
+            var values;
+            values = [0, "-" + _this._handleWidth + "px"];
+            if (_this.options.indeterminate) {
+              return "-" + (_this._handleWidth / 2) + "px";
+            }
+            if (state) {
+              if (_this.options.inverse) {
+                return values[1];
+              } else {
+                return values[0];
+              }
+            } else {
+              if (_this.options.inverse) {
+                return values[0];
+              } else {
+                return values[1];
+              }
+            }
+          };
+        })(this));
+        if (!callback) {
+          return;
+        }
+        return setTimeout(function() {
+          return callback();
+        }, 50);
+      };
+
       BootstrapSwitch.prototype._elementHandlers = function() {
         return this.$element.on({
           "change.bootstrapSwitch": (function(_this) {
             return function(e, skip) {
-              var checked;
+              var state;
               e.preventDefault();
               e.stopImmediatePropagation();
-              checked = _this.$element.is(":checked");
+              state = _this.$element.is(":checked");
-              if (checked === _this.options.state) {
+              _this._containerPosition(state);
+              if (state === _this.options.state) {
                 return;
               }
-              _this.options.state = checked;
+              _this.options.state = state;
-              _this.$wrapper.removeClass(checked ? "" + _this.options.baseClass + "-off" : "" + _this.options.baseClass + "-on").addClass(checked ? "" + _this.options.baseClass + "-on" : "" + _this.options.baseClass + "-off");
+              _this.$wrapper.toggleClass("" + _this.options.baseClass + "-off").toggleClass("" + _this.options.baseClass + "-on");
               if (!skip) {
                 if (_this.$element.is(":radio")) {
                   $("[name='" + (_this.$element.attr('name')) + "']").not(_this.$element).prop("checked", false).trigger("change.bootstrapSwitch", true);
                 }
-                return _this.$element.trigger("switchChange.bootstrapSwitch", [checked]);
+                return _this.$element.trigger("switchChange.bootstrapSwitch", [state]);
               }
             };
           })(this),
@@ -362,7 +511,7 @@
           })(this),
           "keydown.bootstrapSwitch": (function(_this) {
             return function(e) {
-              if (!e.which || _this.options.disabled || _this.options.readonly || _this.options.indeterminate) {
+              if (!e.which || _this.options.disabled || _this.options.readonly) {
                 return;
               }
               switch (e.which) {
@@ -382,13 +531,17 @@
 
       BootstrapSwitch.prototype._handleHandlers = function() {
         this.$on.on("click.bootstrapSwitch", (function(_this) {
-          return function(e) {
+          return function(event) {
+            event.preventDefault();
+            event.stopPropagation();
             _this.state(false);
             return _this.$element.trigger("focus.bootstrapSwitch");
           };
         })(this));
         return this.$off.on("click.bootstrapSwitch", (function(_this) {
-          return function(e) {
+          return function(event) {
+            event.preventDefault();
+            event.stopPropagation();
             _this.state(true);
             return _this.$element.trigger("focus.bootstrapSwitch");
           };
@@ -397,57 +550,53 @@
 
       BootstrapSwitch.prototype._labelHandlers = function() {
         return this.$label.on({
-          "mousemove.bootstrapSwitch touchmove.bootstrapSwitch": (function(_this) {
+          "mousedown.bootstrapSwitch touchstart.bootstrapSwitch": (function(_this) {
             return function(e) {
-              var left, pageX, percent, right;
+              if (_this._dragStart || _this.options.disabled || _this.options.readonly) {
-              if (!_this.isLabelDragging) {
                 return;
               }
               e.preventDefault();
-              _this.isLabelDragged = true;
+              e.stopPropagation();
-              pageX = e.pageX || e.originalEvent.touches[0].pageX;
+              _this._dragStart = (e.pageX || e.originalEvent.touches[0].pageX) - parseInt(_this.$container.css("margin-left"), 10);
-              percent = ((pageX - _this.$wrapper.offset().left) / _this.$wrapper.width()) * 100;
-              left = 25;
-              right = 75;
               if (_this.options.animate) {
                 _this.$wrapper.removeClass("" + _this.options.baseClass + "-animate");
               }
-              if (percent < left) {
-                percent = left;
-              } else if (percent > right) {
-                percent = right;
-              }
-              _this.$container.css("margin-left", "" + (percent - right) + "%");
               return _this.$element.trigger("focus.bootstrapSwitch");
             };
           })(this),
-          "mousedown.bootstrapSwitch touchstart.bootstrapSwitch": (function(_this) {
+          "mousemove.bootstrapSwitch touchmove.bootstrapSwitch": (function(_this) {
             return function(e) {
-              if (_this.isLabelDragging || _this.options.disabled || _this.options.readonly || _this.options.indeterminate) {
+              var difference;
+              if (_this._dragStart == null) {
                 return;
               }
               e.preventDefault();
-              _this.isLabelDragging = true;
+              difference = (e.pageX || e.originalEvent.touches[0].pageX) - _this._dragStart;
-              return _this.$element.trigger("focus.bootstrapSwitch");
+              if (difference < -_this._handleWidth || difference > 0) {
+                return;
+              }
+              _this._dragEnd = difference;
+              return _this.$container.css("margin-left", "" + _this._dragEnd + "px");
             };
           })(this),
           "mouseup.bootstrapSwitch touchend.bootstrapSwitch": (function(_this) {
             return function(e) {
-              if (!_this.isLabelDragging) {
+              var state;
+              if (!_this._dragStart) {
                 return;
               }
               e.preventDefault();
-              if (_this.isLabelDragged) {
-                _this.isLabelDragged = false;
-                _this.state(parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6));
               if (_this.options.animate) {
                 _this.$wrapper.addClass("" + _this.options.baseClass + "-animate");
               }
-                _this.$container.css("margin-left", "");
+              if (_this._dragEnd) {
+                state = _this._dragEnd > -(_this._handleWidth / 2);
+                _this._dragEnd = false;
+                _this.state(_this.options.inverse ? !state : state);
               } else {
                 _this.state(!_this.options.state);
               }
-              return _this.isLabelDragging = false;
+              return _this._dragStart = false;
             };
           })(this),
           "mouseleave.bootstrapSwitch": (function(_this) {
@@ -458,6 +607,20 @@
         });
       };
 
+      BootstrapSwitch.prototype._externalLabelHandler = function() {
+        var $externalLabel;
+        $externalLabel = this.$element.closest("label");
+        return $externalLabel.on("click", (function(_this) {
+          return function(event) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (event.target === $externalLabel[0]) {
+              return _this.toggleState();
+            }
+          };
+        })(this));
+      };
+
       BootstrapSwitch.prototype._formHandler = function() {
         var $form;
         $form = this.$element.closest("form");
@@ -516,14 +679,17 @@
       disabled: false,
       readonly: false,
       indeterminate: false,
+      inverse: false,
+      radioAllOff: false,
       onColor: "primary",
       offColor: "default",
       onText: "ON",
       offText: "OFF",
       labelText: "&nbsp;",
+      handleWidth: "auto",
+      labelWidth: "auto",
       baseClass: "bootstrap-switch",
       wrapperClass: "wrapper",
-      radioAllOff: false,
       onInit: function() {},
       onSwitchChange: function() {}
     };