docs refinements, removed modifiers classes, small improvements

dist/js/bootstrap-switch.js

@@ -44,44 +44,26 @@
           onText: this.$element.data("on-text"),
           offText: this.$element.data("off-text"),
           labelText: this.$element.data("label-text"),
-          onModifierClass: "on",
-          offModifierClass: "off",
-          focusedModifierClass: "focused",
-          animateModifierClass: "animate",
-          disabledModifierClass: "disabled",
-          readonlyModifierClass: "readonly"
+          baseClass: this.$element.data("base-class"),
+          wrapperClass: this.$element.data("wrapper-class")
         });
         this.$wrapper = $("<div>", {
           "class": (function(_this) {
             return function() {
               var classes;
-              classes = ["" + _this.options.baseClass];
-              classes.push((function() {
-                var c, cls, _i, _len, _ref, _results;
-                if (!$.isArray(_this.options.wrapperClass)) {
-                  return "" + _this.options.baseClass + "-" + _this.options.wrapperClass;
-                }
-                cls = [];
-                _ref = _this.options.wrapperClass;
-                _results = [];
-                for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-                  c = _ref[_i];
-                  _results.push(cls.push("" + _this.options.baseClass + "-" + c));
-                }
-                return _results;
-              })());
-              classes.push(_this.options.state ? "" + _this.options.baseClass + "-" + _this.options.onModifierClass : "" + _this.options.baseClass + "-" + _this.options.offModifierClass);
+              classes = ["" + _this.options.baseClass].concat(_this._getClasses(_this.options.wrapperClass));
+              classes.push(_this.options.state ? "" + _this.options.baseClass + "-on" : "" + _this.options.baseClass + "-off");
               if (_this.options.size != null) {
                 classes.push("" + _this.options.baseClass + "-" + _this.options.size);
               }
               if (_this.options.animate) {
-                classes.push("" + _this.options.baseClass + "-" + _this.options.animateModifierClass);
+                classes.push("" + _this.options.baseClass + "-animate");
               }
               if (_this.options.disabled) {
-                classes.push("" + _this.options.baseClass + "-" + _this.options.disabledModifierClass);
+                classes.push("" + _this.options.baseClass + "-disabled");
               }
               if (_this.options.readonly) {
-                classes.push("" + _this.options.baseClass + "-" + _this.options.readonlyModifierClass);
+                classes.push("" + _this.options.baseClass + "-readonly");
               }
               if (_this.$element.attr("id")) {
                 classes.push("" + _this.options.baseClass + "-id-" + (_this.$element.attr("id")));
@@ -153,7 +135,9 @@
         if (this.options.size != null) {
           this.$wrapper.removeClass("" + this.options.baseClass + "-" + this.options.size);
         }
-        this.$wrapper.addClass("" + this.options.baseClass + "-" + value);
+        if (value) {
+          this.$wrapper.addClass("" + this.options.baseClass + "-" + value);
+        }
         this.options.size = value;
         return this.$element;
       };
@@ -163,7 +147,7 @@
           return this.options.animate;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-" + this.options.animateModifierClass);
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-animate");
         this.options.animate = value;
         return this.$element;
       };
@@ -173,7 +157,7 @@
           return this.options.disabled;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-" + this.options.disabledModifierClass);
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-disabled");
         this.$element.prop("disabled", value);
         this.options.disabled = value;
         return this.$element;
@@ -181,7 +165,7 @@
 
       BootstrapSwitch.prototype.toggleDisabled = function() {
         this.$element.prop("disabled", !this.options.disabled);
-        this.$wrapper.toggleClass("" + this.options.baseClass + "-" + this.options.disabledModifierClass);
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-disabled");
         this.options.disabled = !this.options.disabled;
         return this.$element;
       };
@@ -191,7 +175,7 @@
           return this.options.readonly;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-" + this.options.readonlyModifierClass);
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-readonly");
         this.$element.prop("readonly", value);
         this.options.readonly = value;
         return this.$element;
@@ -199,7 +183,7 @@
 
       BootstrapSwitch.prototype.toggleReadonly = function() {
         this.$element.prop("readonly", !this.options.readonly);
-        this.$wrapper.toggleClass("" + this.options.baseClass + "-" + this.options.readonlyModifierClass);
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-readonly");
         this.options.readonly = !this.options.readonly;
         return this.$element;
       };
@@ -264,29 +248,14 @@
       };
 
       BootstrapSwitch.prototype.wrapperClass = function(value) {
-        var getClasses;
         if (typeof value === "undefined") {
           return this.options.wrapperClass;
         }
         if (!value) {
           value = $.fn.bootstrapSwitch.defaults.wrapperClass;
         }
-        getClasses = (function(_this) {
-          return function(classes) {
-            var c, cls, _i, _len;
-            if (!$.isArray(classes)) {
-              return "" + _this.options.baseClass + "-" + classes;
-            }
-            cls = [];
-            for (_i = 0, _len = classes.length; _i < _len; _i++) {
-              c = classes[_i];
-              cls.push("" + _this.options.baseClass + "-" + c);
-            }
-            return cls.join(" ");
-          };
-        })(this);
-        this.$wrapper.removeClass(getClasses(this.options.wrapperClass));
-        this.$wrapper.addClass(getClasses(value));
+        this.$wrapper.removeClass(this._getClasses(this.options.wrapperClass).join(" "));
+        this.$wrapper.addClass(this._getClasses(value).join(" "));
         this.options.wrapperClass = value;
         return this.$element;
       };
@@ -315,7 +284,7 @@
                 return;
               }
               _this.options.state = checked;
-              _this.$wrapper.removeClass(checked ? "" + _this.options.baseClass + "-" + _this.options.offModifierClass : "" + _this.options.baseClass + "-" + _this.options.onModifierClass).addClass(checked ? "" + _this.options.baseClass + "-" + _this.options.onModifierClass : "" + _this.options.baseClass + "-" + _this.options.offModifierClass);
+              _this.$wrapper.removeClass(checked ? "" + _this.options.baseClass + "-off" : "" + _this.options.baseClass + "-on").addClass(checked ? "" + _this.options.baseClass + "-on" : "" + _this.options.baseClass + "-off");
               if (!skip) {
                 if (_this.$element.is(":radio")) {
                   $("[name='" + (_this.$element.attr('name')) + "']").not(_this.$element).prop("checked", false).trigger("change.bootstrapSwitch", true);
@@ -329,7 +298,7 @@
               e.preventDefault();
               e.stopPropagation();
               e.stopImmediatePropagation();
-              return _this.$wrapper.addClass("" + _this.options.baseClass + "-" + _this.options.focusedModifierClass);
+              return _this.$wrapper.addClass("" + _this.options.baseClass + "-focused");
             };
           })(this),
           "blur.bootstrapSwitch": (function(_this) {
@@ -337,7 +306,7 @@
               e.preventDefault();
               e.stopPropagation();
               e.stopImmediatePropagation();
-              return _this.$wrapper.removeClass("" + _this.options.baseClass + "-" + _this.options.focusedModifierClass);
+              return _this.$wrapper.removeClass("" + _this.options.baseClass + "-focused");
             };
           })(this),
           "keydown.bootstrapSwitch": (function(_this) {
@@ -411,7 +380,7 @@
               e.preventDefault();
               _this.drag = true;
               if (_this.options.animate) {
-                _this.$wrapper.removeClass("" + _this.options.baseClass + "-" + _this.options.animateModifierClass);
+                _this.$wrapper.removeClass("" + _this.options.baseClass + "-animate");
               }
               return _this.$element.trigger("focus.bootstrapSwitch");
             };
@@ -426,7 +395,7 @@
               _this.$element.prop("checked", parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6)).trigger("change.bootstrapSwitch");
               _this.$container.css("margin-left", "");
               if (_this.options.animate) {
-                return _this.$wrapper.addClass("" + _this.options.baseClass + "-" + _this.options.animateModifierClass);
+                return _this.$wrapper.addClass("" + _this.options.baseClass + "-animate");
               }
             };
           })(this),
@@ -455,6 +424,19 @@
         }).data("bootstrap-switch", true);
       };
 
+      BootstrapSwitch.prototype._getClasses = function(classes) {
+        var c, cls, _i, _len;
+        if (!$.isArray(classes)) {
+          return ["" + this.options.baseClass + "-" + classes];
+        }
+        cls = [];
+        for (_i = 0, _len = classes.length; _i < _len; _i++) {
+          c = classes[_i];
+          cls.push("" + this.options.baseClass + "-" + c);
+        }
+        return cls;
+      };
+
       return BootstrapSwitch;
 
     })();
@@ -489,13 +471,6 @@
       labelText: "&nbsp;",
       baseClass: "bootstrap-switch",
       wrapperClass: "wrapper",
