1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-31 08:02:42 +01:00
BookStack/resources/assets/js/components/chapter-toggle.js
Dan Brown e3230f8f21
Standardised module loading system & fixed build system
Fixed broken build system in broken webpack version.
Also updates module system to standardise on ES6 import/exports,
Especially since babel has changed it's 'default' logic for the old
module system.
2018-11-09 21:17:35 +00:00

73 lines
2.2 KiB
JavaScript

class ChapterToggle {
constructor(elem) {
this.elem = elem;
this.isOpen = elem.classList.contains('open');
elem.addEventListener('click', this.click.bind(this));
}
open() {
const list = this.elem.parentNode.querySelector('.inset-list');
this.elem.classList.add('open');
list.style.display = 'block';
list.style.maxHeight = '';
const maxHeight = list.getBoundingClientRect().height + 10;
list.style.maxHeight = '0px';
list.style.overflow = 'hidden';
list.style.transition = 'max-height ease-in-out 240ms';
let transitionEndBound = onTransitionEnd.bind(this);
function onTransitionEnd() {
list.style.overflow = '';
list.style.maxHeight = '';
list.style.transition = '';
list.style.display = `block`;
list.removeEventListener('transitionend', transitionEndBound);
}
setTimeout(() => {
requestAnimationFrame(() => {
list.style.maxHeight = `${maxHeight}px`;
list.addEventListener('transitionend', transitionEndBound)
});
}, 1);
}
close() {
const list = this.elem.parentNode.querySelector('.inset-list');
list.style.display = 'block';
this.elem.classList.remove('open');
list.style.maxHeight = list.getBoundingClientRect().height + 'px';
list.style.overflow = 'hidden';
list.style.transition = 'max-height ease-in-out 240ms';
const transitionEndBound = onTransitionEnd.bind(this);
function onTransitionEnd() {
list.style.overflow = '';
list.style.maxHeight = '';
list.style.transition = '';
list.style.display = 'none';
list.removeEventListener('transitionend', transitionEndBound);
}
setTimeout(() => {
requestAnimationFrame(() => {
list.style.maxHeight = `0px`;
list.addEventListener('transitionend', transitionEndBound)
});
}, 1);
}
click(event) {
event.preventDefault();
this.isOpen ? this.close() : this.open();
this.isOpen = !this.isOpen;
}
}
export default ChapterToggle;