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

   1
   2 class ExpandToggle {
   3
   4     constructor(elem) {
   5         this.elem = elem;
   6         this.isOpen = false;
   7         this.selector = elem.getAttribute('expand-toggle');
   8         elem.addEventListener('click', this.click.bind(this));
   9     }
  10
  11     open(elemToToggle) {
  12         elemToToggle.style.display = 'block';
  13         elemToToggle.style.height = '';
  14         let height = elemToToggle.getBoundingClientRect().height;
  15         elemToToggle.style.height = '0px';
  16         elemToToggle.style.overflow = 'hidden';
  17         elemToToggle.style.transition = 'height ease-in-out 240ms';
  18
  19         let transitionEndBound = onTransitionEnd.bind(this);
  20         function onTransitionEnd() {
  21             elemToToggle.style.overflow = '';
  22             elemToToggle.style.height = '';
  23             elemToToggle.style.transition = '';
  24             elemToToggle.removeEventListener('transitionend', transitionEndBound);
  25         }
  26
  27         setTimeout(() => {
  28             elemToToggle.style.height = `${height}px`;
  29             elemToToggle.addEventListener('transitionend', transitionEndBound)
  30         }, 1);
  31     }
  32
  33     close(elemToToggle) {
  34         elemToToggle.style.display =  'block';
  35         elemToToggle.style.height = elemToToggle.getBoundingClientRect().height + 'px';
  36         elemToToggle.style.overflow = 'hidden';
  37         elemToToggle.style.transition = 'all ease-in-out 240ms';
  38
  39         let transitionEndBound = onTransitionEnd.bind(this);
  40         function onTransitionEnd() {
  41             elemToToggle.style.overflow = '';
  42             elemToToggle.style.height = '';
  43             elemToToggle.style.transition = '';
  44             elemToToggle.style.display =  'none';
  45             elemToToggle.removeEventListener('transitionend', transitionEndBound);
  46         }
  47
  48         setTimeout(() => {
  49             elemToToggle.style.height = `0px`;
  50             elemToToggle.addEventListener('transitionend', transitionEndBound)
  51         }, 1);
  52     }
  53
  54     click(event) {
  55         event.preventDefault();
  56         let matchingElems = document.querySelectorAll(this.selector);
  57         for (let i = 0, len = matchingElems.length; i < len; i++) {
  58             this.isOpen ?  this.close(matchingElems[i]) : this.open(matchingElems[i]);
  59         }
  60         this.isOpen = !this.isOpen;
  61     }
  62
  63 }
  64
  65 export default ExpandToggle;