Added responsive functionality to tri-layout view.

resources/assets/js/components/index.js

@@ -20,6 +20,7 @@ import shelfSort from "./shelf-sort";
 import homepageControl from "./homepage-control";
 import headerMobileToggle from "./header-mobile-toggle";
 import listSortControl from "./list-sort-control";
+import triLayout from "./tri-layout";
 
 
 const componentMapping = {
@@ -45,6 +46,7 @@ const componentMapping = {
     'homepage-control': homepageControl,
     'header-mobile-toggle': headerMobileToggle,
     'list-sort-control': listSortControl,
+    'tri-layout': triLayout,
 };
 
 window.components = {};

resources/assets/js/components/tri-layout.js

@@ -0,0 +1,81 @@
+
+class TriLayout {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.middle = elem.querySelector('.tri-layout-middle');
+        this.right = elem.querySelector('.tri-layout-right');
+        this.left = elem.querySelector('.tri-layout-left');
+
+        this.lastLayoutType = 'none';
+        this.onDestroy = null;
+
+
+        this.updateLayout();
+        window.addEventListener('resize', event => {
+            this.updateLayout();
+        });
+    }
+
+    updateLayout() {
+        const newLayout = (window.innerWidth <= 1000) ? 'mobile' : 'desktop';
+        if (newLayout === this.lastLayoutType) return;
+
+        if (this.onDestroy) {
+            this.onDestroy();
+            this.onDestroy = null;
+        }
+
+        if (newLayout === 'desktop') {
+            this.setupDesktop();
+        } else {
+            this.setupMobile();
+        }
+
+        this.lastLayoutType = newLayout;
+    }
+
+    setupMobile() {
+        const mobileSidebarClickBound = this.mobileSidebarClick.bind(this);
+        const mobileContentClickBound = this.mobileContentClick.bind(this);
+        this.left.addEventListener('click', mobileSidebarClickBound);
+        this.right.addEventListener('click', mobileSidebarClickBound);
+        this.middle.addEventListener('click', mobileContentClickBound);
+
+        this.onDestroy = () => {
+            this.left.removeEventListener('click', mobileSidebarClickBound);
+            this.right.removeEventListener('click', mobileSidebarClickBound);
+            this.middle.removeEventListener('click', mobileContentClickBound);
+        }
+    }
+
+    setupDesktop() {
+        // TODO
+    }
+
+    /**
+     * Slide the main content back into view if clicked and
+     * currently slid out of view.
+     * @param event
+     */
+    mobileContentClick(event) {
+        this.elem.classList.remove('mobile-open');
+    }
+
+    /**
+     * On sidebar click, Show the content by sliding the main content out.
+     * @param event
+     */
+    mobileSidebarClick(event) {
+        if (this.elem.classList.contains('mobile-open')) {
+            this.elem.classList.remove('mobile-open');
+        } else {
+            event.preventDefault();
+            event.stopPropagation();
+            this.elem.classList.add('mobile-open');
+        }
+    }
+
+}
+
+export default TriLayout;