added inverse programmatic method, updated documentation

dist/css/bootstrap3/bootstrap-switch.css

@@ -129,7 +129,8 @@
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
 }
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-container {
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-container,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-indeterminate .bootstrap-switch-container {
   margin-left: -25%;
 }
 .bootstrap-switch .bootstrap-switch-container {

dist/js/bootstrap-switch.js

@@ -39,14 +39,14 @@
           readonly: this.$element.is("[readonly]"),
           indeterminate: this.$element.data("indeterminate"),
           inverse: this.$element.data("inverse"),
+          radioAllOff: this.$element.data("radio-all-off"),
           onColor: this.$element.data("on-color"),
           offColor: this.$element.data("off-color"),
           onText: this.$element.data("on-text"),
           offText: this.$element.data("off-text"),
           labelText: this.$element.data("label-text"),
           baseClass: this.$element.data("base-class"),
-          wrapperClass: this.$element.data("wrapper-class"),
-          radioAllOff: this.$element.data("radio-all-off")
+          wrapperClass: this.$element.data("wrapper-class")
         }, options);
         this.$wrapper = $("<div>", {
           "class": (function(_this) {
@@ -218,6 +218,23 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.inverse = function(value) {
+        var $off, $on;
+        if (typeof value === "undefined") {
+          return this.options.inverse;
+        }
+        value = !!value;
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-inverse");
+        $on = this.$on.clone(true);
+        $off = this.$off.clone(true);
+        this.$on.replaceWith($off);
+        this.$off.replaceWith($on);
+        this.$on = $off;
+        this.$off = $on;
+        this.options.inverse = value;
+        return this.$element;
+      };
+
       BootstrapSwitch.prototype.onColor = function(value) {
         var color;
         color = this.options.onColor;
@@ -523,6 +540,7 @@
       readonly: false,
       indeterminate: false,
       inverse: false,
+      radioAllOff: false,
       onColor: "primary",
       offColor: "default",
       onText: "ON",
@@ -530,7 +548,6 @@
       labelText: "&nbsp;",
       baseClass: "bootstrap-switch",
       wrapperClass: "wrapper",
-      radioAllOff: false,
       onInit: function() {},
       onSwitchChange: function() {}
     };

docs/js/main.js

@@ -1,6 +1,6 @@
 $(function() {
   var $window = $(window);
-  var $stateSwitch = $('#state-switch');
+  var $switchState = $('#state-switch');
   var sectionTop = $('.top').outerHeight() + 20;
 
   // initialize highlight.js
@@ -31,16 +31,30 @@ $(function() {
   $('input[type="checkbox"],[type="radio"]').not('#create-switch').not('#events-switch').bootstrapSwitch();
 
   // state
-  $('#state-switch-toggle').on('click', function () {
-    $stateSwitch.bootstrapSwitch('toggleState');
+  var $switchState = $("#switch-state");
+  $('[data-state-toggle]').on('click', function() {
+    $switchState.bootstrapSwitch('toggleState');
   });
-  $('#state-switch-on').on('click', function () {
-    $stateSwitch.bootstrapSwitch('state', true);
+  $('[data-state-set]').on('click', function() {
+    $switchState.bootstrapSwitch('state', $(this).data('state-set'));
   });
-  $('#state-switch-off').on('click', function () {
-    $stateSwitch.bootstrapSwitch('state', false);
+  $('[data-state-get]').on('click', function() {
+    alert($switchState.bootstrapSwitch('state'));
   });
-  $('#state-switch-state').on('click', function () {
-    alert($stateSwitch.bootstrapSwitch('state'));
+
+  // size
+  $('[data-size-set]').on('click', function() {
+    $("#switch-size").bootstrapSwitch("size", $(this).data("size-set"));
+  });
+
+  // animate
+  var $switchAnimate = $("#switch-animate");
+  $('[data-animate-toggle]').on('click', function() {
+    $switchAnimate.bootstrapSwitch("animate", ! $switchAnimate.bootstrapSwitch("animate"));
+  });
+
+  // disabled
+  $('[data-disabled-toggle]').on('click', function() {
+    $("#switch-disabled").bootstrapSwitch("toggleDisabled");
   });
 });

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="#new">What's new</a></li>
-            <li><a href="#start">Start</a></li>
+            <li><a href="index.html#start">Start</a></li>
+            <li><a href="index.html#examples">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="#new">What's new</a></li>
-            <li><a href="#start">Start</a></li>
+            <li><a href="index.html#start">Start</a></li>
+            <li><a href="index.html#examples">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>
@@ -285,25 +285,6 @@ $.fn.bootstrapSwitch.defaults.onColor = 'success';</code></pre>
           </tbody>
         </table>
       </div>
-      <div id="examples-3">
-        <h2 class="page-header">Examples</h2>
-        <p>To be included</p>
-        <!--
-        h3 State
-        .row
-          .col-sm-6
-            input(type='checkbox', id='state-switch' checked)
-          .col-sm-6
-            .btn-group.pull-right
-              button(type='button', id='state-switch-state', class='btn btn-default') Get State
-              &nbsp;
-              button(type='button', id='state-switch-on', class='btn btn-default') Set On
-              &nbsp;
-              button(type='button', id='state-switch-off', class='btn btn-default') Set Off
-              &nbsp;
-              button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State
-        -->
-      </div>
     </div>
     <div class="container bottom">
       <p>

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="#new">What's new</a></li>
-            <li><a href="#start">Start</a></li>
+            <li><a href="index.html#start">Start</a></li>
+            <li><a href="index.html#examples">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>
@@ -63,34 +63,19 @@
         </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>
         <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>
-          <strong>Documentation in progress!</strong><br>
-          It might not seem, but it's actually a lot of work. The goal is to make it as cleanest, most readable and
-          understandable as possible.<br>
-          If you feel there is something missing, submit a
-          <a href="https://github.com/nostalgiaz/bootstrap-switch/pulls">pull request</a> with your changes. Every
-          help is needed. Many thanks.
-        </p>
-      </div>
-      <div id="new">
-        <h1 class="page-header">What's new in version 3</h1>
-        <ul>
-          <li>API redesign for a more intuitive use</li>
-          <li>Entire code source rewriting focused on cleanliness and performance</li>
-          <li>Initialization options can be passed as JavaScript object or written as <code>data-*</code></li>
-          <li>Plugin constructor publicly available from <code>$.fn.bootstrapSwitch.Constructor</code></li>
-          <li>Plugin instance publicly available calling <code>.data('bootstrap-switch')</code></li>
-          <li>Global overridable defaults options</li>
-          <li>Improved flexibility with <code>baseClass</code> and <code>wrapperClass</code> options</li>
-          <li>New <code>onInit</code> event</li>
-          <li>Event namespacing</li>
-          <li>Full Bootstrap 3 support</li>
-          <li>A lot of fixed bug, as usual</li>
-        </ul>
+        <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>
+      <!--
+      .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.
+          
+      -->
       <div id="start">
         <h1 class="page-header">Getting Started</h1>
         <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
@@ -106,6 +91,53 @@
         <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>
     </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="#new">What's new</a></li>
-            <li><a href="#start">Start</a></li>
+            <li><a href="index.html#start">Start</a></li>
+            <li><a href="index.html#examples">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

@@ -12,6 +12,7 @@ do ($ = window.jQuery, window) ->
         readonly: @$element.is "[readonly]"
         indeterminate: @$element.data "indeterminate"
         inverse: @$element.data "inverse"
+        radioAllOff: @$element.data "radio-all-off"
         onColor: @$element.data "on-color"
         offColor: @$element.data "off-color"
         onText: @$element.data "on-text"
@@ -19,7 +20,6 @@ do ($ = window.jQuery, window) ->
         labelText: @$element.data "label-text"
         baseClass: @$element.data "base-class"
         wrapperClass: @$element.data "wrapper-class"
-        radioAllOff: @$element.data "radio-all-off"
       , options
       @$wrapper = $ "<div>",
         class: do =>
@@ -153,6 +153,21 @@ do ($ = window.jQuery, window) ->
       @options.indeterminate = not @options.indeterminate
       @$element
 
+    inverse: (value) ->
+      return @options.inverse if typeof value is "undefined"
+
+      value = not not value
+
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-inverse")
+      $on = @$on.clone true
+      $off = @$off.clone true
+      @$on.replaceWith $off
+      @$off.replaceWith $on
+      @$on = $off
+      @$off = $on
+      @options.inverse = value
+      @$element
+
     onColor: (value) ->
       color = @options.onColor
 
@@ -383,6 +398,7 @@ do ($ = window.jQuery, window) ->
     readonly: false
     indeterminate: false
     inverse: false
+    radioAllOff: false
     onColor: "primary"
     offColor: "default"
     onText: "ON"
@@ -390,7 +406,6 @@ do ($ = window.jQuery, window) ->
     labelText: "&nbsp;"
     baseClass: "bootstrap-switch"
     wrapperClass: "wrapper"
-    radioAllOff: false
     onInit: ->
     onSwitchChange: ->
 

src/docs/documentation-3.jade

@@ -207,22 +207,3 @@ block content
           td
             | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
             | state (true | false)
-
-  #examples-3
-    h2.page-header Examples
-
-    p To be included
-    //
-      h3 State
-      .row
-        .col-sm-6
-          input(type='checkbox', id='state-switch' checked)
-        .col-sm-6
-          .btn-group.pull-right
-            button(type='button', id='state-switch-state', class='btn btn-default') Get State
-            &nbsp;
-            button(type='button', id='state-switch-on', class='btn btn-default') Set On
-            &nbsp;
-            button(type='button', id='state-switch-off', class='btn btn-default') Set Off
-            &nbsp;
-            button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State

src/docs/index.jade

@@ -14,34 +14,16 @@ block content
     br
     iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='184', height='30')
     iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='144', height='30')
-    br
-    br
-    br
-
-  .alert.alert-info
-    p
-      | <strong>Documentation in progress!</strong><br>
-      | It might not seem, but it's actually a lot of work. The goal is to make it as cleanest, most readable and
-      | understandable as possible.<br>
-      | If you feel there is something missing, submit a
-      | <a href="https://github.com/nostalgiaz/bootstrap-switch/pulls">pull request</a> with your changes. Every
-      | help is needed. Many thanks.
-
-  #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
+  //
+    .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.
 
   #start
     h1.page-header Getting Started
@@ -62,3 +44,42 @@ block content
     pre: code $("[name='my-checkbox']").bootstrapSwitch();
 
     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
+

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='#new') What's new
-            li: a(href='#start') Start
+            li: a(href='index.html#start') Start
+            li: a(href='index.html#examples') Examples
             li.dropdown
               a(href='#', data-toggle='dropdown')
                 | Documentation

src/less/bootstrap3/bootstrap-switch.less

@@ -118,7 +118,8 @@
     }
   }
 
-  &.@{bootstrap-switch-base}-indeterminate {
+  &.@{bootstrap-switch-base}-indeterminate,
+  &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-indeterminate {
 
     .@{bootstrap-switch-base}-container {
       margin-left: -25%;

test/bootstrap-switch.js

@@ -39,14 +39,14 @@
           readonly: this.$element.is("[readonly]"),
           indeterminate: this.$element.data("indeterminate"),
           inverse: this.$element.data("inverse"),
+          radioAllOff: this.$element.data("radio-all-off"),
           onColor: this.$element.data("on-color"),
           offColor: this.$element.data("off-color"),
           onText: this.$element.data("on-text"),
           offText: this.$element.data("off-text"),
           labelText: this.$element.data("label-text"),
           baseClass: this.$element.data("base-class"),
-          wrapperClass: this.$element.data("wrapper-class"),
-          radioAllOff: this.$element.data("radio-all-off")
+          wrapperClass: this.$element.data("wrapper-class")
         }, options);
         this.$wrapper = $("<div>", {
           "class": (function(_this) {
@@ -218,6 +218,23 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.inverse = function(value) {
+        var $off, $on;
+        if (typeof value === "undefined") {
+          return this.options.inverse;
+        }
+        value = !!value;
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-inverse");
+        $on = this.$on.clone(true);
+        $off = this.$off.clone(true);
+        this.$on.replaceWith($off);
+        this.$off.replaceWith($on);
+        this.$on = $off;
+        this.$off = $on;
+        this.options.inverse = value;
+        return this.$element;
+      };
+
       BootstrapSwitch.prototype.onColor = function(value) {
         var color;
         color = this.options.onColor;
@@ -523,6 +540,7 @@
       readonly: false,
       indeterminate: false,
       inverse: false,
+      radioAllOff: false,
       onColor: "primary",
       offColor: "default",
       onText: "ON",
@@ -530,7 +548,6 @@
       labelText: "&nbsp;",
       baseClass: "bootstrap-switch",
       wrapperClass: "wrapper",
-      radioAllOff: false,
       onInit: function() {},
       onSwitchChange: function() {}
     };