Skip to content

Commit

Permalink
Trying to fix the collapse issue #64
Browse files Browse the repository at this point in the history 
Also added a new feature for collapse to add 'open' class to the button's parent for further customization.
  • Loading branch information
@thednp
thednp committed Jul 10, 2016
1 parent 437150f commit 938e5ac
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 42 deletions.
34 changes: 14 additions & 20 deletions dist/bootstrap-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -729,37 +729,31 @@
actions : function() {
var self = this;
var getOuterHeight = function (el) {
var s = el && el.currentStyle || window.getComputedStyle(el), // the getComputedStyle polyfill would do this for us, but we want to make sure it does
btp = s.borderTopWidth || 0,
var s = el && (el.currentStyle || window.getComputedStyle(el)), // the getComputedStyle polyfill would do this for us, but we want to make sure it does
btp = /px/.test(s.borderTopWidth) ? Math.round(s.borderTopWidth.replace('px','')) : 0,
mtp = /px/.test(s.marginTop) ? Math.round(s.marginTop.replace('px','')) : 0,
mbp = /px/.test(s.marginBottom) ? Math.round(s.marginBottom.replace('px','')) : 0,
mte = /em/.test(s.marginTop) ? Math.round(s.marginTop.replace('em','') * parseInt(s.fontSize)) : 0,
mbe = /em/.test(s.marginBottom) ? Math.round(s.marginBottom.replace('em','') * parseInt(s.fontSize)) : 0;

return el.clientHeight + parseInt( btp ) + parseInt( mtp ) + parseInt( mbp ) + parseInt( mte ) + parseInt( mbe ); //we need an accurate margin value
};

this.toggle = function(e) {
e.preventDefault();
self.btn = self.getTarget(e).btn;
self.collapse = self.getTarget(e).collapse;

if (!/\bin/.test(self.collapse.className)) {
self.open(e);
self.open();
} else {
self.close(e);
self.close();
}
},
this.close = function(e) {
e.preventDefault();
self.btn = self.getTarget(e).btn;
self.collapse = self.getTarget(e).collapse;
this.close = function() {
self._close(self.collapse);
self.removeClass(self.btn,'collapsed');
},
this.open = function(e) {
e.preventDefault();
self.btn = self.getTarget(e).btn;
self.collapse = self.getTarget(e).collapse;
this.open = function() {
self.accordion = self.btn.getAttribute('data-parent') && self.getClosest(self.btn, self.btn.getAttribute('data-parent'));

self._open(self.collapse);
Expand All @@ -777,9 +771,9 @@
self.addClass(c,'in');
c.setAttribute('aria-expanded','true');
self.addClass(c,'collapsing');
self.addClass(c.parentNode.getElementsByTagName('*')[0],'open'); // add class to button's parent as well
setTimeout(function() {
var h = self.getMaxHeight(c);
c.style.height = h + 'px';
c.style.height = self.getMaxHeight(c) + 'px'
c.style.overflowY = 'hidden';
}, 0);
setTimeout(function() {
Expand All @@ -791,8 +785,9 @@
},
this._close = function(c) {
self.removeEvent();
c.setAttribute('aria-expanded','false');
c.style.height = self.getMaxHeight(c) + 'px';
c.setAttribute('aria-expanded','false');
c.style.height = self.getMaxHeight(c) + 'px'
self.removeClass(c.parentNode.getElementsByTagName('*')[0],'open');
setTimeout(function() {
c.style.height = '0px';
c.style.overflowY = 'hidden';
Expand Down Expand Up @@ -821,18 +816,17 @@
this.btn.addEventListener('click', this.toggle, false);
},
this.getTarget = function(e) {
var t = e.currentTarget || e.srcElement,
var t2 = this, t = e.currentTarget || e.srcElement,
h = t.href && t.getAttribute('href').replace('#',''),
d = t.getAttribute('data-target') && ( t.getAttribute('data-target') ),
id = h || ( d && /#/.test(d)) && d.replace('#',''),
cl = (d && d.charAt(0) === '.') && d, //the navbar collapse trigger targets a class
c = id && document.getElementById(id) || cl && document.querySelector(cl);

return {
btn : t,
collapse : c
};
},
},

this.getClosest = function (el, s) { //el is the element and s the selector of the closest item to find
// source http://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/
Expand Down
5 changes: 2 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -758,7 +758,7 @@ <h4>Examples</h4>
<div class="well">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>

<p>Here's an <b>Accordion</b> component, basically a set of <b>Panel</b> components. When the toggle links are clicked, our Collapse object will look for the closest <code>&lt;div class="accordion-className"</code> or <code>&lt;div id="accordion-id"</code> via <code>data-parent="selector"</code>. </p>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
Expand Down Expand Up @@ -998,8 +998,7 @@ <h3 class="visible-xs">Navigation</h3>
<script src="./assets/js/prism.js" type="text/javascript"></script>

<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.2/bootstrap-native.min.js"></script> now we have CDN -->
<!--<script type="text/javascript" src="./dist/bootstrap-native.min.js"></script> local testing -->
<script type="text/javascript" src="./dist/bootstrap-native.js"></script> <!-- local testing -->
<script type="text/javascript" src="./dist/bootstrap-native.min.js"></script> <!-- local testing -->

<script type="text/javascript" src="./assets/js/scripts.js"></script>
</body>
Expand Down
32 changes: 13 additions & 19 deletions lib/collapse-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,37 +46,31 @@
actions : function() {
var self = this;
var getOuterHeight = function (el) {
var s = el && el.currentStyle || window.getComputedStyle(el), // the getComputedStyle polyfill would do this for us, but we want to make sure it does
btp = s.borderTopWidth || 0,
var s = el && (el.currentStyle || window.getComputedStyle(el)), // the getComputedStyle polyfill would do this for us, but we want to make sure it does
btp = /px/.test(s.borderTopWidth) ? Math.round(s.borderTopWidth.replace('px','')) : 0,
mtp = /px/.test(s.marginTop) ? Math.round(s.marginTop.replace('px','')) : 0,
mbp = /px/.test(s.marginBottom) ? Math.round(s.marginBottom.replace('px','')) : 0,
mte = /em/.test(s.marginTop) ? Math.round(s.marginTop.replace('em','') * parseInt(s.fontSize)) : 0,
mbe = /em/.test(s.marginBottom) ? Math.round(s.marginBottom.replace('em','') * parseInt(s.fontSize)) : 0;

return el.clientHeight + parseInt( btp ) + parseInt( mtp ) + parseInt( mbp ) + parseInt( mte ) + parseInt( mbe ); //we need an accurate margin value
};

this.toggle = function(e) {
e.preventDefault();
self.btn = self.getTarget(e).btn;
self.collapse = self.getTarget(e).collapse;

if (!/\bin/.test(self.collapse.className)) {
self.open(e);
self.open();
} else {
self.close(e);
self.close();
}
},
this.close = function(e) {
e.preventDefault();
self.btn = self.getTarget(e).btn;
self.collapse = self.getTarget(e).collapse;
this.close = function() {
self._close(self.collapse);
self.removeClass(self.btn,'collapsed');
},
this.open = function(e) {
e.preventDefault();
self.btn = self.getTarget(e).btn;
self.collapse = self.getTarget(e).collapse;
this.open = function() {
self.accordion = self.btn.getAttribute('data-parent') && self.getClosest(self.btn, self.btn.getAttribute('data-parent'));

self._open(self.collapse);
Expand All @@ -94,9 +88,9 @@
self.addClass(c,'in');
c.setAttribute('aria-expanded','true');
self.addClass(c,'collapsing');
self.addClass(c.parentNode.getElementsByTagName('*')[0],'open'); // add class to button's parent as well
setTimeout(function() {
var h = self.getMaxHeight(c);
c.style.height = h + 'px';
c.style.height = self.getMaxHeight(c) + 'px'
c.style.overflowY = 'hidden';
}, 0);
setTimeout(function() {
Expand All @@ -108,8 +102,9 @@
},
this._close = function(c) {
self.removeEvent();
c.setAttribute('aria-expanded','false');
c.style.height = self.getMaxHeight(c) + 'px';
c.setAttribute('aria-expanded','false');
c.style.height = self.getMaxHeight(c) + 'px'
self.removeClass(c.parentNode.getElementsByTagName('*')[0],'open');
setTimeout(function() {
c.style.height = '0px';
c.style.overflowY = 'hidden';
Expand Down Expand Up @@ -138,13 +133,12 @@
this.btn.addEventListener('click', this.toggle, false);
},
this.getTarget = function(e) {
var t = e.currentTarget || e.srcElement,
var t2 = this, t = e.currentTarget || e.srcElement,
h = t.href && t.getAttribute('href').replace('#',''),
d = t.getAttribute('data-target') && ( t.getAttribute('data-target') ),
id = h || ( d && /#/.test(d)) && d.replace('#',''),
cl = (d && d.charAt(0) === '.') && d, //the navbar collapse trigger targets a class
c = id && document.getElementById(id) || cl && document.querySelector(cl);

return {
btn : t,
collapse : c
Expand Down

1 comment on commit 938e5ac

@thednp
Copy link
Owner Author

@thednp thednp commented on 938e5ac Jul 10, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also fixed the collapse component issue with calculating the height of the collapse on IE8.

Please sign in to comment.