JavaScript Interaction Improved

src/ts/card-widget.ts

@@ -16,6 +16,14 @@ import {
  * ====================================================
  */
 
+const DATA_KEY = 'lte.card-widget'
+const EVENT_KEY = `.${DATA_KEY}`
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_EXPANDED = `expanded${EVENT_KEY}`
+const EVENT_REMOVE = `remove${EVENT_KEY}`
+const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
+const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
+
 const CLASS_NAME_CARD = 'card'
 const CLASS_NAME_COLLAPSED = 'collapsed-card'
 const CLASS_NAME_COLLAPSING = 'collapsing-card'
@@ -69,6 +77,8 @@ class CardWidget {
   }
 
   collapse() {
+    const event = new Event(EVENT_COLLAPSED)
+
     if (this._parent) {
       this._parent.classList.add(CLASS_NAME_COLLAPSING)
 
@@ -96,9 +106,13 @@ class CardWidget {
       icon.classList.remove(this._config.collapseIcon)
       icon.classList.add(this._config.expandIcon)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   expand() {
+    const event = new Event(EVENT_EXPANDED)
+
     if (this._parent) {
       this._parent.classList.add(CLASS_NAME_EXPANDING)
 
@@ -126,12 +140,18 @@ class CardWidget {
       icon.classList.add(this._config.collapseIcon)
       icon.classList.remove(this._config.expandIcon)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   remove() {
+    const event = new Event(EVENT_REMOVE)
+
     if (this._parent) {
       slideUp(this._parent, this._config.animationSpeed)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   toggle() {
@@ -144,6 +164,8 @@ class CardWidget {
   }
 
   maximize() {
+    const event = new Event(EVENT_MAXIMIZED)
+
     if (this._parent) {
       const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`)
 
@@ -172,9 +194,13 @@ class CardWidget {
         }
       }, 150)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   minimize() {
+    const event = new Event(EVENT_MINIMIZED)
+
     if (this._parent) {
       const minElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.minimizeIcon}`)
 
@@ -201,6 +227,8 @@ class CardWidget {
         }
       }, 10)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   toggleMaximize() {

src/ts/direct-chat.ts

@@ -14,6 +14,11 @@ import {
  * ====================================================
  */
 
+const DATA_KEY = 'lte.direct-chat'
+const EVENT_KEY = `.${DATA_KEY}`
+const EVENT_EXPANDED = `expanded${EVENT_KEY}`
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+
 const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="chat-pane"]'
 const SELECTOR_DIRECT_CHAT = '.direct-chat'
 
@@ -25,9 +30,27 @@ const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open'
  */
 
 class DirectChat {
-  toggle(chatPane: Element): void {
-    // chatPane
-    chatPane.closest(SELECTOR_DIRECT_CHAT)?.classList.toggle(CLASS_NAME_DIRECT_CHAT_OPEN)
+  _element: HTMLElement | undefined
+  _config: undefined
+  constructor(element: HTMLElement | undefined, config: undefined) {
+    this._element = element
+    this._config = config
+  }
+
+  toggle(): void {
+    if (this._element?.classList.contains(CLASS_NAME_DIRECT_CHAT_OPEN)) {
+      const event = new Event(EVENT_COLLAPSED)
+
+      this._element?.classList.remove(CLASS_NAME_DIRECT_CHAT_OPEN)
+
+      this._element?.dispatchEvent(event)
+    } else {
+      const event = new Event(EVENT_EXPANDED)
+
+      this._element?.classList.add(CLASS_NAME_DIRECT_CHAT_OPEN)
+
+      this._element?.dispatchEvent(event)
+    }
   }
 }
 
@@ -43,9 +66,10 @@ domReady(() => {
   for (const btn of button) {
     btn.addEventListener('click', event => {
       event.preventDefault()
-      const chatPane = event.target as Element
-      const data = new DirectChat()
-      data.toggle(chatPane)
+      const target = event.target as HTMLElement
+      const chatPane = target?.closest(SELECTOR_DIRECT_CHAT) as HTMLElement | undefined
+      const data = new DirectChat(chatPane, undefined)
+      data.toggle()
     })
   }
 })

src/ts/push-menu.ts

@@ -15,6 +15,13 @@ import {
  * ------------------------------------------------------------------------
  */
 
+const DATA_KEY = 'lte.push-menu'
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_OPEN = `open${EVENT_KEY}`
+const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
+const EVENT_CLOSE = `close${EVENT_KEY}`
+
 const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
 const CLASS_NAME_SIDEBAR_MINI_HAD = 'sidebar-mini-had'
 const CLASS_NAME_SIDEBAR_HORIZONTAL = 'sidebar-horizontal'
@@ -91,20 +98,28 @@ class PushMenu {
   }
 
   expand(): void {
+    const event = new Event(EVENT_OPEN)
     this.sidebarOpening()
 
     this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
     this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
     this._bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
+
+    this._element?.dispatchEvent(event)
   }
 
   collapse(): void {
+    const event = new Event(EVENT_COLLAPSE)
+
     this.sidebarColllapsing()
 
     this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
+    this._element?.dispatchEvent(event)
   }
 
   close(): void {
+    const event = new Event(EVENT_CLOSE)
+
     this._bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
     this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
     this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
@@ -112,6 +127,8 @@ class PushMenu {
     if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
       this.menusClose()
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   sidebarHover(): void {
@@ -253,3 +270,4 @@ domReady(() => {
 })
 
 export default PushMenu
+

src/ts/treeview.ts

@@ -26,7 +26,6 @@ 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'
 const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
 const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
@@ -62,27 +61,29 @@ class Treeview {
 
     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)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   close(): void {
     const event = new Event(EVENT_COLLAPSED)
 
-    if (this._navItem) {
-      this._navItem.classList.remove(CLASS_NAME_MENU_IS_OPEN)
-      this._navItem.classList.remove(CLASS_NAME_MENU_OPEN)
-    }
+    window.setTimeout(() => {
+      if (this._navItem) {
+        this._navItem.classList.remove(CLASS_NAME_MENU_OPEN)
+      }
+    }, this._config.animationSpeed)
 
     if (this._childNavItem) {
       slideUp(this._childNavItem, this._config.animationSpeed)
-      this._element.dispatchEvent(event)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   toggle(): void {
@@ -105,8 +106,6 @@ domReady(() => {
 
   for (const btn of button) {
     btn.addEventListener('click', event => {
-      // event.preventDefault()
-
       const treeviewMenu = event.target as HTMLElement
 
       const data = new Treeview(treeviewMenu, Default)