Merge branch 'develop'

Conflicts:
	dist/css/bootstrap2/bootstrap-switch.min.css
	test/bootstrap-switch.js

bower.json

@@ -1,10 +1,10 @@
 {
   "name": "bootstrap-switch",
   "description": "Turn checkboxes and radio buttons in toggle switches.",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "main": [
-    "dist/js/bootstrap-switch.js",
-    "dist/css/bootstrap3/bootstrap-switch.css"
+    "./dist/js/bootstrap-switch.js",
+    "./dist/css/bootstrap3/bootstrap-switch.css"
   ],
   "ignore": [
     "docs",
@@ -19,6 +19,11 @@
     "package.json"
   ],
   "dependencies": {
+    "bootstrap": ">=2.3.2",
     "jquery": ">=1.9.0"
+  },
+  "devDependencies": {
+    "jquery": "~2.1.1",
+    "bootstrap": "~3.2.0"
   }
 }

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "components/bootstrap-switch",
   "description": "Turn checkboxes and radio buttons in toggle switches.",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "type": "component",
   "keywords": [
     "bootstrap",

dist/css/bootstrap2/bootstrap-switch.css

@@ -103,16 +103,37 @@
   font-size: 16px;
   line-height: normal;
 }
+.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-animate .bootstrap-switch-container {
   -webkit-transition: margin-left 0.5s;
   -moz-transition: margin-left 0.5s;
   -o-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 {
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
+  -webkit-border-top-left-radius: 0;
+  -moz-border-radius-topleft: 0;
+  border-top-left-radius: 0;
+  -webkit-border-bottom-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+  border-bottom-left-radius: 0;
   -webkit-border-top-right-radius: 4px;
   -moz-border-radius-topright: 4px;
   border-top-right-radius: 4px;
@@ -120,10 +141,13 @@
   -moz-border-radius-bottomright: 4px;
   border-bottom-right-radius: 4px;
 }
-.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container {
-  margin-left: -50%;
-}
-.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
+  -webkit-border-top-right-radius: 0;
+  -moz-border-radius-topright: 0;
+  border-top-right-radius: 0;
+  -webkit-border-bottom-right-radius: 0;
+  -moz-border-radius-bottomright: 0;
+  border-bottom-right-radius: 0;
   -webkit-border-top-left-radius: 4px;
   -moz-border-radius-topleft: 4px;
   border-top-left-radius: 4px;
@@ -131,27 +155,6 @@
   -moz-border-radius-bottomleft: 4px;
   border-bottom-left-radius: 4px;
 }
-.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: rgba(82, 168, 236, 0.8);
   outline: 0;