-
-      /*
-      containerClass: "container"
-      handleOnClass: "handle-on"
-      handleOffClass: "handle-off"
-      labelClass: "label"
-       */
       onInit: function() {},
       onSwitchChange: function() {}
     };

docs/_index.html

@@ -1,442 +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 rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
-    <link rel="stylesheet" href="build/css/bootstrap3/bootstrap-switch.css" />
-    <link rel="stylesheet" href="docs/lib/prism.css">
-    <link rel="stylesheet" href="docs/index.css">
-    <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 class="navbar navbar-default navbar-fixed-top header" role="banner">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-10 col-md-offset-1">
-            <div class="navbar-header">
-              <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#collapse">
-                <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</a>
-            </div>
-            <nav id="collapse" class="collapse navbar-collapse" role="navigation">
-              <ul class="nav navbar-nav">
-                <li><a href="#getting-started">Getting started</a></li>
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip">Download 3rc</a></li>
-                <li class="dropdown">
-                  <a href="#documentation" data-toggle="dropdown">Documentation <span class="caret"></span></a>
-                  <ul class="dropdown-menu">
-                    <li><a href="#sizes">Sizes</a></li>
-                    <li><a href="#colors">Colors</a></li>
-                    <li><a href="#animation">Animation</a></li>
-                    <li><a href="#disabled">Disabled / Readonly</a></li>
-                    <li><a href="#text">Text</a></li>
-                    <li><a href="#label-text">Label Text</a></li>
-                    <li><a href="#icon-label-text">Icon Label Text</a></li>
-                    <li><a href="#event-handlers">Event Handlers</a></li>
-                    <li><a href="#label-event-handler">Label Event Handlers</a></li>
-                    <li><a href="#state">State</a></li>
-                    <li><a href="#destroy">Destroy</a></li>
-                    <li><a href="#disable">Disable / Readonly</a></li>
-                    <li><a href="#radio">Radio</a></li>
-                    <li><a href="#form">Form</a></li>
-                    <li><a href="#modal">Modal</a></li>
-                  </ul>
-                </li>
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </div>
-    </header>
-    <main id="main" class="jumbotron" role="main">
-      <div class="container">
-        <h1>Bootstrap Switch</h1>
-        <p class="lead">Turn checkboxes and radio buttons in toggle switches.</p>
-        <div>
-          <a href="https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip" class="btn btn-lg btn-primary">Download Bootstrap Switch 3 Release Candidate</a><br>
-          <a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" class="btn btn-link">Download Stable Bootstrap Switch 2</a>
-        </div>
-        <br>
-        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="30"></iframe>
-        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="30"></iframe>
-        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="190" height="30"></iframe>
-        <iframe src="http://ghbtns.com/github-btn.html?user=LostCrew&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-        <iframe src="http://ghbtns.com/github-btn.html?user=BdMdesigN&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-        <br>
-        <br>
-        <p class="people">
-          <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> · <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> · <a href="http://www.lostcrew.it" target="_blank">Emanuele Marchi</a>
-        </p>
-        </div>
-      </div>
-    </main>
-    <div class="container">
-      <div class="row">
-        <div class="col-md-10 col-md-offset-1">
-        <section id="getting-started" class="section">
-          <div class="page-header">
-            <h2><a href="#getting-started">Getting started</a></h2>
-          </div>
-          <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
-          <pre class="language-markup"><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 class="language-markup"><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></pre>
-          <p>Initialize Bootstrap Switch.</p>
-          <pre class="language-javascript"><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
-          <p>Enjoy.</p>
-        </section>
-        <div class="page-header">
-          <h2><a href="#documentation">Documentation</a></h2>
-        </div>
-        <section id="sizes" class="section">
-          <div class="page-header">
-            <h3><a href="#sizes">Sizes</a></h3>
-          </div>
-          <input type="checkbox" checked data-size="large">
-          <input type="checkbox" checked>
-          <input type="checkbox" checked data-size="small">
-          <input type="checkbox" checked data-size="mini">
-          <br>
-          <br>
-          <p>Change the size programmatically:</p>
-          <input type="checkbox" id="dimension-switch" checked>
-          <br>
-          <br>
-          <button id="btn-size-large-switch" class="btn btn-default">Large</button>
-          <button id="btn-size-regular-switch" class="btn btn-default">Regular</button>
-          <button id="btn-size-small-switch" class="btn btn-default">Small</button>
-          <button id="btn-size-mini-switch" class="btn btn-default">Mini</button>
-          <br>
-          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-size="large">
-&lt;input type="checkbox" checked>
-&lt;input type="checkbox" checked data-size="small">
-&lt;input type="checkbox" checked data-size="mini">
-&lt;input id="dimension-switch" type="checkbox" checked></code></pre>
-          <pre class="language-javascript"><code>// Resets to the regular style
-$('#dimension-switch').bootstrapSwitch('size', '');
-
-// Sets a mini switch
-$('#dimension-switch').bootstrapSwitch('size', 'mini');
-
-// Sets a small switch
-$('#dimension-switch').bootstrapSwitch('size', 'small');
-
-// Sets a large switch
-$('#dimension-switch').bootstrapSwitch('size', 'large');</code></pre>
-        </section>
-        <section id="colors" class="section">
-          <div class="page-header">
-            <h3><a href="#colors">Colors</a></h3>
-          </div>
-          <input type="checkbox" checked data-on-color="primary" data-off-color="info">
-          <input type="checkbox" checked data-on-color="info" data-off-color="success">
-          <input type="checkbox" checked data-on-color="success" data-off-color="warning">
-          <input type="checkbox" checked data-on-color="warning" data-off-color="danger">
-          <input type="checkbox" checked data-on-color="danger" data-off-color="default">
-          <input type="checkbox" checked data-on-color="default" data-off-color="primary">
-          <br>
-          <br>
-          <span>Change the colors programmatically:</span>
-          <input type="checkbox" id="change-color-switch" checked data-on-color="default" data-off-color="primary">
-          <br>
-          <br>
-          <button id="btn-color-on-switch" class="btn btn-success">Change ON color</button>
-          <button id="btn-color-off-switch" class="btn btn-danger">Change OFF color</button>
-          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-on-color="primary" data-off-color="info">
-&lt;input type="checkbox" checked data-on-color="info" data-off-color="success">
-&lt;input type="checkbox" checked data-on-color="success" data-off-color="warning">
-&lt;input type="checkbox" checked data-on-color="warning" data-off-color="danger">
-&lt;input type="checkbox" checked data-on-color="danger" data-off-color="default">
-&lt;input type="checkbox" checked data-on-color="default" data-off-color="primary">
-&lt;input type="checkbox" id="change-color-switch" checked data-on-color="default" data-off-color="primary"></code></pre>
-          <pre class="language-javascript"><code>$('#change-color-switch').bootstrapSwitch('onColor', 'success');
-$('#change-color-switch').bootstrapSwitch('offColor', 'danger');</code></pre>
-        </section>
-        <section id="animation" class="section">
-          <div class="page-header">
-            <h3><a name="animation" class="anchor" href="#animation">Animation <small>JavaScript</small></a></h3>
-          </div>
-          <input type="checkbox" id="animated-switch" checked data-animated="false">
-          <br>
-          <br>
-          <button id="btn-animate-switch" class="btn btn-default">Animate</button>
-          <button id="btn-dont-animate-switch" class="btn btn-default">Don't animate</button>
-          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-animate="false"></code></pre>
-          <pre class="language-javascript"><code>// Enables animation for the selected item
-$('#animated-switch').bootstrapSwitch('animate', true);
-
-// Disables animation for the selected item
-$('#animated-switch').bootstrapSwitch('animate', false);</code></pre>
-        </section>
-        <section id="disabled" class="section">
-          <div class="page-header">
-            <h3><a name="disabled" class="anchor" href="#disabled">Disabled / Readonly</a></h3>
-          </div>
-          <input type="checkbox" checked disabled>
-          <input type="checkbox" checked readonly>
-          <pre class="language-markup"><code>&lt;input type="checkbox" checked disabled>
-&lt;input type="checkbox" checked readonly></code></pre>
-        </section>
-        <section id="text" class="section">
-          <div class="page-header">
-            <h3><a name="text" class="anchor" href="#text">Text</a></h3>
-          </div>
-          <input type="checkbox" id="label-switch" checked data-on-text="SI" data-off-text="NO">
-          <br>
-          <br>
-          <button id="btn-label-on-switch" class="btn btn-default">Change "On" label</button>
-          <button id="btn-label-off-switch" class="btn btn-default">Change "Off" label</button>
-          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-on-text="SI" data-off-text="NO"></code></pre>
-          <pre class="language-javascript"><code>$('#label-switch').bootstrapSwitch('onText', 'I');
-$('#label-switch').bootstrapSwitch('offText', 'O');</code></pre>
-        </section>
-        <section id="label-text" class="section">
-          <div class="page-header">
-            <h3><a href="#label-text">Label Text</a></h3>
-          </div>
-          <input type="checkbox" checked data-label-text="TV">
-          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-label-text="TV"></code></pre>
-        </section>
-        <section id="icon-label-text" class="section">
-          <div class="page-header">
-            <h3><a name="icon-label-text" class="anchor" href="#html-text-label-icon">Icon Label Text</a></h3>
-          </div>
-          Standard <input type="checkbox" checked data-size="large" data-label-text="<span class='glyphicon glyphicon-fullscreen'></span>" data-on-text="<span class='glyphicon glyphicon-ok'></span>" data-off-text="<span class='glyphicon glyphicon-remove'></span>"> &nbsp;&nbsp;
-          Font Awesome <input type="checkbox" checked data-size="large" data-label-text="<span class='fa fa-youtube fa-lg'></span>" data-on-text="<span class='fa fa-thumbs-up fa-lg'></span>" data-off-text="<span class='fa fa-thumbs-down fa-lg'></span>"> &nbsp;&nbsp;
-          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-size="large" data-label-text="&lt;span class='glyphicon glyphicon-fullscreen'>&lt;/span>" data-on-text="&lt;span class='glyphicon glyphicon-ok'>&lt;/span>" data-off-text="&lt;span class='glyphicon glyphicon-remove'>&lt;/span>">
-&lt;input type="checkbox" checked data-size="large" data-label-text="&lt;span class='fa fa-youtube fa-lg'>&lt;/span>" data-on-text="&lt;span class='fa fa-thumbs-up fa-lg'>&lt;/span>" data-off-text="&lt;span class='fa fa-thumbs-down fa-lg'>&lt;/span>"></code></pre>
-        </section>
-        <section id="event-handler" class="section">
-          <div class="page-header">
-            <h3><a name="event-handlers" class="anchor" href="#event-handler">Event Handlers <small>JavaScript</small></a></h3>
-          </div>
-          <input type="checkbox" id="events-switch" checked>
-          <pre class="language-javascript"><code>// passed to init object
-$('#events-switch').bootstrapSwitch({
-  on:
-    init: function() {
-      console.log('Initialized!');
-    }
-    switchChange: function() {
-      var $element = $(data.el),
-        value = data.value;
-      console.log(e, $element, value);
-    }
-});
-
-// registered as listener
-$('#events-switch')
-.on('init', function() {
-  console.log('Initialized!');
-})
-.on('switchChange', function (e, data) {
-  var $element = $(data.el),
-      value = data.value;
-
-  console.log(e, $element, value);
-})
-.bootstrapSwitch();</code></pre>
-        </section>
-        <section id="label-event-handler" class="section">
-          <div class="page-header">
-            <h3><a name="label-event-handler" class="anchor" href="#label-event-handler">Label Event Handler <small>JavaScript</small></a></h3>
-          </div>
-          <label id="label-toggle-switch">Click on this Text to change the switch state</label>
-          <input type="checkbox" checked class="label-toggle-switch">
-          <pre class="language-markup"><code>&lt;label id="label-toggle-switch">Click on this Text to change the switch state&lt;/label>
-&lt;input type="checkbox" checked></code></pre>
-          <pre class="language-javascript"><code>$('#label-toggle-switch').on('click', function(e, data) {
-    $('.label-toggle-switch').bootstrapSwitch('toggleState');
-});
-$('.label-toggle-switch').on('switchChange', function (e, data) {
-    alert(data.value);
-});</code></pre>
-        </section>
-        <section id="state" class="section">
-          <div class="page-header">
-            <h3><a name="state" class="anchor" href="#state">State <small>JavaScript</small></a></h3>
-          </div>
-          <input type="checkbox" id="toggle-state-switch" checked>
-          <br>
-          <br>
-          <div id="toggle-state-switch-button-state" class="btn btn-default">Get State</div>
-          <div id="toggle-state-switch-button-on" class="btn btn-default">Set On</div>
-          <div id="toggle-state-switch-button-off" class="btn btn-default">Set Off</div>
-          <div id="toggle-state-switch-button" class="btn btn-default">Toggle State</div>
-          <pre class="language-javascript"><code>$('#toggle-state-switch').bootstrapSwitch('state'); // Get the state
-$('#toggle-state-switch').bootstrapSwitch('state', false); // Set the state as off
-$('#toggle-state-switch').bootstrapSwitch('state', false, false); // Set the state as off and do not trigger switchChange event
-$('#toggle-state-switch').bootstrapSwitch('toggleState'); // Toggle the state
-$('#toggle-state-switch').bootstrapSwitch('toggleState'); // Toggle the state and do not trigger switchChange event
-</code></pre>
-        </section>
-        <section id="destroy" class="section">
-          <div class="page-header">
-            <h3><a name="destroy" class="anchor" href="#destroy">Destroy <small>JavaScript</small></a></h3>
-          </div>
-          <input type="checkbox" id="destroy-switch" checked>
-          <br>
-          <br>
-          <button id="btn-destroy-switch" class="btn btn-default">Destroy Bootstrap Switch!</button>
-          <pre class="language-javascript"><code>$('#destroy-switch').bootstrapSwitch('destroy');</code></pre>
-        </section>
-        <section id="disable" class="section">
-          <div class="page-header">
-            <h3><a name="disable" class="anchor" href="#disable">Disable / Readonly <small>JavaScript</small></a></h3>
-          </div>
-          <label for="disable-switch">Disable controls</label>
-          <input type="checkbox" id="disable-switch" checked>
-          <br>
-          <br>
-          <button id="btn-disable-is" class="btn btn-default">Is disabled?</button>
-          <button id="btn-disable-toggle" class="btn btn-default">Toggle Disable</button>
-          <button id="btn-disable-set" class="btn btn-default">Set Disable</button>
-          <button id="btn-disable-remove" class="btn btn-default">Remove Disable</button>
-          <br>
-          <br>
-          <label for="readonly-switch">Readonly controls</label>
-          <input type="checkbox" id="readonly-switch" checked>
-          <br>
-          <br>
-          <button id="btn-readonly-is" class="btn btn-default">Is readonly?</button>
-          <button id="btn-readonly-toggle" class="btn btn-default">Toggle readonly</button>
-          <button id="btn-readonly-set" class="btn btn-default">Set Readonly</button>
-          <button id="btn-readonly-remove" class="btn btn-default">Remove Readonly</button>
-          <pre class="language-javascript"><code>$('#disable-switch').bootstrapSwitch('disabled');
-$('#disable-switch').bootstrapSwitch('toggleDisabled');
-$('#disable-switch').bootstrapSwitch('disabled', true);  // true || false
-
-$('#readonly-switch').bootstrapSwitch('readonly');
-$('#readonly-switch').bootstrapSwitch('toggleReadonly');
-$('#readonly-switch').bootstrapSwitch('readonly', true);  // true || false</code></pre>
-        </section>
-        <section id="radio" class="section">
-          <div class="page-header">
-            <h3><a name="radio" class="anchor" href="#radio">Radio <small>JavaScript</small></a></h3>
-          </div>
-          <div class="form-group">
-            <label for="option1">Option 1</label>
-            <input id="option1" type="radio" name="radio1" value="option1"> &nbsp;&nbsp;
-            <label for="option2">Option 2</label>
-            <input id="option2" type="radio" name="radio1" value="option2"> &nbsp;&nbsp;
-            <label for="option3">Option 3</label>
-            <input id="option3" type="radio" name="radio1" value="option3">
-          </div>
-          <pre class="language-markup"><code>&lt;div class="form-group">
-  &lt;label for="option1">Option 1&lt;/label>
-  &lt;input id="option1" type="radio" name="radio1" value="option1">
-  &lt;label for="option2">Option 2&lt;/label>
-  &lt;input id="option2" type="radio" name="radio1" value="option2">
-  &lt;label for="option3">Option 3&lt;/label>
-  &lt;input id="option3" type="radio" name="radio1" value="option3">
-&lt;/div></code></pre>
-        </section>
-        <section id="form" class="section">
-          <div class="page-header">
-            <h3><a name="form" class="anchor" href="#form">Form</a></h3>
-          </div>
-          <form class="clearfix" role="form">
-            <div class="form-group">
-              <label class="control-label" for="inputEmail">Email</label>
-              <input type="text" id="inputEmail" placeholder="Email" class="form-control">
-            </div>
-            <div class="form-group">
-              <label class="control-label" for="notification1">Notification 1</label>
-              <input id="notification1" type="checkbox">
-            </div>
-            <div class="form-group">
-              <label class="control-label" for="notification2">Notification 2</label>
-              <input id="notification2" type="checkbox">
-            </div>
-            <div class="form-actions">
-              <button type="reset" class="btn btn-default btn-warning">Reset</button>
-            </div>
-          </form>
-          <pre class="language-markup"><code>&lt;form class="form-horizontal">
-  &lt;div class="form-group">
-    &lt;label class="control-label" for="inputEmail">Email&lt;/label>
-    &lt;input type="text" id="inputEmail" placeholder="Email">
-  &lt;/div>
-  &lt;div class="form-group">
-    &lt;label class="control-label" for="notification1">Notification 1&lt;/label>
-    &lt;input id="notification1" type="checkbox">
-  &lt;/div>
-  &lt;div class="form-group">
-    &lt;label class="control-label" for="notification2">Notification 2&lt;/label>
-    &lt;input id="notification2" type="checkbox">
-  &lt;/div>
-  &lt;div class="form-actions">
-    &lt;button type="reset" class="btn btn-inverse">Reset&lt;/button>
-  &lt;/div>
-&lt;/form></code></pre>
-        </section>
-        <section id="modal" class="section">
-          <div class="page-header">
-            <h3><a name="modal" class="anchor" href="#modal">Modal</a></h3>
-          </div>
-          <a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>
-          <pre class="language-markup"><code>&lt;a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal&lt;/a>
-
-&lt;div class="modal-body">
-  &lt;input type="checkbox" checked>
-&lt;/div></code></pre>
-        </section>
-        <footer class="footer">
-          <p>&copy; by <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/SpiritualGuru">@SpiritualGuru</a>), <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> and <a href="http://www.lostcrew.it/" target="_blank">Emanuele Marchi</a></p>
-        </footer>
-      </div>
-    </div>
-  </div>
-  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h3>Modal</h3>
-        </div>
-        <div class="modal-body">
-          <input type="checkbox" checked>
-        </div>
-        <div class="modal-footer">
-          <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
-  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
-  <script src="build/js/bootstrap-switch.js"></script>
-  <script src="docs/lib/prism.js"></script>
-  <script src="docs/index.js"></script>
-  </body>
-</html>

