X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/b8e2d75014c89c9e345c3f940ec8743bd158df67..HEAD:/resources/js/components/tri-layout.js diff --git a/resources/js/components/tri-layout.js b/resources/js/components/tri-layout.js index f801e52a1..be9388e8d 100644 --- a/resources/js/components/tri-layout.js +++ b/resources/js/components/tri-layout.js @@ -1,5 +1,6 @@ +import {Component} from './component'; -class TriLayout { +export class TriLayout extends Component { setup() { this.container = this.$refs.container; @@ -8,8 +9,8 @@ class TriLayout { this.lastLayoutType = 'none'; this.onDestroy = null; this.scrollCache = { - 'content': 0, - 'info': 0, + content: 0, + info: 0, }; this.lastTabShown = 'content'; @@ -18,15 +19,15 @@ class TriLayout { // Watch layout changes this.updateLayout(); - window.addEventListener('resize', event => { + window.addEventListener('resize', () => { this.updateLayout(); }, {passive: true}); } updateLayout() { let newLayout = 'tablet'; - if (window.innerWidth <= 1000) newLayout = 'mobile'; - if (window.innerWidth >= 1400) newLayout = 'desktop'; + if (window.innerWidth <= 1000) newLayout = 'mobile'; + if (window.innerWidth > 1400) newLayout = 'desktop'; if (newLayout === this.lastLayoutType) return; if (this.onDestroy) { @@ -52,20 +53,19 @@ class TriLayout { for (const tab of this.tabs) { tab.removeEventListener('click', this.mobileTabClick); } - } + }; } setupDesktop() { // } - /** * Action to run when the mobile info toggle bar is clicked/tapped * @param event */ mobileTabClick(event) { - const tab = event.target.dataset.tab; + const {tab} = event.target.dataset; this.showTab(tab); } @@ -109,5 +109,3 @@ class TriLayout { } } - -export default TriLayout; \ No newline at end of file