@@ -160,6 +163,35 @@
   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
 }
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-container {
+  margin-left: 0%;
+}
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+  -webkit-border-top-right-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  border-top-right-radius: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  border-bottom-right-radius: 4px;
+}
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-container {
+  margin-left: -50%;
+}
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topleft: 4px;
+  border-top-left-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomleft: 4px;
+  border-bottom-left-radius: 4px;
+}
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-container {
+  margin-left: -25%;
+}
 .bootstrap-switch .bootstrap-switch-container {
   display: inline-block;
   width: 150%;
@@ -432,22 +464,6 @@
 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default.active {
   background-color: #e6e6e6 \9;
 }
-.bootstrap-switch .bootstrap-switch-handle-on {
-  -webkit-border-top-left-radius: 4px;
-  -moz-border-radius-topleft: 4px;
-  border-top-left-radius: 4px;
-  -webkit-border-bottom-left-radius: 4px;
-  -moz-border-radius-bottomleft: 4px;
-  border-bottom-left-radius: 4px;
-}
-.bootstrap-switch .bootstrap-switch-handle-off {
-  -webkit-border-top-right-radius: 4px;
-  -moz-border-radius-topright: 4px;
-  border-top-right-radius: 4px;
-  -webkit-border-bottom-right-radius: 4px;
-  -moz-border-radius-bottomright: 4px;
-  border-bottom-right-radius: 4px;
-}
 .bootstrap-switch .bootstrap-switch-label {
   text-align: center;
   margin-top: -1px;
@@ -486,6 +502,22 @@
 .bootstrap-switch .bootstrap-switch-label.active {
   background-color: #cccccc \9;
 }
+.bootstrap-switch .bootstrap-switch-handle-on {
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topleft: 4px;
+  border-top-left-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomleft: 4px;
+  border-bottom-left-radius: 4px;
+}
+.bootstrap-switch .bootstrap-switch-handle-off {
+  -webkit-border-top-right-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  border-top-right-radius: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  border-bottom-right-radius: 4px;
+}
 .bootstrap-switch input[type='radio'],
 .bootstrap-switch input[type='checkbox'] {
   position: absolute !important;

dist/css/bootstrap3/bootstrap-switch.css

@@ -71,27 +71,6 @@
   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 {
@@ -110,12 +89,50 @@
 .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
   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-container,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-container {
+  margin-left: 0%;
+}
+.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-container,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-container {
+  margin-left: -50%;
+}
+.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;
+}
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-container,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-indeterminate .bootstrap-switch-container {
+  margin-left: -25%;
+}
 .bootstrap-switch .bootstrap-switch-container {
   display: inline-block;
   width: 150%;
@@ -174,14 +191,6 @@
   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;
@@ -191,6 +200,14 @@
   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;

dist/js/bootstrap-switch.js

@@ -38,14 +38,15 @@
           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"),
           baseClass: this.$element.data("base-class"),
-          wrapperClass: this.$element.data("wrapper-class"),
-          radioAllOff: this.$element.data("radio-all-off")
+          wrapperClass: this.$element.data("wrapper-class")
         }, options);
         this.$wrapper = $("<div>", {
           "class": (function(_this) {
@@ -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")));
               }
@@ -105,7 +109,7 @@
         })(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).trigger("init.bootstrapSwitch");
         this._elementHandlers();
         this._handleHandlers();
         this._labelHandlers();
@@ -118,22 +122,32 @@
         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')) {
           return this.$element;
         }
-        value = !!value;
+        if (this.options.indeterminate) {
+          this.indeterminate(false);
+          value = true;
+        } else {
+          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;
         }
-        return this.$element.prop("checked", !this.options.state).trigger("change.bootstrapSwitch", skip);
+        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) {
@@ -160,6 +174,12 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.toggleAnimate = function() {
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-animate");
+        this.options.animate = !this.options.animate;
+        return this.$element;
+      };
+
       BootstrapSwitch.prototype.disabled = function(value) {
         if (typeof value === "undefined") {
           return this.options.disabled;
@@ -214,6 +234,36 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.inverse = function(value) {
+        var $off, $on;
+        if (typeof value === "undefined") {
+          return this.options.inverse;
+        }
+        value = !!value;
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + 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 = value;
+        return this.$element;
+      };
+
+      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;
+      };
+
       BootstrapSwitch.prototype.onColor = function(value) {
         var color;
         color = this.options.onColor;
@@ -362,7 +412,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) {
@@ -423,7 +473,7 @@
           })(this),
           "mousedown.bootstrapSwitch touchstart.bootstrapSwitch": (function(_this) {
             return function(e) {
-              if (_this.isLabelDragging || _this.options.disabled || _this.options.readonly || _this.options.indeterminate) {
+              if (_this.isLabelDragging || _this.options.disabled || _this.options.readonly) {
                 return;
               }
               e.preventDefault();
@@ -433,13 +483,15 @@
           })(this),
           "mouseup.bootstrapSwitch touchend.bootstrapSwitch": (function(_this) {
             return function(e) {
+              var state;
               if (!_this.isLabelDragging) {
                 return;
               }
               e.preventDefault();
               if (_this.isLabelDragged) {
+                state = parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6);
                 _this.isLabelDragged = false;
-                _this.state(parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6));
+                _this.state(_this.options.inverse ? !state : state);
                 if (_this.options.animate) {
                   _this.$wrapper.addClass("" + _this.options.baseClass + "-animate");
                 }
@@ -516,6 +568,8 @@
       disabled: false,
       readonly: false,
       indeterminate: false,
+      inverse: false,
+      radioAllOff: false,
       onColor: "primary",
       offColor: "default",
       onText: "ON",
@@ -523,7 +577,6 @@
       labelText: "&nbsp;",
       baseClass: "bootstrap-switch",
       wrapperClass: "wrapper",
-      radioAllOff: false,
       onInit: function() {},
       onSwitchChange: function() {}
     };

docs/js/main.js

@@ -1,21 +1,21 @@
 $(function() {
   var $window = $(window);
-  var $stateSwitch = $('#state-switch');
   var sectionTop = $('.top').outerHeight() + 20;
 
   // initialize highlight.js
   hljs.initHighlightingOnLoad();
 
   // navigation
-  $('a[href^="#"]').on('click', function(event) {
+  $('a[href*="#"]').on('click', function(event) {
     event.preventDefault();
-    var $target = $($(this).attr('href'));
+    var $target = $($(this).attr('href').slice('#'));
 
     if ($target.length) {
       $window.scrollTop($target.offset().top - sectionTop);
     }
   });
 
+  // download switch
   $('input[name="download-version"]').on({
     'init.bootstrapSwitch': function() {
       $('#download-' + ($(this).is(':checked') ? '2' : '3')).hide();
@@ -29,17 +29,33 @@ $(function() {
   // initialize all the inputs
   $('input[type="checkbox"],[type="radio"]').not('#create-switch').not('#events-switch').bootstrapSwitch();
 
-  // state
-  $('#state-switch-toggle').on('click', function () {
-    $stateSwitch.bootstrapSwitch('toggleState');
+  $('[data-get]').on("click", function() {
+    var type = $(this).data('get');
+
+    alert($('#switch-' + type).bootstrapSwitch(type));
   });
-  $('#state-switch-on').on('click', function () {
-    $stateSwitch.bootstrapSwitch('state', true);
+
+  $('[data-set]').on('click', function() {
+    var type = $(this).data('set');
+
+    $('#switch-' + type).bootstrapSwitch(type, $(this).data('value'));
   });
-  $('#state-switch-off').on('click', function () {
-    $stateSwitch.bootstrapSwitch('state', false);
+
+  $('[data-toggle]').on('click', function() {
+    var type = $(this).data('toggle');
+
+    $('#switch-' + type).bootstrapSwitch('toggle' + type.charAt(0).toUpperCase() + type.slice(1));
   });
-  $('#state-switch-state').on('click', function () {
-    alert($stateSwitch.bootstrapSwitch('state'));
+
+  $('[data-set-text]').on('change', function(event) {
+    event.preventDefault();
+    var type = $(this).data('set-text');
+    var value = $.trim($(this).val());
+
+    if ( ! value) {
+      return;
+    }
+
+    $('#switch-' + type).bootstrapSwitch(type, value);
   });
 });

documentation-2.html

@@ -40,12 +40,17 @@
                 <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
               </ul>
             </li>
-            <li><a href="#new">What's new</a></li>
-            <li><a href="#start">Start</a></li>
+            <li><a href="index.html">Start</a></li>
+            <li><a href="examples.html">Examples</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
-                <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>
-                <li><a href="/documentation-2.html">Version 2.0.1 (Legacy)</a></li>
+                <li class="dropdown-header">Version 3 (Stable)</li>
+                <li><a href="/options-3.html">Options</a></li>
+                <li><a href="/methods-3.html">Methods</a></li>
+                <li><a href="/events-3.html">Events</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
+                <li><a href="/documentation-2.html">Documentation</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -54,7 +59,7 @@
       </div>
     </header>
     <div class="container content">
-      <h1 class="page-header">Documentation 2.0.1 (Legacy)</h1>
+      <h1 class="page-header">Documentation &nbsp;<small>Version 2.0.1 (Legacy)</small></h1>
       <div id="options-2">
         <h2 class="page-header">Options</h2>
         <div class="alert alert-warning">

documentation-3.html

@@ -1,324 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
-    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
-    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
-    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
-    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
-    <link href="docs/css/highlight.css" rel="stylesheet">
-    <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
-    <link href="docs/css/main.css" rel="stylesheet">
-    <script>
-      var _gaq = _gaq || [];
-      _gaq.push(['_setAccount', 'UA-43092768-1']);
-      _gaq.push(['_trackPageview']);
-      (function () {
-        var ga = document.createElement('script');
-        ga.type = 'text/javascript';
-        ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0];
-        s.parentNode.insertBefore(ga, s);
-      })();
-    </script>
-  </head>
-  <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
-    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
-      <div class="container">
-        <div class="navbar-header">
-          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
-        </div>
-        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
-          <ul class="nav navbar-nav">
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3 (Stable)</a></li>
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
-              </ul>
-            </li>
-            <li><a href="#new">What's new</a></li>
-            <li><a href="#start">Start</a></li>
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>
-                <li><a href="/documentation-2.html">Version 2.0.1 (Legacy)</a></li>
-              </ul>
-            </li>
-            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
-          </ul>
-        </nav>
-      </div>
-    </header>
-    <div class="container content">
-      <h1 class="page-header">Documentation 3 (Stable)</h1>
-      <div id="options-3">
-        <h2 class="page-header">Options</h2>
-        <table class="table table-bordered table-striped table-responsive">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Attribute</th>
-              <th>Type</th>
-              <th>Description</th>
-              <th>Values</th>
-              <th>Default</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>state</td>
-              <td>checked</td>
-              <td>Boolean</td>
-              <td>The checkbox state</td>
-              <td>true, false</td>
-              <td>true</td>
-            </tr>
-            <tr>
-              <td>size</td>
-              <td>data-size</td>
-              <td>String</td>
-              <td>The checkbox state</td>
-              <td>null, 'mini', 'small', 'normal', 'large'</td>
-              <td>null</td>
-            </tr>
-            <tr>
-              <td>animate</td>
-              <td>data-animate</td>
-              <td>Boolean</td>
-              <td>Animate the switch</td>
-              <td>true, false</td>
-              <td>true</td>
-            </tr>
-            <tr>
-              <td>disabled</td>
-              <td>disabled</td>
-              <td>Boolean</td>
-              <td>Disable state</td>
-              <td>true, false</td>
-              <td>false</td>
-            </tr>
-            <tr>
-              <td>readonly</td>
-              <td>readonly</td>
-              <td>Boolean</td>
-              <td>Readonly state</td>
-              <td>true, false</td>
-              <td>false</td>
-            </tr>
-            <tr>
-              <td>indeterminate</td>
-              <td></td>
-              <td>Boolean</td>
-              <td>indeterminate state</td>
-              <td>true, false</td>
-              <td>false</td>
-            </tr>
-            <tr>
-              <td>onColor</td>
-              <td>data-on-color</td>
-              <td>String</td>
-              <td>Color of the left side of the switch</td>
-              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-              <td>'primary'</td>
-            </tr>
-            <tr>
-              <td>offColor</td>
-              <td>data-off-color</td>
-              <td>String</td>
-              <td>Color of the right side of the switch</td>
-              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-              <td>'default'</td>
-            </tr>
-            <tr>
-              <td>onText</td>
-              <td>data-on-text</td>
-              <td>String</td>
-              <td>Text of the left side of the switch</td>
-              <td>String</td>
-              <td>'ON'</td>
-            </tr>
-            <tr>
-              <td>offText</td>
-              <td>data-off-text</td>
-              <td>String</td>
-              <td>Text of the right side of the switch</td>
-              <td>String</td>
-              <td>'OFF'</td>
-            </tr>
-            <tr>
-              <td>labelText</td>
-              <td>data-label-text</td>
-              <td>String</td>
-              <td>Text of the center handle of the switch</td>
-              <td>String</td>
-              <td>'&amp;nbsp;'</td>
-            </tr>
-            <tr>
-              <td>baseClass</td>
-              <td>data-base-class</td>
-              <td>String</td>
-              <td>Global class prefix</td>
-              <td>String</td>
-              <td>'bootstrap-switch'</td>
-            </tr>
-            <tr>
-              <td>wrapperClass</td>
-              <td>data-wrapper-class</td>
-              <td>String | Array</td>
-              <td>Container element class(es)</td>
-              <td>String | Array</td>
-              <td>'wrapper'</td>
-            </tr>
-            <tr>
-              <td>onInit</td>
-              <td></td>
-              <td>Function</td>
-              <td>Callback function to execute on initialization</td>
-              <td>Function</td>
-              <td>
-                <pre><code class="javascript">function(event, state) {}</code></pre>
-              </td>
-            </tr>
-            <tr>
-              <td>onSwitchChange</td>
-              <td></td>
-              <td>Function</td>
-              <td>Callback function to execute on switch state change</td>
-              <td>Function</td>
-              <td>
-                <pre><code class="javascript">function(event, state) {}</code></pre>
-              </td>
-            </tr>
-            <tr>
-              <td>radioAllOff</td>
-              <td>data-radio-all-off</td>
-              <td>Boolean</td>
-              <td>Allow this radio button to be unchecked by the user</td>
-              <td>true, false</td>
-              <td>false</td>
-            </tr>
-          </tbody>
-        </table>
-        <h3>Global Defaults Overriding</h3>
-        <p>Follow the jQuery convention to override the default options of the library. For instance:</p>
-        <pre><code>$.fn.bootstrapSwitch.defaults.size = 'large';
-$.fn.bootstrapSwitch.defaults.onColor = 'success';</code></pre>
-      </div>
-      <div id="methods-3">
-        <h2 class="page-header">Methods</h2>
-        <p>In Bootstrap Switch, every option is also a method.</p>
-        <p>If the second parameter is omitted, the method return the current value.</p>
-        <p>You can invoke methods as follows:</p>
-        <pre><code>$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);</code></pre>
-        <h3>Additional Methods</h3>
-        <table class="table table-bordered table-striped table-responsive">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>toggleState</td>
-              <td>Toggle the switch state</td>
-            </tr>
-            <tr>
-              <td>toggleDisabled</td>
-              <td>Toggle the disabled state</td>
-            </tr>
-            <tr>
-              <td>toggleReadonly</td>
-              <td>Toggle the readonly state</td>
-            </tr>
-            <tr>
-              <td>destroy</td>
-              <td>Destroy the instance of Bootstrap Switch</td>
-            </tr>
-          </tbody>
-        </table>
-        <h3>Special Behaviours</h3>
-        <ul>
-          <li>The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
-          <li>The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
-          <li>The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.</li>
-        </ul>
-      </div>
-      <div id="events-3">
-        <h2 class="page-header">Events</h2>
-        <p>
-          All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
-          attach your handlers.<br>
-          You can register to the emitted events as follow:
-        </p>
-        <pre><code>$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
-  console.log(this); // DOM element
-  console.log(event); // jQuery event
-  console.log(state); // true | false
-});</code></pre>
-        <table class="table table-bordered table-striped table-responsive">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Description</th>
-              <th>Parameters</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>init</td>
-              <td>Triggered on initialization. 'this' refers to the DOM element.</td>
-              <td>event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)</td>
-            </tr>
-            <tr>
-              <td>switchChange</td>
-              <td>Triggered on switch state change. 'this' refers to the DOM element.</td>
-              <td>
-                event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
-                state (true | false)
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div id="examples-3">
-        <h2 class="page-header">Examples</h2>
-        <p>To be included</p>
-        <!--
-        h3 State
-        .row
-          .col-sm-6
-            input(type='checkbox', id='state-switch' checked)
-          .col-sm-6
-            .btn-group.pull-right
-              button(type='button', id='state-switch-state', class='btn btn-default') Get State
-              &nbsp;
-              button(type='button', id='state-switch-on', class='btn btn-default') Set On
-              &nbsp;
-              button(type='button', id='state-switch-off', class='btn btn-default') Set Off
-              &nbsp;
-              button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State
-        -->
-      </div>
-    </div>
-    <div class="container bottom">
-      <p>
-        Licensed under the
-        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
-        · Created by
-        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
-        · Mantained by
-        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
-      </p>
-    </div>
-    <script src="docs/js/jquery.min.js"></script>
-    <script src="docs/js/bootstrap.min.js"></script>
-    <script src="docs/js/highlight.js"></script>
-    <script src="dist/js/bootstrap-switch.js"></script>
-    <script src="docs/js/main.js"></script>
-  </body>
-</html>

page.html → events-3.html

@@ -40,19 +40,17 @@
                 <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
               </ul>
             </li>
-            <li><a href="#new">What's new</a></li>
-            <li><a href="#start">Start</a></li>
+            <li><a href="index.html">Start</a></li>
+            <li><a href="examples.html">Examples</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
                 <li class="dropdown-header">Version 3 (Stable)</li>
-                <li><a href="#options-3">Options</a></li>
-                <li><a href="#methods-3">Methods</a></li>
-                <li><a href="#events-3">Events</a></li>
+                <li><a href="/options-3.html">Options</a></li>
+                <li><a href="/methods-3.html">Methods</a></li>
+                <li><a href="/events-3.html">Events</a></li>
                 <li class="divider"></li>
                 <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
-                <li><a href="#options-2">Options</a></li>
-                <li><a href="#methods-2">Methods</a></li>
-                <li><a href="#events-2">Events</a></li>
+                <li><a href="/documentation-2.html">Documentation</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -60,7 +58,53 @@
         </nav>
       </div>
     </header>
-    <p>try</p>
+    <div class="container content">
+      <h1 class="page-header">Events &nbsp;<small>Version 3 (Stable)</small></h1>
+      <p>
+        All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
+        attach your handlers.<br>
+        You can register to the emitted events as follow:
+      </p>
+      <pre><code>$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
+  console.log(this); // DOM element
+  console.log(event); // jQuery event
+  console.log(state); // true | false
+});</code></pre>
+      <table class="table table-bordered table-striped table-responsive">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Parameters</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>init</td>
+            <td>Triggered on initialization. 'this' refers to the DOM element.</td>
+            <td>event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)</td>
+          </tr>
+          <tr>
+            <td>switchChange</td>
+            <td>Triggered on switch state change. 'this' refers to the DOM element.</td>
+            <td>
+              event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
+              state (true | false)
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="container bottom">
+      <p>
+        Licensed under the
+        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
+        · Created by
+        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
+        · Mantained by
+        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+      </p>
+    </div>
     <script src="docs/js/jquery.min.js"></script>
     <script src="docs/js/bootstrap.min.js"></script>
     <script src="docs/js/highlight.js"></script>

examples.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
+    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
+    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
+    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
+    <link href="docs/css/highlight.css" rel="stylesheet">
+    <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="docs/css/main.css" rel="stylesheet">
+    <script>
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-43092768-1']);
+      _gaq.push(['_trackPageview']);
+      (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+  <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+        </div>
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3 (Stable)</a></li>
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
+              </ul>
+            </li>
+            <li><a href="index.html">Start</a></li>
+            <li><a href="examples.html">Examples</a></li>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li class="dropdown-header">Version 3 (Stable)</li>
+                <li><a href="/options-3.html">Options</a></li>
+                <li><a href="/methods-3.html">Methods</a></li>
+                <li><a href="/events-3.html">Events</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
+                <li><a href="/documentation-2.html">Documentation</a></li>
+              </ul>
+            </li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <div class="container content">
+      <h1 class="page-header">Examples</h1>
+      <div class="row">
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">State</h2>
+          <p>
+            <input id="switch-state" type="checkbox" checked>
+          </p>
+          <div class="btn-group">
+            <button type="button" data-toggle="state" class="btn btn-default">Toggle</button>
+            <button type="button" data-set="state" data-value="true" class="btn btn-default">Set true</button>
+            <button type="button" data-set="state" data-value="false" class="btn btn-default">Set false</button>
+            <button type="button" data-get="state" class="btn btn-default">Get</button>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">Size</h2>
+          <p>
+            <input id="switch-size" type="checkbox" checked data-size="mini">
+          </p>
+          <div class="btn-group">
+            <button type="button" data-set="size" data-value="mini" class="btn btn-default">Mini</button>
+            <button type="button" data-set="size" data-value="small" class="btn btn-default">Small</button>
+            <button type="button" data-set="size" data-value="normal" class="btn btn-default">Normal</button>
+            <button type="button" data-set="size" data-value="large" class="btn btn-default">Large</button>
+            <button type="button" data-get="size" class="btn btn-default">Get</button>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">Animate</h2>
+          <p>
+            <input id="switch-animate" type="checkbox" checked>
+          </p>
+          <p>
+            <button type="button" data-toggle="animate" class="btn btn-default">Toggle</button>
+            <button type="button" data-get="animate" class="btn btn-default">Get</button>
+          </p>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">Disabled</h2>
+          <p>
+            <input id="switch-disabled" type="checkbox" checked disabled>
+          </p>
+          <p>
+            <button type="button" data-toggle="disabled" class="btn btn-default">Toggle</button>
+            <button type="button" data-get="disabled" class="btn btn-default">Get</button>
+          </p>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">Readonly</h2>
+          <p>
+            <input id="switch-readonly" type="checkbox" checked readonly>
+          </p>
+          <p>
+            <button type="button" data-toggle="readonly" class="btn btn-default">Toggle</button>
+            <button type="button" data-get="readonly" class="btn btn-default">Get</button>
+          </p>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">Indeterminate</h2>
+          <p>
+            <input id="switch-indeterminate" type="checkbox" checked data-indeterminate="true">
+          </p>
+          <p>
+            <button type="button" data-toggle="indeterminate" class="btn btn-default">Toggle</button>
+            <button type="button" data-get="indeterminate" class="btn btn-default">Get</button>
+          </p>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">Inverse</h2>
+          <p>
+            <input id="switch-inverse" type="checkbox" checked data-inverse="true">
+          </p>
+          <p>
+            <button type="button" data-toggle="inverse" class="btn btn-default">Toggle</button>
+            <button type="button" data-get="inverse" class="btn btn-default">Get</button>
+          </p>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">On Color</h2>
+          <p>
+            <input id="switch-onColor" type="checkbox" checked data-on-color="info">
+          </p>
+          <p class="btn-group">
+            <div class="btn-group">
+              <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>
+              <div role="menu" class="dropdown-menu">
+                <li><a data-set="onColor" data-value="primary">Primary</a></li>
+                <li><a data-set="onColor" data-value="info">Info</a></li>
+                <li><a data-set="onColor" data-value="success">Success</a></li>
+                <li><a data-set="onColor" data-value="warning">Warning</a></li>
+                <li><a data-set="onColor" data-value="default">Default</a></li>
+              </div>
+            </div>
+            <button type="button" data-get="onColor" class="btn btn-default">Get</button>
+          </p>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">Off Color</h2>
+          <p>
+            <input id="switch-offColor" type="checkbox" data-off-color="warning">
+          </p>
+          <p class="btn-group">
+            <div class="btn-group">
+              <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>
+              <div role="menu" class="dropdown-menu">
+                <li><a data-set="offColor" data-value="primary">Primary</a></li>
+                <li><a data-set="offColor" data-value="info">Info</a></li>
+                <li><a data-set="offColor" data-value="success">Success</a></li>
+                <li><a data-set="offColor" data-value="warning">Warning</a></li>
+                <li><a data-set="offColor" data-value="default">Default</a></li>
+              </div>
+            </div>
+            <button type="button" data-get="offColor" class="btn btn-default">Get</button>
+          </p>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">On Text</h2>
+          <p>
+            <input id="switch-onText" type="checkbox" checked data-on-text="Yes">
+          </p>
+          <div class="row">
+            <div class="col-sm-6">
+              <input type="text" data-set-text="onText" class="form-control">
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">Off Text</h2>
+          <p>
+            <input id="switch-offText" type="checkbox" data-off-text="No">
+          </p>
+          <div class="row">
+            <div class="col-sm-6">
+              <input type="text" data-set-text="offText" class="form-control">
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">Label Text</h2>
+          <p>
+            <input id="switch-labelText" type="checkbox" data-label-text="Label">
+          </p>
+          <div class="row">
+            <div class="col-sm-6">
+              <input type="text" data-set-text="labelText" class="form-control">
+            </div>
+          </div>
+        </div>
+      </div><br><br>
+      <div class="text-center">
+        <h2 class="h4">Radio All Off</h2>
+        <div class="row">
+          <div class="col-sm-6">
+            <h3 class="h5">Disabled</h3>
+            <input type="radio" name="radio1" checked class="switch-radio1">
+            <input type="radio" name="radio1" class="switch-radio1">
+            <input type="radio" name="radio1" class="switch-radio1">
+          </div>
+          <div class="col-sm-6">
+            <h3 class="h5">Enabled</h3>
+            <input type="radio" name="radio2" checked data-radio-all-off="true" class="switch-radio2">
+            <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
+            <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container bottom">
+      <p>
+        Licensed under the
+        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
+        · Created by
+        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
+        · Mantained by
+        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+      </p>
+    </div>
+    <script src="docs/js/jquery.min.js"></script>
+    <script src="docs/js/bootstrap.min.js"></script>
+    <script src="docs/js/highlight.js"></script>
+    <script src="dist/js/bootstrap-switch.js"></script>
+    <script src="docs/js/main.js"></script>
+  </body>
+</html>

gulpfile.coffee

@@ -1,14 +1,20 @@
 gulp = require 'gulp'
-plugins = require('gulp-load-plugins')()
+$ = require('gulp-load-plugins') lazy: false
+extend = require('util')._extend
+karma = require('karma').server
+karmaConfig = require './karma.json'
 pkg = require './package.json'
 name = pkg.name
 
-SOURCE_PATH = './src'
-DIST_PATH = './dist'
-DOCS_PATH = "./docs"
-SERVER_HOST = 'localhost'
-SERVER_PORT = 3000
-BANNER = """
+paths =
+  src: 'src'
+  dist: 'dist'
+  test: 'test'
+  docs: "./"
+server =
+  host: 'localhost'
+  port: 3000
+banner = """
   /* ========================================================================
    * <%= pkg.name %> - v<%= pkg.version %>
    * <%= pkg.homepage %>
@@ -35,81 +41,97 @@ BANNER = """
 
 gulp.task 'coffee', ->
   gulp
-  .src "#{SOURCE_PATH}/coffee/#{name}.coffee"
-  .pipe plugins.changed "#{DIST_PATH}/js"
-  .pipe plugins.coffeelint './coffeelint.json'
-  .pipe plugins.coffeelint.reporter()
-    .on 'error', plugins.util.log
-  .pipe plugins.coffee()
-    .on 'error', plugins.util.log
-  .pipe plugins.header BANNER, pkg: pkg
-  .pipe gulp.dest "#{DIST_PATH}/js"
-  .pipe plugins.uglify()
-  .pipe plugins.header BANNER, pkg: pkg
-  .pipe plugins.rename suffix: '.min'
-  .pipe gulp.dest "#{DIST_PATH}/js"
+  .src "#{paths.src}/coffee/#{name}.coffee"
+  .pipe $.changed "#{paths.dist}/js"
+  .pipe $.coffeelint 'coffeelint.json'
+  .pipe $.coffeelint.reporter()
+    .on 'error', $.util.log
+  .pipe $.coffee()
+    .on 'error', $.util.log
+  .pipe $.header banner, pkg: pkg
+  .pipe gulp.dest "#{paths.dist}/js"
+  .pipe gulp.dest paths.test
+  .pipe $.uglify()
+  .pipe $.header banner, pkg: pkg
+  .pipe $.rename suffix: '.min'
+  .pipe gulp.dest "#{paths.dist}/js"
 
 gulp.task 'less-bootstrap2', ->
   gulp
-  .src "#{SOURCE_PATH}/less/bootstrap2/build.less"
-  .pipe plugins.changed "#{DIST_PATH}/css/bootstrap2"
-  .pipe plugins.less()
-    .on 'error', plugins.util.log
-  .pipe plugins.header BANNER, pkg: pkg
-  .pipe plugins.rename basename: name
-  .pipe gulp.dest "#{DIST_PATH}/css/bootstrap2"
-  .pipe plugins.less compress: true, cleancss: true
-  .pipe plugins.header BANNER, pkg: pkg
-  .pipe plugins.rename suffix: '.min'
-  .pipe gulp.dest "#{DIST_PATH}/css/bootstrap2"
+  .src "#{paths.src}/less/bootstrap2/build.less"
+  .pipe $.changed "#{paths.dist}/css/bootstrap2"
+  .pipe $.less()
+    .on 'error', $.util.log
+  .pipe $.header banner, pkg: pkg
+  .pipe $.rename basename: name
+  .pipe gulp.dest "#{paths.dist}/css/bootstrap2"
+  .pipe $.less compress: true, cleancss: true
+  .pipe $.header banner, pkg: pkg
+  .pipe $.rename suffix: '.min'
+  .pipe gulp.dest "#{paths.dist}/css/bootstrap2"
 
 gulp.task 'less-bootstrap3', ->
   gulp
-  .src "#{SOURCE_PATH}/less/bootstrap3/build.less"
-  .pipe plugins.changed "#{DIST_PATH}/css/bootstrap3"
-  .pipe plugins.less()
-  .pipe plugins.header BANNER, pkg: pkg
-  .pipe plugins.rename basename: name
-  .pipe gulp.dest "#{DIST_PATH}/css/bootstrap3"
-  .pipe plugins.less compress: true, cleancss: true
-  .pipe plugins.header BANNER, pkg: pkg
-  .pipe plugins.rename suffix: '.min'
-  .pipe gulp.dest "#{DIST_PATH}/css/bootstrap3"
+  .src "#{paths.src}/less/bootstrap3/build.less"
+  .pipe $.changed "#{paths.dist}/css/bootstrap3"
+  .pipe $.less()
+  .pipe $.header banner, pkg: pkg
+  .pipe $.rename basename: name
+  .pipe gulp.dest "#{paths.dist}/css/bootstrap3"
+  .pipe $.less compress: true, cleancss: true
+  .pipe $.header banner, pkg: pkg
+  .pipe $.rename suffix: '.min'
+  .pipe gulp.dest "#{paths.dist}/css/bootstrap3"
 
 gulp.task 'docs', ->
   gulp
-  .src "#{SOURCE_PATH}/docs/*.jade"
-  .pipe plugins.changed './'
-  .pipe plugins.jade pretty: true
-  .pipe gulp.dest './'
+  .src "#{paths.src}/docs/*.jade"
+  .pipe $.changed paths.docs
+  .pipe $.jade pretty: true
+  .pipe gulp.dest paths.docs
+
+gulp.task 'test-coffee', ['coffee'], ->
+  gulp
+  .src "#{paths.src}/coffee/#{name}.tests.coffee"
+  .pipe $.changed paths.test
+  .pipe $.coffeelint 'coffeelint.json'
+  .pipe $.coffeelint.reporter()
+    .on 'error', $.util.log
+  .pipe $.coffee()
+    .on 'error', $.util.log
+  .pipe gulp.dest paths.test
+
+gulp.task 'test-go', ['test-coffee'], (done) ->
+  karma.start extend(karmaConfig, singleRun: true), done
 
 gulp.task 'connect', ['docs'], ->
-  plugins.connect.server
+  $.connect.server
     root: [__dirname]
-    host: SERVER_HOST
-    port: SERVER_PORT
+    host: server.host
+    port: server.port
     livereload: true
 
 gulp.task 'open', ['connect'], ->
   gulp
-  .src './index.html'
-  .pipe plugins.open '', url: "http://#{SERVER_HOST}:#{SERVER_PORT}"
+  .src 'index.html'
+  .pipe $.open '', url: "http://#{server.host}:#{server.port}"
 
 gulp.task 'watch', ['connect'], ->
-  gulp.watch "#{SOURCE_PATH}/coffee/#{name}.coffee", ['coffee']
-  gulp.watch "#{SOURCE_PATH}/less/bootstrap2/*.less", ['less-bootstrap2']
-  gulp.watch "#{SOURCE_PATH}/less/bootstrap3/*.less", ['less-bootstrap3']
-  gulp.watch "#{SOURCE_PATH}/docs/*.jade", ['docs']
+  gulp.watch "#{paths.src}/coffee/#{name}.coffee", ['coffee']
+  gulp.watch "#{paths.src}/less/bootstrap2/*.less", ['less-bootstrap2']
+  gulp.watch "#{paths.src}/less/bootstrap3/*.less", ['less-bootstrap3']
+  gulp.watch "#{paths.src}/docs/*.jade", ['docs']
   gulp.watch [
-    "#{DIST_PATH}/js/**/*.js"
-    "#{DIST_PATH}/css/**/*.css"
-    './*.html'
+    "#{paths.dist}/js/**/*.js"
+    "#{paths.dist}/css/**/*.css"
+    '*.html'
   ]
   .on 'change', (event) ->
     gulp.src event.path
-    .pipe plugins.connect.reload()
+    .pipe $.connect.reload()
 
 gulp.task 'server', ['connect', 'open', 'watch']
 gulp.task 'less', ['less-bootstrap2', 'less-bootstrap3']
 gulp.task 'dist', ['coffee', 'less']
+gulp.task 'test', ['coffee', 'test-coffee', 'test-go']
 gulp.task 'default', ['dist', 'docs', 'server']

index.html

@@ -40,12 +40,17 @@
                 <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
               </ul>
             </li>
-            <li><a href="#new">What's new</a></li>
-            <li><a href="#start">Start</a></li>
+            <li><a href="index.html">Start</a></li>
+            <li><a href="examples.html">Examples</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
-                <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>
-                <li><a href="/documentation-2.html">Version 2.0.1 (Legacy)</a></li>
+                <li class="dropdown-header">Version 3 (Stable)</li>
+                <li><a href="/options-3.html">Options</a></li>
+                <li><a href="/methods-3.html">Methods</a></li>
+                <li><a href="/events-3.html">Events</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
+                <li><a href="/documentation-2.html">Documentation</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -61,51 +66,35 @@
         <p>
           <input type="checkbox" name="download-version" checked data-size="large" data-on-text="3" data-off-text="2.0.1">
         </p>
-        <p><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" id="download-3" class="btn btn-lg btn-primary">Download 3</a><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip" id="download-2" class="btn btn-lg btn-primary">Download 2.0.1</a></p><br><br>
+        <p><a id="download-3" href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" class="btn btn-lg btn-primary">Download 3</a><a id="download-2" href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip" class="btn btn-lg btn-primary">Download 2.0.1</a></p><br><br>
         <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=watch&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="184" height="30"></iframe>
-        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=fork&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="144" height="30"></iframe><br><br><br>
+        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=fork&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="144" height="30"></iframe>
       </div>
-      <div class="alert alert-info">
-        <p>
-          <strong>Documentation in progress!</strong><br>
-          It might not seem, but it's actually a lot of work. The goal is to make it as cleanest, most readable and
-          understandable as possible.<br>
-          If you feel there is something missing, submit a
-          <a href="https://github.com/nostalgiaz/bootstrap-switch/pulls">pull request</a> with your changes. Every
-          help is needed. Many thanks.
-        </p>
-      </div>
-      <div id="new">
-        <h1 class="page-header">What's new in version 3</h1>
-        <ul>
-          <li>API redesign for a more intuitive use</li>
-          <li>Entire code source rewriting focused on cleanliness and performance</li>
-          <li>Initialization options can be passed as JavaScript object or written as <code>data-*</code></li>
-          <li>Plugin constructor publicly available from <code>$.fn.bootstrapSwitch.Constructor</code></li>
-          <li>Plugin instance publicly available calling <code>.data('bootstrap-switch')</code></li>
-          <li>Global overridable defaults options</li>
-          <li>Improved flexibility with <code>baseClass</code> and <code>wrapperClass</code> options</li>
-          <li>New <code>onInit</code> event</li>
-          <li>Event namespacing</li>
-          <li>Full Bootstrap 3 support</li>
-          <li>A lot of fixed bug, as usual</li>
-        </ul>
-      </div>
-      <div id="start">
-        <h1 class="page-header">Getting Started</h1>
-        <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
-        <pre><code>[...]
+      <!--
+      .alert.alert-info
+        p
+          | <strong>Documentation in progress!</strong><br>
+          | It might not seem, but it's actually a lot of work. The goal is to make it as cleanest, most readable and
+          | understandable as possible.<br>
+          | If you feel there is something missing, submit a
+          | <a href="https://github.com/nostalgiaz/bootstrap-switch/pulls">pull request</a> with your changes. Every
+          | help is needed. Many thanks.
+      
+      -->
+      <h1 class="page-header">Getting Started</h1>
+      <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
+      <pre><code>[...]
 &lt;link href="bootstrap.css" rel="stylesheet"&gt;
 &lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
 &lt;script src="jquery.js"&gt;&lt;/script&gt;
 &lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
 [...]</code></pre>
-        <p>Add your checkbox.</p>
-        <pre><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></pre>
-        <p>Initialize Bootstrap Switch.</p>
-        <pre><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
-        <p>Enjoy.</p>
-      </div>
+      <p>Add your checkbox.</p>
+      <pre><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></pre>
+      <p>Initialize Bootstrap Switch.</p>
+      <pre><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
+      <p>Enjoy.</p>
+      <div class="text-center"><a href="examples.html" class="btn btn-lg btn-info">See Examples</a>&nbsp;<a href="documentation-3.html" class="btn btn-lg btn-default">Browse Documentation</a></div>
     </div>
     <div class="container bottom">
       <p>

karma.json

@@ -0,0 +1,19 @@
+{
+  "frameworks": ["jasmine"],
+  "files": [
+    "bower_components/jquery/dist/jquery.js",
+    "bower_components/bootstrap/dist/js/bootstrap.js",
+    "test/bootstrap-switch.js",
+    "test/bootstrap-switch.tests.js"
+  ],
+  "reporters": ["progress"],
+  "port": 9876,
+  "colors": true,
+  "autoWatch": true,
+  "browsers": ["Firefox"],
+  "singleRun": false,
+  "plugins": [
+    "karma-jasmine",
+    "karma-firefox-launcher"
+  ]
+}

main.html

@@ -40,12 +40,17 @@
                 <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
               </ul>
             </li>
-            <li><a href="#new">What's new</a></li>
-            <li><a href="#start">Start</a></li>
+            <li><a href="index.html">Start</a></li>
+            <li><a href="examples.html">Examples</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
-                <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>
-                <li><a href="/documentation-2.html">Version 2.0.1 (Legacy)</a></li>
+                <li class="dropdown-header">Version 3 (Stable)</li>
+                <li><a href="/options-3.html">Options</a></li>
+                <li><a href="/methods-3.html">Methods</a></li>
+                <li><a href="/events-3.html">Events</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
+                <li><a href="/documentation-2.html">Documentation</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>

methods-3.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
+    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
+    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
+    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
+    <link href="docs/css/highlight.css" rel="stylesheet">
+    <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="docs/css/main.css" rel="stylesheet">
+    <script>
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-43092768-1']);
+      _gaq.push(['_trackPageview']);
+      (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+  <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+        </div>
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3 (Stable)</a></li>
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
+              </ul>
+            </li>
+            <li><a href="index.html">Start</a></li>
+            <li><a href="examples.html">Examples</a></li>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li class="dropdown-header">Version 3 (Stable)</li>
+                <li><a href="/options-3.html">Options</a></li>
+                <li><a href="/methods-3.html">Methods</a></li>
+                <li><a href="/events-3.html">Events</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
+                <li><a href="/documentation-2.html">Documentation</a></li>
+              </ul>
+            </li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <div class="container content">
+      <h1 class="page-header">Methods &nbsp;<small>Version 3 (Stable)</small></h1>
+      <p>In Bootstrap Switch, every option is also a method.</p>
+      <p>If the second parameter is omitted, the method return the current value.</p>
+      <p>You can invoke methods as follows:</p>
+      <pre><code>$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);</code></pre>
+      <h2>Additional Methods</h2>
+      <table class="table table-bordered table-striped table-responsive">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>toggleState</td>
+            <td>Toggle the switch state</td>
+          </tr>
+          <tr>
+            <td>toggleAnimate</td>
+            <td>Toggle the animate option</td>
+          </tr>
+          <tr>
+            <td>toggleDisabled</td>
+            <td>Toggle the disabled state</td>
+          </tr>
+          <tr>
+            <td>toggleReadonly</td>
+            <td>Toggle the readonly state</td>
+          </tr>
+          <tr>
+            <td>toggleIndeterminate</td>
+            <td>Toggle the indeterminate state</td>
+          </tr>
+          <tr>
+            <td>toggleInverse</td>
+            <td>Toggle the inverse option</td>
+          </tr>
+          <tr>
+            <td>destroy</td>
+            <td>Destroy the instance of Bootstrap Switch</td>
+          </tr>
+        </tbody>
+      </table>
+      <h2>Special Behaviours</h2>
+      <ul>
+        <li>The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
+        <li>The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
+        <li>The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.</li>
+      </ul>
+    </div>
+    <div class="container bottom">
+      <p>
+        Licensed under the
+        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
+        · Created by
+        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
+        · Mantained by
+        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+      </p>
+    </div>
+    <script src="docs/js/jquery.min.js"></script>
+    <script src="docs/js/bootstrap.min.js"></script>
+    <script src="docs/js/highlight.js"></script>
+    <script src="dist/js/bootstrap-switch.js"></script>
+    <script src="docs/js/main.js"></script>
+  </body>
+</html>

options-3.html

@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
+    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
+    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
+    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
+    <link href="docs/css/highlight.css" rel="stylesheet">
+    <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="docs/css/main.css" rel="stylesheet">
+    <script>
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-43092768-1']);
+      _gaq.push(['_trackPageview']);
+      (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+  <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+        </div>
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3 (Stable)</a></li>
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
+              </ul>
+            </li>
+            <li><a href="index.html">Start</a></li>
+            <li><a href="examples.html">Examples</a></li>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li class="dropdown-header">Version 3 (Stable)</li>
+                <li><a href="/options-3.html">Options</a></li>
+                <li><a href="/methods-3.html">Methods</a></li>
+                <li><a href="/events-3.html">Events</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
+                <li><a href="/documentation-2.html">Documentation</a></li>
+              </ul>
+            </li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <div class="container content">
+      <h1 class="page-header">Options &nbsp;<small>Version 3 (Stable)</small></h1>
+      <table class="table table-bordered table-striped table-responsive">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Attribute</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Values</th>
+            <th>Default</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>state</td>
+            <td>checked</td>
+            <td>Boolean</td>
+            <td>The checkbox state</td>
+            <td>true, false</td>
+            <td>true</td>
+          </tr>
+          <tr>
+            <td>size</td>
+            <td>data-size</td>
+            <td>String</td>
+            <td>The checkbox state</td>
+            <td>null, 'mini', 'small', 'normal', 'large'</td>
+            <td>null</td>
+          </tr>
+          <tr>
+            <td>animate</td>
+            <td>data-animate</td>
+            <td>Boolean</td>
+            <td>Animate the switch</td>
+            <td>true, false</td>
+            <td>true</td>
+          </tr>
+          <tr>
+            <td>disabled</td>
+            <td>disabled</td>
+            <td>Boolean</td>
+            <td>Disable state</td>
+            <td>true, false</td>
+            <td>false</td>
+          </tr>
+          <tr>
+            <td>readonly</td>
+            <td>readonly</td>
+            <td>Boolean</td>
+            <td>Readonly state</td>
+            <td>true, false</td>
+            <td>false</td>
+          </tr>
+          <tr>
+            <td>indeterminate</td>
+            <td>data-indeterminate</td>
+            <td>Boolean</td>
+            <td>Indeterminate state</td>
+            <td>true, false</td>
+            <td>false</td>
+          </tr>
+          <tr>
+            <td>inverse</td>
+            <td>data-inverse</td>
+            <td>Boolean</td>
+            <td>Inverse switch direction</td>
+            <td>true, false</td>
+            <td>false</td>
+          </tr>
+          <tr>
+            <td>radioAllOff</td>
+            <td>data-radio-all-off</td>
+            <td>Boolean</td>
+            <td>Allow this radio button to be unchecked by the user</td>
+            <td>true, false</td>
+            <td>false</td>
+          </tr>
+          <tr>
+            <td>onColor</td>
+            <td>data-on-color</td>
+            <td>String</td>
+            <td>Color of the left side of the switch</td>
+            <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+            <td>'primary'</td>
+          </tr>
+          <tr>
+            <td>offColor</td>
+            <td>data-off-color</td>
+            <td>String</td>
+            <td>Color of the right side of the switch</td>
+            <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+            <td>'default'</td>
+          </tr>
+          <tr>
+            <td>onText</td>
+            <td>data-on-text</td>
+            <td>String</td>
+            <td>Text of the left side of the switch</td>
+            <td>String</td>
+            <td>'ON'</td>
+          </tr>
+          <tr>
+            <td>offText</td>
+            <td>data-off-text</td>
+            <td>String</td>
+            <td>Text of the right side of the switch</td>
+            <td>String</td>
+            <td>'OFF'</td>
+          </tr>
+          <tr>
+            <td>labelText</td>
+            <td>data-label-text</td>
+            <td>String</td>
+            <td>Text of the center handle of the switch</td>
+            <td>String</td>
+            <td>'&amp;nbsp;'</td>
+          </tr>
+          <tr>
+            <td>baseClass</td>
+            <td>data-base-class</td>
+            <td>String</td>
+            <td>Global class prefix</td>
+            <td>String</td>
+            <td>'bootstrap-switch'</td>
+          </tr>
+          <tr>
+            <td>wrapperClass</td>
+            <td>data-wrapper-class</td>
+            <td>String | Array</td>
+            <td>Container element class(es)</td>
+            <td>String | Array</td>
+            <td>'wrapper'</td>
+          </tr>
+          <tr>
+            <td>onInit</td>
+            <td></td>
+            <td>Function</td>
+            <td>Callback function to execute on initialization</td>
+            <td>Function</td>
+            <td>
+              <pre><code class="javascript">function(event, state) {}</code></pre>
+            </td>
+          </tr>
+          <tr>
+            <td>onSwitchChange</td>
+            <td></td>
+            <td>Function</td>
+            <td>Callback function to execute on switch state change</td>
+            <td>Function</td>
+            <td>
+              <pre><code class="javascript">function(event, state) {}</code></pre>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <h2>Global Defaults Overriding</h2>
+      <p>Follow the jQuery convention to override the default options of the library. For instance:</p>
+      <pre><code>$.fn.bootstrapSwitch.defaults.size = 'large';
+$.fn.bootstrapSwitch.defaults.onColor = 'success';</code></pre>
+    </div>
+    <div class="container bottom">
+      <p>
+        Licensed under the
+        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
+        · Created by
+        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
+        · Mantained by
+        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+      </p>
+    </div>
+    <script src="docs/js/jquery.min.js"></script>
+    <script src="docs/js/bootstrap.min.js"></script>
+    <script src="docs/js/highlight.js"></script>
+    <script src="dist/js/bootstrap-switch.js"></script>
+    <script src="docs/js/main.js"></script>
+  </body>
+</html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap-switch",
   "description": "Turn checkboxes and radio buttons in toggle switches.",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "keywords": [
     "bootstrap",
     "switch",
@@ -37,20 +37,27 @@
   "license": "Apache Version 2",
   "readmeFilename": "README.md",
   "devDependencies": {
-    "gulp-coffee": "~1.4.3",
-    "gulp-util": "~2.2.17",
-    "gulp-header": "~1.0.2",
-    "gulp-uglify": "~0.3.1",
-    "gulp-coffeelint": "~0.3.3",
-    "gulp": "~3.8.1",
-    "gulp-less": "~1.2.3",
+    "gulp-coffee": "~2.2.0",
+    "gulp-util": "~3.0.1",
+    "gulp-header": "~1.1.1",
+    "gulp-uglify": "~1.0.1",
+    "gulp-coffeelint": "~0.4.0",
+    "gulp": "~3.8.8",
+    "gulp-less": "~1.3.6",
     "gulp-rename": "~1.2.0",
-    "gulp-open": "~0.2.8",
-    "gulp-load-plugins": "~0.5.1",
-    "gulp-jade": "~0.5.0",
-    "run-sequence": "~0.3.6",
-    "gulp-connect": "~2.0.5",
-    "coffee-script": "~1.7.1",
-    "gulp-changed": "~0.3.0"
+    "gulp-open": "~0.3.0",
+    "gulp-load-plugins": "~0.7.0",
+    "gulp-jade": "~0.9.0",
+    "run-sequence": "~1.0.1",
+    "gulp-connect": "~2.0.6",
+    "coffee-script": "~1.8.0",
+    "gulp-changed": "~1.0.0",
+    "karma": "~0.12.24",
+    "karma-firefox-launcher": "~0.1.3",
+    "karma-jasmine": "~0.1.5"
+  },
+  "scripts": {
+    "build": "gulp dist",
+    "test": "gulp test"
   }
 }

src/coffee/bootstrap-switch.coffee

@@ -11,6 +11,8 @@ do ($ = window.jQuery, window) ->
         disabled: @$element.is ":disabled"
         readonly: @$element.is "[readonly]"
         indeterminate: @$element.data "indeterminate"
+        inverse: @$element.data "inverse"
+        radioAllOff: @$element.data "radio-all-off"
         onColor: @$element.data "on-color"
         offColor: @$element.data "off-color"
         onText: @$element.data "on-text"
@@ -18,7 +20,6 @@ do ($ = window.jQuery, window) ->
         labelText: @$element.data "label-text"
         baseClass: @$element.data "base-class"
         wrapperClass: @$element.data "wrapper-class"
-        radioAllOff: @$element.data "radio-all-off"
       , options
       @$wrapper = $ "<div>",
         class: do =>
@@ -30,6 +31,7 @@ do ($ = window.jQuery, window) ->
           classes.push "#{@options.baseClass}-disabled" if @options.disabled
           classes.push "#{@options.baseClass}-readonly" if @options.readonly
           classes.push "#{@options.baseClass}-indeterminate" if @options.indeterminate
+          classes.push "#{@options.baseClass}-inverse" if @options.inverse
           classes.push "#{@options.baseClass}-id-#{@$element.attr("id")}" if @$element.attr "id"
           classes.join " "
       @$container = $ "<div>",
@@ -57,9 +59,9 @@ do ($ = window.jQuery, window) ->
 
       # insert handles and label and trigger event
       @$element
-      .before(@$on)
+      .before(if @options.inverse then @$off else @$on)
       .before(@$label)
-      .before(@$off)
+      .before(if @options.inverse then @$on else @$off)
       .trigger "init.bootstrapSwitch"
 
       @_elementHandlers()
@@ -73,18 +75,26 @@ do ($ = window.jQuery, window) ->
 
     state: (value, skip) ->
       return @options.state if typeof value is "undefined"
-      return @$element if @options.disabled or @options.readonly or @options.indeterminate
+      return @$element if @options.disabled or @options.readonly
       return @$element if @options.state and not @options.radioAllOff and @$element.is ':radio'
 
-      value = not not value
+      if @options.indeterminate
+        @indeterminate false
+        value = true
+      else
+        value = not not value
 
       @$element.prop("checked", value).trigger "change.bootstrapSwitch", skip
       @$element
 
     toggleState: (skip) ->
-      return @$element if @options.disabled or @options.readonly or @options.indeterminate
+      return @$element if @options.disabled or @options.readonly
 
-      @$element.prop("checked", not @options.state).trigger "change.bootstrapSwitch", skip
+      if @options.indeterminate
+        @indeterminate false
+        @state true
+      else
+        @$element.prop("checked", not @options.state).trigger "change.bootstrapSwitch", skip
 
     size: (value) ->
       return @options.size if typeof value is "undefined"
@@ -103,6 +113,11 @@ do ($ = window.jQuery, window) ->
       @options.animate = value
       @$element
 
+    toggleAnimate: ->
+      @$wrapper.toggleClass "#{@options.baseClass}-animate"
+      @options.animate = not @options.animate
+      @$element
+
     disabled: (value) ->
       return @options.disabled if typeof value is "undefined"
 
@@ -151,6 +166,32 @@ do ($ = window.jQuery, window) ->
       @options.indeterminate = not @options.indeterminate
       @$element
 
+    inverse: (value) ->
+      return @options.inverse if typeof value is "undefined"
+
+      value = not not value
+
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-inverse")
+      $on = @$on.clone true
+      $off = @$off.clone true
+      @$on.replaceWith $off
+      @$off.replaceWith $on
+      @$on = $off
+      @$off = $on
+      @options.inverse = value
+      @$element
+
+    toggleInverse: ->
+      @$wrapper.toggleClass "#{@options.baseClass}-inverse"
+      $on = @$on.clone true
+      $off = @$off.clone true
+      @$on.replaceWith $off
+      @$off.replaceWith $on
+      @$on = $off
+      @$off = $on
+      @options.inverse = not @options.inverse
+      @$element
+
     onColor: (value) ->
       color = @options.onColor
 
@@ -267,7 +308,7 @@ do ($ = window.jQuery, window) ->
           @$wrapper.removeClass "#{@options.baseClass}-focused"
 
         "keydown.bootstrapSwitch": (e) =>
-          return if not e.which or @options.disabled or @options.readonly or @options.indeterminate
+          return if not e.which or @options.disabled or @options.readonly
 
           switch e.which
             when 37
@@ -313,7 +354,7 @@ do ($ = window.jQuery, window) ->
           @$element.trigger "focus.bootstrapSwitch"
 
         "mousedown.bootstrapSwitch touchstart.bootstrapSwitch": (e) =>
-          return if @isLabelDragging or @options.disabled or @options.readonly or @options.indeterminate
+          return if @isLabelDragging or @options.disabled or @options.readonly
 
           e.preventDefault()
 
@@ -326,8 +367,10 @@ do ($ = window.jQuery, window) ->
           e.preventDefault()
 
           if @isLabelDragged
+            state = parseInt(@$container.css("margin-left"), 10) > -(@$container.width() / 6)
+
             @isLabelDragged = false
-            @state parseInt(@$container.css("margin-left"), 10) > -(@$container.width() / 6)
+            @state if @options.inverse then not state else state
             @$wrapper.addClass "#{@options.baseClass}-animate" if @options.animate
             @$container.css "margin-left", ""
           else
@@ -378,6 +421,8 @@ do ($ = window.jQuery, window) ->
     disabled: false
     readonly: false
     indeterminate: false
+    inverse: false
+    radioAllOff: false
     onColor: "primary"
     offColor: "default"
     onText: "ON"
@@ -385,7 +430,6 @@ do ($ = window.jQuery, window) ->
     labelText: "&nbsp;"
     baseClass: "bootstrap-switch"
     wrapperClass: "wrapper"
-    radioAllOff: false
     onInit: ->
     onSwitchChange: ->
 

src/coffee/bootstrap-switch.tests.coffee

@@ -0,0 +1,27 @@
+describe "Bootstrap Switch", ->
+
+  beforeEach ->
+    $.support.transition = false
+    $.fx.off = true
+
+  afterEach ->
+    $(".#{$.fn.bootstrapSwitch.defaults.baseClass}").bootstrapSwitch "destroy"
+
+  createElement = ->
+    $("<input>",
+      type: "checkbox"
+      class: "switch"
+    ).appendTo "body"
+
+  getOptions = ($element) ->
+    $element.data("bootstrap-switch").options
+
+  it "should set the default options as element options, except state", ->
+    $switch = createElement().prop("checked", true).bootstrapSwitch()
+    expect(getOptions($switch)).toEqual $.fn.bootstrapSwitch.defaults
+
+  it "should override default options with initialization ones", ->
+    $switch = createElement().prop("checked", false).bootstrapSwitch()
+    $switch2 = createElement().bootstrapSwitch state: false
+    expect(getOptions($switch).state).toBe false
+    expect(getOptions($switch2).state).toBe false

src/docs/documentation-2.jade

@@ -1,7 +1,9 @@
 extends main
 
 block content
-  h1.page-header Documentation 2.0.1 (Legacy)
+  h1.page-header
+    | Documentation  
+    small Version 2.0.1 (Legacy)
 
   #options-2
     h2.page-header Options

src/docs/documentation-3.jade

@@ -1,228 +0,0 @@
-extends main
-
-block content
-  h1.page-header Documentation 3 (Stable)
-
-  #options-3
-    h2.page-header Options
-
-    table.table.table-bordered.table-striped.table-responsive
-      thead
-        tr
-          th Name
-          th Attribute
-          th Type
-          th Description
-          th Values
-          th Default
-      tbody
-        tr
-          td state
-          td checked
-          td Boolean
-          td The checkbox state
-          td true, false
-          td true
-        tr
-          td size
-          td data-size
-          td String
-          td The checkbox state
-          td null, 'mini', 'small', 'normal', 'large'
-          td null
-        tr
-          td animate
-          td data-animate
-          td Boolean
-          td Animate the switch
-          td true, false
-          td true
-        tr
-          td disabled
-          td disabled
-          td Boolean
-          td Disable state
-          td true, false
-          td false
-        tr
-          td readonly
-          td readonly
-          td Boolean
-          td Readonly state
-          td true, false
-          td false
-        tr
-          td indeterminate
-          td
-          td Boolean
-          td indeterminate state
-          td true, false
-          td false
-        tr
-          td onColor
-          td data-on-color
-          td String
-          td Color of the left side of the switch
-          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-          td 'primary'
-        tr
-          td offColor
-          td data-off-color
-          td String
-          td Color of the right side of the switch
-          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-          td 'default'
-        tr
-          td onText
-          td data-on-text
-          td String
-          td Text of the left side of the switch
-          td String
-          td 'ON'
-        tr
-          td offText
-          td data-off-text
-          td String
-          td Text of the right side of the switch
-          td String
-          td 'OFF'
-        tr
-          td labelText
-          td data-label-text
-          td String
-          td Text of the center handle of the switch
-          td String
-          td ' '
-        tr
-          td baseClass
-          td data-base-class
-          td String
-          td Global class prefix
-          td String
-          td 'bootstrap-switch'
-        tr
-          td wrapperClass
-          td data-wrapper-class
-          td String | Array
-          td Container element class(es)
-          td String | Array
-          td 'wrapper'
-        tr
-          td onInit
-          td
-          td Function
-          td Callback function to execute on initialization
-          td Function
-          td: pre: code.javascript function(event, state) {}
-        tr
-          td onSwitchChange
-          td
-          td Function
-          td Callback function to execute on switch state change
-          td Function
-          td: pre: code.javascript function(event, state) {}
-        tr
-          td radioAllOff
-          td data-radio-all-off
-          td Boolean
-          td Allow this radio button to be unchecked by the user
-          td true, false
-          td false
-
-
-    h3 Global Defaults Overriding
-
-    p Follow the jQuery convention to override the default options of the library. For instance:
-    pre
-      code
-        | $.fn.bootstrapSwitch.defaults.size = 'large';
-        | $.fn.bootstrapSwitch.defaults.onColor = 'success';
-
-  #methods-3
-    h2.page-header Methods
-
-    p In Bootstrap Switch, every option is also a method.
-    p If the second parameter is omitted, the method return the current value.
-    p You can invoke methods as follows:
-    pre: code $('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);
-
-    h3 Additional Methods
-
-    table.table.table-bordered.table-striped.table-responsive
-      thead
-        tr
-          th Name
-          th Description
-      tbody
-        tr
-          td toggleState
-          td Toggle the switch state
-        tr
-          td toggleDisabled
-          td Toggle the disabled state
-        tr
-          td toggleReadonly
-          td Toggle the readonly state
-        tr
-          td destroy
-          td Destroy the instance of Bootstrap Switch
-
-    h3 Special Behaviours
-
-    ul
-      li The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
-      li The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
-      li The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.
-
-  #events-3
-    h2.page-header Events
-
-    p
-      | All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
-      | attach your handlers.<br>
-      | You can register to the emitted events as follow:
-
-    pre: code
-      | $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
-      |   console.log(this); // DOM element
-      |   console.log(event); // jQuery event
-      |   console.log(state); // true | false
-      | });
-
-    table.table.table-bordered.table-striped.table-responsive
-      thead
-        tr
-          th Name
-          th Description
-          th Parameters
-      tbody
-        tr
-          td init
-          td Triggered on initialization. 'this' refers to the DOM element.
-          td
-            | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)
-        tr
-          td switchChange
-          td Triggered on switch state change. 'this' refers to the DOM element.
-          td
-            | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
-            | state (true | false)
-
-  #examples-3
-    h2.page-header Examples
-
-    p To be included
-    //
-      h3 State
-      .row
-        .col-sm-6
-          input(type='checkbox', id='state-switch' checked)
-        .col-sm-6
-          .btn-group.pull-right
-            button(type='button', id='state-switch-state', class='btn btn-default') Get State
-            &nbsp;
-            button(type='button', id='state-switch-on', class='btn btn-default') Set On
-            &nbsp;
-            button(type='button', id='state-switch-off', class='btn btn-default') Set Off
-            &nbsp;
-            button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State

src/docs/events-3.jade

@@ -0,0 +1,37 @@
+extends main
+
+block content
+  h1.page-header
+    | Events  
+    small Version 3 (Stable)
+
+  p
+    | All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
+    | attach your handlers.<br>
+    | You can register to the emitted events as follow:
+
+  pre: code
+    | $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
+    |   console.log(this); // DOM element
+    |   console.log(event); // jQuery event
+    |   console.log(state); // true | false
+    | });
+
+  table.table.table-bordered.table-striped.table-responsive
+    thead
+      tr
+        th Name
+        th Description
+        th Parameters
+    tbody
+      tr
+        td init
+        td Triggered on initialization. 'this' refers to the DOM element.
+        td
+          | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)
+      tr
+        td switchChange
+        td Triggered on switch state change. 'this' refers to the DOM element.
+        td
+          | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
+          | state (true | false)

src/docs/examples.jade

@@ -0,0 +1,141 @@
+extends main
+
+block content
+  h1.page-header Examples
+
+  .row
+    .col-sm-6.col-lg-4
+      h2.h4 State
+      p
+        input#switch-state(type='checkbox', checked)
+      .btn-group
+        button.btn.btn-default(type='button' data-toggle='state') Toggle
+        button.btn.btn-default(type='button', data-set='state', data-value='true') Set true
+        button.btn.btn-default(type='button', data-set='state', data-value='false') Set false
+        button.btn.btn-default(type='button', data-get='state') Get
+
+    .col-sm-6.col-lg-4
+      h2.h4 Size
+      p
+        input#switch-size(type='checkbox', checked, data-size='mini')
+      .btn-group
+        button.btn.btn-default(type='button', data-set='size', data-value='mini') Mini
+        button.btn.btn-default(type='button', data-set='size', data-value='small') Small
+        button.btn.btn-default(type='button', data-set='size', data-value='normal') Normal
+        button.btn.btn-default(type='button', data-set='size', data-value='large') Large
+        button.btn.btn-default(type='button', data-get='size') Get
+
+    .col-sm-6.col-lg-4
+      h2.h4 Animate
+      p
+        input#switch-animate(type='checkbox', checked)
+      p
+        button.btn.btn-default(type='button', data-toggle='animate') Toggle
+        button.btn.btn-default(type='button', data-get='animate') Get
+
+    .col-sm-6.col-lg-4
+      h2.h4 Disabled
+      p
+        input#switch-disabled(type='checkbox', checked, disabled)
+      p
+        button.btn.btn-default(type='button', data-toggle='disabled') Toggle
+        button.btn.btn-default(type='button', data-get='disabled') Get
+
+    .col-sm-6.col-lg-4
+      h2.h4 Readonly
+      p
+        input#switch-readonly(type='checkbox', checked, readonly)
+      p
+        button.btn.btn-default(type='button', data-toggle='readonly') Toggle
+        button.btn.btn-default(type='button', data-get='readonly') Get
+
+    .col-sm-6.col-lg-4
+      h2.h4 Indeterminate
+      p
+        input#switch-indeterminate(type='checkbox', checked, data-indeterminate='true')
+      p
+        button.btn.btn-default(type='button', data-toggle='indeterminate') Toggle
+        button.btn.btn-default(type='button', data-get='indeterminate') Get
+
+    .col-sm-6.col-lg-4
+      h2.h4 Inverse
+      p
+        input#switch-inverse(type='checkbox', checked, data-inverse='true')
+      p
+        button.btn.btn-default(type='button', data-toggle='inverse') Toggle
+        button.btn.btn-default(type='button', data-get='inverse') Get
+
+    .col-sm-6.col-lg-4
+      h2.h4 On Color
+      p
+        input#switch-onColor(type='checkbox', checked, data-on-color='info')
+      p.btn-group
+        .btn-group
+          button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
+            | Set  
+            span.caret
+          .dropdown-menu(role='menu')
+            li: a(data-set='onColor', data-value='primary') Primary
+            li: a(data-set='onColor', data-value='info') Info
+            li: a(data-set='onColor', data-value='success') Success
+            li: a(data-set='onColor', data-value='warning') Warning
+            li: a(data-set='onColor', data-value='default') Default
+        button.btn.btn-default(type='button', data-get='onColor') Get
+
+    .col-sm-6.col-lg-4
+      h2.h4 Off Color
+      p
+        input#switch-offColor(type='checkbox', data-off-color='warning')
+      p.btn-group
+        .btn-group
+          button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
+            | Set  
+            span.caret
+          .dropdown-menu(role='menu')
+            li: a(data-set='offColor', data-value='primary') Primary
+            li: a(data-set='offColor', data-value='info') Info
+            li: a(data-set='offColor', data-value='success') Success
+            li: a(data-set='offColor', data-value='warning') Warning
+            li: a(data-set='offColor', data-value='default') Default
+        button.btn.btn-default(type='button', data-get='offColor') Get
+
+    .col-sm-6.col-lg-4
+      h2.h4 On Text
+      p
+        input#switch-onText(type='checkbox', checked, data-on-text='Yes')
+      .row
+        .col-sm-6
+          input.form-control(type='text', data-set-text='onText')
+
+    .col-sm-6.col-lg-4
+      h2.h4 Off Text
+      p
+        input#switch-offText(type='checkbox', data-off-text='No')
+      .row
+        .col-sm-6
+          input.form-control(type='text', data-set-text='offText')
+
+    .col-sm-6.col-lg-4
+      h2.h4 Label Text
+      p
+        input#switch-labelText(type='checkbox', data-label-text='Label')
+      .row
+        .col-sm-6
+          input.form-control(type='text', data-set-text='labelText')
+
+  br
+  br
+
+  .text-center
+    h2.h4 Radio All Off
+    .row
+      .col-sm-6
+        h3.h5 Disabled
+        input.switch-radio1(type='radio', name='radio1', checked)
+        input.switch-radio1(type='radio', name='radio1')
+        input.switch-radio1(type='radio', name='radio1')
+      .col-sm-6
+        h3.h5 Enabled
+        input.switch-radio2(type='radio', name='radio2', checked, data-radio-all-off='true')
+        input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true')
+        input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true')

src/docs/index.jade

@@ -8,57 +8,44 @@ block content
     p Select the version to download:
     p: input(type='checkbox', name='download-version', checked, data-size='large', data-on-text='3', data-off-text='2.0.1')
     p
-      a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', id='download-3', class='btn btn-lg btn-primary') Download 3
-      a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip', id='download-2' class='btn btn-lg btn-primary') Download 2.0.1
+      a.btn.btn-lg.btn-primary#download-3(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') Download 3
+      a.btn.btn-lg.btn-primary#download-2(href='https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip') Download 2.0.1
     br
     br
     iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='184', height='30')
     iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='144', height='30')
-    br
-    br
-    br
 
-  .alert.alert-info
-    p
-      | <strong>Documentation in progress!</strong><br>
-      | It might not seem, but it's actually a lot of work. The goal is to make it as cleanest, most readable and
-      | understandable as possible.<br>
-      | If you feel there is something missing, submit a
-      | <a href="https://github.com/nostalgiaz/bootstrap-switch/pulls">pull request</a> with your changes. Every
-      | help is needed. Many thanks.
+  //
+    .alert.alert-info
+      p
+        | <strong>Documentation in progress!</strong><br>
+        | It might not seem, but it's actually a lot of work. The goal is to make it as cleanest, most readable and
+        | understandable as possible.<br>
+        | If you feel there is something missing, submit a
+        | <a href="https://github.com/nostalgiaz/bootstrap-switch/pulls">pull request</a> with your changes. Every
+        | help is needed. Many thanks.
 
-  #new
-    h1.page-header What's new in version 3
+  h1.page-header Getting Started
 
-    ul
-      li API redesign for a more intuitive use
-      li Entire code source rewriting focused on cleanliness and performance
-      li Initialization options can be passed as JavaScript object or written as <code>data-*</code>
-      li Plugin constructor publicly available from <code>$.fn.bootstrapSwitch.Constructor</code>
-      li Plugin instance publicly available calling <code>.data('bootstrap-switch')</code>
-      li Global overridable defaults options
-      li Improved flexibility with <code>baseClass</code> and <code>wrapperClass</code> options
-      li New <code>onInit</code> event
-      li Event namespacing
-      li Full Bootstrap 3 support
-      li A lot of fixed bug, as usual
+  p Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
+  pre: code
+    | [...]
+    | &lt;link href="bootstrap.css" rel="stylesheet"&gt;
+    | &lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
+    | &lt;script src="jquery.js"&gt;&lt;/script&gt;
+    | &lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
+    | [...]
 
-  #start
-    h1.page-header Getting Started
+  p Add your checkbox.
+  pre: code &lt;input type="checkbox" name="my-checkbox" checked&gt;
 
-    p Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
-    pre: code
-      | [...]
-      | &lt;link href="bootstrap.css" rel="stylesheet"&gt;
-      | &lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
-      | &lt;script src="jquery.js"&gt;&lt;/script&gt;
-      | &lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
-      | [...]
+  p Initialize Bootstrap Switch.
+  pre: code $("[name='my-checkbox']").bootstrapSwitch();
 
-    p Add your checkbox.
-    pre: code &lt;input type="checkbox" name="my-checkbox" checked&gt;
+  p Enjoy.
 
-    p Initialize Bootstrap Switch.
-    pre: code $("[name='my-checkbox']").bootstrapSwitch();
+  .text-center
+    a.btn.btn-lg.btn-info(href='examples.html') See Examples
+    | &nbsp;
+    a.btn.btn-lg.btn-default(href='documentation-3.html') Browse Documentation
 
-    p Enjoy.

src/docs/main.jade

@@ -46,15 +46,20 @@ html(lang='en')
               ul.dropdown-menu
                 li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') 3 (Stable)
                 li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip') 2.0.1 (Legacy)
-            li: a(href='#new') What's new
-            li: a(href='#start') Start
+            li: a(href='index.html') Start
+            li: a(href='examples.html') Examples
             li.dropdown
               a(href='#', data-toggle='dropdown')
                 | Documentation
                 span.caret
               ul.dropdown-menu
-                li: a(href='/documentation-3.html') Version 3 (Stable)
-                li: a(href='/documentation-2.html') Version 2.0.1 (Legacy)
+                li.dropdown-header Version 3 (Stable)
+                li: a(href='/options-3.html') Options
+                li: a(href='/methods-3.html') Methods
+                li: a(href='/events-3.html') Events
+                li.divider
+                li.dropdown-header Version 2.0.1 (Legacy)
+                li: a(href='/documentation-2.html') Documentation
             li: a(href='https://github.com/nostalgiaz/bootstrap-switch/issues') Bug reports
 
     .container.content

src/docs/methods-3.jade

@@ -0,0 +1,48 @@
+extends main
+
+block content
+  h1.page-header
+    | Methods  
+    small Version 3 (Stable)
+
+  p In Bootstrap Switch, every option is also a method.
+  p If the second parameter is omitted, the method return the current value.
+  p You can invoke methods as follows:
+  pre: code $('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);
+
+  h2 Additional Methods
+
+  table.table.table-bordered.table-striped.table-responsive
+    thead
+      tr
+        th Name
+        th Description
+    tbody
+      tr
+        td toggleState
+        td Toggle the switch state
+      tr
+        td toggleAnimate
+        td Toggle the animate option
+      tr
+        td toggleDisabled
+        td Toggle the disabled state
+      tr
+        td toggleReadonly
+        td Toggle the readonly state
+      tr
+        td toggleIndeterminate
+        td Toggle the indeterminate state
+      tr
+        td toggleInverse
+        td Toggle the inverse option
+      tr
+        td destroy
+        td Destroy the instance of Bootstrap Switch
+
+  h2 Special Behaviours
+
+  ul
+    li The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
+    li The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
+    li The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.

src/docs/options-3.jade

@@ -0,0 +1,144 @@
+extends main
+
+block content
+  h1.page-header
+    | Options  
+    small Version 3 (Stable)
+
+  table.table.table-bordered.table-striped.table-responsive
+    thead
+      tr
+        th Name
+        th Attribute
+        th Type
+        th Description
+        th Values
+        th Default
+    tbody
+      tr
+        td state
+        td checked
+        td Boolean
+        td The checkbox state
+        td true, false
+        td true
+      tr
+        td size
+        td data-size
+        td String
+        td The checkbox state
+        td null, 'mini', 'small', 'normal', 'large'
+        td null
+      tr
+        td animate
+        td data-animate
+        td Boolean
+        td Animate the switch
+        td true, false
+        td true
+      tr
+        td disabled
+        td disabled
+        td Boolean
+        td Disable state
+        td true, false
+        td false
+      tr
+        td readonly
+        td readonly
+        td Boolean
+        td Readonly state
+        td true, false
+        td false
+      tr
+        td indeterminate
+        td data-indeterminate
+        td Boolean
+        td Indeterminate state
+        td true, false
+        td false
+      tr
+        td inverse
+        td data-inverse
+        td Boolean
+        td Inverse switch direction
+        td true, false
+        td false
+      tr
+        td radioAllOff
+        td data-radio-all-off
+        td Boolean
+        td Allow this radio button to be unchecked by the user
+        td true, false
+        td false
+      tr
+        td onColor
+        td data-on-color
+        td String
+        td Color of the left side of the switch
+        td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+        td 'primary'
+      tr
+        td offColor
+        td data-off-color
+        td String
+        td Color of the right side of the switch
+        td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+        td 'default'
+      tr
+        td onText
+        td data-on-text
+        td String
+        td Text of the left side of the switch
+        td String
+        td 'ON'
+      tr
+        td offText
+        td data-off-text
+        td String
+        td Text of the right side of the switch
+        td String
+        td 'OFF'
+      tr
+        td labelText
+        td data-label-text
+        td String
+        td Text of the center handle of the switch
+        td String
+        td ' '
+      tr
+        td baseClass
+        td data-base-class
+        td String
+        td Global class prefix
+        td String
+        td 'bootstrap-switch'
+      tr
+        td wrapperClass
+        td data-wrapper-class
+        td String | Array
+        td Container element class(es)
+        td String | Array
+        td 'wrapper'
+      tr
+        td onInit
+        td
+        td Function
+        td Callback function to execute on initialization
+        td Function
+        td: pre: code.javascript function(event, state) {}
+      tr
+        td onSwitchChange
+        td
+        td Function
+        td Callback function to execute on switch state change
+        td Function
+        td: pre: code.javascript function(event, state) {}
+
+  h2 Global Defaults Overriding
+
+  p Follow the jQuery convention to override the default options of the library. For instance:
+  pre
+    code
+      | $.fn.bootstrapSwitch.defaults.size = 'large';
+      | $.fn.bootstrapSwitch.defaults.onColor = 'success';

src/less/bootstrap2/bootstrap-switch.less

@@ -54,14 +54,48 @@
     }
   }
 
+  &.@{bootstrap-switch-base}-disabled,
+  &.@{bootstrap-switch-base}-readonly,
+  &.@{bootstrap-switch-base}-indeterminate {
+    .opacity(50);
+    cursor: default !important;
+
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
+      cursor: default !important;
+    }
+  }
+
   &.@{bootstrap-switch-base}-animate {
 
     .@{bootstrap-switch-base}-container {
-      .transition(margin-left 0.5s);
+      .transition(margin-left .5s);
+    }
+  }
+
+  &.@{bootstrap-switch-base}-inverse {
+
+    .@{bootstrap-switch-base}-handle-on {
+      .border-left-radius(0);
+      .border-right-radius(4px);
+    }
+
+    .@{bootstrap-switch-base}-handle-off {
+      .border-right-radius(0);
+      .border-left-radius(4px);
     }
   }
 
-  &.@{bootstrap-switch-base}-on {
+  &.@{bootstrap-switch-base}-focused {
+    border-color: rgba(82, 168, 236, .8);
+    outline: 0;
+    outline: thin dotted \9;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6)");
+  }
+
+  &.@{bootstrap-switch-base}-on,
+  &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-off {
 
     .@{bootstrap-switch-base}-container {
       margin-left: 0%;
@@ -72,7 +106,8 @@
     }
   }
 
-  &.@{bootstrap-switch-base}-off {
+  &.@{bootstrap-switch-base}-off,
+  &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-on {
 
     .@{bootstrap-switch-base}-container {
       margin-left: -50%;
@@ -90,26 +125,6 @@
     }
   }
 
-  &.@{bootstrap-switch-base}-disabled,
-  &.@{bootstrap-switch-base}-readonly,
-  &.@{bootstrap-switch-base}-indeterminate {
-    .opacity(50);
-    cursor: default !important;
-
-    .@{bootstrap-switch-base}-handle-on,
-    .@{bootstrap-switch-base}-handle-off,
-    .@{bootstrap-switch-base}-label {
-      cursor: default !important;
-    }
-  }
-
-  &.@{bootstrap-switch-base}-focused {
-    border-color: rgba(82, 168, 236, .8);
-    outline: 0;
-    outline: thin dotted \9;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6)");
-  }
-
   .@{bootstrap-switch-base}-container {
     display: inline-block;
     width: 150%;
@@ -162,14 +177,6 @@
     }
   }
 
-  .@{bootstrap-switch-base}-handle-on {
-    .border-left-radius(4px);
-  }
-
-  .@{bootstrap-switch-base}-handle-off {
-    .border-right-radius(4px);
-  }
-
   .@{bootstrap-switch-base}-label {
     text-align: center;
     margin-top: -1px;
@@ -181,6 +188,14 @@
     .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark);
   }
 
+  .@{bootstrap-switch-base}-handle-on {
+    .border-left-radius(4px);
+  }
+
+  .@{bootstrap-switch-base}-handle-off {
+    .border-right-radius(4px);
+  }
+
   input[type='radio'],
   input[type='checkbox'] {
     position: absolute !important;

src/less/bootstrap3/bootstrap-switch.less

@@ -54,14 +54,48 @@
     }
   }
 
+  &.@{bootstrap-switch-base}-disabled,
+  &.@{bootstrap-switch-base}-readonly,
+  &.@{bootstrap-switch-base}-indeterminate {
+    .opacity(.5);
+    cursor: default !important;
+
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
+      cursor: default !important;
+    }
+  }
+
   &.@{bootstrap-switch-base}-animate {
 
     .@{bootstrap-switch-base}-container {
-      .transition(margin-left 0.5s);
+      .transition(margin-left .5s);
     }
   }
 
