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