Changes:

* Allow the Button component to work with elements other than `<div class="btn-group">` * doc updates
thednp · Oct 13, 2017 · 9cc6d3c · 9cc6d3c
1 parent e8263cf
commit 9cc6d3c
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 30 deletions.
diff --git a/dist/bootstrap-native-v4.js b/dist/bootstrap-native-v4.js
@@ -389,18 +389,17 @@
  };
 
  // init
- if ( hasClass(element,'btn-group') ) {
- if ( !( stringButton in element ) ) { // prevent adding event handlers twice
- on( element, clickEvent, toggle );
- }
- // activate items on load
- var labelsToACtivate = getElementsByClassName(element, 'btn'), lbll = labelsToACtivate[length];
- for (var i=0; i<lbll; i++) {
- !hasClass(labelsToACtivate[i],active) && queryElement('input:checked',labelsToACtivate[i]) 
- && addClass(labelsToACtivate[i],active);
- }
- element[stringButton] = this;
+ if ( !( stringButton in element ) ) { // prevent adding event handlers twice
+ on( element, clickEvent, toggle );
+ }
+
+ // activate items on load
+ var labelsToACtivate = getElementsByClassName(element, 'btn'), lbll = labelsToACtivate[length];
+ for (var i=0; i<lbll; i++) {
+ !hasClass(labelsToACtivate[i],active) && queryElement('input:checked',labelsToACtivate[i]) 
+ && addClass(labelsToACtivate[i],active);
  }
+ element[stringButton] = this;
  };
 
  // BUTTON DATA API

diff --git a/dist/bootstrap-native-v4.min.js b/dist/bootstrap-native-v4.min.js
diff --git a/dist/bootstrap-native.js b/dist/bootstrap-native.js
@@ -545,16 +545,16 @@
  if ( option !== reset ) { setState(); } 
  else { resetState(); }
  }
- }
- if ( hasClass(element,'btn-group') ) {
+ } else { // if ( hasClass(element,'btn-group') ) // we allow the script to work outside btn-group component
+  
  if ( !( stringButton in element ) ) { // prevent adding event handlers twice
  on( element, clickEvent, toggle );
  }
 
  // activate items on load
  var labelsToACtivate = getElementsByClassName(element, 'btn'), lbll = labelsToACtivate[length];
  for (var i=0; i<lbll; i++) {
- !hasClass(labelsToACtivate[l],active) && queryElement('input',labelsToACtivate[l])[getAttribute](checked)
+ !hasClass(labelsToACtivate[i],active) && queryElement('input',labelsToACtivate[i])[getAttribute](checked)
  && addClass(labelsToACtivate[i],active);
  }
  element[stringButton] = this;

diff --git a/dist/bootstrap-native.min.js b/dist/bootstrap-native.min.js
diff --git a/index.html b/index.html
@@ -2230,6 +2230,24 @@ <h5>Radios / Checkboxes Toggling</h5>
  </span>
  </p>
 
+ <p>In addition, the component will also work outside the <code>&lt;div class="btn-group"&gt;</code>.</p>
+ <p>
+ <span data-toggle="buttons">
+ <label class="btn btn-default">
+ <span class="glyphicon glyphicon-ok-sign"></span>
+ <input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
+ </label>
+ <label class="btn btn-default active">
+ <span class="glyphicon glyphicon-ok-sign"></span>
+ <input type="radio" name="options" id="option2" autocomplete="off" checked> Radio 2 (preselected)
+ </label>
+ <label class="btn btn-default">
+ <span class="glyphicon glyphicon-ok-sign"></span>
+ <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
+ </label>
+ </span>
+ </p>
+
  </section>
  </section>
 

diff --git a/lib/V3/button-native.js b/lib/V3/button-native.js
@@ -103,16 +103,16 @@ var Button = function( element, option ) {
  if ( option !== reset ) { setState(); } 
  else { resetState(); }
  }
- }
- if ( hasClass(element,'btn-group') ) {
+ } else { // if ( hasClass(element,'btn-group') ) // we allow the script to work outside btn-group component
+  
  if ( !( stringButton in element ) ) { // prevent adding event handlers twice
  on( element, clickEvent, toggle );
  }
 
  // activate items on load
  var labelsToACtivate = getElementsByClassName(element, 'btn'), lbll = labelsToACtivate[length];
  for (var i=0; i<lbll; i++) {
- !hasClass(labelsToACtivate[l],active) && queryElement('input',labelsToACtivate[l])[getAttribute](checked)
+ !hasClass(labelsToACtivate[i],active) && queryElement('input',labelsToACtivate[i])[getAttribute](checked)
  && addClass(labelsToACtivate[i],active);
  }
  element[stringButton] = this;

diff --git a/lib/V4/button-native.js b/lib/V4/button-native.js
@@ -76,18 +76,17 @@ var Button = function( element ) {
  };
 
  // init
- if ( hasClass(element,'btn-group') ) {
- if ( !( stringButton in element ) ) { // prevent adding event handlers twice
- on( element, clickEvent, toggle );
- }
- // activate items on load
- var labelsToACtivate = getElementsByClassName(element, 'btn'), lbll = labelsToACtivate[length];
- for (var i=0; i<lbll; i++) {
- !hasClass(labelsToACtivate[i],active) && queryElement('input:checked',labelsToACtivate[i]) 
- && addClass(labelsToACtivate[i],active);
- }
- element[stringButton] = this;
+ if ( !( stringButton in element ) ) { // prevent adding event handlers twice
+ on( element, clickEvent, toggle );
  }
+
+ // activate items on load
+ var labelsToACtivate = getElementsByClassName(element, 'btn'), lbll = labelsToACtivate[length];
+ for (var i=0; i<lbll; i++) {
+ !hasClass(labelsToACtivate[i],active) && queryElement('input:checked',labelsToACtivate[i]) 
+ && addClass(labelsToACtivate[i],active);
+ }
+ element[stringButton] = this;
 };
 
 // BUTTON DATA API