docs/index.css

@@ -17,6 +17,11 @@ body {
   text-align: center;
 }
 
+.old-version {
+  color: #ccc;
+  text-decoration: line-through;
+}
+
 #github {
   display: none;
   position: fixed;
@@ -34,6 +39,10 @@ body {
   padding-bottom: 40px;
 }
 
+.hljs {
+  background-color: transparent;
+}
+
 @media (min-width: 768px) {
   #github {
     display: block;

docs/index.jade

@@ -25,6 +25,9 @@ html(lang='en')
         s.parentNode.insertBefore(ga, s);
       })();
   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')
+
     header.navbar.navbar-default.navbar-fixed-top.top(role='banner')
       .container
         .navbar-header
@@ -33,7 +36,7 @@ html(lang='en')
             span.icon-bar
             span.icon-bar
             span.icon-bar
-          a.navbar-brand(href='../') Bootstrap Switch
+          a.navbar-brand(href='../') Bootstrap Switch <strong>3</strong>
         nav#collapse.collapse.navbar-collapse(role='navigation')
           ul.nav.navbar-nav
             li.dropdown
@@ -41,49 +44,80 @@ html(lang='en')
                 | Download
                 span.caret
               ul.dropdown-menu
-                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip') 3 (Release candidate)
-                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') 2.0.1
-            li: a(href='#getting-started') Getting Started
-            li.dropdown
-              a(href='#documentation-3', data-toggle='dropdown')
-                | Documentation 3
-                span.caret
-              ul.dropdown-menu
-                li: a(href='#options') Options
-                li: a(href='#methods') Methods
-                li: a(href='#additional-methods') Additional Methods
-                li: a(href='#events') Events
+                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip') 3 (Stable)
+                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') 2.0.1 (Legacy)
+            li: a(href='#new') What's new
+            li: a(href='#start') Start
             li.dropdown