-  &.@{bootstrap-switch-base}-on {
+  &.@{bootstrap-switch-base}-inverse {
+
+    .@{bootstrap-switch-base}-handle-on {
+      .border-left-radius(0);
+      .border-right-radius(@border-radius-base - 1);
+    }
+
+    .@{bootstrap-switch-base}-handle-off {
+      .border-right-radius(0);
+      .border-left-radius(@border-radius-base - 1);
+    }
+  }
+
+  &.@{bootstrap-switch-base}-focused {
+    @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6);
+    border-color: @input-border-focus;
+    outline: 0;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+  }
+
+  &.@{bootstrap-switch-base}-on,
+  &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-off {
 
     .@{bootstrap-switch-base}-container {
       margin-left: 0%;
@@ -72,7 +106,8 @@
     }
   }
 
-  &.@{bootstrap-switch-base}-off {
+  &.@{bootstrap-switch-base}-off,
+  &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-on {
 
     .@{bootstrap-switch-base}-container {
       margin-left: -50%;
@@ -83,33 +118,14 @@
     }
   }
 
-  &.@{bootstrap-switch-base}-indeterminate {
+  &.@{bootstrap-switch-base}-indeterminate,
+  &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-indeterminate {
 
     .@{bootstrap-switch-base}-container {
       margin-left: -25%;
     }
   }
 
-  &.@{bootstrap-switch-base}-disabled,
-  &.@{bootstrap-switch-base}-readonly,
-  &.@{bootstrap-switch-base}-indeterminate {
-    .opacity(.5);
-    cursor: default !important;
-
-    .@{bootstrap-switch-base}-handle-on,
-    .@{bootstrap-switch-base}-handle-off,
-    .@{bootstrap-switch-base}-label {
-      cursor: default !important;
-    }
-  }
-
-  &.@{bootstrap-switch-base}-focused {
-    @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6);
-    border-color: @input-border-focus;
-    outline: 0;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
-  }
-
   .@{bootstrap-switch-base}-container {
     display: inline-block;
     width: 150%;
@@ -168,14 +184,6 @@
     }
   }
 
