improve js

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)
-    this._navItem?.classList.add(CLASS_NAME_MENU_IS_OPEN)
+    const event = new CustomEvent(EVENT_EXPANDED)
+
+    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)
-    this._navItem?.classList.remove(CLASS_NAME_MENU_OPEN)
+    const event = new CustomEvent(EVENT_COLLAPSED)
+    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
-
-//