-              a(href='#documentation-2', data-toggle='dropdown')
-                | Documentation 2.0.1
+              a(href='#', data-toggle='dropdown')
+                | Documentation
                 span.caret
               ul.dropdown-menu
-                li: a(href='#options') Options
-                li: a(href='#methods') Methods
-                li: a(href='#events') Events
-            //- li: a(href='#examples') Examples
+                li.dropdown-header Version 3 (Stable)
+                li: a(href='#options-3') Options
+                li: a(href='#methods-3') Methods
+                li: a(href='#events-3') Events
+                li.divider
+                li.dropdown-header Version 2.0.1 (Legacy)
+                li: a(href='#options-2') Options
+                li: a(href='#methods-2') Methods
+                li: a(href='#events-2') Events
             li: a(href='https://github.com/nostalgiaz/bootstrap-switch/issues') Bug reports
 
     .container
       .header
-        h2.title Bootstrap Switch
+        h2.title Bootstrap Switch <strong>3</strong> <span class="old-version">2.0.1</span>
+
         p.lead Turn checkboxes and radio buttons in toggle switches.
-        p Download your version:
-        p: input(type='checkbox', name='download-version', checked, data-size='large', data-on-text='3 RC', data-off-text='2.0.1')
+        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/3.0.zip', id='download-3', class='btn btn-lg btn-primary') Download 3 (Release candidate)
-          a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', id='download-2' class='btn btn-lg btn-primary') Download 2.0.1 (Stable)
+          a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip', id='download-3', class='btn btn-lg btn-primary') Download 3
+          a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', id='download-2' class='btn btn-lg btn-primary') 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
 
-      #getting-started
+      .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
+
+        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
+
+      #start
         h1.page-header Getting Started
+
         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;
-          [...]
+          | [...]
+          | &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 Add your checkbox.
         pre: code &lt;input type="checkbox" name="my-checkbox" checked&gt;
@@ -94,10 +128,11 @@ html(lang='en')
         p Enjoy.
 
       #documentation-3
-        h1.page-header Documentation 3
+        h1.page-header Documentation <small>Version 3 (Stable)</small>
+
+        #options-3
+          h2.page-header Options
 
-        #options
-          h2 Options
           table.table.table-bordered.table-striped.table-responsive
             thead
               tr
@@ -117,8 +152,8 @@ html(lang='en')
                 td size
                 td String
                 td The checkbox state
-                td 'mini', 'small', 'normal', 'large'
-                td 'normal'
+                td null, 'mini', 'small', 'normal', 'large'
+                td null
               tr
                 td animate
                 td Boolean
@@ -142,35 +177,35 @@ html(lang='en')
                 td String
                 td Color of the left side of the switch
                 td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                td: 'primary'
+                td 'primary'
               tr
                 td offColor
                 td String
                 td Color of the right side of the switch
                 td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                td: 'default'
+                td 'default'
               tr
                 td onText
                 td String
                 td Text of the left side of the switch
                 td String
-                td: 'ON'
+                td 'ON'
               tr
                 td offText
                 td String
                 td Text of the right side of the switch
                 td String
-                td: 'OFF'
+                td 'OFF'
               tr
                 td labelText
                 td String
                 td Text of the center handle of the switch
                 td String
-                td: '&amp;nbsp;'
+                td '&amp;nbsp;'
               tr
                 td baseClass
                 td String
-                td Prefix of every other used class
+                td Global class prefix
                 td String
                 td 'bootstrap-switch'
               tr
@@ -179,42 +214,6 @@ html(lang='en')
                 td Container element class(es)
                 td String | Array
                 td 'wrapper'
-              tr
-                td onModifierClass
-                td String
-                td On Modifier class, used when the switch state is true
-                td String
-                td 'on'
-              tr
-                td offModifierClass
-                td String
-                td Off Modifier class, used when the switch state is false
-                td String
-                td 'off'
-              tr
-                td focusedModifierClass
-                td String
-                td Focused Modifier class, used when the switch is focused
-                td String
-                td 'focused'
-              tr
-                td animateModifierClass
-                td String
-                td Animate Modifier class, used to apply CSS animation to the switch
-                td String
-                td 'animate'
-              tr
-                td disabledModifierClass
-                td String
-                td Disabled Modifier class, used the switch is disabled
-                td String
-                td 'disabled'
-              tr
-                td readonlyModifierClass
-                td String
-                td Readonly Modifier class, used the switch is readonly
-                td String
-                td 'readonly'
               tr
                 td onInit
                 td Function
@@ -228,18 +227,23 @@ html(lang='en')
                 td Function
                 td: pre: code.javascript function(event, state) {}
 
-        #methods
-          h2 Methods
+          h3 Global Defaults Overriding
 
-          p In Bootstrap Switch, every option is also a method.
-          p You can call a method in this way:
-          pre: code $('input[name="my-checkbox"]').bootstrapSwitch('state'[, true][, true]);
+          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';
 
-          p If the second parameter is not specified, the current option is returned.
-          p Pass 'true' to 'state' as third parameter, or to 'toggleState' as second parameter in order to avoid the `switchChange` event execution.
+        #methods-3
+          h2.page-header Methods
 
