github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Update treeview.ts

pull/3891/head
Daniel 2021-06-13 17:19:24 +05:30
parent a65e7716e2
commit e25bd67708
1 changed files with 40 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/ts/treeview.ts
View File

@ -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()
}) })
} }
}) })