restructuring docs, possible fix for wrapper classes

README.md

@@ -1,17 +1,18 @@
-Bootstrap Switch
-================
+# Bootstrap Switch
+[![Dependency Status](https://david-dm.org/nostalgiaz/bootstrap-switch.svg?theme=shields.io)](https://david-dm.org/nostalgiaz/bootstrap-switch)
+[![devDependency Status](https://david-dm.org/nostalgiaz/bootstrap-switch/dev-status.svg?theme=shields.io)](https://david-dm.org/nostalgiaz/bootstrap-switch#info=devDependencies)
+[![NPM Version](http://img.shields.io/npm/v/bootstrap-switch.svg)](https://www.npmjs.org/)
+[![Gittip LostCrew](http://img.shields.io/gittip/LostCrew.svg)](https://www.gittip.com/LostCrew)
 
 Turn checkboxes and radio buttons in toggle switches.
 
 **Version 3 is almost ready and features a entire API redesign and source rewriting. Knowing that, your help would be decisive to ship it within days. Give the branch `3.0` a try and post any bugs you might encounter or improvements you would like to integrate in the final release.
 With heart, many thanks.**
 
-Demo and Documentation
-----------------------
+## Demo and Documentation
 http://www.bootstrap-switch.org
 
-Usage
------
+## Usage
 
 Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript:
 
@@ -38,15 +39,15 @@ $("[name='my-checkbox']").bootstrapSwitch();
 
 Enjoy.
 
-LESS
-----
-If you want to use your custom Bootstrap variables, choose the appropriate `bootstrap-switch.less` source file among versions 2 and 3 and include it in your LESS stack.
+## Less
 
-Supported browsers
-------------------
-IE9+ and all the other modern browsers (until proven otherwise: submit a issue and let's see what we can do).
+If you want to use your bootstrap variables, include `bootstrap-switch.less` in your compilation stack. You can even choose among Bootstrap versions 2.3.2 or 3.*.* compatible source.
+
+## Supported browsers
+
+IE8+ and all the other modern browsers (until proven otherwise: submit a issue and let's see what we can do).
+
+## License
 
-License
--------
 Licensed under the Apache License, Version 2.0
 http://www.apache.org/licenses/LICENSE-2.0

build/js/bootstrap-switch.js

@@ -57,34 +57,43 @@
           "for": this.$element.attr("id"),
           html: this.options.labelText
         });
-        this.$wrapper = $("<div>", {
-          "class": (function(_this) {
-            return function() {
-              var classes;
-              classes = ["" + _this.name];
-              classes.push(_this.options.state ? "" + _this.name + "-on" : "" + _this.name + "-off");
-              if (_this.options.size != null) {
-                classes.push("" + _this.name + "-" + _this.options.size);
-              }
-              if (_this.options.animate) {
-                classes.push("" + _this.name + "-animate");
-              }
-              if (_this.options.disabled) {
-                classes.push("" + _this.name + "-disabled");
-              }
-              if (_this.options.readonly) {
-                classes.push("" + _this.name + "-readonly");
-              }
-              if (_this.$element.attr("id")) {
-                classes.push("" + _this.name + "-id-" + (_this.$element.attr("id")));
-              }
-              return classes.join(" ");
-            };
-          })(this)
-        });
+        this.$wrapper = $("<div>");
+        this.$wrapper.addClass((function(_this) {
+          return function() {
+            var classes;
+            classes = ["" + _this.name];
+            classes.push(_this.options.state ? "" + _this.name + "-on" : "" + _this.name + "-off");
+            if (_this.options.size != null) {
+              classes.push("" + _this.name + "-" + _this.options.size);
+            }
+            if (_this.options.animate) {
+              classes.push("" + _this.name + "-animate");
+            }
+            if (_this.options.disabled) {
+              classes.push("" + _this.name + "-disabled");
+            }
+            if (_this.options.readonly) {
+              classes.push("" + _this.name + "-readonly");
+            }
+            if (_this.$element.attr("id")) {
+              classes.push("" + _this.name + "-id-" + (_this.$element.attr("id")));
+            }
+            return classes.join(" ");
+          };
+        })(this));
+        this.$element.on("init", (function(_this) {
+          return function() {
+            return _this.options.on.init.call();
+          };
+        })(this));
+        this.$element.on("switchChange", (function(_this) {
+          return function() {
+            return _this.options.on.switchChange.call();
+          };
+        })(this));
         this.$div = this.$element.wrap($("<div>")).parent();
         this.$wrapper = this.$div.wrap(this.$wrapper).parent();
-        this.$element.before(this.$on).before(this.$label).before(this.$off);
+        this.$element.before(this.$on).before(this.$label).before(this.$off).trigger("init");
         this._elementHandlers();
         this._handleHandlers();
         this._labelHandlers();
@@ -428,7 +437,11 @@
       offColor: "default",
       onText: "ON",
       offText: "OFF",
-      labelText: "&nbsp;"
+      labelText: "&nbsp;",
+      on: {
+        init: function() {},
+        switchChange: function() {}
+      }
     };
   })(window.jQuery, window);
 

docs/_index.html

@@ -0,0 +1,442 @@
+<!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/highlight.css

@@ -0,0 +1,153 @@
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]>
+
+*/
+
+.hljs {
+  display: block; padding: 0.5em;
+  background: #F0F0F0;
+}
+
+.hljs,
+.hljs-subst,
+.hljs-tag .hljs-title,
+.lisp .hljs-title,
+.clojure .hljs-built_in,
+.nginx .hljs-title {
+  color: black;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-constant,
+.hljs-parent,
+.hljs-tag .hljs-value,
+.hljs-rules .hljs-value,
+.hljs-rules .hljs-value .hljs-number,
+.hljs-preprocessor,
+.hljs-pragma,
+.haml .hljs-symbol,
+.ruby .hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.hljs-aggregate,
+.hljs-template_tag,
+.django .hljs-variable,
+.smalltalk .hljs-class,
+.hljs-addition,
+.hljs-flow,
+.hljs-stream,
+.bash .hljs-variable,
+.apache .hljs-tag,
+.apache .hljs-cbracket,
+.tex .hljs-command,
+.tex .hljs-special,
+.erlang_repl .hljs-function_or_atom,
+.asciidoc .hljs-header,
+.markdown .hljs-header,
+.coffeescript .hljs-attribute {
+  color: #800;
+}
+
+.smartquote,
+.hljs-comment,
+.hljs-annotation,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-chunk,
+.asciidoc .hljs-blockquote,
+.markdown .hljs-blockquote {
+  color: #888;
+}
+
+.hljs-number,
+.hljs-date,
+.hljs-regexp,
+.hljs-literal,
+.hljs-hexcolor,
+.smalltalk .hljs-symbol,
+.smalltalk .hljs-char,
+.go .hljs-constant,
+.hljs-change,
+.lasso .hljs-variable,
+.makefile .hljs-variable,
+.asciidoc .hljs-bullet,
+.markdown .hljs-bullet,
+.asciidoc .hljs-link_url,
+.markdown .hljs-link_url {
+  color: #080;
+}
+
+.hljs-label,
+.hljs-javadoc,
+.ruby .hljs-string,
+.hljs-decorator,
+.hljs-filter .hljs-argument,
+.hljs-localvars,
+.hljs-array,
+.hljs-attr_selector,
+.hljs-important,
+.hljs-pseudo,
+.hljs-pi,
+.haml .hljs-bullet,
+.hljs-doctype,
+.hljs-deletion,
+.hljs-envvar,
+.hljs-shebang,
+.apache .hljs-sqbracket,
+.nginx .hljs-built_in,
+.tex .hljs-formula,
+.erlang_repl .hljs-reserved,
+.hljs-prompt,
+.asciidoc .hljs-link_label,
+.markdown .hljs-link_label,
+.vhdl .hljs-attribute,
+.clojure .hljs-attribute,
+.asciidoc .hljs-attribute,
+.lasso .hljs-attribute,
+.coffeescript .hljs-property,
+.hljs-phony {
+  color: #88F
+}
+
+.hljs-keyword,
+.hljs-id,
+.hljs-title,
+.hljs-built_in,
+.hljs-aggregate,
+.css .hljs-tag,
+.hljs-javadoctag,
+.hljs-phpdoc,
+.hljs-yardoctag,
+.smalltalk .hljs-class,
+.hljs-winutils,
+.bash .hljs-variable,
+.apache .hljs-tag,
+.go .hljs-typename,
+.tex .hljs-command,
+.asciidoc .hljs-strong,
+.markdown .hljs-strong,
+.hljs-request,
+.hljs-status {
+  font-weight: bold;
+}
+
+.asciidoc .hljs-emphasis,
+.markdown .hljs-emphasis {
+  font-style: italic;
+}
+
+.nginx .hljs-built_in {
+  font-weight: normal;
+}
+
+.coffeescript .javascript,
+.javascript .xml,
+.lasso .markup,
+.tex .hljs-formula,
+.xml .javascript,
+.xml .vbscript,
+.xml .css,
+.xml .hljs-cdata {
+  opacity: 0.5;
+}

docs/index.css

@@ -3,7 +3,7 @@ body {
   padding-bottom: 50px;
 }
 
-h1 {
+#title {
   font-size: 5em;
   letter-spacing: -2px;
 }

docs/index.jade

@@ -0,0 +1,219 @@
+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
+    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/highlight.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);
+      })();
+  body
+    header.navbar.navbar-default.navbar-fixed-top.header(role='banner')
+      .container
+        .navbar-header
+          button.navbar-toggle(type='button', data-toggle='collapse', data-target='#collapse')
+            span.sr-only Toggle navigation
+            span.icon-bar
+            span.icon-bar
+            span.icon-bar
+          a.navbar-brand(href='../') Bootstrap Switch
+        nav#collapse.collapse.navbar-collapse(role='navigation')
+          ul.nav.navbar-nav
+            li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip') Download 3RC
+            li: a(href='#getting-started') Getting Started
+            li.dropdown
+              a(href='#documentation', data-toggle='dropdown')
+                | Documentation
+                span.caret
+              ul.dropdown-menu
+                li: a(href='#options') Options
+                li: a(href='#methods') Methods
+                //-
+                  li: a(href='#size') Size
+                  li: a(href='#colors') Colors
+                  li: a(href='#animation') Animation
+                  li: a(href='#disabled') Disabled / Readonly
+                  li: a(href='#text') Text
+                  li: a(href='#label-text') Label Text
+                  li: a(href='#icon-label-text') Icon Label Text
+                  li: a(href='#event-handlers') Event Handlers
+                  li: a(href='#label-event-handler') Label Event Handlers
+                  li: a(href='#state') State
+                  li: a(href='#destroy') Destroy
+                  li: a(href='#disable') Disable / Readonly
+                  li: a(href='#radio') Radio
+                  li: a(href='#form') Form
+                  li: a(href='#modal') Modal
+            li: a(href='#examples') Examples
+            li: a(href='https://github.com/nostalgiaz/bootstrap-switch/issues') Bug reports
+
+
+    .container
+      h1#title Bootstrap Switch
+      p.lead Turn checkboxes and radio buttons in toggle switches.
+      a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip', class='btn btn-lg btn-primary') Download Bootstrap Switch 3 Release Candidate
+
+      #getting-started
+        h1.page-header Getting Started
+        p Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
+        pre: code
+            [...]
+            <link href="bootstrap.css" rel="stylesheet">
+            <link href="bootstrap-switch.css" rel="stylesheet">
+            <script src="jquery.js"></script>
+            <script src="bootstrap-switch.js"></script>
+            [...]
+
+      #options
+        h1.page-header 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 | Null
+              td The checkbox state
+              td null, 'mini', 'small', 'large'
+              td null
+            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 ' '
+            tr
+              td on
+              td Object
+              td(colspan='3') Callback functions collection
+            tr
+              td on.init
+              td Function
+              td Callback function to execute on initialization
+              td Function
+              td function() {}
+            tr
+              td on.switchChange
+              td Function
+              td Callback function to execute on switch state change
+              td Function
+              td function() {}
+
+      #methods
+        h1.page-header Methods
+
+        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);
+
+        h2 Additional Methods
+
+        table.table.table-bordered.table-striped.table-responsive
+          thead
+            tr
+              th Name
+              th Description
+          tbody
+            tr
+              td toggleState
+              td Toggle the switch state
+            tr
+              td toggleDisabled
+              td Toggle the disabled state
+            tr
+              td toggleReadonly
+              td Toggle the readonly state
+            tr
+              td destroy
+              td Destroy the instance of Bootstrap Switch
+
+      #examples
+        h1.page-header Examples
+
+        .row
+          .col-sm-6
+            input(type='checkbox', id='toggle-state-switch' checked)
+          .col-sm-6
+            button(type='button', id='toggle-state-switch-button-state', class='btn btn-default') Get State
+             
+            button(type='button', id='toggle-state-switch-button-on', class='btn btn-default') Set On
+             
+            button(type='button', id='toggle-state-switch-button-off', class='btn btn-default') Set Off
+             
+            button(type='button', id='toggle-state-switch-button', class='btn btn-default') Toggle State
+
+    script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js')
+    script(src='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js')
+    script(src='build/js/bootstrap-switch.js')
+    script(src='docs/highlight.js')
+    script(src='docs/index.js')

docs/index.js

@@ -1,6 +1,9 @@
 $(function() {
+  // initialize highlight.js
+  hljs.initHighlightingOnLoad();
+
   // initialize all the inputs
-  $('input[type="checkbox"],[type="radio"]').not('#create-switch').bootstrapSwitch();
+  $('input[type="checkbox"],[type="radio"]').not('#create-switch').not('#events-switch').bootstrapSwitch();
 
   // dimension
   $('#btn-size-regular-switch').on('click', function () {
@@ -87,12 +90,17 @@ $(function() {
   });
 
   // event handler
-  $('#switch-change').on('switchChange', function (e, data) {
-    var $element = $(data.el),
-      value = data.value;
+  $('#events-switch').on({
+    init: function() {
+      console.log('Initialized!');
+    },
+    switchChange: function (e, data) {
+      var $element = $(data.el),
+        value = data.value;
 
-    console.log(e, $element, value);
-  });
+      console.log(e, $element, value);
+    }
+  }).bootstrapSwitch();
 
   // color
   $('#btn-color-on-switch').on('click', function() {

docs/lib/prism.css

@@ -1,107 +0,0 @@
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-
-code[class*="language-"],
-pre[class*="language-"] {
-  color: black;
-  text-shadow: 0 1px white;
-  font-family: Consolas, Monaco, 'Andale Mono', monospace;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-@media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none;
-  }
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: .5em 0;
-  overflow: auto;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background: #f5f2f0;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #a67f59;
-  background: hsla(0,0%,100%,.5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-
-.token.regex,
-.token.important {
-  color: #e90;
-}
-
-.token.important {
-  font-weight: bold;
-}
-
-.token.entity {
-  cursor: help;
-}

gulpfile.js

@@ -1,5 +1,5 @@
 var gulp = require('gulp');
-var plugins = require("gulp-load-plugins")();
+var plugins = require('gulp-load-plugins')();
 var pkg = require('./package.json');
 var name = pkg.name;
 var banner = [
@@ -74,20 +74,32 @@ gulp.task('less-bootstrap3', function() {
 
 gulp.task('clean', function() {
   gulp.src(['build/css', 'build/js'], { read: false })
-    .pipe(plugins.clean());
+    .pipe(plugins.clean()).on('error', plugins.util.log);
 });
 
-gulp.task('open', function(){
-  gulp.src('index.html')
-    .pipe(plugins.open());
+gulp.task('docs', function() {
+  gulp.src('docs/index.jade')
+    .pipe(plugins.jade())
+    .pipe(gulp.dest('./'));
 });
 
-gulp.task('watch', function () {
+gulp.task('connect', ['docs'], plugins.connect.server({
+  root: [__dirname],
+  livereload: false,
+  open: {
+    file: 'index.html'
+  }
+}));
+
+gulp.task('watch', function() {
   gulp.watch('src/coffee/' + name + '.coffee', ['coffee']);
   gulp.watch('src/less/bootstrap2/*.less', ['less-bootstrap2']);
   gulp.watch('src/less/bootstrap3/*.less', ['less-bootstrap3']);
+  gulp.watch('docs/index.jade', ['docs']);
 });
 
-gulp.task('default', ['clean'], function() {
-  gulp.start('coffee', 'less-bootstrap2', 'less-bootstrap3', 'open', 'watch')
+gulp.task('build', ['clean'], function() {
+  gulp.start('coffee', 'less-bootstrap2', 'less-bootstrap3');
 });
+
+gulp.task('default', ['build', 'docs', 'connect', 'watch']);

package.json

@@ -42,11 +42,14 @@
     "gulp-util": "~2.2.14",
     "gulp-header": "~1.0.2",
     "gulp-uglify": "~0.2.1",
-    "gulp-coffeelint": "~0.2.1",
-    "gulp": "~3.5.2",
-    "gulp-less": "~1.2.1",
+    "gulp-coffeelint": "~0.2.2",
+    "gulp": "~3.5.5",
+    "gulp-less": "~1.2.2",
     "gulp-rename": "~1.0.0",
     "gulp-open": "~0.2.8",
-    "gulp-load-plugins": "~0.3.0"
+    "gulp-load-plugins": "~0.3.0",
+    "gulp-jade": "~0.4.2",
+    "run-sequence": "~0.3.6",
+    "gulp-connect": "~1.0.7"
   }
 }

src/coffee/bootstrap-switch.coffee

@@ -26,24 +26,34 @@ do ($ = window.jQuery, window) ->
       @$label = $ "<label>",
         for: @$element.attr "id"
         html: @options.labelText
-      @$wrapper = $ "<div>",
-        "class": =>
-          classes = ["#{@name}"]
-
-          classes.push if @options.state then "#{@name}-on" else "#{@name}-off"
-          classes.push "#{@name}-#{@options.size}" if @options.size?
-          classes.push "#{@name}-animate" if @options.animate
-          classes.push "#{@name}-disabled" if @options.disabled
-          classes.push "#{@name}-readonly" if @options.readonly
-          classes.push "#{@name}-id-#{@$element.attr("id")}" if @$element.attr "id"
-          classes.join " "
+      @$wrapper = $ "<div>"
+
+      # add wrapper classes
+      @$wrapper.addClass  =>
+        classes = ["#{@name}"]
+
+        classes.push if @options.state then "#{@name}-on" else "#{@name}-off"
+        classes.push "#{@name}-#{@options.size}" if @options.size?
+        classes.push "#{@name}-animate" if @options.animate
+        classes.push "#{@name}-disabled" if @options.disabled
+        classes.push "#{@name}-readonly" if @options.readonly
+        classes.push "#{@name}-id-#{@$element.attr("id")}" if @$element.attr "id"
+        classes.join " "
+
+      # set up events
+      @$element.on "init", => @options.on.init.call()
+      @$element.on "switchChange", => @options.on.switchChange.call()
 
       # reassign elements after dom modification
       @$div = @$element.wrap($("<div>")).parent()
       @$wrapper = @$div.wrap(@$wrapper).parent()
 
-      # insert handles and label
-      @$element.before(@$on).before(@$label).before @$off
+      # insert handles and label and trigger event
+      @$element
+      .before(@$on)
+      .before(@$label)
+      .before(@$off)
+      .trigger "init"
 
       @_elementHandlers()
       @_handleHandlers()
@@ -311,3 +321,7 @@ do ($ = window.jQuery, window) ->
     onText: "ON"
     offText: "OFF"
     labelText: "&nbsp;"
+    on:
+      init: ->
+      switchChange: ->
+