-        #additional-methods
-          h2 Additional 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
@@ -260,17 +264,27 @@ html(lang='en')
                 td destroy
                 td Destroy the instance of Bootstrap Switch
 
-        #events
-          h2 Events
+          h3 Special Behaviours
 
-          p 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
-              | });
+          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
@@ -291,9 +305,10 @@ html(lang='en')
                   | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
                   | state (true | false)
 
-        #examples
-          h2 Examples
-            small To be included
+        #examples-3
+          h2.page-header Examples
+
+          p To be included
           //
             h3 State
             .row
@@ -310,165 +325,214 @@ html(lang='en')
                   button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State
 
       #documentation-2
-        h1.page-header Documentation 2.0.1
-          small To be included
-
-        //
-          #options
-            h2 Options
-            table.table.table-bordered.table-striped.table-responsive
-              thead
-                tr
-                  th Name
-                  th Type
-                  th Description
-                  th Values
-                  th Default
-              tbody
-                tr
-                  td state
-                  td Boolean
-                  td The checkbox state
-                  td true, false
-                  td 'checked' attribute or true
-                tr
-                  td size
-                  td String
-                  td The checkbox state
-                  td 'mini', 'small', 'normal', 'large'
-                  td 'normal'
-                tr
-                  td animate
-                  td Boolean
-                  td Animate the switch
-                  td true, false
-                  td true
-                tr
-                  td disabled
-                  td Boolean
-                  td Disable state
-                  td true, false
-                  td 'disabled' attribute or false
-                tr
-                  td readonly
-                  td Boolean
-                  td Readonly state
-                  td true, false
-                  td 'readonly' attribute or false
-                tr
-                  td onColor
-                  td String
-                  td Color of the left side of the switch
-                  td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                  td: 'primary'
-                tr
-                  td offColor
-                  td String
-                  td Color of the right side of the switch
-                  td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                  td: 'default'
-                tr
-                  td onText
-                  td String
-                  td Text of the left side of the switch
-                  td String
-                  td: 'ON'
-                tr
-                  td offText
-                  td String
-                  td Text of the right side of the switch
-                  td String
-                  td: 'OFF'
-                tr
-                  td labelText
-                  td String
-                  td Text of the center handle of the switch
-                  td String
-                  td: '&amp;nbsp;'
-                tr
-                  td baseClass
-                  td String
-                  td Prefix of every other used class
-                  td String
-                  td 'bootstrap-switch'
-                tr
-                  td wrapperClass
-                  td String | Array
-                  td Container element class(es)
-                  td String | Array
-                  td 'wrapper'
-                tr
-                  td containerClass
-                  td String | Array
-                  td Wrapper element class(es)
-                  td String | Array
-                  td 'container'
-                tr
-                  td handleOnClass
-                  td String | Array
-                  td Handle On element class(es)
-                  td String | Array
-                  td 'handle-on'
-                tr
-                  td handleOffClass
-                  td String | Array
-                  td Handle Off element class(es)
-                  td String | Array
-                  td 'handle-off'
-                tr
-                  td labelClass
-                  td String | Array
-                  td Label element class(es)
-                  td String | Array
-                  td 'label'
-                tr
-                  td onModifierClass
-                  td String
-                  td On Modifier class, used when the switch state is true
-                  td String
-                  td 'on'
-                tr
-                  td offModifierClass
-                  td String
-                  td Off Modifier class, used when the switch state is false
-                  td String
-                  td 'off'
-                tr
-                  td focusedModifierClass
-                  td String
-                  td Focused Modifier class, used when the switch is focused
-                  td String
-                  td 'focused'
-                tr
-                  td animateModifierClass
-                  td String
-                  td Animate Modifier class, used to apply CSS animation to the switch
-                  td String
-                  td 'animate'
-                tr
-                  td disabledModifierClass
-                  td String
-                  td Disabled Modifier class, used the switch is disabled
-                  td String
-                  td 'disabled'
-                tr
-                  td readonlyModifierClass
-                  td String
-                  td Readonly Modifier class, used the switch is readonly
-                  td String
-                  td 'readonly'
-                tr
-                  td onInit
-                  td Function
-                  td Callback function to execute on initialization
-                  td Function
-                  td: pre: code.javascript function(event, state) {}
-                tr
-                  td onSwitchChange
-                  td Function
-                  td Callback function to execute on switch state change
-                  td Function
-                  td: pre: code.javascript function(event, state) {}
+        h1.page-header Documentation <small>version 2.0.1 (Legacy)</small>
+
+        #options-2
+          h2.page-header Options
+
+          .alert.alert-warning
+            p
+              | All the options are accepted only using <code>data-*</code> attributes on the input element.<br>
+              | The exceptions are <code>checked</code>, <code>disabled</code> and <code>readonly</code> which are
+              | proprietary input attributes.<br>
+              | There isn't any way to specify the options in JavaScript during initialization.
+
+          table.table.table-bordered.table-striped.table-responsive
+            thead
+              tr
+                th Name
+                th Type
+                th Description
+                th Values
+                th Default
+            tbody
+              tr
+                td state
+                td Boolean
+                td The checkbox state
+                td true, false
+                td 'checked' attribute or true
+              tr
+                td size
+                td String
+                td The checkbox state
+                td '', 'mini', 'small', 'normal', 'large'
+                td ''
+              tr
+                td animate
+                td Boolean
+                td Animate the switch
+                td true, false
+                td true
+              tr
+                td disabled
+                td Boolean
+                td Disable state
+                td true, false
+                td 'disabled' attribute or false
+              tr
+                td readonly
+                td Boolean
+                td Readonly state
+                td true, false
+                td 'readonly' attribute or false
+              tr
+                td on
+                td String
+                td Color of the left side of the switch
+                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+                td null
+              tr
+                td off
+                td String
+                td Color of the right side of the switch
+                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+                td null
+              tr
+                td on-label
+                td String
+                td Text of the left side of the switch
+                td String
+                td 'ON'
+              tr
+                td off-label
+                td String
+                td Text of the right side of the switch
+                td String
+                td 'OFF'
+              tr
+                td text-label
+                td String
+                td Text of the center handle of the switch
+                td String
+                td '&amp;nbsp;'
+              tr
+                td label-icon
+                td String
+                td Text of the center handle of the switch. Use to include external services icons
+                td String
+                td null
+
+        #methods-2
+          h2.page-header Methods
+
+          table.table.table-bordered.table-striped.table-responsive
+            thead
+              tr
+                th Name
+                th Description
+                th Accepted Values
+                th Returned Values
+            tbody
+              tr
+                td state
+                td Get checkbox state
+                td
+                td true, false
+              tr
+                td setState
+                td Set checkbox state
+                td (value: true, false)[, skip: true, <strong>false</strong>]
+                td jQuery Object (input element)
+              tr
+                td toggleState
+                td Toggle checkbox state
+                td [skip: true, <strong>false</strong>]
+                td jQuery Object (input element)
+              tr
+                td toggleRadioState
+                td Toggle radio state
+                td [skip: true, <strong>false</strong>]
+                td jQuery Object (input element)
+              tr
+                td toggleRadioStateAllowUncheck
+                td Toggle radio state allowing uncheck of the radio input
+                td [uncheck: true, <strong>false</strong> | skip: true, <strong>false</strong>]
+                td jQuery Object (input element)
+              tr
+                td setSizeClass
+                td Set the size of the switch
+                td '', 'mini', 'small', 'normal', 'large'
+                td jQuery Object (input element)
+              tr
+                td setAnimated
+                td Animate the switch
+                td true, false
+                td jQuery Object (input element)
+              tr
+                td isDisabled
+                td Get disabled state
+                td
+                td true, false
+              tr
+                td setDisabled
+                td Set disable state
+                td true, false
+                td jQuery Object (input element)
+              tr
+                td toggleDisabled
+                td Toggle disabled state
+                td
+                td jQuery Object (input element)
+              tr
+                td isReadOnly
+                td Get Readonly state
+                td
+                td true, false
+              tr
+                td setReadOnly
+                td Set Readonly state
+                td true, false
+                td jQuery Object (input element)
+              tr
+                td toggleReadOnly
+                td Toggle readonly state
+                td
+                td jQuery Object (input element)
+              tr
+                td setOnClass
+                td Color of the left side of the switch
+                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+                td jQuery Object (input element)
+              tr
+                td setOffClass
+                td Color of the right side of the switch
+                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+                td jQuery Object (input element)
+              tr
+                td setOnLabel
+                td Text of the left side of the switch
+                td String
+                td jQuery Object (input element)
+              tr
+                td setOffLabel
+                td Text of the right side of the switch
+                td String
+                td jQuery Object (input element)
+              tr
+                td setTextLabel
+                td Text of the center handle of the switch
+                td String
+                td null
+              tr
+                td setTextIcon
+                td Text of the center handle of the switch. Use to include external services icons
+                td String
+                td null
+              tr
+                td destroy
+                td Destroy the instance of Bootstrap Switch
+                td
+                td jQuery Object (input element)
+
+        #events-2
+          h2.page-header Events
+
+          p
+            | The only event triggered it <code>switch-change</code>. It returns two parameters: <code>event</code> and
+            | <code>data</code>.<br>
+            | The latter is an object that include <code>el</code> (the input DOM element) and <code>value</code> (the
+            | new input state)
 
     script(src='docs/lib/js/jquery.min.js')
     script(src='docs/lib/js/bootstrap.min.js')

