BookStack Code Mirror - bookstack/blob - resources/assets/js/components/tri-layout.js

   1
   2 class TriLayout {
   3
   4     constructor(elem) {
   5         this.elem = elem;
   6         this.middle = elem.querySelector('.tri-layout-middle');
   7         this.right = elem.querySelector('.tri-layout-right');
   8         this.left = elem.querySelector('.tri-layout-left');
   9
  10         this.lastLayoutType = 'none';
  11         this.onDestroy = null;
  12
  13
  14         this.updateLayout();
  15         window.addEventListener('resize', event => {
  16             this.updateLayout();
  17         });
  18     }
  19
  20     updateLayout() {
  21         const newLayout = (window.innerWidth <= 1000) ? 'mobile' : 'desktop';
  22         if (newLayout === this.lastLayoutType) return;
  23
  24         if (this.onDestroy) {
  25             this.onDestroy();
  26             this.onDestroy = null;
  27         }
  28
  29         if (newLayout === 'desktop') {
  30             this.setupDesktop();
  31         } else {
  32             this.setupMobile();
  33         }
  34
  35         this.lastLayoutType = newLayout;
  36     }
  37
  38     setupMobile() {
  39         const mobileSidebarClickBound = this.mobileSidebarClick.bind(this);
  40         const mobileContentClickBound = this.mobileContentClick.bind(this);
  41         this.left.addEventListener('click', mobileSidebarClickBound);
  42         this.right.addEventListener('click', mobileSidebarClickBound);
  43         this.middle.addEventListener('click', mobileContentClickBound);
  44
  45         this.onDestroy = () => {
  46             this.left.removeEventListener('click', mobileSidebarClickBound);
  47             this.right.removeEventListener('click', mobileSidebarClickBound);
  48             this.middle.removeEventListener('click', mobileContentClickBound);
  49         }
  50     }
  51
  52     setupDesktop() {
  53         // TODO
  54     }
  55
  56     /**
  57      * Slide the main content back into view if clicked and
  58      * currently slid out of view.
  59      * @param event
  60      */
  61     mobileContentClick(event) {
  62         this.elem.classList.remove('mobile-open');
  63     }
  64
  65     /**
  66      * On sidebar click, Show the content by sliding the main content out.
  67      * @param event
  68      */
  69     mobileSidebarClick(event) {
  70         if (this.elem.classList.contains('mobile-open')) {
  71             this.elem.classList.remove('mobile-open');
  72         } else {
  73             event.preventDefault();
  74             event.stopPropagation();
  75             this.elem.classList.add('mobile-open');
  76         }
  77     }
  78
  79 }
  80
  81 export default TriLayout;