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         let newLayout = 'tablet';
  22         if (window.innerWidth <= 1000) newLayout =  'mobile';
  23         if (window.innerWidth >= 1400) newLayout =  'desktop';
  24         if (newLayout === this.lastLayoutType) return;
  25
  26         if (this.onDestroy) {
  27             this.onDestroy();
  28             this.onDestroy = null;
  29         }
  30
  31         if (newLayout === 'desktop') {
  32             this.setupDesktop();
  33         } else if (newLayout === 'mobile') {
  34             this.setupMobile();
  35         }
  36
  37         this.lastLayoutType = newLayout;
  38     }
  39
  40     setupMobile() {
  41         const mobileSidebarClickBound = this.mobileSidebarClick.bind(this);
  42         const mobileContentClickBound = this.mobileContentClick.bind(this);
  43         this.left.addEventListener('click', mobileSidebarClickBound);
  44         this.right.addEventListener('click', mobileSidebarClickBound);
  45         this.middle.addEventListener('click', mobileContentClickBound);
  46
  47         this.onDestroy = () => {
  48             this.left.removeEventListener('click', mobileSidebarClickBound);
  49             this.right.removeEventListener('click', mobileSidebarClickBound);
  50             this.middle.removeEventListener('click', mobileContentClickBound);
  51         }
  52     }
  53
  54     setupDesktop() {
  55         //
  56     }
  57
  58     /**
  59      * Slide the main content back into view if clicked and
  60      * currently slid out of view.
  61      * @param event
  62      */
  63     mobileContentClick(event) {
  64         this.elem.classList.remove('mobile-open');
  65     }
  66
  67     /**
  68      * On sidebar click, Show the content by sliding the main content out.
  69      * @param event
  70      */
  71     mobileSidebarClick(event) {
  72         if (this.elem.classList.contains('mobile-open')) {
  73             this.elem.classList.remove('mobile-open');
  74         } else {
  75             event.preventDefault();
  76             event.stopPropagation();
  77             this.elem.classList.add('mobile-open');
  78         }
  79     }
  80
  81 }
  82
  83 export default TriLayout;