mirror of https://github.com/ColorlibHQ/AdminLTE
Update treeview.ts
parent
a65e7716e2
commit
e25bd67708
|
@ -6,7 +6,9 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {
|
import {
|
||||||
domReady
|
domReady,
|
||||||
|
slideDown,
|
||||||
|
slideUp
|
||||||
} from './util/index'
|
} from './util/index'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -17,13 +19,16 @@ import {
|
||||||
|
|
||||||
const CLASS_NAME_MENU_OPEN = 'menu-open'
|
const CLASS_NAME_MENU_OPEN = 'menu-open'
|
||||||
const CLASS_NAME_MENU_IS_OPEN = 'menu-is-open'
|
const CLASS_NAME_MENU_IS_OPEN = 'menu-is-open'
|
||||||
|
|
||||||
const SELECTOR_NAV_ITEM = '.nav-item'
|
const SELECTOR_NAV_ITEM = '.nav-item'
|
||||||
|
const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
|
||||||
const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
|
const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
|
||||||
|
|
||||||
const Defaults = {
|
const Default = {
|
||||||
transitionDuration: 300,
|
animationSpeed: 300
|
||||||
transitionTimingFuntion: 'linear'
|
}
|
||||||
|
|
||||||
|
interface Config {
|
||||||
|
animationSpeed: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -32,56 +37,43 @@ const Defaults = {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class Treeview {
|
class Treeview {
|
||||||
open(navItem: Element | null, childNavItem: HTMLElement | null | undefined): void {
|
_element: HTMLElement
|
||||||
navItem?.classList.add(CLASS_NAME_MENU_OPEN)
|
_config: Config
|
||||||
navItem?.classList.add(CLASS_NAME_MENU_IS_OPEN)
|
_navItem: HTMLElement | null
|
||||||
|
_childNavItem: HTMLElement | null | undefined
|
||||||
|
|
||||||
const height: number = childNavItem?.scrollHeight ?? 0
|
constructor(element: HTMLElement, config: Config) {
|
||||||
|
this._element = element
|
||||||
|
|
||||||
childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms ${Defaults.transitionTimingFuntion}`)
|
this._navItem = this._element.closest(SELECTOR_NAV_ITEM)
|
||||||
childNavItem?.style.setProperty('overflow', 'hidden')
|
this._childNavItem = this._navItem?.querySelector(SELECTOR_TREEVIEW_MENU)
|
||||||
childNavItem?.style.setProperty('height', '0px')
|
|
||||||
childNavItem?.style.setProperty('display', 'block')
|
|
||||||
|
|
||||||
setTimeout(() => {
|
this._config = Object.assign({}, Default, config)
|
||||||
childNavItem?.style.setProperty('height', `${height}px`)
|
|
||||||
}, 1)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
childNavItem?.style.removeProperty('overflow')
|
|
||||||
childNavItem?.style.removeProperty('height')
|
|
||||||
}, Defaults.transitionDuration)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
close(navItem: Element, childNavItem: HTMLElement | null | undefined): void {
|
open(): void {
|
||||||
navItem.classList.remove(CLASS_NAME_MENU_IS_OPEN)
|
this._navItem?.classList.add(CLASS_NAME_MENU_OPEN)
|
||||||
navItem.classList.remove(CLASS_NAME_MENU_OPEN)
|
this._navItem?.classList.add(CLASS_NAME_MENU_IS_OPEN)
|
||||||
|
|
||||||
const height: number = childNavItem?.scrollHeight ?? 0
|
if (this._childNavItem) {
|
||||||
|
slideDown(this._childNavItem, this._config.animationSpeed)
|
||||||
childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms ${Defaults.transitionTimingFuntion}`)
|
}
|
||||||
childNavItem?.style.setProperty('overflow', 'hidden')
|
|
||||||
childNavItem?.style.setProperty('height', `${height}px`)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
childNavItem?.style.setProperty('height', '0px')
|
|
||||||
}, 1)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
childNavItem?.style.removeProperty('overflow')
|
|
||||||
childNavItem?.style.removeProperty('height')
|
|
||||||
childNavItem?.style.removeProperty('display')
|
|
||||||
}, Defaults.transitionDuration)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
toggle(treeviewMenu: Element): void {
|
close(): void {
|
||||||
const navItem: HTMLElement | null = treeviewMenu.closest(SELECTOR_NAV_ITEM)
|
this._navItem?.classList.remove(CLASS_NAME_MENU_IS_OPEN)
|
||||||
const childNavItem: HTMLElement | null | undefined = navItem?.querySelector('.nav-treeview')
|
this._navItem?.classList.remove(CLASS_NAME_MENU_OPEN)
|
||||||
|
|
||||||
if (navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
|
if (this._childNavItem) {
|
||||||
this.close(navItem, childNavItem)
|
slideUp(this._childNavItem, this._config.animationSpeed)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle(): void {
|
||||||
|
if (this._navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
|
||||||
|
this.close()
|
||||||
} else {
|
} else {
|
||||||
this.open(navItem, childNavItem)
|
this.open()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -98,10 +90,10 @@ domReady(() => {
|
||||||
btn.addEventListener('click', event => {
|
btn.addEventListener('click', event => {
|
||||||
// event.preventDefault()
|
// event.preventDefault()
|
||||||
|
|
||||||
const treeviewMenu = event.target as Element
|
const treeviewMenu = event.target as HTMLElement
|
||||||
|
|
||||||
const data = new Treeview()
|
const data = new Treeview(treeviewMenu, Default)
|
||||||
data.toggle(treeviewMenu)
|
data.toggle()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue