2019-06-07 23:00:34 +08:00
|
|
|
import {slideUp, slideDown} from "../services/animations";
|
2017-08-07 04:08:03 +08:00
|
|
|
|
|
|
|
class ChapterToggle {
|
|
|
|
|
|
|
|
constructor(elem) {
|
|
|
|
this.elem = elem;
|
|
|
|
this.isOpen = elem.classList.contains('open');
|
|
|
|
elem.addEventListener('click', this.click.bind(this));
|
|
|
|
}
|
|
|
|
|
|
|
|
open() {
|
2018-09-22 23:36:35 +08:00
|
|
|
const list = this.elem.parentNode.querySelector('.inset-list');
|
2017-08-07 04:08:03 +08:00
|
|
|
this.elem.classList.add('open');
|
2019-08-25 01:26:28 +08:00
|
|
|
this.elem.setAttribute('aria-expanded', 'true');
|
2019-06-07 23:00:34 +08:00
|
|
|
slideDown(list, 240);
|
2017-08-07 04:08:03 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
close() {
|
2018-09-22 23:36:35 +08:00
|
|
|
const list = this.elem.parentNode.querySelector('.inset-list');
|
|
|
|
this.elem.classList.remove('open');
|
2019-08-25 01:26:28 +08:00
|
|
|
this.elem.setAttribute('aria-expanded', 'false');
|
2019-06-07 23:00:34 +08:00
|
|
|
slideUp(list, 240);
|
2017-08-07 04:08:03 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
click(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.isOpen ? this.close() : this.open();
|
|
|
|
this.isOpen = !this.isOpen;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2018-11-10 05:17:35 +08:00
|
|
|
export default ChapterToggle;
|