118 lines
2.9 KiB
TypeScript
118 lines
2.9 KiB
TypeScript
/**
|
|
* --------------------------------------------
|
|
* AdminLTE treeview.ts
|
|
* License MIT
|
|
* --------------------------------------------
|
|
*/
|
|
|
|
import {
|
|
domReady,
|
|
slideDown,
|
|
slideUp
|
|
} from './util/index'
|
|
|
|
/**
|
|
* ------------------------------------------------------------------------
|
|
* Constants
|
|
* ------------------------------------------------------------------------
|
|
*/
|
|
|
|
// 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'
|
|
const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
|
|
const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
|
|
|
|
const Default = {
|
|
animationSpeed: 300
|
|
}
|
|
|
|
interface Config {
|
|
animationSpeed: number;
|
|
}
|
|
|
|
/**
|
|
* Class Definition
|
|
* ====================================================
|
|
*/
|
|
|
|
class Treeview {
|
|
_element: HTMLElement
|
|
_config: Config
|
|
_navItem: HTMLElement | undefined
|
|
_childNavItem: HTMLElement | undefined | undefined
|
|
|
|
constructor(element: HTMLElement, config: Config) {
|
|
this._element = element
|
|
this._config = { ...Default, ...config }
|
|
this._navItem = this._element?.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
|
|
this._childNavItem = this._navItem?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
|
|
}
|
|
|
|
open(): void {
|
|
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 {
|
|
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)
|
|
}
|
|
}
|
|
|
|
toggle(): void {
|
|
if (this._navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
|
|
this.close()
|
|
} else {
|
|
this.open()
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ------------------------------------------------------------------------
|
|
* Data Api implementation
|
|
* ------------------------------------------------------------------------
|
|
*/
|
|
|
|
domReady(() => {
|
|
const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
|
|
|
|
for (const btn of button) {
|
|
btn.addEventListener('click', event => {
|
|
// event.preventDefault()
|
|
|
|
const treeviewMenu = event.target as HTMLElement
|
|
|
|
const data = new Treeview(treeviewMenu, Default)
|
|
data.toggle()
|
|
})
|
|
}
|
|
})
|
|
|
|
export default Treeview
|