Layout: Converted tri-layout component to ts

Author: ssddanbrown

resources/js/components/tri-layout.js renamed to resources/js/components/tri-layout.ts

@@ -1,20 +1,23 @@
 import {Component} from './component';
 
 export class TriLayout extends Component {
-
-    setup() {
+    private container!: HTMLElement;
+    private tabs!: HTMLElement[];
+    private sidebarScrollContainers!: HTMLElement[];
+
+    private lastLayoutType = 'none';
+    private onDestroy: (()=>void)|null = null;
+    private scrollCache: Record<string, number> = {
+        content: 0,
+        info: 0,
+    };
+    private lastTabShown = 'content';
+
+    setup(): void {
         this.container = this.$refs.container;
         this.tabs = this.$manyRefs.tab;
         this.sidebarScrollContainers = this.$manyRefs.sidebarScrollContainer;
 
-        this.lastLayoutType = 'none';
-        this.onDestroy = null;
-        this.scrollCache = {
-            content: 0,
-            info: 0,
-        };
-        this.lastTabShown = 'content';
-
         // Bind any listeners
         this.mobileTabClick = this.mobileTabClick.bind(this);
 
@@ -27,7 +30,7 @@ export class TriLayout extends Component {
         this.setupSidebarScrollHandlers();
     }
 
-    updateLayout() {
+    updateLayout(): void {
         let newLayout = 'tablet';
         if (window.innerWidth <= 1000) newLayout = 'mobile';
         if (window.innerWidth > 1400) newLayout = 'desktop';
@@ -59,33 +62,30 @@ export class TriLayout extends Component {
         };
     }
 
-    setupDesktop() {
+    setupDesktop(): void {
         //
     }
 
     /**
      * Action to run when the mobile info toggle bar is clicked/tapped
-     * @param event
      */
-    mobileTabClick(event) {
-        const {tab} = event.target.dataset;
+    mobileTabClick(event: MouseEvent): void {
+        const tab = (event.target as HTMLElement).dataset.tab || '';
         this.showTab(tab);
     }
 
     /**
      * Show the content tab.
      * Used by the page-display component.
      */
-    showContent() {
+    showContent(): void {
         this.showTab('content', false);
     }
 
     /**
      * Show the given tab
-     * @param {String} tabName
-     * @param {Boolean }scroll
      */
-    showTab(tabName, scroll = true) {
+    showTab(tabName: string, scroll: boolean = true): void {
         this.scrollCache[this.lastTabShown] = document.documentElement.scrollTop;
 
         // Set tab status
@@ -100,7 +100,7 @@ export class TriLayout extends Component {
 
         // Set the scroll position from cache
         if (scroll) {
-            const pageHeader = document.querySelector('header');
+            const pageHeader = document.querySelector('header') as HTMLElement;
             const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
             document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
             setTimeout(() => {
@@ -111,7 +111,7 @@ export class TriLayout extends Component {
         this.lastTabShown = tabName;
     }
 
-    setupSidebarScrollHandlers() {
+    setupSidebarScrollHandlers(): void {
         for (const sidebar of this.sidebarScrollContainers) {
             sidebar.addEventListener('scroll', () => this.handleSidebarScroll(sidebar), {
                 passive: true,
@@ -126,13 +126,15 @@ export class TriLayout extends Component {
         });
     }
 
-    handleSidebarScroll(sidebar) {
+    handleSidebarScroll(sidebar: HTMLElement): void {
         const scrollable = sidebar.clientHeight !== sidebar.scrollHeight;
         const atTop = sidebar.scrollTop === 0;
         const atBottom = (sidebar.scrollTop + sidebar.clientHeight) === sidebar.scrollHeight;
 
-        sidebar.parentElement.classList.toggle('scroll-away-from-top', !atTop && scrollable);
-        sidebar.parentElement.classList.toggle('scroll-away-from-bottom', !atBottom && scrollable);
+        if (sidebar.parentElement) {
+            sidebar.parentElement.classList.toggle('scroll-away-from-top', !atTop && scrollable);
+            sidebar.parentElement.classList.toggle('scroll-away-from-bottom', !atBottom && scrollable);
+        }
     }
 
 }