BookStack Code Mirror - bookstack/blob - resources/js/components/collapsible.js

   1 import {slideDown, slideUp} from "../services/animations";
   2
   3 /**
   4  * Collapsible
   5  * Provides some simple logic to allow collapsible sections.
   6  */
   7 class Collapsible {
   8
   9     constructor(elem) {
  10         this.elem = elem;
  11         this.trigger = elem.querySelector('[collapsible-trigger]');
  12         this.content = elem.querySelector('[collapsible-content]');
  13
  14         if (!this.trigger) return;
  15         this.trigger.addEventListener('click', this.toggle.bind(this));
  16         this.openIfContainsError();
  17     }
  18
  19     open() {
  20         this.elem.classList.add('open');
  21         this.trigger.setAttribute('aria-expanded', 'true');
  22         slideDown(this.content, 300);
  23     }
  24
  25     close() {
  26         this.elem.classList.remove('open');
  27         this.trigger.setAttribute('aria-expanded', 'false');
  28         slideUp(this.content, 300);
  29     }
  30
  31     toggle() {
  32         if (this.elem.classList.contains('open')) {
  33             this.close();
  34         } else {
  35             this.open();
  36         }
  37     }
  38
  39     openIfContainsError() {
  40         const error = this.content.querySelector('.text-neg.text-small');
  41         if (error) {
  42             this.open();
  43         }
  44     }
  45
  46 }
  47
  48 export default Collapsible;