From 4942067b42e43b2de53efd98b4631720cecfa6a9 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Tue, 31 Jan 2023 23:25:11 +0530 Subject: [PATCH] JavaScript Interaction Improved --- src/ts/card-widget.ts | 28 ++++++++++++++++++++++++++++ src/ts/direct-chat.ts | 36 ++++++++++++++++++++++++++++++------ src/ts/push-menu.ts | 18 ++++++++++++++++++ src/ts/treeview.ts | 19 +++++++++---------- 4 files changed, 85 insertions(+), 16 deletions(-) diff --git a/src/ts/card-widget.ts b/src/ts/card-widget.ts index 5eca1c17c..968c4ef19 100644 --- a/src/ts/card-widget.ts +++ b/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() { diff --git a/src/ts/direct-chat.ts b/src/ts/direct-chat.ts index 04235f26c..e7f868afa 100644 --- a/src/ts/direct-chat.ts +++ b/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() }) } }) diff --git a/src/ts/push-menu.ts b/src/ts/push-menu.ts index df9947912..1f371c0ff 100644 --- a/src/ts/push-menu.ts +++ b/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 + diff --git a/src/ts/treeview.ts b/src/ts/treeview.ts index 36a62c3fa..5b11607c0 100644 --- a/src/ts/treeview.ts +++ b/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)