73 lines
2.4 KiB
JavaScript
73 lines
2.4 KiB
JavaScript
(() => {
|
|
const defaultConfig = "{\"outer\":\"v-collapse\",\"listenTo\":\"body\",\"itemSelector\":\"v-collapse-item\",\"headSelector\":\"v-collapse-head\",\"contentSelector\":\"v-collapse-content\"}";
|
|
|
|
window.VCollapse = class VCollapse {
|
|
constructor(options = {}) {
|
|
this.options = Object.assign(options, JSON.parse(defaultConfig));
|
|
this.initListener();
|
|
}
|
|
|
|
initListener() {
|
|
const self = this,
|
|
opt = self.options;
|
|
$(opt.listenTo).addDelegatedEventListener('click', opt.headSelector, (e, el) => {
|
|
self.toggleItem(el, false);
|
|
});
|
|
this.resize();
|
|
window.addEventListener('resize', this.resize.bind(this));
|
|
}
|
|
|
|
toggleItem(el, forceClose, noClose) {
|
|
if (!el._maxHeight) {
|
|
this.resize();
|
|
}
|
|
if (!noClose && el.find(this.options.outer).hasAttribute('accordion')) {
|
|
this.closeAll(el);
|
|
}
|
|
let parent = el.find(this.options.itemSelector),
|
|
cont = $(this.options.contentSelector, parent),
|
|
cl = parent.classList;
|
|
if (cl.contains('open') || forceClose) {
|
|
cont.style.maxHeight = '0px';
|
|
cl.remove('open');
|
|
} else {
|
|
cont.style.maxHeight = parent._maxHeight + 'px';
|
|
cl.add('open');
|
|
}
|
|
}
|
|
|
|
closeAll(el) {
|
|
const self = this,
|
|
opt = self.options,
|
|
items = $$(opt.headSelector, el.find(opt.outer));
|
|
VUtils.forEach(items, e => {
|
|
if (e !== el) {
|
|
self.toggleItem(e, true, true);
|
|
}
|
|
})
|
|
}
|
|
|
|
calcHeight(el) {
|
|
let children = $(this.options.contentSelector, el).children,
|
|
height = 0;
|
|
VUtils.forEach(children, e => {
|
|
height += e.offsetHeight;
|
|
})
|
|
el._maxHeight = height;
|
|
}
|
|
|
|
resize() {
|
|
const self = this,
|
|
opt = self.options,
|
|
items = $$(opt.itemSelector, $(opt.listenTo));
|
|
VUtils.forEach(items, e => {
|
|
self.calcHeight(e);
|
|
if (e.classList.contains('open')) {
|
|
$(opt.contentSelector, e).style.maxHeight = parent._maxHeight + 'px';
|
|
}
|
|
})
|
|
}
|
|
}
|
|
new VCollapse();
|
|
})();
|