Merge pull request #8 from nostalgiaz/master

Zum Abgleich Mergen

.gitignore

@@ -1,4 +1,2 @@
-target/
 .idea
-.sass-cache/
 .DS_Store

README.md

@@ -28,6 +28,10 @@ If you want to use your bootstrap vars edit bootstrapSwitch.less and then compil
 lessc static/less/bootstrap-switch.less static/stylesheets/bootstrap-switch.css
 ```
 
+Supported browsers
+------------------
+I'm not going to support ancient browsers! (it works on IE8+)
+
 Basic Example
 -------------
 checkboxes:

examples/index.html

@@ -109,7 +109,10 @@
             <div class="switch" data-on="warning" data-off="danger">
                 <input type="checkbox" checked />
             </div>
-            <div class="switch" data-on="danger" data-off="primary">
+            <div class="switch" data-on="danger" data-off="default">
+                <input type="checkbox" checked />
+            </div>
+            <div class="switch" data-on="default" data-off="primary">
                 <input type="checkbox" checked />
             </div>
         </div>
@@ -130,7 +133,10 @@
     &lt;input type="checkbox" checked />
 &lt;/div>
 
-&lt;div class="switch" data-on="danger" data-off="primary">
+&lt;div class="switch" data-on="danger" data-off="default">
+    &lt;input type="checkbox" checked />
+&lt;/div>
+&lt;div class="switch" data-on="default" data-off="primary">
     &lt;input type="checkbox" checked />
 &lt;/div>
 </pre>
@@ -281,8 +287,9 @@ $('#create-switch').wrap('&lt;div class="switch" />').parent().bootstrapSwitch()
         <h3>Disabled <small>javascript</small></h3>
 
         <div class="bs-docs-example">
+            <label for="disable-switch-input">amazing label</label>
             <div id="disable-switch" class="switch">
-                <input type="checkbox" checked />
+                <input id="disable-switch-input" type="checkbox" checked />
             </div>
             <br>
             <br>
@@ -306,134 +313,75 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
     </div>
 </div>
 
-
 <div class="row-fluid">
     <div class="span12">
-        <h3>Radio <small>- radioboxes 1</small></h3>
+        <h3>Radio <small>javascript</small></h3>
 
         <div class="bs-docs-example">
-               <div class="control-group exemple1">
-                  <br /><br />
-                    <div id="radio1" class="controls">
-                        <label class="control-label" for="yes">Yes</label>
-                        <div id="yes" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
-                            <input type="radio" name="radio1" class="check demo-1" value="1" checked />
-                        </div>
-                        <label class="control-label" for="no">No</label>
-                        <div id="no" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
-                            <input type="radio" name="radio1" class="check demo-1" value="0" />
-                        </div>
-                    </div>
-                </div>
-
-            <div class="clearfix"></div>
-
-        </div>
-        <pre class="prettyprint linenums">
-    &lt;div class="control-group exemple1">
-      &lt;br />&lt;br />
-        &lt;div id="radio1" class="controls">
-            &lt;label class="control-label" for="yes">Yes&lt;/label>
-            &lt;div id="yes" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
-                &lt;input type="radio" name="radio1" class="check demo-1" value="1" checked />
-            &lt;/div>
-            &lt;label class="control-label" for="no">No&lt;/label>
-            &lt;div id="no" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
-                &lt;input type="radio" name="radio1" class="check demo-1" value="0" />
-            &lt;/div>
-        &lt;/div>
-    &lt;/div>
-&lt;script>
-$(document).ready(function() {
-    $('.radio1').on('switch-change', function () {
-        $('.radio1').bootstrapSwitch('toggleRadioState');
-    });
-});
-&lt;/script></pre>
-    </div>
-</div>
-
-
-<div class="row-fluid">
-    <div class="span12">
-        <h3>Radio <small>- radioboxes 2</small></h3>
-
-        <div class="bs-docs-example">
-            <div id="exemple2" class="control-group exemple2">
-              <br /><br />
-                <div class="control-group" style="margin-bottom: 2%;">
-                    <div style="width: 10%;float: left;">
-                      <label class="control-label" for="option1">Option 1</label>
-                    </div>
+            <div class="control-group">
+                <div class="control-group">
+                    <label class="control-label" for="option1">Option 1</label>
                     <div class="controls">
                         <div id="option1" class="switch radio2">
-                            <input id="radio1" type="radio" name="radio2" value="option1" checked />
+                            <input type="radio" name="radio2" value="option1" checked />
                         </div>
                     </div>
                 </div>
-                <div class="control-group" style="margin-bottom: 2%;">
-                    <div style="width: 10%;float: left;">
-                      <label class="control-label" for="option2">Option 2</label>
+                <div class="control-group">
+                    <div>
+                    <label class="control-label" for="option2">Option 2</label>
                     </div>
                     <div class="controls">
                         <div id="option2" class="switch radio2">
-                            <input id="radio2" type="radio" name="radio2" value="option2" />
+                            <input type="radio" name="radio2" value="option2" />
                         </div>
                     </div>
                 </div>
-                <div class="control-group" style="margin-bottom: 2%;">
-                    <div style="width: 10%;float: left;">
-                      <label class="control-label" for="option3">Option 3</label>
-                    </div>
+                <div class="control-group">
+                    <label class="control-label" for="option3">Option 3</label>
                     <div class="controls">
                         <div id="option3" class="switch radio2">
-                            <input id="radio3" type="radio" name="radio2" value="option3" />
+                            <input type="radio" name="radio2" value="option3" />
                         </div>
                     </div>
                 </div>
-            <div class="clearfix"></div>
-
+            </div>
         </div>
         <pre class="prettyprint linenums">
-    &lt;div id="exemple2" class="control-group exemple2">
-        &lt;br />&lt;br />
-        &lt;div class="control-group" style="margin-bottom: 2%;">
-          &lt;div style="width: 10%;float: left;">
-              &lt;label class="control-label" for="option1">Option 1</label>
-          &lt;/div>
-            &lt;div class="controls radio2">
-              &lt;div id="option1" class="switch option1">
-                &lt;input id="radio1" type="radio" name="radio2" value="option1" checked />
-              &lt;/div>
+&lt;div class="control-group">
+    &lt;div class="control-group">
+        &lt;label class="control-label" for="option1">Option 1&lt;/label>
+        &lt;div class="controls">
+            &lt;div id="option1" class="switch radio2">
+                &lt;input type="radio" name="radio2" value="option1" checked />
             &lt;/div>
         &lt;/div>
-        &lt;div class="control-group" style="margin-bottom: 2%;">
-            &lt;div style="width: 10%;float: left;">
-              &lt;label class="control-label" for="option2">Option 2&lt;/label>
-            &lt;/div>
-            &lt;div class="controls radio2">
-              &lt;div id="option2" class="switch option2">
-                &lt;input id="radio2" type="radio" name="radio2" value="option2" />
-              &lt;/div>
-            &lt;/div>
+    &lt;/div>
+    &lt;div class="control-group">
+        &lt;div>
+        &lt;label class="control-label" for="option2">Option 2&lt;/label>
         &lt;/div>
-        &lt;div class="control-group" style="margin-bottom: 2%;">
-            &lt;div style="width: 10%;float: left;">
-              &lt;label class="control-label" for="option3">Option 3&lt;/label>
+        &lt;div class="controls">
+            &lt;div id="option2" class="switch radio2">
+                &lt;input type="radio" name="radio2" value="option2" />
             &lt;/div>
-            &lt;div class="controls radio2">
-              &lt;div id="option3" class="switch option3">
-                &lt;input id="radio3" type="radio" name="radio2" value="option3" />
-              &lt;/div>
+        &lt;/div>
+    &lt;/div>
+    &lt;div class="control-group">
+        &lt;label class="control-label" for="option3">Option 3&lt;/label>
+        &lt;div class="controls">
+            &lt;div id="option3" class="switch radio2">
+                &lt;input type="radio" name="radio2" value="option3" />
             &lt;/div>
         &lt;/div>
     &lt;/div>
+&lt;/div>            
 &lt;script>
-$(document).ready(function() {
-    $('.radio2').on('switch-change', function () {
-        $('.radio2').bootstrapSwitch('toggleRadioGroupState');
+    $(document).ready(function() {
+        $('.radio2').on('switch-change', function () {
+            $('.radio2').bootstrapSwitch('toggleRadioState');
+        });
     });
-});
 &lt;/script></pre>
     </div>
 </div>
@@ -441,7 +389,7 @@ $(document).ready(function() {
 
 <div class="row-fluid">
     <div class="span12">
-        <h3>Form <small>- try to use tab and space</small></h3>
+        <h3>Form <small>- try to use tab, space and reset button</small></h3>
 
         <div class="bs-docs-example">
             <form class="form-horizontal span8 offset2">
@@ -470,6 +418,10 @@ $(document).ready(function() {
                         </div>
                     </div>
                 </div>
+
+                <div class="form-actions">
+                    <button type="reset" class="btn btn-inverse">Reset</button>
+                </div>
             </form>
             <div class="clearfix"></div>
         </div>
@@ -497,6 +449,9 @@ $(document).ready(function() {
             &lt;/div>
         &lt;/div>
     &lt;/div>
+    &lt;div class="form-actions">
+        &lt;button type="reset" class="btn btn-inverse">Reset&lt;/button>
+    &lt;/div>
 &lt;/form></pre>
     </div>
 </div>

static/config.rb

@@ -1,24 +0,0 @@
-# Require any additional compass plugins here.
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = "stylesheets"
-sass_dir = "sass"
-images_dir = "images"
-javascripts_dir = "javascripts"
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
-
-# To disable debugging comments that display the original location of your selectors. Uncomment:
-# line_comments = false
-
-
-# If you prefer the indented syntax, you might want to regenerate this
-# project again passing --syntax sass, or you can uncomment this:
-# preferred_syntax = :sass
-# and then run:
-# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

static/js/bootstrap-switch.js

@@ -1,14 +1,17 @@
 /* ============================================================
- * bootstrapSwitch v1.5 by Larentis Mattia @spiritualGuru
- * http://www.larentis.eu/switch/
+ * bootstrapSwitch v1.5 by Larentis Mattia @SpiritualGuru
+ * http://www.larentis.eu/
  * 
- * enhanced for radiobuttons by Stein, Peter @BdMdesigN
- * http://www.bdmdesign.org
+ * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
+ * http://www.bdmdesign.org/
+ *
+ * Project site:
+ * http://www.larentis.eu/switch/
  * ============================================================
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  * ============================================================ */
- 
+
 !function ($) {
   "use strict";
 
@@ -21,6 +24,7 @@
               , $switchLeft
               , $switchRight
               , $label
+              , $form = $element.closest('form')
               , myClasses = ""
               , classes = $element.attr('class')
               , color
@@ -205,19 +209,42 @@
                 });
               }
             });
+
+            if ($form.data('bootstrapSwitch') !== 'injected') {
+              $form.bind('reset', function () {
+                setTimeout(function () {
+                  $form.find('.switch').each(function () {
+                    var $input = $(this).find('input');
+                    
+                    $input.prop('checked', $input.is(':checked')).trigger('change');
+                  });
+                }, 1);
+              });
+              $form.data('bootstrapSwitch', 'injected');
+            }
           }
         );
       },
       toggleActivation: function () {
-        $(this).toggleClass('deactivate');
+        var $this = $(this);
+
+        $this.toggleClass('deactivate');
+        $this.find('input:checkbox').attr('disabled', $this.is('.deactivate'));
       },
       isActive: function () {
         return !$(this).hasClass('deactivate');
       },
       setActive: function (active) {
-        if (active)
-          $(this).removeClass('deactivate');
-        else $(this).addClass('deactivate');
+        var $this = $(this);
+
+        if (active) {
+          $this.removeClass('deactivate');
+          $this.find('input:checkbox').attr('disabled', false);
+        }
+        else {
+          $this.addClass('deactivate');
+          $this.find('input:checkbox').attr('disabled', true);
+        }
       },
       toggleState: function (skipOnChange) {
         var $input = $(this).find('input[type=checkbox]');
@@ -233,7 +260,9 @@
         return $(this).find('input').is(':checked');
       },
       destroy: function () {
-        var $div = $(this).find('div')
+        var $element = $(this)
+          , $div = $element.find('div')
+          , $form = $element.closest('form')
           , $inputbox;
 
         $div.find(':not(input)').remove();
@@ -243,6 +272,11 @@
 
         $inputbox.unbind('change');
 
+        if ($form) {
+          $form.unbind('reset');
+          $form.removeData('bootstrapSwitch');
+        }
+
         return $inputbox;
       }
     };
@@ -256,6 +290,6 @@
   };
 }(jQuery);
 
-$(function () {
-  $('.switch')['bootstrapSwitch']();
-});
+(function () {
+  jQuery('.switch')['bootstrapSwitch']();
+})();

static/less/bootstrap-switch.less

@@ -1,9 +1,12 @@
 /* ============================================================
- * bootstrapSwitch v1.5 by Larentis Mattia @spiritualGuru
+ * bootstrapSwitch v1.5 by Larentis Mattia @SpiritualGuru
+ * http://www.larentis.eu/
+ *
+ * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
+ * http://www.bdmdesign.org/
+ *
+ * Project site:
  * http://www.larentis.eu/switch/
- * 
- * enhanced for radiobuttons by Stein, Peter @BdMdesigN
- * http://www.bdmdesign.org
  * ============================================================
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
@@ -156,5 +159,9 @@
     &.switch-danger {
       .buttonBackground(@btnDangerBackgroundHighlight, @btnDangerBackground);
     }
+
+    &.switch-default {
+      .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75));
+    }
   }
 }

static/stylesheets/bootstrap-switch.css

@@ -1,9 +1,12 @@
 /* ============================================================
- * bootstrapSwitch v1.5 by Larentis Mattia @spiritualGuru
+ * bootstrapSwitch v1.5 by Larentis Mattia @SpiritualGuru
+ * http://www.larentis.eu/
+ *
+ * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
+ * http://www.bdmdesign.org/
+ *
+ * Project site:
  * http://www.larentis.eu/switch/
- * 
- * enhanced for radiobuttons by Stein, Peter @BdMdesigN
- * http://www.bdmdesign.org
  * ============================================================
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
@@ -361,3 +364,35 @@
 .has-switch span.switch-danger.active {
   background-color: #e9322d \9;
 }
+.has-switch span.switch-default {
+  color: #333333;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  background-color: #f0f0f0;
+  background-image: -moz-linear-gradient(top, #e6e6e6, #ffffff);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#ffffff));
+  background-image: -webkit-linear-gradient(top, #e6e6e6, #ffffff);
+  background-image: -o-linear-gradient(top, #e6e6e6, #ffffff);
+  background-image: linear-gradient(to bottom, #e6e6e6, #ffffff);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0);
+  border-color: #ffffff #ffffff #d9d9d9;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #ffffff;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.has-switch span.switch-default:hover,
+.has-switch span.switch-default:focus,
+.has-switch span.switch-default:active,
+.has-switch span.switch-default.active,
+.has-switch span.switch-default.disabled,
+.has-switch span.switch-default[disabled] {
+  color: #333333;
+  background-color: #ffffff;
+  *background-color: #f2f2f2;
+}
+.has-switch span.switch-default:active,
+.has-switch span.switch-default.active {
+  background-color: #e6e6e6 \9;
+}