changed build folder to dist, updated CONTRIBUTING, updated wrapperClass, added modifierClass methods

CONTRIBUTING.md

@@ -8,7 +8,7 @@ Flow:
 - Checkout `develop` branch
 - Run `npm install` to get or update the dependencies
 - Run `gulp`. Gulp will run the default task and listen for further files changes
-- Work on the Coffeescript or LESS sources. Gulp will automatically update the build 
+- Work on the Coffeescript or LESS sources. Gulp will automatically build for you
 - Once completed, submit a Pull Requests. Be sure to target `develop` as destination branch
 
 Thank you.

bower.json

@@ -3,11 +3,17 @@
   "description": "Turn checkboxes and radio buttons in toggle switches.",
   "version": "3.0.0",
   "main": [
-    "build/js/bootstrap-switch.js",
-    "build/css/bootstrap3/bootstrap-switch.css"
+    "dist/js/bootstrap-switch.js",
+    "dist/css/bootstrap3/bootstrap-switch.css"
   ],
   "ignore": [
-    "docs"
+    "docs",
+    "test",
+    "CNAME",
+    "composer.json"
+    "CONTRIBUTING.md"
+    "gulpfile.js"
+    "index.html"
   ],
   "dependencies": {
     "jquery": ">=1.9.0"

composer.json

@@ -23,7 +23,7 @@
   "extra": {
     "component": {
       "scripts": [
-        "build/js/bootstrap-switch.js"
+        "dist/js/bootstrap-switch.js"
       ],
       "shim": {
         "exports": "BootstrapSwitch"

build/js/bootstrap-switch.js → dist/js/bootstrap-switch.js

@@ -29,7 +29,6 @@
       BootstrapSwitch.prototype.name = "bootstrap-switch";
 
       function BootstrapSwitch(element, options) {
-        var addClasses;
         if (options == null) {
           options = {};
         }
@@ -46,25 +45,25 @@
           offText: this.$element.data("off-text"),
           labelText: this.$element.data("label-text")
         });
-        addClasses = (function(_this) {
-          return function(cls) {
-            var c, classes, _i, _len;
-            if (!$.isArray(cls)) {
-              return "" + _this.options.baseClass + "-" + cls;
-            }
-            classes = [];
-            for (_i = 0, _len = cls.length; _i < _len; _i++) {
-              c = cls[_i];
-              classes.push("" + _this.options.baseClass + "-" + c);
-            }
-            return classes.join(" ");
-          };
-        })(this);
         this.$wrapper = $("<div>", {
           "class": (function(_this) {
             return function() {
               var classes;
-              classes = ["" + _this.options.baseClass, "" + _this.options.baseClass + "-" + _this.options.wrapperClass];
+              classes = ["" + _this.options.baseClass];
+              classes.push((function() {
+                var c, cls, _i, _len, _ref, _results;
+                if (!$.isArray(_this.options.wrapperClass)) {
+                  return "" + _this.options.baseClass + "-" + _this.options.wrapperClass;
+                }
+                cls = [];
+                _ref = _this.options.wrapperClass;
+                _results = [];
+                for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+                  c = _ref[_i];
+                  _results.push(cls.push("" + _this.options.baseClass + "-" + c));
+                }
+                return _results;
+              })());
               classes.push(_this.options.state ? "" + _this.options.baseClass + "-" + _this.options.onModifierClass : "" + _this.options.baseClass + "-" + _this.options.offModifierClass);
               if (_this.options.size != null) {
                 classes.push("" + _this.options.baseClass + "-" + _this.options.size);
@@ -86,20 +85,20 @@
           })(this)()
         });
         this.$container = $("<div>", {
-          "class": addClasses(this.options.containerClass)
+          "class": "" + this.options.baseClass + "-container"
         });
         this.$on = $("<span>", {
           html: this.options.onText,
-          "class": "" + (addClasses(this.options.handleOnClass)) + " " + this.options.baseClass + "-" + this.options.onColor
+          "class": "" + this.options.baseClass + "-handle-on " + this.options.baseClass + "-" + this.options.onColor
         });
         this.$off = $("<span>", {
           html: this.options.offText,
-          "class": "" + (addClasses(this.options.handleOffClass)) + " " + this.options.baseClass + "-" + this.options.offColor
+          "class": "" + this.options.baseClass + "-handle-off " + this.options.baseClass + "-" + this.options.offColor
         });
         this.$label = $("<label>", {
           "for": this.$element.attr("id"),
           html: this.options.labelText,
-          "class": addClasses(this.options.labelClass)
+          "class": "" + this.options.baseClass + "-label"
         });
         this.$element.on("init.bootstrapSwitch", (function(_this) {
           return function() {
@@ -254,6 +253,101 @@
         return this.$element;
       };
 
+      BootstrapSwitch.prototype.baseClass = function(value) {
+        return this.options.baseClass;
+      };
+
+      BootstrapSwitch.prototype.wrapperClass = function(value) {
+        var getClasses;
+        if (typeof value === "undefined") {
+          return this.options.wrapperClass;
+        }
+        getClasses = (function(_this) {
+          return function(classes) {
+            var c, cls, _i, _len;
+            if (!$.isArray(classes)) {
+              return "" + _this.options.baseClass + "-" + classes;
+            }
+            cls = [];
+            for (_i = 0, _len = classes.length; _i < _len; _i++) {
+              c = classes[_i];
+              cls.push("" + _this.options.baseClass + "-" + c);
+            }
+            return cls.join(" ");
+          };
+        })(this);
+        this.$wrapper.removeClass(getClasses(this.options.wrapperClass));
+        this.$wrapper.addClass(getClasses(value));
+        this.options.wrapperClass = value;
+        return this.$element;
+      };
+
+      BootstrapSwitch.prototype.onModifierClass = function(value) {
+        if (typeof value === "undefined") {
+          return this.options.onModifierClass;
+        }
+        if (this.$wrapper.hasClass("" + this.options.baseClass + "-" + this.options.onModifierClass)) {
+          this.$wrapper.removeClass("" + this.options.baseClass + "-" + this.options.onModifierClass).addClass("" + this.options.baseClass + "-" + value);
+        }
+        this.options.onModifierClass = value;
+        return this.$element;
+      };
+
+      BootstrapSwitch.prototype.offModifierClass = function(value) {
+        if (typeof value === "undefined") {
+          return this.options.offModifierClass;
+        }
+        if (this.$wrapper.hasClass("" + this.options.baseClass + "-" + this.options.offModifierClass)) {
+          this.$wrapper.removeClass("" + this.options.baseClass + "-" + this.options.offModifierClass).addClass("" + this.options.baseClass + "-" + value);
+        }
+        this.options.offModifierClass = value;
+        return this.$element;
+      };
+
+      BootstrapSwitch.prototype.focusedModifierClass = function(value) {
+        if (typeof value === "undefined") {
+          return this.options.focusedModifierClass;
+        }
+        if (this.$wrapper.hasClass("" + this.options.baseClass + "-" + this.options.focusedModifierClass)) {
+          this.$wrapper.removeClass("" + this.options.baseClass + "-" + this.options.focusedModifierClass).addClass("" + this.options.baseClass + "-" + value);
+        }
+        this.options.focusedModifierClass = value;
+        return this.$element;
+      };
+
+      BootstrapSwitch.prototype.animateModifierClass = function(value) {
+        if (typeof value === "undefined") {
+          return this.options.animateModifierClass;
+        }
+        if (this.$wrapper.hasClass("" + this.options.baseClass + "-" + this.options.animateModifierClass)) {
+          this.$wrapper.removeClass("" + this.options.baseClass + "-" + this.options.animateModifierClass).addClass("" + this.options.baseClass + "-" + value);
+        }
+        this.options.animateModifierClass = value;
+        return this.$element;
+      };
+
+      BootstrapSwitch.prototype.disabledModifierClass = function(value) {
+        if (typeof value === "undefined") {
+          return this.options.disabledModifierClass;
+        }
+        if (this.$wrapper.hasClass("" + this.options.baseClass + "-" + this.options.disabledModifierClass)) {
+          this.$wrapper.removeClass("" + this.options.baseClass + "-" + this.options.disabledModifierClass).addClass("" + this.options.baseClass + "-" + value);
+        }
+        this.options.disabledModifierClass = value;
+        return this.$element;
+      };
+
+      BootstrapSwitch.prototype.readonlyModifierClass = function(value) {
+        if (typeof value === "undefined") {
+          return this.options.readonlyModifierClass;
+        }
+        if (this.$wrapper.hasClass("" + this.options.baseClass + "-" + this.options.readonlyModifierClass)) {
+          this.$wrapper.removeClass("" + this.options.baseClass + "-" + this.options.readonlyModifierClass).addClass("" + this.options.baseClass + "-" + value);
+        }
+        this.options.readonlyModifierClass = value;
+        return this.$element;
+      };
+
       BootstrapSwitch.prototype.destroy = function() {
         var $form;
         $form = this.$element.closest("form");
@@ -452,10 +546,13 @@
       labelText: "&nbsp;",
       baseClass: "bootstrap-switch",
       wrapperClass: "wrapper",
-      containerClass: "container",
-      handleOnClass: "handle-on",
-      handleOffClass: "handle-off",
-      labelClass: "label",
+
+      /*
+      containerClass: "container"
+      handleOnClass: "handle-on"
+      handleOffClass: "handle-off"
+      labelClass: "label"
+       */
       onModifierClass: "on",
       offModifierClass: "off",
       focusedModifierClass: "focused",

docs/index.jade

@@ -10,7 +10,7 @@ html(lang='en')
     link(href='http://fonts.googleapis.com/css?family=Roboto:400,700', rel='stylesheet')
     link(href='docs/lib/css/bootstrap.min.css', rel='stylesheet')
     link(href='docs/lib/css/highlight.css', rel='stylesheet')
-    link(href='build/css/bootstrap3/bootstrap-switch.css', rel='stylesheet')
+    link(href='dist/css/bootstrap3/bootstrap-switch.css', rel='stylesheet')
     link(href='docs/index.css', rel='stylesheet')
     script.
       var _gaq = _gaq || [];
@@ -36,276 +36,462 @@ html(lang='en')
           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.dropdown
+              a(href='#', data-toggle='dropdown')
+                | Download
+                span.caret
+              ul.dropdown-menu
+                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip') 3 (Release candidate)
+                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') 2.0.1
             li: a(href='#getting-started') Getting Started
             li.dropdown
-              a(href='#documentation', data-toggle='dropdown')
-                | Documentation
+              a(href='#documentation-3', data-toggle='dropdown')
+                | Documentation 3
                 span.caret
               ul.dropdown-menu
                 li: a(href='#options') Options
                 li: a(href='#methods') Methods
+                li: a(href='#additional-methods') Additional Methods
                 li: a(href='#events') Events
-            li: a(href='#examples') Examples
+            li.dropdown
+              a(href='#documentation-2', data-toggle='dropdown')
+                | Documentation 2.0.1
+                span.caret
+              ul.dropdown-menu
+                li: a(href='#options') Options
+                li: a(href='#methods') Methods
+                li: a(href='#events') Events
+            //- li: a(href='#examples') Examples
             li: a(href='https://github.com/nostalgiaz/bootstrap-switch/issues') Bug reports
 
     .container
       .header
-        h1.title Bootstrap Switch
+        h2.title Bootstrap Switch
         p.lead Turn checkboxes and radio buttons in toggle switches.
-        p Choose your version:
+        p Download your version:
         p: input(type='checkbox', name='download-version', checked, data-size='large', data-on-text='3 RC', data-off-text='2.0.1')
         p
           a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip', id='download-3', class='btn btn-lg btn-primary') Download 3 (Release candidate)
-          a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', id='download-2' class='btn btn-lg btn-primary') Download 2.0.1
+          a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', id='download-2' class='btn btn-lg btn-primary') Download 2.0.1 (Stable)
 
       #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>
-            [...]
+        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>
+          [...]
+
+        p Add your checkbox.
+        pre: code <input type="checkbox" name="my-checkbox" checked>
+
+        p Initialize Bootstrap Switch.
+        pre: code $("[name='my-checkbox']").bootstrapSwitch();
+
+        p Enjoy.
+
+      #documentation-3
+        h1.page-header Documentation 3
+
+        #options
+          h2 Options
+          table.table.table-bordered.table-striped.table-responsive
+            thead
+              tr
+                th Name
+                th Type
+                th Description
+                th Values
+                th Default
+            tbody
+              tr
+                td state
+                td Boolean
+                td The checkbox state
+                td true, false
+                td 'checked' attribute or true
+              tr
+                td size
+                td String
+                td The checkbox state
+                td 'mini', 'small', 'normal', 'large'
+                td 'normal'
+              tr
+                td animate
+                td Boolean
+                td Animate the switch
+                td true, false
+                td true
+              tr
+                td disabled
+                td Boolean
+                td Disable state
+                td true, false
+                td 'disabled' attribute or false
+              tr
+                td readonly
+                td Boolean
+                td Readonly state
+                td true, false
+                td 'readonly' attribute or false
+              tr
+                td onColor
+                td String
+                td Color of the left side of the switch
+                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+                td: 'primary'
+              tr
+                td offColor
+                td String
+                td Color of the right side of the switch
+                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+                td: 'default'
+              tr
+                td onText
+                td String
+                td Text of the left side of the switch
+                td String
+                td: 'ON'
+              tr
+                td offText
+                td String
+                td Text of the right side of the switch
+                td String
+                td: 'OFF'
+              tr
+                td labelText
+                td String
+                td Text of the center handle of the switch
+                td String
+                td: ' '
+              tr
+                td baseClass
+                td String
+                td Prefix of every other used class
+                td String
+                td 'bootstrap-switch'
+              tr
+                td wrapperClass
+                td String | Array
+                td Container element class(es)
+                td String | Array
+                td 'wrapper'
+              tr
+                td containerClass
+                td String | Array
+                td Wrapper element class(es)
+                td String | Array
+                td 'container'
+              tr
+                td handleOnClass
+                td String | Array
+                td Handle On element class(es)
+                td String | Array
+                td 'handle-on'
+              tr
+                td handleOffClass
+                td String | Array
+                td Handle Off element class(es)
+                td String | Array
+                td 'handle-off'
+              tr
+                td labelClass
+                td String | Array
+                td Label element class(es)
+                td String | Array
+                td 'label'
+              tr
+                td onModifierClass
+                td String
+                td On Modifier class, used when the switch state is true
+                td String
+                td 'on'
+              tr
+                td offModifierClass
+                td String
+                td Off Modifier class, used when the switch state is false
+                td String
+                td 'off'
+              tr
+                td focusedModifierClass
+                td String
+                td Focused Modifier class, used when the switch is focused
+                td String
+                td 'focused'
+              tr
+                td animateModifierClass
+                td String
+                td Animate Modifier class, used to apply CSS animation to the switch
+                td String
+                td 'animate'
+              tr
+                td disabledModifierClass
+                td String
+                td Disabled Modifier class, used the switch is disabled
+                td String
+                td 'disabled'
+              tr
+                td readonlyModifierClass
+                td String
+                td Readonly Modifier class, used the switch is readonly
+                td String
+                td 'readonly'
+              tr
+                td onInit
+                td Function
+                td Callback function to execute on initialization
+                td Function
+                td: pre: code.javascript function(event, state) {}
+              tr
+                td onSwitchChange
+                td Function
+                td Callback function to execute on switch state change
+                td Function
+                td: pre: code.javascript function(event, state) {}
+
+        #methods
+          h2 Methods
 
-      #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
-              td The checkbox state
-              td 'mini', 'small', 'normal', 'large'
-              td 'normal'
-            tr
-              td animate
-              td Boolean
-              td Animate the switch
-              td true, false
-              td true
-            tr
-              td disabled
-              td Boolean
-              td Disable state
-              td true, false
-              td 'disabled' attribute or false
-            tr
-              td readonly
-              td Boolean
-              td Readonly state
-              td true, false
-              td 'readonly' attribute or false
-            tr
-              td onColor
-              td String
-              td Color of the left side of the switch
-              td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-              td: 'primary'
-            tr
-              td offColor
-              td String
-              td Color of the right side of the switch
-              td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-              td: 'default'
-            tr
-              td onText
-              td String
-              td Text of the left side of the switch
-              td String
-              td: 'ON'
-            tr
-              td offText
-              td String
-              td Text of the right side of the switch
-              td String
-              td: 'OFF'
-            tr
-              td labelText
-              td String
-              td Text of the center handle of the switch
-              td String
-              td: ' '
-            tr
-              td baseClass
-              td String
-              td Prefix of every other used class
-              td String
-              td 'bootstrap-switch'
-            tr
-              td wrapperClass
-              td String | Array
-              td Container element class(es)
-              td String | Array
-              td 'wrapper'
-            tr
-              td containerClass
-              td String | Array
-              td Wrapper element class(es)
-              td String | Array
-              td 'container'
-            tr
-              td handleOnClass
-              td String | Array
-              td Handle On element class(es)
-              td String | Array
-              td 'handle-on'
-            tr
-              td handleOffClass
-              td String | Array
-              td Handle Off element class(es)
-              td String | Array
-              td 'handle-off'
-            tr
-              td labelClass
-              td String | Array
-              td Label element class(es)
-              td String | Array
-              td 'label'
-            tr
-              td onModifierClass
-              td String
-              td On Modifier class, used when the switch state is true
-              td String
-              td 'on'
-            tr
-              td offModifierClass
-              td String
-              td Off Modifier class, used when the switch state is false
-              td String
-              td 'off'
-            tr
-              td focusedModifierClass
-              td String
-              td Focused Modifier class, used when the switch is focused
-              td String
-              td 'focused'
-            tr
-              td animateModifierClass
-              td String
-              td Animate Modifier class, used to apply CSS animation to the switch
-              td String
-              td 'animate'
-            tr
-              td disabledModifierClass
-              td String
-              td Disabled Modifier class, used the switch is disabled
-              td String
-              td 'disabled'
-            tr
-              td readonlyModifierClass
-              td String
-              td Readonly Modifier class, used the switch is readonly
-              td String
-              td 'readonly'
-            tr
-              td onInit
-              td Function
-              td Callback function to execute on initialization
-              td Function
-              td: pre: code.javascript function(event, state) {}
-            tr
-              td onSwitchChange
-              td Function
-              td Callback function to execute on switch state change
-              td Function
-              td: pre: code.javascript function(event, state) {}
+          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);
 
-      #methods
-        h1.page-header Methods
+        #additional-methods
+          h2 Additional 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);
+          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
 
-        h2 Additional Methods
+        #events
+          h2 Events
 
-        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
+          p You can register to the emitted events as follow:
+          pre
+            code
+              | $('inputy[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
+              |   console.log(this); // DOM element
+              |   console.log(event); // jQuery event
+              |   console.log(state); // true | false
+              | });
 
-      #events
-        h1.page-header Events
+          table.table.table-bordered.table-striped.table-responsive
+            thead
+              tr
+                th Name
+                th Description
+                th Parameters
+            tbody
+              tr
+                td init
+                td Triggered on initialization. 'this' refers to the DOM element.
+                td
+                  | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)
+              tr
+                td switchChange
+                td Triggered on switch state change. 'this' refers to the DOM element.
+                td
+                  | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
+                  | state (true | false)
 
-        p You can register to the emitted events as follow:
-        pre
-          code
-            | $('inputy[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
-            |   console.log(this); // DOM element
-            |   console.log(event); // jQuery event
-            |   console.log(state); // true | false
-            | });
+          //
+            #examples
+              h2 Examples
+                h2 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
 
-        table.table.table-bordered.table-striped.table-responsive
-          thead
-            tr
-              th Name
-              th Description
-              th Parameters
-          tbody
-            tr
-              td init
-              td Triggered on initialization. 'this' refers to the DOM element.
-              td
-                | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)
-            tr
-              td switchChange
-              td Triggered on switch state change. 'this' refers to the DOM element.
-              td
-                | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
-                | state (true | false)
+            <p>Working on this...</p>
 
-      #examples
-        h1.page-header Examples
-          h2 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
+      #documentation-2
+        h1.page-header Documentation 2.0.1
 
-        <p>Working on this...</p>
+        #options
+          h2 Options
+          table.table.table-bordered.table-striped.table-responsive
+            thead
+              tr
+                th Name
+                th Type
+                th Description
+                th Values
+                th Default
+            tbody
+              tr
+                td state
+                td Boolean
+                td The checkbox state
+                td true, false
+                td 'checked' attribute or true
+              tr
+                td size
+                td String
+                td The checkbox state
+                td 'mini', 'small', 'normal', 'large'
+                td 'normal'
+              tr
+                td animate
+                td Boolean
+                td Animate the switch
+                td true, false
+                td true
+              tr
+                td disabled
+                td Boolean
+                td Disable state
+                td true, false
+                td 'disabled' attribute or false
+              tr
+                td readonly
+                td Boolean
+                td Readonly state
+                td true, false
+                td 'readonly' attribute or false
+              tr
+                td onColor
+                td String
+                td Color of the left side of the switch
+                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+                td: 'primary'
+              tr
+                td offColor
+                td String
+                td Color of the right side of the switch
+                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+                td: 'default'
+              tr
+                td onText
+                td String
+                td Text of the left side of the switch
+                td String
+                td: 'ON'
+              tr
+                td offText
+                td String
+                td Text of the right side of the switch
+                td String
+                td: 'OFF'
+              tr
+                td labelText
+                td String
+                td Text of the center handle of the switch
+                td String
+                td: '&amp;nbsp;'
+              tr
+                td baseClass
+                td String
+                td Prefix of every other used class
+                td String
+                td 'bootstrap-switch'
+              tr
+                td wrapperClass
+                td String | Array
+                td Container element class(es)
+                td String | Array
+                td 'wrapper'
+              tr
+                td containerClass
+                td String | Array
+                td Wrapper element class(es)
+                td String | Array
+                td 'container'
+              tr
+                td handleOnClass
+                td String | Array
+                td Handle On element class(es)
+                td String | Array
+                td 'handle-on'
+              tr
+                td handleOffClass
+                td String | Array
+                td Handle Off element class(es)
+                td String | Array
+                td 'handle-off'
+              tr
+                td labelClass
+                td String | Array
+                td Label element class(es)
+                td String | Array
+                td 'label'
+              tr
+                td onModifierClass
+                td String
+                td On Modifier class, used when the switch state is true
+                td String
+                td 'on'
+              tr
+                td offModifierClass
+                td String
+                td Off Modifier class, used when the switch state is false
+                td String
+                td 'off'
+              tr
+                td focusedModifierClass
+                td String
+                td Focused Modifier class, used when the switch is focused
+                td String
+                td 'focused'
+              tr
+                td animateModifierClass
+                td String
+                td Animate Modifier class, used to apply CSS animation to the switch
+                td String
+                td 'animate'
+              tr
+                td disabledModifierClass
+                td String
+                td Disabled Modifier class, used the switch is disabled
+                td String
+                td 'disabled'
+              tr
+                td readonlyModifierClass
+                td String
+                td Readonly Modifier class, used the switch is readonly
+                td String
+                td 'readonly'
+              tr
+                td onInit
+                td Function
+                td Callback function to execute on initialization
+                td Function
+                td: pre: code.javascript function(event, state) {}
+              tr
+                td onSwitchChange
+                td Function
+                td Callback function to execute on switch state change
+                td Function
+                td: pre: code.javascript function(event, state) {}
 
     script(src='docs/lib/js/jquery.min.js')
     script(src='docs/lib/js/bootstrap.min.js')
     script(src='docs/lib/js/highlight.js')
-    script(src='build/js/bootstrap-switch.js')
+    script(src='dist/js/bootstrap-switch.js')
     script(src='docs/index.js')

gulpfile.js

@@ -35,11 +35,11 @@ gulp.task('coffee', function() {
     }))
     .pipe(plugins.coffee()).on('error', plugins.util.log)
     .pipe(plugins.header(banner, { pkg: pkg }))
-    .pipe(gulp.dest('build/js'))
+    .pipe(gulp.dest('dist/js'))
     .pipe(plugins.uglify())
     .pipe(plugins.header(banner, { pkg: pkg }))
     .pipe(plugins.rename({ suffix: '.min' }))
-    .pipe(gulp.dest('build/js'));
+    .pipe(gulp.dest('dist/js'));
 });
 
 gulp.task('less-bootstrap2', function() {
@@ -47,14 +47,14 @@ gulp.task('less-bootstrap2', function() {
     .pipe(plugins.less())
     .pipe(plugins.header(banner, { pkg: pkg }))
     .pipe(plugins.rename({ basename: name }))
-    .pipe(gulp.dest('build/css/bootstrap2'))
+    .pipe(gulp.dest('dist/css/bootstrap2'))
     .pipe(plugins.less({
       compress: true,
       cleancss: true
     }))
     .pipe(plugins.header(banner, { pkg: pkg }))
     .pipe(plugins.rename({ suffix: '.min' }))
-    .pipe(gulp.dest('build/css/bootstrap2'));
+    .pipe(gulp.dest('dist/css/bootstrap2'));
 });
 
 gulp.task('less-bootstrap3', function() {
@@ -62,19 +62,19 @@ gulp.task('less-bootstrap3', function() {
     .pipe(plugins.less())
     .pipe(plugins.header(banner, { pkg: pkg }))
     .pipe(plugins.rename({ basename: name }))
-    .pipe(gulp.dest('build/css/bootstrap3'))
+    .pipe(gulp.dest('dist/css/bootstrap3'))
     .pipe(plugins.less({
       compress: true,
       cleancss: true
     }))
     .pipe(plugins.header(banner, { pkg: pkg }))
     .pipe(plugins.rename({ suffix: '.min' }))
-    .pipe(gulp.dest('build/css/bootstrap3'));
+    .pipe(gulp.dest('dist/css/bootstrap3'));
 });
 
 gulp.task('docs', function() {
   gulp.src('docs/index.jade')
-    .pipe(plugins.jade())
+    .pipe(plugins.jade({ pretty: true }))
     .pipe(gulp.dest('./'));
 });
 

package.json

@@ -25,7 +25,7 @@
       "url": "http://www.bdmdesign.org"
     }
   ],
-  "main": "build/js/bootstrap-switch.js",
+  "main": "dist/js/bootstrap-switch.js",
   "dependencies": {
     "jquery": ">=1.9.0"
   },

src/coffee/bootstrap-switch.coffee

@@ -17,19 +17,17 @@ do ($ = window.jQuery, window) ->
         onText: @$element.data "on-text"
         offText: @$element.data "off-text"
         labelText: @$element.data "label-text"
-
-      addClasses = (cls) =>
-        if not $.isArray cls
-          return "#{@options.baseClass}-#{cls}"
-
-        classes = []
-        for c in cls
-          classes.push "#{@options.baseClass}-#{c}"
-        classes.join " "
-
       @$wrapper = $ "<div>",
         class: do =>
-          classes = ["#{@options.baseClass}", "#{@options.baseClass}-#{@options.wrapperClass}"]
+          classes = ["#{@options.baseClass}"]
+
+          classes.push do =>
+            unless $.isArray @options.wrapperClass
+              return "#{@options.baseClass}-#{@options.wrapperClass}"
+
+            cls = []
+            for c in @options.wrapperClass
+              cls.push "#{@options.baseClass}-#{c}"
 
           classes.push if @options.state then "#{@options.baseClass}-#{@options.onModifierClass}" else "#{@options.baseClass}-#{@options.offModifierClass}"
           classes.push "#{@options.baseClass}-#{@options.size}" if @options.size?
@@ -39,17 +37,17 @@ do ($ = window.jQuery, window) ->
           classes.push "#{@options.baseClass}-id-#{@$element.attr("id")}" if @$element.attr "id"
           classes.join " "
       @$container = $ "<div>",
-        class: addClasses @options.containerClass
+        class: "#{@options.baseClass}-container"
       @$on = $ "<span>",
         html: @options.onText,
-        class: "#{addClasses @options.handleOnClass} #{@options.baseClass}-#{@options.onColor}"
+        class: "#{@options.baseClass}-handle-on #{@options.baseClass}-#{@options.onColor}"
       @$off = $ "<span>",
         html: @options.offText,
-        class: "#{addClasses @options.handleOffClass} #{@options.baseClass}-#{@options.offColor}"
+        class: "#{@options.baseClass}-handle-off #{@options.baseClass}-#{@options.offColor}"
       @$label = $ "<label>",
         for: @$element.attr "id"
         html: @options.labelText
-        class: addClasses @options.labelClass
+        class: "#{@options.baseClass}-label"
 
       # set up events
       @$element.on "init.bootstrapSwitch", => @options.onInit.apply element, arguments
@@ -179,6 +177,86 @@ do ($ = window.jQuery, window) ->
       @options.labelText = value
       @$element
 
+    baseClass: (value) ->
+      @options.baseClass
+
+    wrapperClass: (value) ->
+      return @options.wrapperClass if typeof value is "undefined"
+
+      getClasses = (classes) =>
+        unless $.isArray classes
+          return "#{@options.baseClass}-#{classes}"
+
+        cls = []
+        for c in classes
+          cls.push "#{@options.baseClass}-#{c}"
+        cls.join " "
+
+      @$wrapper.removeClass getClasses @options.wrapperClass
+      @$wrapper.addClass getClasses value
+      @options.wrapperClass = value
+      @$element
+
+    onModifierClass: (value) ->
+      return @options.onModifierClass if typeof value is "undefined"
+
+      if @$wrapper.hasClass "#{@options.baseClass}-#{@options.onModifierClass}"
+        @$wrapper
+        .removeClass("#{@options.baseClass}-#{@options.onModifierClass}")
+        .addClass("#{@options.baseClass}-#{value}")
+      @options.onModifierClass = value
+      @$element
+
+    offModifierClass: (value) ->
+      return @options.offModifierClass if typeof value is "undefined"
+
+      if @$wrapper.hasClass "#{@options.baseClass}-#{@options.offModifierClass}"
+        @$wrapper
+        .removeClass("#{@options.baseClass}-#{@options.offModifierClass}")
+        .addClass("#{@options.baseClass}-#{value}")
+      @options.offModifierClass = value
+      @$element
+
+    focusedModifierClass: (value) ->
+      return @options.focusedModifierClass if typeof value is "undefined"
+
+      if @$wrapper.hasClass "#{@options.baseClass}-#{@options.focusedModifierClass}"
+        @$wrapper
+        .removeClass("#{@options.baseClass}-#{@options.focusedModifierClass}")
+        .addClass("#{@options.baseClass}-#{value}")
+      @options.focusedModifierClass = value
+      @$element
+
+    animateModifierClass: (value) ->
+      return @options.animateModifierClass if typeof value is "undefined"
+
+      if @$wrapper.hasClass "#{@options.baseClass}-#{@options.animateModifierClass}"
+        @$wrapper
+        .removeClass("#{@options.baseClass}-#{@options.animateModifierClass}")
+        .addClass("#{@options.baseClass}-#{value}")
+      @options.animateModifierClass = value
+      @$element
+
+    disabledModifierClass: (value) ->
+      return @options.disabledModifierClass if typeof value is "undefined"
+
+      if @$wrapper.hasClass "#{@options.baseClass}-#{@options.disabledModifierClass}"
+        @$wrapper
+        .removeClass("#{@options.baseClass}-#{@options.disabledModifierClass}")
+        .addClass("#{@options.baseClass}-#{value}")
+      @options.disabledModifierClass = value
+      @$element
+
+    readonlyModifierClass: (value) ->
+      return @options.readonlyModifierClass if typeof value is "undefined"
+
+      if @$wrapper.hasClass "#{@options.baseClass}-#{@options.readonlyModifierClass}"
+        @$wrapper
+        .removeClass("#{@options.baseClass}-#{@options.readonlyModifierClass}")
+        .addClass("#{@options.baseClass}-#{value}")
+      @options.readonlyModifierClass = value
+      @$element
+
     destroy: ->
       $form = @$element.closest "form"
 
@@ -315,7 +393,7 @@ do ($ = window.jQuery, window) ->
       $this = $ @
       data = $this.data "bootstrap-switch"
 
-      $this.data "bootstrap-switch", data = new BootstrapSwitch @, option if not data
+      $this.data "bootstrap-switch", data = new BootstrapSwitch @, option unless data
       ret = data[option].apply data, args if typeof option is "string"
     ret
 
@@ -333,10 +411,12 @@ do ($ = window.jQuery, window) ->
     labelText: "&nbsp;"
     baseClass: "bootstrap-switch"
     wrapperClass: "wrapper"
+    ###
     containerClass: "container"
     handleOnClass: "handle-on"
     handleOffClass: "handle-off"
     labelClass: "label"
+    ###
     onModifierClass: "on"
     offModifierClass: "off"
     focusedModifierClass: "focused"