added methods to toggle animate and inverse properties, added basic examples to docs

dist/js/bootstrap-switch.js

@@ -164,6 +164,12 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.toggleAnimate = function() {
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-animate");
+        this.options.animate = !this.options.animate;
+        return this.$element;
+      };
+
       BootstrapSwitch.prototype.disabled = function(value) {
         if (typeof value === "undefined") {
           return this.options.disabled;
@@ -235,6 +241,19 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.toggleInverse = function() {
+        var $off, $on;
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-inverse");
+        $on = this.$on.clone(true);
+        $off = this.$off.clone(true);
+        this.$on.replaceWith($off);
+        this.$off.replaceWith($on);
+        this.$on = $off;
+        this.$off = $on;
+        this.options.inverse = !this.options.inverse;
+        return this.$element;
+      };
+
       BootstrapSwitch.prototype.onColor = function(value) {
         var color;
         color = this.options.onColor;

docs/js/main.js

@@ -1,15 +1,14 @@
 $(function() {
   var $window = $(window);
-  var $switchState = $('#state-switch');
   var sectionTop = $('.top').outerHeight() + 20;
 
   // initialize highlight.js
   hljs.initHighlightingOnLoad();
 
   // navigation
-  $('a[href^="#"]').on('click', function(event) {
+  $('a[href*="#"]').on('click', function(event) {
     event.preventDefault();
-    var $target = $($(this).attr('href'));
+    var $target = $($(this).attr('href').slice('#'));
 
     if ($target.length) {
       $window.scrollTop($target.offset().top - sectionTop);
@@ -30,31 +29,33 @@ $(function() {
   // initialize all the inputs
   $('input[type="checkbox"],[type="radio"]').not('#create-switch').not('#events-switch').bootstrapSwitch();
 
-  // state
-  var $switchState = $("#switch-state");
-  $('[data-state-toggle]').on('click', function() {
-    $switchState.bootstrapSwitch('toggleState');
-  });
-  $('[data-state-set]').on('click', function() {
-    $switchState.bootstrapSwitch('state', $(this).data('state-set'));
-  });
-  $('[data-state-get]').on('click', function() {
-    alert($switchState.bootstrapSwitch('state'));
+  $('[data-get]').on("click", function() {
+    var type = $(this).data('get');
+
+    alert($('#switch-' + type).bootstrapSwitch(type));
   });
 
-  // size
-  $('[data-size-set]').on('click', function() {
-    $("#switch-size").bootstrapSwitch("size", $(this).data("size-set"));
+  $('[data-set]').on('click', function() {
+    var type = $(this).data('set');
+
+    $('#switch-' + type).bootstrapSwitch(type, $(this).data('value'));
   });
 
-  // animate
-  var $switchAnimate = $("#switch-animate");
-  $('[data-animate-toggle]').on('click', function() {
-    $switchAnimate.bootstrapSwitch("animate", ! $switchAnimate.bootstrapSwitch("animate"));
+  $('[data-toggle]').on('click', function() {
+    var type = $(this).data('toggle');
+
+    $('#switch-' + type).bootstrapSwitch('toggle' + type.charAt(0).toUpperCase() + type.slice(1));
   });
 
-  // disabled
-  $('[data-disabled-toggle]').on('click', function() {
-    $("#switch-disabled").bootstrapSwitch("toggleDisabled");
+  $('[data-set-text]').on('change', function(event) {
+    event.preventDefault();
+    var type = $(this).data('set-text');
+    var value = $.trim($(this).val());
+
+    if ( ! value) {
+      return;
+    }
+
+    $('#switch-' + type).bootstrapSwitch(type, value);
   });
 });

documentation-2.html

@@ -40,8 +40,8 @@
                 <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
               </ul>
             </li>
-            <li><a href="index.html#start">Start</a></li>
-            <li><a href="index.html#examples">Examples</a></li>
+            <li><a href="index.html">Start</a></li>
+            <li><a href="examples.html">Examples</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
                 <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>

documentation-3.html

@@ -40,8 +40,8 @@
                 <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
               </ul>
             </li>
-            <li><a href="index.html#start">Start</a></li>
-            <li><a href="index.html#examples">Examples</a></li>
+            <li><a href="index.html">Start</a></li>
+            <li><a href="examples.html">Examples</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
                 <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>
@@ -111,9 +111,25 @@
             </tr>
             <tr>
               <td>indeterminate</td>
-              <td></td>
+              <td>data-indeterminate</td>
+              <td>Boolean</td>
+              <td>Indeterminate state</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>inverse</td>
+              <td>data-inverse</td>
+              <td>Boolean</td>
+              <td>Inverse switch direction</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>radioAllOff</td>
+              <td>data-radio-all-off</td>
               <td>Boolean</td>
-              <td>indeterminate state</td>
+              <td>Allow this radio button to be unchecked by the user</td>
               <td>true, false</td>
               <td>false</td>
             </tr>
@@ -193,14 +209,6 @@
                 <pre><code class="javascript">function(event, state) {}</code></pre>
               </td>
             </tr>
-            <tr>
-              <td>radioAllOff</td>
-              <td>data-radio-all-off</td>
-              <td>Boolean</td>
-              <td>Allow this radio button to be unchecked by the user</td>
-              <td>true, false</td>
-              <td>false</td>
-            </tr>
           </tbody>
         </table>
         <h3>Global Defaults Overriding</h3>
@@ -227,6 +235,10 @@ $.fn.bootstrapSwitch.defaults.onColor = 'success';</code></pre>
               <td>toggleState</td>
               <td>Toggle the switch state</td>
             </tr>
+            <tr>
+              <td>toggleAnimate</td>
+              <td>Toggle the animate option</td>
+            </tr>
             <tr>
               <td>toggleDisabled</td>
               <td>Toggle the disabled state</td>
@@ -235,6 +247,14 @@ $.fn.bootstrapSwitch.defaults.onColor = 'success';</code></pre>
               <td>toggleReadonly</td>
               <td>Toggle the readonly state</td>
             </tr>
+            <tr>
+              <td>toggleIndeterminate</td>
+              <td>Toggle the indeterminate state</td>
+            </tr>
+            <tr>
+              <td>toggleInverse</td>
+              <td>Toggle the inverse option</td>
+            </tr>
             <tr>
               <td>destroy</td>
               <td>Destroy the instance of Bootstrap Switch</td>

examples.html

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

index.html

@@ -40,8 +40,8 @@
                 <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
               </ul>
             </li>
-            <li><a href="index.html#start">Start</a></li>
-            <li><a href="index.html#examples">Examples</a></li>
+            <li><a href="index.html">Start</a></li>
+            <li><a href="examples.html">Examples</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
                 <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>
@@ -61,7 +61,7 @@
         <p>
           <input type="checkbox" name="download-version" checked data-size="large" data-on-text="3" data-off-text="2.0.1">
         </p>
-        <p><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" id="download-3" class="btn btn-lg btn-primary">Download 3</a><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip" id="download-2" class="btn btn-lg btn-primary">Download 2.0.1</a></p><br><br>
+        <p><a id="download-3" href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" class="btn btn-lg btn-primary">Download 3</a><a id="download-2" href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip" class="btn btn-lg btn-primary">Download 2.0.1</a></p><br><br>
         <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=watch&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="184" height="30"></iframe>
         <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=fork&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="144" height="30"></iframe>
       </div>
@@ -76,68 +76,20 @@
           | help is needed. Many thanks.
           
       -->
-      <div id="start">
-        <h1 class="page-header">Getting Started</h1>
-        <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
-        <pre><code>[...]
+      <h1 class="page-header">Getting Started</h1>
+      <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
+      <pre><code>[...]
 &lt;link href="bootstrap.css" rel="stylesheet"&gt;
 &lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
 &lt;script src="jquery.js"&gt;&lt;/script&gt;
 &lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
 [...]</code></pre>
-        <p>Add your checkbox.</p>
-        <pre><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></pre>
-        <p>Initialize Bootstrap Switch.</p>
-        <pre><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
-        <p>Enjoy.</p>
-      </div>
-      <div id="examples">
-        <h1 class="page-header">Examples</h1>
-        <div class="row">
-          <div class="col-sm-6">
-            <h2 class="h4">State</h2>
-            <p>
-              <input id="switch-state" type="checkbox" checked>
-            </p>
-            <p>
-              <button type="button" data-state-toggle class="btn btn-default">Toggle</button>
-              <button type="button" data-state-set="true" class="btn btn-default">Set as true</button>
-              <button type="button" data-state-set="false" class="btn btn-default">Set as false</button>
-              <button type="button" data-state-get class="btn btn-default">Get</button>
-            </p>
-          </div>
-          <div class="col-sm-6">
-            <h2 class="h4">Size</h2>
-            <p>
-              <input id="switch-size" type="checkbox" checked>
-            </p>
-            <p>
-              <button type="button" data-size-set="mini" class="btn btn-default">Mini</button>
-              <button type="button" data-size-set="small" class="btn btn-default">Small</button>
-              <button type="button" data-size-set="normal" class="btn btn-default">Normal</button>
-              <button type="button" data-size-set="large" class="btn btn-default">Large</button>
-            </p>
-          </div>
-          <div class="col-sm-6">
-            <h2 class="h4">Animate</h2>
-            <p>
-              <input id="switch-animate" type="checkbox" checked>
-            </p>
-            <p>
-              <button type="button" data-animate-toggle class="btn btn-default">Toggle</button>
-            </p>
-          </div>
-          <div class="col-sm-6">
-            <h2 class="h4">Disabled</h2>
-            <p>
-              <input id="switch-disabled" type="checkbox" checked>
-            </p>
-            <p>
-              <button type="button" data-disabled-toggle class="btn btn-default">Toggle</button>
-            </p>
-          </div>
-        </div>
-      </div>
+      <p>Add your checkbox.</p>
+      <pre><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></pre>
+      <p>Initialize Bootstrap Switch.</p>
+      <pre><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
+      <p>Enjoy.</p>
+      <div class="text-center"><a href="examples.html" class="btn btn-lg btn-info">See Examples</a>&nbsp;<a href="documentation-3.html" class="btn btn-lg btn-default">Browse Documentation</a></div>
     </div>
     <div class="container bottom">
       <p>

main.html

@@ -40,8 +40,8 @@
                 <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
               </ul>
             </li>
-            <li><a href="index.html#start">Start</a></li>
-            <li><a href="index.html#examples">Examples</a></li>
+            <li><a href="index.html">Start</a></li>
+            <li><a href="examples.html">Examples</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
                 <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>

src/coffee/bootstrap-switch.coffee

@@ -105,6 +105,11 @@ do ($ = window.jQuery, window) ->
       @options.animate = value
       @$element
 
+    toggleAnimate: ->
+      @$wrapper.toggleClass "#{@options.baseClass}-animate"
+      @options.animate = not @options.animate
+      @$element
+
     disabled: (value) ->
       return @options.disabled if typeof value is "undefined"
 
@@ -168,6 +173,17 @@ do ($ = window.jQuery, window) ->
       @options.inverse = value
       @$element
 
+    toggleInverse: ->
+      @$wrapper.toggleClass "#{@options.baseClass}-inverse"
+      $on = @$on.clone true
+      $off = @$off.clone true
+      @$on.replaceWith $off
+      @$off.replaceWith $on
+      @$on = $off
+      @$off = $on
+      @options.inverse = not @options.inverse
+      @$element
+
     onColor: (value) ->
       color = @options.onColor
 

src/docs/documentation-3.jade

@@ -53,9 +53,23 @@ block content
           td false
         tr
           td indeterminate
-          td
+          td data-indeterminate
+          td Boolean
+          td Indeterminate state
+          td true, false
+          td false
+        tr
+          td inverse
+          td data-inverse
+          td Boolean
+          td Inverse switch direction
+          td true, false
+          td false
+        tr
+          td radioAllOff
+          td data-radio-all-off
           td Boolean
-          td indeterminate state
+          td Allow this radio button to be unchecked by the user
           td true, false
           td false
         tr
@@ -121,14 +135,6 @@ block content
           td Callback function to execute on switch state change
           td Function
           td: pre: code.javascript function(event, state) {}
-        tr
-          td radioAllOff
-          td data-radio-all-off
-          td Boolean
-          td Allow this radio button to be unchecked by the user
-          td true, false
-          td false
-
 
     h3 Global Defaults Overriding
 
@@ -157,12 +163,21 @@ block content
         tr
           td toggleState
           td Toggle the switch state
+        tr
+          td toggleAnimate
+          td Toggle the animate option
         tr
           td toggleDisabled
           td Toggle the disabled state
         tr
           td toggleReadonly
           td Toggle the readonly state
+        tr
+          td toggleIndeterminate
+          td Toggle the indeterminate state
+        tr
+          td toggleInverse
+          td Toggle the inverse option
         tr
           td destroy
           td Destroy the instance of Bootstrap Switch

src/docs/examples.jade

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

src/docs/index.jade

@@ -8,8 +8,8 @@ block content
     p Select the version to download:
     p: input(type='checkbox', name='download-version', checked, data-size='large', data-on-text='3', data-off-text='2.0.1')
     p
-      a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', id='download-3', class='btn btn-lg btn-primary') Download 3
-      a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip', id='download-2' class='btn btn-lg btn-primary') Download 2.0.1
+      a.btn.btn-lg.btn-primary#download-3(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') Download 3
+      a.btn.btn-lg.btn-primary#download-2(href='https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip') Download 2.0.1
     br
     br
     iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='184', height='30')
@@ -25,61 +25,27 @@ block content
         | <a href="https://github.com/nostalgiaz/bootstrap-switch/pulls">pull request</a> with your changes. Every
         | help is needed. Many thanks.
 
-  #start
-    h1.page-header Getting Started
+  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;
-      | [...]
+  p Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
+  pre: code
+    | [...]
+    | &lt;link href="bootstrap.css" rel="stylesheet"&gt;
+    | &lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
+    | &lt;script src="jquery.js"&gt;&lt;/script&gt;
+    | &lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
+    | [...]
 
-    p Add your checkbox.
-    pre: code &lt;input type="checkbox" name="my-checkbox" checked&gt;
+  p Add your checkbox.
+  pre: code &lt;input type="checkbox" name="my-checkbox" checked&gt;
 
-    p Initialize Bootstrap Switch.
-    pre: code $("[name='my-checkbox']").bootstrapSwitch();
+  p Initialize Bootstrap Switch.
+  pre: code $("[name='my-checkbox']").bootstrapSwitch();
 
-    p Enjoy.
+  p Enjoy.
 
-  #examples
-    h1.page-header Examples
-
-    .row
-      .col-sm-6
-        h2.h4 State
-        p
-          input#switch-state(type='checkbox', checked)
-        p
-          button.btn.btn-default(type='button' data-state-toggle) Toggle
-          button.btn.btn-default(type='button', data-state-set='true') Set as true
-          button.btn.btn-default(type='button', data-state-set='false') Set as false
-          button.btn.btn-default(type='button', data-state-get) Get
-
-      .col-sm-6
-        h2.h4 Size
-        p
-          input#switch-size(type='checkbox', checked)
-        p
-          button.btn.btn-default(type='button', data-size-set='mini') Mini
-          button.btn.btn-default(type='button', data-size-set='small') Small
-          button.btn.btn-default(type='button', data-size-set='normal') Normal
-          button.btn.btn-default(type='button', data-size-set='large') Large
-
-      .col-sm-6
-        h2.h4 Animate
-        p
-          input#switch-animate(type='checkbox', checked)
-        p
-          button.btn.btn-default(type='button', data-animate-toggle) Toggle
-
-      .col-sm-6
-        h2.h4 Disabled
-        p
-          input#switch-disabled(type='checkbox', checked)
-        p
-          button.btn.btn-default(type='button', data-disabled-toggle) Toggle
+  .text-center
+    a.btn.btn-lg.btn-info(href='examples.html') See Examples
+    | &nbsp;
+    a.btn.btn-lg.btn-default(href='documentation-3.html') Browse Documentation
 

src/docs/main.jade

@@ -46,8 +46,8 @@ html(lang='en')
               ul.dropdown-menu
                 li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') 3 (Stable)
                 li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip') 2.0.1 (Legacy)
-            li: a(href='index.html#start') Start
-            li: a(href='index.html#examples') Examples
+            li: a(href='index.html') Start
+            li: a(href='examples.html') Examples
             li.dropdown
               a(href='#', data-toggle='dropdown')
                 | Documentation

test/bootstrap-switch.js

@@ -164,6 +164,12 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.toggleAnimate = function() {
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-animate");
+        this.options.animate = !this.options.animate;
+        return this.$element;
+      };
+
       BootstrapSwitch.prototype.disabled = function(value) {
         if (typeof value === "undefined") {
           return this.options.disabled;
@@ -235,6 +241,19 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.toggleInverse = function() {
+        var $off, $on;
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-inverse");
+        $on = this.$on.clone(true);
+        $off = this.$off.clone(true);
+        this.$on.replaceWith($off);
+        this.$off.replaceWith($on);
+        this.$on = $off;
+        this.$off = $on;
+        this.options.inverse = !this.options.inverse;
+        return this.$element;
+      };
+
       BootstrapSwitch.prototype.onColor = function(value) {
         var color;
         color = this.options.onColor;