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

   1 import {Component} from "./component";
   2
   3 export class TriLayout extends Component {
   4
   5     setup() {
   6         this.container = this.$refs.container;
   7         this.tabs = this.$manyRefs.tab;
   8
   9         this.lastLayoutType = 'none';
  10         this.onDestroy = null;
  11         this.scrollCache = {
  12             'content': 0,
  13             'info': 0,
  14         };
  15         this.lastTabShown = 'content';
  16
  17         // Bind any listeners
  18         this.mobileTabClick = this.mobileTabClick.bind(this);
  19
  20         // Watch layout changes
  21         this.updateLayout();
  22         window.addEventListener('resize', event => {
  23             this.updateLayout();
  24         }, {passive: true});
  25     }
  26
  27     updateLayout() {
  28         let newLayout = 'tablet';
  29         if (window.innerWidth <= 1000) newLayout =  'mobile';
  30         if (window.innerWidth >= 1400) newLayout =  'desktop';
  31         if (newLayout === this.lastLayoutType) return;
  32
  33         if (this.onDestroy) {
  34             this.onDestroy();
  35             this.onDestroy = null;
  36         }
  37
  38         if (newLayout === 'desktop') {
  39             this.setupDesktop();
  40         } else if (newLayout === 'mobile') {
  41             this.setupMobile();
  42         }
  43
  44         this.lastLayoutType = newLayout;
  45     }
  46
  47     setupMobile() {
  48         for (const tab of this.tabs) {
  49             tab.addEventListener('click', this.mobileTabClick);
  50         }
  51
  52         this.onDestroy = () => {
  53             for (const tab of this.tabs) {
  54                 tab.removeEventListener('click', this.mobileTabClick);
  55             }
  56         }
  57     }
  58
  59     setupDesktop() {
  60         //
  61     }
  62
  63
  64     /**
  65      * Action to run when the mobile info toggle bar is clicked/tapped
  66      * @param event
  67      */
  68     mobileTabClick(event) {
  69         const tab = event.target.dataset.tab;
  70         this.showTab(tab);
  71     }
  72
  73     /**
  74      * Show the content tab.
  75      * Used by the page-display component.
  76      */
  77     showContent() {
  78         this.showTab('content', false);
  79     }
  80
  81     /**
  82      * Show the given tab
  83      * @param {String} tabName
  84      * @param {Boolean }scroll
  85      */
  86     showTab(tabName, scroll = true) {
  87         this.scrollCache[this.lastTabShown] = document.documentElement.scrollTop;
  88
  89         // Set tab status
  90         for (const tab of this.tabs) {
  91             const isActive = (tab.dataset.tab === tabName);
  92             tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
  93         }
  94
  95         // Toggle section
  96         const showInfo = (tabName === 'info');
  97         this.container.classList.toggle('show-info', showInfo);
  98
  99         // Set the scroll position from cache
 100         if (scroll) {
 101             const pageHeader = document.querySelector('header');
 102             const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
 103             document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
 104             setTimeout(() => {
 105                 document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
 106             }, 50);
 107         }
 108
 109         this.lastTabShown = tabName;
 110     }
 111
 112 }