docs/index.js

@@ -1,14 +1,26 @@
 $(function() {
-  var stateSwitch = $('#state-switch')
+  var $window = $(window);
+  var $stateSwitch = $('#state-switch');
+  var sectionTop = $('.top').outerHeight() + 20;
+
   // initialize highlight.js
   hljs.initHighlightingOnLoad();
 
+  // navigation
+  $('a[href^="#"]').on('click', function(event) {
+    event.preventDefault();
+    var $target = $($(this).attr('href'));
+
+    if ($target.length) {
+      $window.scrollTop($target.offset().top - sectionTop);
+    }
+  });
+
   $('input[name="download-version"]').on({
-    'init.bootstrapSwitch': function(e) {
-      var state = $(this).is(':checked');
-      $('#download-' + (state ? '2' : '3')).hide();
+    'init.bootstrapSwitch': function() {
+      $('#download-' + ($(this).is(':checked') ? '2' : '3')).hide();
     },
-    'switchChange.bootstrapSwitch': function(e, state) {
+    'switchChange.bootstrapSwitch': function(event, state) {
       $('#download-3')[state ? 'show' : 'hide']();
       $('#download-2')[state ? 'hide' : 'show']();
     }
@@ -19,16 +31,16 @@ $(function() {
 
   // state
   $('#state-switch-toggle').on('click', function () {
-    stateSwitch.bootstrapSwitch('toggleState');
+    $stateSwitch.bootstrapSwitch('toggleState');
   });
   $('#state-switch-on').on('click', function () {
-    stateSwitch.bootstrapSwitch('state', true);
+    $stateSwitch.bootstrapSwitch('state', true);
   });
   $('#state-switch-off').on('click', function () {
-    stateSwitch.bootstrapSwitch('state', false);
+    $stateSwitch.bootstrapSwitch('state', false);
   });
   $('#state-switch-state').on('click', function () {
-    alert(stateSwitch.bootstrapSwitch('state'));
+    alert($stateSwitch.bootstrapSwitch('state'));
   });
 
   /*

index.html

@@ -26,34 +26,33 @@
       })();
     </script>
   </head>
-  <body>
+  <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</a>
+          <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/3.0.zip">3 (Release candidate)</a></li>
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">2.0.1</a></li>
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip">3 (Stable)</a></li>
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">2.0.1 (Legacy)</a></li>
               </ul>
             </li>
-            <li><a href="#getting-started">Getting Started</a></li>
-            <li class="dropdown"><a href="#documentation-3" data-toggle="dropdown">Documentation 3<span class="caret"></span></a>
+            <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="#options">Options</a></li>
-                <li><a href="#methods">Methods</a></li>
-                <li><a href="#additional-methods">Additional Methods</a></li>
-                <li><a href="#events">Events</a></li>
-              </ul>
-            </li>
-            <li class="dropdown"><a href="#documentation-2" data-toggle="dropdown">Documentation 2.0.1<span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="#options">Options</a></li>
-                <li><a href="#methods">Methods</a></li>
-                <li><a href="#events">Events</a></li>
+                <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 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>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -63,15 +62,43 @@
     </header>
     <div class="container">
       <div class="header">
-        <h2 class="title">Bootstrap Switch</h2>
+        <h2 class="title">Bootstrap Switch <strong>3</strong> <span class="old-version">2.0.1</span></h2>
         <p class="lead">Turn checkboxes and radio buttons in toggle switches.</p>
-        <p>Download your version:</p>
+        <p>Select the version to download:</p>
+        <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/3.0.zip" id="download-3" class="btn btn-lg btn-primary">Download 3</a><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" id="download-2" 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>
+      </div>
+      <div class="alert alert-info">
         <p>
-          <input type="checkbox" name="download-version" checked data-size="large" data-on-text="3 RC" data-off-text="2.0.1">
+          <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>
-        <p><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip" id="download-3" class="btn btn-lg btn-primary">Download 3 (Release candidate)</a><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" id="download-2" class="btn btn-lg btn-primary">Download 2.0.1 (Stable)</a></p>
       </div>
-      <div id="getting-started">
+      <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>[...]
@@ -87,9 +114,9 @@
         <p>Enjoy.</p>
       </div>
       <div id="documentation-3">
-        <h1 class="page-header">Documentation 3</h1>
-        <div id="options">
-          <h2>Options</h2>
+        <h1 class="page-header">Documentation <small>Version 3 (Stable)</small></h1>
+        <div id="options-3">
+          <h2 class="page-header">Options</h2>
           <table class="table table-bordered table-striped table-responsive">
             <thead>
               <tr>
@@ -112,8 +139,8 @@
                 <td>size</td>
                 <td>String</td>
                 <td>The checkbox state</td>
-                <td>'mini', 'small', 'normal', 'large'</td>
-                <td>'normal'</td>
+                <td>null, 'mini', 'small', 'normal', 'large'</td>
+                <td>null</td>
               </tr>
               <tr>
                 <td>animate</td>
@@ -174,7 +201,7 @@
               <tr>
                 <td>baseClass</td>
                 <td>String</td>
-                <td>Prefix of every other used class</td>
+                <td>Global class prefix</td>
                 <td>String</td>
                 <td>'bootstrap-switch'</td>
               </tr>
@@ -185,48 +212,6 @@
                 <td>String | Array</td>
                 <td>'wrapper'</td>
               </tr>
-              <tr>
-                <td>onModifierClass</td>
-                <td>String</td>
-                <td>On Modifier class, used when the switch state is true</td>
-                <td>String</td>
-                <td>'on'</td>
-              </tr>
-              <tr>
-                <td>offModifierClass</td>
-                <td>String</td>
-                <td>Off Modifier class, used when the switch state is false</td>
-                <td>String</td>
-                <td>'off'</td>
-              </tr>
-              <tr>
-                <td>focusedModifierClass</td>
-                <td>String</td>
-                <td>Focused Modifier class, used when the switch is focused</td>
-                <td>String</td>
-                <td>'focused'</td>
-              </tr>
-              <tr>
-                <td>animateModifierClass</td>
-                <td>String</td>
-                <td>Animate Modifier class, used to apply CSS animation to the switch</td>
-                <td>String</td>
-                <td>'animate'</td>
-              </tr>
-              <tr>
-                <td>disabledModifierClass</td>
-                <td>String</td>
-                <td>Disabled Modifier class, used the switch is disabled</td>
-                <td>String</td>
-                <td>'disabled'</td>
-              </tr>
-              <tr>
-                <td>readonlyModifierClass</td>
-                <td>String</td>
-                <td>Readonly Modifier class, used the switch is readonly</td>
-                <td>String</td>
-                <td>'readonly'</td>
-              </tr>
               <tr>
                 <td>onInit</td>
                 <td>Function</td>
@@ -247,17 +232,18 @@
               </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">
-          <h2>Methods</h2>
+        <div id="methods-3">
+          <h2 class="page-header">Methods</h2>
           <p>In Bootstrap Switch, every option is also a method.</p>
-          <p>You can call a method in this way:</p>
-          <pre><code>$('input[name="my-checkbox"]').bootstrapSwitch('state'[, true][, true]);</code></pre>
-          <p>If the second parameter is not specified, the current option is returned.</p>
-          <p>Pass 'true' to 'state' as third parameter, or to 'toggleState' as second parameter in order to avoid the `switchChange` event execution.</p>
-        </div>
-        <div id="additional-methods">
-          <h2>Additional Methods</h2>
+          <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>
@@ -284,10 +270,20 @@
               </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">
-          <h2>Events</h2>
-          <p>You can register to the emitted events as follow:</p>
+        <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
@@ -318,8 +314,9 @@
             </tbody>
           </table>
         </div>
-        <div id="examples">
-          <h2>Examples<small>To be included</small></h2>
+        <div id="examples-3">
+          <h2 class="page-header">Examples</h2>
+          <p>To be included</p>
           <!--
           h3 State
           .row
@@ -339,165 +336,252 @@
         </div>
       </div>
       <div id="documentation-2">
-        <h1 class="page-header">Documentation 2.0.1<small>To be included</small></h1>
-        <!--
-        #options
-          h2 Options
-          table.table.table-bordered.table-striped.table-responsive
-            thead
-              tr
-                th Name
-                th Type
-                th Description
-                th Values
-                th Default
-            tbody
-              tr
-                td state
-                td Boolean
-                td The checkbox state
-                td true, false
-                td 'checked' attribute or true
-              tr
-                td size
-                td String
-                td The checkbox state
-                td 'mini', 'small', 'normal', 'large'
-                td 'normal'
-              tr
-                td animate
-                td Boolean
-                td Animate the switch
-                td true, false
-                td true
-              tr
-                td disabled
-                td Boolean
-                td Disable state
-                td true, false
-                td 'disabled' attribute or false
-              tr
-                td readonly
-                td Boolean
-                td Readonly state
-                td true, false
-                td 'readonly' attribute or false
-              tr
-                td onColor
-                td String
-                td Color of the left side of the switch
-                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                td: 'primary'
-              tr
-                td offColor
-                td String
-                td Color of the right side of the switch
-                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                td: 'default'
-              tr
-                td onText
-                td String
-                td Text of the left side of the switch
-                td String
-                td: 'ON'
-              tr
-                td offText
-                td String
-                td Text of the right side of the switch
-                td String
-                td: 'OFF'
-              tr
-                td labelText
-                td String
-                td Text of the center handle of the switch
-                td String
-                td: '&amp;nbsp;'
-              tr
-                td baseClass
-                td String
-                td Prefix of every other used class
-                td String
-                td 'bootstrap-switch'
-              tr
-                td wrapperClass
-                td String | Array
-                td Container element class(es)
-                td String | Array
-                td 'wrapper'
-              tr
-                td containerClass
-                td String | Array
-                td Wrapper element class(es)
-                td String | Array
-                td 'container'
-              tr
-                td handleOnClass
-                td String | Array
-                td Handle On element class(es)
-                td String | Array
-                td 'handle-on'
-              tr
-                td handleOffClass
-                td String | Array
-                td Handle Off element class(es)
-                td String | Array
-                td 'handle-off'
-              tr
-                td labelClass
-                td String | Array
-                td Label element class(es)
-                td String | Array
-                td 'label'
-              tr
-                td onModifierClass
-                td String
-                td On Modifier class, used when the switch state is true
-                td String
-                td 'on'
-              tr
-                td offModifierClass
-                td String
-                td Off Modifier class, used when the switch state is false
-                td String
-                td 'off'
-              tr
-                td focusedModifierClass
-                td String
-                td Focused Modifier class, used when the switch is focused
-                td String
-                td 'focused'
-              tr
-                td animateModifierClass
-                td String
-                td Animate Modifier class, used to apply CSS animation to the switch
-                td String
-                td 'animate'
-              tr
-                td disabledModifierClass
-                td String
-                td Disabled Modifier class, used the switch is disabled
-                td String
-                td 'disabled'
-              tr
-                td readonlyModifierClass
-                td String
-                td Readonly Modifier class, used the switch is readonly
-                td String
-                td 'readonly'
-              tr
-                td onInit
-                td Function
-                td Callback function to execute on initialization
-                td Function
-                td: pre: code.javascript function(event, state) {}
-              tr
-                td onSwitchChange
-                td Function
-                td Callback function to execute on switch state change
-                td Function
-                td: pre: code.javascript function(event, state) {}
-                
-        -->
+        <h1 class="page-header">Documentation <small>version 2.0.1 (Legacy)</small></h1>
+        <div id="options-2">
+          <h2 class="page-header">Options</h2>
+          <div class="alert alert-warning">
+            <p>
+              All the options are accepted only using <code>data-*</code> attributes on the input element.<br>
+              The exceptions are <code>checked</code>, <code>disabled</code> and <code>readonly</code> which are
+              proprietary input attributes.<br>
+              There isn't any way to specify the options in JavaScript during initialization.
+            </p>
+          </div>
+          <table class="table table-bordered table-striped table-responsive">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Description</th>
+                <th>Values</th>
+                <th>Default</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>state</td>
+                <td>Boolean</td>
+                <td>The checkbox state</td>
+                <td>true, false</td>
+                <td>'checked' attribute or true</td>
+              </tr>
+              <tr>
+                <td>size</td>
+                <td>String</td>
+                <td>The checkbox state</td>
+                <td>'', 'mini', 'small', 'normal', 'large'</td>
+                <td>''</td>
+              </tr>
+              <tr>
+                <td>animate</td>
+                <td>Boolean</td>
+                <td>Animate the switch</td>
+                <td>true, false</td>
+                <td>true</td>
+              </tr>
+              <tr>
+                <td>disabled</td>
+                <td>Boolean</td>
+                <td>Disable state</td>
+                <td>true, false</td>
+                <td>'disabled' attribute or false</td>
+              </tr>
+              <tr>
+                <td>readonly</td>
+                <td>Boolean</td>
+                <td>Readonly state</td>
+                <td>true, false</td>
+                <td>'readonly' attribute or false</td>
+              </tr>
+              <tr>
+                <td>on</td>
+                <td>String</td>
+                <td>Color of the left side of the switch</td>
+                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+                <td>null</td>
+              </tr>
+              <tr>
+                <td>off</td>
+                <td>String</td>
+                <td>Color of the right side of the switch</td>
+                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+                <td>null</td>
+              </tr>
+              <tr>
+                <td>on-label</td>
+                <td>String</td>
+                <td>Text of the left side of the switch</td>
+                <td>String</td>
+                <td>'ON'</td>
+              </tr>
+              <tr>
+                <td>off-label</td>
+                <td>String</td>
+                <td>Text of the right side of the switch</td>
+                <td>String</td>
+                <td>'OFF'</td>
+              </tr>
+              <tr>
+                <td>text-label</td>
+                <td>String</td>
+                <td>Text of the center handle of the switch</td>
+                <td>String</td>
+                <td>'&amp;nbsp;'</td>
+              </tr>
+              <tr>
+                <td>label-icon</td>
+                <td>String</td>
+                <td>Text of the center handle of the switch. Use to include external services icons</td>
+                <td>String</td>
+                <td>null</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div id="methods-2">
+          <h2 class="page-header">Methods</h2>
+          <table class="table table-bordered table-striped table-responsive">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Description</th>
+                <th>Accepted Values</th>
+                <th>Returned Values</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>state</td>
+                <td>Get checkbox state</td>
+                <td></td>
+                <td>true, false</td>
+              </tr>
+              <tr>
+                <td>setState</td>
+                <td>Set checkbox state</td>
+                <td>(value: true, false)[, skip: true, <strong>false</strong>]</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>toggleState</td>
+                <td>Toggle checkbox state</td>
+                <td>[skip: true, <strong>false</strong>]</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>toggleRadioState</td>
+                <td>Toggle radio state</td>
+                <td>[skip: true, <strong>false</strong>]</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>toggleRadioStateAllowUncheck</td>
+                <td>Toggle radio state allowing uncheck of the radio input</td>
+                <td>[uncheck: true, <strong>false</strong> | skip: true, <strong>false</strong>]</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setSizeClass</td>
+                <td>Set the size of the switch</td>
+                <td>'', 'mini', 'small', 'normal', 'large'</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setAnimated</td>
+                <td>Animate the switch</td>
+                <td>true, false</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>isDisabled</td>
+                <td>Get disabled state</td>
+                <td></td>
+                <td>true, false</td>
+              </tr>
+              <tr>
+                <td>setDisabled</td>
+                <td>Set disable state</td>
+                <td>true, false</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>toggleDisabled</td>
+                <td>Toggle disabled state</td>
+                <td></td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>isReadOnly</td>
+                <td>Get Readonly state</td>
+                <td></td>
+                <td>true, false</td>
+              </tr>
+              <tr>
+                <td>setReadOnly</td>
+                <td>Set Readonly state</td>
+                <td>true, false</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>toggleReadOnly</td>
+                <td>Toggle readonly state</td>
+                <td></td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setOnClass</td>
+                <td>Color of the left side of the switch</td>
+                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setOffClass</td>
+                <td>Color of the right side of the switch</td>
+                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setOnLabel</td>
+                <td>Text of the left side of the switch</td>
+                <td>String</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setOffLabel</td>
+                <td>Text of the right side of the switch</td>
+                <td>String</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setTextLabel</td>
+                <td>Text of the center handle of the switch</td>
+                <td>String</td>
+                <td>null</td>
+              </tr>
+              <tr>
+                <td>setTextIcon</td>
+                <td>Text of the center handle of the switch. Use to include external services icons</td>
+                <td>String</td>
+                <td>null</td>
+              </tr>
+              <tr>
+                <td>destroy</td>
+                <td>Destroy the instance of Bootstrap Switch</td>
+                <td></td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div id="events-2">
+          <h2 class="page-header">Events</h2>
+          <p>
+            The only event triggered it <code>switch-change</code>. It returns two parameters: <code>event</code> and
+            <code>data</code>.<br>
+            The latter is an object that include <code>el</code> (the input DOM element) and <code>value</code> (the
+            new input state)
+          </p>
+        </div>
       </div>
     </div>
     <script src="docs/lib/js/jquery.min.js"></script>

src/coffee/bootstrap-switch.coffee

@@ -17,29 +17,17 @@ do ($ = window.jQuery, window) ->
         onText: @$element.data "on-text"
         offText: @$element.data "off-text"
         labelText: @$element.data "label-text"
-        onModifierClass: "on"
-        offModifierClass: "off"
-        focusedModifierClass: "focused"
-        animateModifierClass: "animate"
-        disabledModifierClass: "disabled"
-        readonlyModifierClass: "readonly"
+        baseClass: @$element.data "base-class"
+        wrapperClass: @$element.data "wrapper-class"
       @$wrapper = $ "<div>",
         class: do =>
-          classes = ["#{@options.baseClass}"]
+          classes = ["#{@options.baseClass}"].concat @_getClasses @options.wrapperClass
 
-          classes.push do =>
-            unless $.isArray @options.wrapperClass
-              return "#{@options.baseClass}-#{@options.wrapperClass}"
-
-            cls = []
-            for c in @options.wrapperClass
-              cls.push "#{@options.baseClass}-#{c}"
-
-          classes.push if @options.state then "#{@options.baseClass}-#{@options.onModifierClass}" else "#{@options.baseClass}-#{@options.offModifierClass}"
+          classes.push if @options.state then "#{@options.baseClass}-on" else "#{@options.baseClass}-off"
           classes.push "#{@options.baseClass}-#{@options.size}" if @options.size?
-          classes.push "#{@options.baseClass}-#{@options.animateModifierClass}" if @options.animate
-          classes.push "#{@options.baseClass}-#{@options.disabledModifierClass}" if @options.disabled
-          classes.push "#{@options.baseClass}-#{@options.readonlyModifierClass}" if @options.readonly
+          classes.push "#{@options.baseClass}-animate" if @options.animate
+          classes.push "#{@options.baseClass}-disabled" if @options.disabled
+          classes.push "#{@options.baseClass}-readonly" if @options.readonly
           classes.push "#{@options.baseClass}-id-#{@$element.attr("id")}" if @$element.attr "id"
           classes.join " "
       @$container = $ "<div>",
@@ -97,7 +85,7 @@ do ($ = window.jQuery, window) ->
       return @options.size if typeof value is "undefined"
 
       @$wrapper.removeClass "#{@options.baseClass}-#{@options.size}" if @options.size?
-      @$wrapper.addClass "#{@options.baseClass}-#{value}"
+      @$wrapper.addClass "#{@options.baseClass}-#{value}" if value
       @options.size = value
       @$element
 
@@ -106,7 +94,7 @@ do ($ = window.jQuery, window) ->
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-#{@options.animateModifierClass}")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-animate")
       @options.animate = value
       @$element
 
@@ -115,14 +103,14 @@ do ($ = window.jQuery, window) ->
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-#{@options.disabledModifierClass}")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-disabled")
       @$element.prop "disabled", value
       @options.disabled = value
       @$element
 
     toggleDisabled: ->
       @$element.prop "disabled", not @options.disabled
-      @$wrapper.toggleClass "#{@options.baseClass}-#{@options.disabledModifierClass}"
+      @$wrapper.toggleClass "#{@options.baseClass}-disabled"
       @options.disabled = not @options.disabled
       @$element
 
@@ -131,14 +119,14 @@ do ($ = window.jQuery, window) ->
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-#{@options.readonlyModifierClass}")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-readonly")
       @$element.prop "readonly", value
       @options.readonly = value
       @$element
 
     toggleReadonly: ->
       @$element.prop "readonly", not @options.readonly
-      @$wrapper.toggleClass "#{@options.baseClass}-#{@options.readonlyModifierClass}"
+      @$wrapper.toggleClass "#{@options.baseClass}-readonly"
       @options.readonly = not @options.readonly
       @$element
 
@@ -189,19 +177,10 @@ do ($ = window.jQuery, window) ->
     wrapperClass: (value) ->
       return @options.wrapperClass if typeof value is "undefined"
 
-      value = $.fn.bootstrapSwitch.defaults.wrapperClass if !value
-
-      getClasses = (classes) =>
-        unless $.isArray classes
-          return "#{@options.baseClass}-#{classes}"
+      value = $.fn.bootstrapSwitch.defaults.wrapperClass unless value
 
-        cls = []
-        for c in classes
-          cls.push "#{@options.baseClass}-#{c}"
-        cls.join " "
-
-      @$wrapper.removeClass getClasses @options.wrapperClass
-      @$wrapper.addClass getClasses value
+      @$wrapper.removeClass @_getClasses(@options.wrapperClass).join " "
+      @$wrapper.addClass @_getClasses(value).join " "
       @options.wrapperClass = value
       @$element
 
@@ -226,8 +205,8 @@ do ($ = window.jQuery, window) ->
 
           @options.state = checked
           @$wrapper
-          .removeClass(if checked then "#{@options.baseClass}-#{@options.offModifierClass}" else "#{@options.baseClass}-#{@options.onModifierClass}")
-          .addClass if checked then "#{@options.baseClass}-#{@options.onModifierClass}" else "#{@options.baseClass}-#{@options.offModifierClass}"
+          .removeClass(if checked then "#{@options.baseClass}-off" else "#{@options.baseClass}-on")
+          .addClass if checked then "#{@options.baseClass}-on" else "#{@options.baseClass}-off"
 
           unless skip
             $("[name='#{@$element.attr('name')}']").not(@$element).prop("checked", false).trigger "change.bootstrapSwitch", true if @$element.is ":radio"
@@ -238,14 +217,14 @@ do ($ = window.jQuery, window) ->
           e.stopPropagation()
           e.stopImmediatePropagation()
 
-          @$wrapper.addClass "#{@options.baseClass}-#{@options.focusedModifierClass}"
+          @$wrapper.addClass "#{@options.baseClass}-focused"
 
         "blur.bootstrapSwitch": (e) =>
           e.preventDefault()
           e.stopPropagation()
           e.stopImmediatePropagation()
 
-          @$wrapper.removeClass "#{@options.baseClass}-#{@options.focusedModifierClass}"
+          @$wrapper.removeClass "#{@options.baseClass}-focused"
 
         "keydown.bootstrapSwitch": (e) =>
           return if not e.which or @options.disabled or @options.readonly
@@ -304,7 +283,7 @@ do ($ = window.jQuery, window) ->
           e.preventDefault()
 
           @drag = true
-          @$wrapper.removeClass "#{@options.baseClass}-#{@options.animateModifierClass}" if @options.animate
+          @$wrapper.removeClass "#{@options.baseClass}-animate" if @options.animate
           @$element.trigger "focus.bootstrapSwitch"
 
         "mouseup.bootstrapSwitch touchend.bootstrapSwitch": (e) =>
@@ -315,7 +294,7 @@ do ($ = window.jQuery, window) ->
           @drag = false
           @$element.prop("checked", parseInt(@$container.css("margin-left"), 10) > -(@$container.width() / 6)).trigger "change.bootstrapSwitch"
           @$container.css "margin-left", ""
-          @$wrapper.addClass "#{@options.baseClass}-#{@options.animateModifierClass}" if @options.animate
+          @$wrapper.addClass "#{@options.baseClass}-animate" if @options.animate
 
         "mouseleave.bootstrapSwitch": (e) =>
           @$label.trigger "mouseup.bootstrapSwitch"
@@ -335,6 +314,14 @@ do ($ = window.jQuery, window) ->
         , 1
       .data "bootstrap-switch", true
 
+    _getClasses: (classes) ->
+      return ["#{@options.baseClass}-#{classes}"] unless $.isArray classes
+
+      cls = []
+      for c in classes
+        cls.push "#{@options.baseClass}-#{c}"
+      cls
+
   $.fn.bootstrapSwitch = (option, args...) ->
     ret = @
     @each ->
@@ -359,12 +346,6 @@ do ($ = window.jQuery, window) ->
     labelText: "&nbsp;"
     baseClass: "bootstrap-switch"
     wrapperClass: "wrapper"
-    ###
-    containerClass: "container"
-    handleOnClass: "handle-on"
-    handleOffClass: "handle-off"
-    labelClass: "label"
-    ###
     onInit: ->
     onSwitchChange: ->
 

test/bootstrap-switch.js

@@ -1,4 +0,0 @@
-(function() {
-  describe("Bootstrap Switch", function() {});
-
-}).call(this);