improve js

src/ts/adminlte.ts

@@ -11,7 +11,7 @@ export {
   SidebarOverlay,
   Treeview,
   DirectChat,
-  CardWidget
+  CardWidget,
 }
 
 //

src/ts/card-widget.ts

@@ -8,7 +8,7 @@
 import {
   domReady,
   slideUp,
-  slideDown
+  slideDown,
 } from './util/index'
 
 /**
@@ -39,7 +39,7 @@ const Default = {
   collapseIcon: 'fa-minus',
   expandIcon: 'fa-plus',
   maximizeIcon: 'fa-expand',
-  minimizeIcon: 'fa-compress'
+  minimizeIcon: 'fa-compress',
 }
 
 interface Config {
@@ -69,51 +69,63 @@ class CardWidget {
   }
 
   collapse() {
-    this._parent?.classList.add(CLASS_NAME_COLLAPSING)
+    if (this._parent) {
+      this._parent.classList.add(CLASS_NAME_COLLAPSING)
 
-    const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
+      const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
 
-    if (elm !== undefined) {
+      if (elm !== undefined) {
-      for (const el of elm) {
+        for (const el of elm) {
-        if (el instanceof HTMLElement) {
+          if (el instanceof HTMLElement) {
-          slideUp(el, this._config.animationSpeed)
+            slideUp(el, this._config.animationSpeed)
+          }
         }
       }
-    }
 
-    setTimeout(() => {
+      setTimeout(() => {
-      this._parent?.classList.add(CLASS_NAME_COLLAPSED)
+        if (this._parent) {
-      this._parent?.classList.remove(CLASS_NAME_COLLAPSING)
+          this._parent.classList.add(CLASS_NAME_COLLAPSED)
-    }, this._config.animationSpeed)
+          this._parent.classList.remove(CLASS_NAME_COLLAPSING)
+        }
+      }, this._config.animationSpeed)
+    }
 
     const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.collapseIcon}`)
 
-    icon?.classList.add(this._config.expandIcon)
+    if (icon) {
-    icon?.classList.remove(this._config.collapseIcon)
+      icon.classList.remove(this._config.collapseIcon)
+      icon.classList.add(this._config.expandIcon)
+    }
   }
 
   expand() {
-    this._parent?.classList.add(CLASS_NAME_EXPANDING)
+    if (this._parent) {
+      this._parent.classList.add(CLASS_NAME_EXPANDING)
 
-    const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
+      const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
 
-    if (elm !== undefined) {
+      if (elm !== undefined) {
-      for (const el of elm) {
+        for (const el of elm) {
-        if (el instanceof HTMLElement) {
+          if (el instanceof HTMLElement) {
-          slideDown(el, this._config.animationSpeed)
+            slideDown(el, this._config.animationSpeed)
+          }
         }
       }
-    }
 
-    setTimeout(() => {
+      setTimeout(() => {
-      this._parent?.classList.remove(CLASS_NAME_COLLAPSED)
+        if (this._parent) {
-      this._parent?.classList.remove(CLASS_NAME_EXPANDING)
+          this._parent.classList.remove(CLASS_NAME_COLLAPSED)
-    }, this._config.animationSpeed)
+          this._parent.classList.remove(CLASS_NAME_EXPANDING)
+        }
+      }, this._config.animationSpeed)
+    }
 
     const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.expandIcon}`)
 
-    icon?.classList.add(this._config.collapseIcon)
+    if (icon) {
-    icon?.classList.remove(this._config.expandIcon)
+      icon.classList.add(this._config.collapseIcon)
+      icon.classList.remove(this._config.expandIcon)
+    }
   }
 
   remove() {
@@ -134,18 +146,29 @@ class CardWidget {
   maximize() {
     if (this._parent) {
       const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`)
-      maxElm?.classList.add(this._config.minimizeIcon)
+
-      maxElm?.classList.remove(this._config.maximizeIcon)
+      if (maxElm) {
+        maxElm.classList.add(this._config.minimizeIcon)
+        maxElm.classList.remove(this._config.maximizeIcon)
+      }
 
       this._parent.style.height = `${this._parent.scrollHeight}px`
       this._parent.style.width = `${this._parent.scrollWidth}px`
       this._parent.style.transition = 'all .15s'
 
       setTimeout(() => {
-        document.querySelector('html')?.classList.add(CLASS_NAME_MAXIMIZED)
+        const htmlTag = document.querySelector('html')
-        this._parent?.classList.add(CLASS_NAME_MAXIMIZED)
+
-        if (this._parent?.classList.contains(CLASS_NAME_COLLAPSED)) {
+        if (htmlTag) {
-          this._parent.classList.add(CLASS_NAME_WAS_COLLAPSED)
+          htmlTag.classList.add(CLASS_NAME_MAXIMIZED)
+        }
+
+        if (this._parent) {
+          this._parent.classList.add(CLASS_NAME_MAXIMIZED)
+
+          if (this._parent.classList.contains(CLASS_NAME_COLLAPSED)) {
+            this._parent.classList.add(CLASS_NAME_WAS_COLLAPSED)
+          }
         }
       }, 150)
     }
@@ -155,13 +178,20 @@ class CardWidget {
     if (this._parent) {
       const minElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.minimizeIcon}`)
 
-      minElm?.classList.add(this._config.maximizeIcon)
+      if (minElm) {
-      minElm?.classList.remove(this._config.minimizeIcon)
+        minElm.classList.add(this._config.maximizeIcon)
+        minElm.classList.remove(this._config.minimizeIcon)
+      }
 
       this._parent.style.cssText = `height: ${this._parent.style.height} !important; width: ${this._parent.style.width} !important; transition: all .15s;`
 
       setTimeout(() => {
-        document.querySelector('html')?.classList.remove(CLASS_NAME_MAXIMIZED)
+        const htmlTag = document.querySelector('html')
+
+        if (htmlTag) {
+          htmlTag.classList.remove(CLASS_NAME_MAXIMIZED)
+        }
+
         if (this._parent) {
           this._parent.classList.remove(CLASS_NAME_MAXIMIZED)
 

src/ts/direct-chat.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady
+  domReady,
 } from './util/index'
 
 /**

src/ts/layout.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady
+  domReady,
 } from './util/index'
 
 /**
@@ -21,7 +21,7 @@ const SELECTOR_SIDEBAR = '.sidebar'
 
 const Default = {
   scrollbarTheme: 'os-theme-light',
-  scrollbarAutoHide: 'leave'
+  scrollbarAutoHide: 'leave',
 }
 
 interface Config {
@@ -67,8 +67,8 @@ domReady(() => {
       sizeAutoCapable: true,
       scrollbars: {
         autoHide: Default.scrollbarAutoHide,
-        clickScrolling: true
+        clickScrolling: true,
-      }
+      },
     })
   }
 })

src/ts/push-menu.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady
+  domReady,
 } from './util/index'
 
 /**
@@ -109,13 +109,16 @@ class PushMenu {
 
   sidebarHover(): void {
     const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
-    selSidebar?.addEventListener('mouseover', () => {
-      this._bodyClass.add(CLASS_NAME_SIDEBAR_IS_HOVER)
-    })
 
-    selSidebar?.addEventListener('mouseout', () => {
+    if (selSidebar) {
-      this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
+      selSidebar.addEventListener('mouseover', () => {
-    })
+        this._bodyClass.add(CLASS_NAME_SIDEBAR_IS_HOVER)
+      })
+
+      selSidebar.addEventListener('mouseout', () => {
+        this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
+      })
+    }
   }
 
   toggleFull(): void {

src/ts/sidebar-overlay.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady
+  domReady,
 } from './util/index'
 
 /**
@@ -25,7 +25,7 @@ const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_LAYOUT_MOBILE}`
 const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
 
 const Defaults = {
-  onLayouMobile: 992
+  onLayouMobile: 992,
 }
 
 class SidebarOverlay {
@@ -60,8 +60,10 @@ class SidebarOverlay {
     const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
     const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
 
-    selContentWrapper?.addEventListener('touchstart', this.removeOverlaySidebar)
+    if (selContentWrapper) {
-    selContentWrapper?.addEventListener('click', this.removeOverlaySidebar)
+      selContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
+      selContentWrapper.addEventListener('click', this.removeOverlaySidebar)
+    }
   }
 }
 

src/ts/treeview.ts

@@ -8,7 +8,7 @@
 import {
   domReady,
   slideDown,
-  slideUp
+  slideUp,
 } from './util/index'
 
 /**
@@ -17,6 +17,14 @@ import {
  * ------------------------------------------------------------------------
  */
 
