diff --git a/src/ts/adminlte.ts b/src/ts/adminlte.ts index b929b7166..503bd55ed 100644 --- a/src/ts/adminlte.ts +++ b/src/ts/adminlte.ts @@ -11,7 +11,7 @@ export { SidebarOverlay, Treeview, DirectChat, - CardWidget + CardWidget, } // diff --git a/src/ts/card-widget.ts b/src/ts/card-widget.ts index 5efb518ba..df5344fda 100644 --- a/src/ts/card-widget.ts +++ b/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) { - for (const el of elm) { - if (el instanceof HTMLElement) { - slideUp(el, this._config.animationSpeed) + if (elm !== undefined) { + for (const el of elm) { + if (el instanceof HTMLElement) { + slideUp(el, this._config.animationSpeed) + } } } - } - setTimeout(() => { - this._parent?.classList.add(CLASS_NAME_COLLAPSED) - this._parent?.classList.remove(CLASS_NAME_COLLAPSING) - }, this._config.animationSpeed) + setTimeout(() => { + if (this._parent) { + this._parent.classList.add(CLASS_NAME_COLLAPSED) + 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) - icon?.classList.remove(this._config.collapseIcon) + if (icon) { + 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) { - for (const el of elm) { - if (el instanceof HTMLElement) { - slideDown(el, this._config.animationSpeed) + if (elm !== undefined) { + for (const el of elm) { + if (el instanceof HTMLElement) { + slideDown(el, this._config.animationSpeed) + } } } - } - setTimeout(() => { - this._parent?.classList.remove(CLASS_NAME_COLLAPSED) - this._parent?.classList.remove(CLASS_NAME_EXPANDING) - }, this._config.animationSpeed) + setTimeout(() => { + if (this._parent) { + this._parent.classList.remove(CLASS_NAME_COLLAPSED) + 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) - icon?.classList.remove(this._config.expandIcon) + if (icon) { + 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) - this._parent?.classList.add(CLASS_NAME_MAXIMIZED) - if (this._parent?.classList.contains(CLASS_NAME_COLLAPSED)) { - this._parent.classList.add(CLASS_NAME_WAS_COLLAPSED) + const htmlTag = document.querySelector('html') + + if (htmlTag) { + 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) - minElm?.classList.remove(this._config.minimizeIcon) + if (minElm) { + 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) diff --git a/src/ts/direct-chat.ts b/src/ts/direct-chat.ts index 04235f26c..1fb9b18e0 100644 --- a/src/ts/direct-chat.ts +++ b/src/ts/direct-chat.ts @@ -6,7 +6,7 @@ */ import { - domReady + domReady, } from './util/index' /** diff --git a/src/ts/layout.ts b/src/ts/layout.ts index 3a587575a..6ce5e4f45 100644 --- a/src/ts/layout.ts +++ b/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, + }, }) } }) diff --git a/src/ts/push-menu.ts b/src/ts/push-menu.ts index 176fa7139..ce65b28ea 100644 --- a/src/ts/push-menu.ts +++ b/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', () => { - this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER) - }) + if (selSidebar) { + selSidebar.addEventListener('mouseover', () => { + this._bodyClass.add(CLASS_NAME_SIDEBAR_IS_HOVER) + }) + + selSidebar.addEventListener('mouseout', () => { + this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER) + }) + } } toggleFull(): void { diff --git a/src/ts/sidebar-overlay.ts b/src/ts/sidebar-overlay.ts index 2295673c0..f30b475f7 100644 --- a/src/ts/sidebar-overlay.ts +++ b/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) - selContentWrapper?.addEventListener('click', this.removeOverlaySidebar) + if (selContentWrapper) { + selContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar) + selContentWrapper.addEventListener('click', this.removeOverlaySidebar) + } } } diff --git a/src/ts/treeview.ts b/src/ts/treeview.ts index b7b7d29f8..2a9a42cf5 100644 --- a/src/ts/treeview.ts +++ b/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 - -// diff --git a/src/ts/util/index.ts b/src/ts/util/index.ts index fa14c2dfc..e81c47f6c 100644 --- a/src/ts/util/index.ts +++ b/src/ts/util/index.ts @@ -94,5 +94,5 @@ export { windowReady, slideUp, slideDown, - slideToggle + slideToggle, } diff --git a/tsconfig.json b/tsconfig.json index 70dc0870f..eeeb508ca 100644 --- a/tsconfig.json +++ b/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,