BookStack Code Mirror - bookstack/blob - resources/assets/js/components/chapter-toggle.js

   1
   2 class ChapterToggle {
   3
   4     constructor(elem) {
   5         this.elem = elem;
   6         this.isOpen = elem.classList.contains('open');
   7         elem.addEventListener('click', this.click.bind(this));
   8     }
   9
  10     open() {
  11         let list = this.elem.parentNode.querySelector('.inset-list');
  12
  13         this.elem.classList.add('open');
  14         list.style.display = 'block';
  15         list.style.height = '';
  16         let height = list.getBoundingClientRect().height;
  17         list.style.height = '0px';
  18         list.style.overflow = 'hidden';
  19         list.style.transition = 'height ease-in-out 240ms';
  20
  21         let transitionEndBound = onTransitionEnd.bind(this);
  22         function onTransitionEnd() {
  23             list.style.overflow = '';
  24             list.style.height = '';
  25             list.style.transition = '';
  26             list.style.display = `block`;
  27             list.removeEventListener('transitionend', transitionEndBound);
  28         }
  29
  30         setTimeout(() => {
  31             list.style.height = `${height}px`;
  32             list.addEventListener('transitionend', transitionEndBound)
  33         }, 1);
  34     }
  35
  36     close() {
  37         let list = this.elem.parentNode.querySelector('.inset-list');
  38
  39         this.elem.classList.remove('open');
  40         list.style.display =  'block';
  41         list.style.height = list.getBoundingClientRect().height + 'px';
  42         list.style.overflow = 'hidden';
  43         list.style.transition = 'height ease-in-out 240ms';
  44
  45         let transitionEndBound = onTransitionEnd.bind(this);
  46         function onTransitionEnd() {
  47             list.style.overflow = '';
  48             list.style.height = '';
  49             list.style.transition = '';
  50             list.style.display =  'none';
  51             list.removeEventListener('transitionend', transitionEndBound);
  52         }
  53
  54         setTimeout(() => {
  55             list.style.height = `0px`;
  56             list.addEventListener('transitionend', transitionEndBound)
  57         }, 1);
  58     }
  59
  60     click(event) {
  61         event.preventDefault();
  62         this.isOpen ?  this.close() : this.open();
  63         this.isOpen = !this.isOpen;
  64     }
  65
  66 }
  67
  68 module.exports = ChapterToggle;