+// const NAME = 'Treeview'
+const DATA_KEY = 'lte.treeview'
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_EXPANDED = `expanded${EVENT_KEY}`
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+// const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
+
 const CLASS_NAME_MENU_OPEN = 'menu-open'
 const CLASS_NAME_MENU_IS_OPEN = 'menu-is-open'
 const SELECTOR_NAV_ITEM = '.nav-item'
@@ -24,7 +32,7 @@ const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
 const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
 
 const Default = {
-  animationSpeed: 300
+  animationSpeed: 300,
 }
 
 interface Config {
@@ -45,27 +53,36 @@ class Treeview {
   constructor(element: HTMLElement, config: Config) {
     this._element = element
 
-    this._navItem = this._element.closest(SELECTOR_NAV_ITEM)
+    this._navItem = this._element?.closest(SELECTOR_NAV_ITEM)
     this._childNavItem = this._navItem?.querySelector(SELECTOR_TREEVIEW_MENU)
 
-    this._config = Object.assign({}, Default, config)
+    this._config = {...Default, ...config}
   }
 
   open(): void {
-    this._navItem?.classList.add(CLASS_NAME_MENU_OPEN)
+    const event = new CustomEvent(EVENT_EXPANDED)
-    this._navItem?.classList.add(CLASS_NAME_MENU_IS_OPEN)
+
+    if (this._navItem) {
+      this._navItem.classList.add(CLASS_NAME_MENU_OPEN)
+      this._navItem.classList.add(CLASS_NAME_MENU_IS_OPEN)
+    }
 
     if (this._childNavItem) {
       slideDown(this._childNavItem, this._config.animationSpeed)
+      this._element.dispatchEvent(event)
     }
   }
 
   close(): void {
-    this._navItem?.classList.remove(CLASS_NAME_MENU_IS_OPEN)
+    const event = new CustomEvent(EVENT_COLLAPSED)
-    this._navItem?.classList.remove(CLASS_NAME_MENU_OPEN)
+    if (this._navItem) {
+      this._navItem.classList.remove(CLASS_NAME_MENU_IS_OPEN)
+      this._navItem.classList.remove(CLASS_NAME_MENU_OPEN)
+    }
 
     if (this._childNavItem) {
       slideUp(this._childNavItem, this._config.animationSpeed)
+      this._element.dispatchEvent(event)
     }
   }
 
@@ -86,6 +103,7 @@ class Treeview {
 
 domReady(() => {
   const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
+
   for (const btn of button) {
     btn.addEventListener('click', event => {
       // event.preventDefault()
@@ -99,5 +117,3 @@ domReady(() => {
 })
 
 export default Treeview
-
-//

src/ts/util/index.ts

@@ -94,5 +94,5 @@ export {
   windowReady,
   slideUp,
   slideDown,
-  slideToggle
+  slideToggle,
 }

tsconfig.json

@@ -1,13 +1,10 @@
 {
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "noFallthroughCasesInSwitch": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noUnusedLocals": true,
     "noImplicitAny": true,
-    "target": "esnext",
+    "target": "es2018",
     "module": "esnext",
     "strict": true,
     "strictNullChecks": true,