-  .@{bootstrap-switch-base}-handle-on {
-    .border-left-radius(@border-radius-base - 1);
-  }
-
-  .@{bootstrap-switch-base}-handle-off {
-    .border-right-radius(@border-radius-base - 1);
-  }
-
   .@{bootstrap-switch-base}-label {
     text-align: center;
     margin-top: -1px;
@@ -186,6 +194,14 @@
     background: @btn-default-bg;
   }
 
+  .@{bootstrap-switch-base}-handle-on {
+    .border-left-radius(@border-radius-base - 1);
+  }
+
+  .@{bootstrap-switch-base}-handle-off {
+    .border-right-radius(@border-radius-base - 1);
+  }
+
   input[type='radio'],
   input[type='checkbox'] {
     position: absolute !important;

src/test/bootstrap-switch.coffee

@@ -1 +0,0 @@
-describe "Bootstrap Switch", ->

test/bootstrap-switch.js

@@ -38,14 +38,15 @@
           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"),
           baseClass: this.$element.data("base-class"),
-          wrapperClass: this.$element.data("wrapper-class"),
-          radioAllOff: this.$element.data("radio-all-off")
+          wrapperClass: this.$element.data("wrapper-class")
         }, options);
         this.$wrapper = $("<div>", {
           "class": (function(_this) {
@@ -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")));
               }
@@ -105,7 +109,7 @@
         })(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).trigger("init.bootstrapSwitch");
         this._elementHandlers();
         this._handleHandlers();
         this._labelHandlers();
@@ -118,22 +122,32 @@
         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')) {
           return this.$element;
         }
-        value = !!value;
+        if (this.options.indeterminate) {
+          this.indeterminate(false);
+          value = true;
+        } else {
+          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;
         }
-        return this.$element.prop("checked", !this.options.state).trigger("change.bootstrapSwitch", skip);
+        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) {
@@ -160,6 +174,12 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.toggleAnimate = function() {
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-animate");
+        this.options.animate = !this.options.animate;
+        return this.$element;
+      };
+
       BootstrapSwitch.prototype.disabled = function(value) {
         if (typeof value === "undefined") {
           return this.options.disabled;
@@ -214,6 +234,36 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.inverse = function(value) {
+        var $off, $on;
+        if (typeof value === "undefined") {
+          return this.options.inverse;
+        }
+        value = !!value;
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + 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 = value;
+        return this.$element;
+      };
+
+      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;
+      };
+
       BootstrapSwitch.prototype.onColor = function(value) {
         var color;
         color = this.options.onColor;
@@ -362,7 +412,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) {
@@ -423,7 +473,7 @@
           })(this),
           "mousedown.bootstrapSwitch touchstart.bootstrapSwitch": (function(_this) {
             return function(e) {
-              if (_this.isLabelDragging || _this.options.disabled || _this.options.readonly || _this.options.indeterminate) {
+              if (_this.isLabelDragging || _this.options.disabled || _this.options.readonly) {
                 return;
               }
               e.preventDefault();
@@ -433,13 +483,15 @@
           })(this),
           "mouseup.bootstrapSwitch touchend.bootstrapSwitch": (function(_this) {
             return function(e) {
+              var state;
               if (!_this.isLabelDragging) {
                 return;
               }
               e.preventDefault();
               if (_this.isLabelDragged) {
+                state = parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6);
                 _this.isLabelDragged = false;
-                _this.state(parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6));
+                _this.state(_this.options.inverse ? !state : state);
                 if (_this.options.animate) {
                   _this.$wrapper.addClass("" + _this.options.baseClass + "-animate");
                 }
@@ -516,6 +568,8 @@
       disabled: false,
       readonly: false,
       indeterminate: false,
+      inverse: false,
+      radioAllOff: false,
       onColor: "primary",
       offColor: "default",
       onText: "ON",
@@ -523,7 +577,6 @@
       labelText: "&nbsp;",
       baseClass: "bootstrap-switch",
       wrapperClass: "wrapper",
-      radioAllOff: false,
       onInit: function() {},
       onSwitchChange: function() {}
     };

test/bootstrap-switch.tests.js

@@ -0,0 +1,36 @@
+(function() {
+  describe("Bootstrap Switch", function() {
+    var createElement, getOptions;
+    beforeEach(function() {
+      $.support.transition = false;
+      return $.fx.off = true;
+    });
+    afterEach(function() {
+      return $("." + $.fn.bootstrapSwitch.defaults.baseClass).bootstrapSwitch("destroy");
+    });
+    createElement = function() {
+      return $("<input>", {
+        type: "checkbox",
+        "class": "switch"
+      }).appendTo("body");
+    };
+    getOptions = function($element) {
+      return $element.data("bootstrap-switch").options;
+    };
+    it("should set the default options as element options, except state", function() {
+      var $switch;
+      $switch = createElement().prop("checked", true).bootstrapSwitch();
+      return expect(getOptions($switch)).toEqual($.fn.bootstrapSwitch.defaults);
+    });
+    return it("should override default options with initialization ones", function() {
+      var $switch, $switch2;
+      $switch = createElement().prop("checked", false).bootstrapSwitch();
+      $switch2 = createElement().bootstrapSwitch({
+        state: false
+      });
+      expect(getOptions($switch).state).toBe(false);
+      return expect(getOptions($switch2).state).toBe(false);
+    });
+  });
+
+}).call(this);