lisone/AdminLTE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

organize dir

Browse Source
This commit is contained in:
Daniel
2021-05-12 01:19:41 +05:30
parent 0a36e8fa00
commit bd43001eb4
44 changed files with 182 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ts/adminlte.ts Normal file
View File

@@ -0,0 +1,13 @@
import PushMenu from './push-menu'
import SidebarHover from './sidebar-hover'
import SidebarOverlay from './sidebar-overlay'
import Treeview from './treeview'
export {
PushMenu,
SidebarHover,
SidebarOverlay,
Treeview
}
//

168
ts/push-menu.ts Normal file
View File

@@ -0,0 +1,168 @@
/**
* --------------------------------------------
* AdminLTE pushmenu.ts
* License MIT
* --------------------------------------------
*/
import {
domReady
} from './util/index'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
const CLASS_NAME_SIDEBAR_MINI_HAD = 'sidebar-mini-had'
const CLASS_NAME_SIDEBAR_HORIZONTAL = 'sidebar-horizontal'
const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close'
const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
const CLASS_NAME_SIDEBAR_OPENING = 'sidebar-is-opening'
const CLASS_NAME_SIDEBAR_COLLAPSING = 'sidebar-is-collapsing'
const CLASS_NAME_MENU_OPEN = 'menu-open'
const SELECTOR_NAV_SIDEBAR = '.nav-sidebar'
const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
const SELECTOR_MINI_TOGGLE = '[data-pushmenu="mini"]'
const SELECTOR_FULL_TOGGLE = '[data-pushmenu="full"]'
/**
* Class Definition
* ====================================================
*/
class PushMenu {
sidebarOpening(): void {
const bodyClass = document.body.classList
bodyClass.add(CLASS_NAME_SIDEBAR_OPENING)
setTimeout(() => {
bodyClass.remove(CLASS_NAME_SIDEBAR_OPENING)
}, 1000)
}
sidebarColllapsing(): void {
const bodyClass = document.body.classList
bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSING)
setTimeout(() => {
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSING)
}, 1000)
}
menusClose(): void {
const navTreeview = document.querySelectorAll<HTMLElement>(SELECTOR_NAV_TREEVIEW)
for (const navTree of navTreeview) {
navTree.style.removeProperty('display')
navTree.style.removeProperty('height')
}
const navSidebar = document.querySelector(SELECTOR_NAV_SIDEBAR)
const navItem = navSidebar?.querySelectorAll(SELECTOR_NAV_ITEM)
if (navItem) {
for (const navI of navItem) {
navI.classList.remove(CLASS_NAME_MENU_OPEN)
}
}
}
expand(): void {
this.sidebarOpening()
const bodyClass = document.body.classList
bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
}
collapse(): void {
this.sidebarColllapsing()
const bodyClass = document.body.classList
bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
}
close(): void {
const bodyClass = document.body.classList
bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
if (bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
this.menusClose()
}
}
toggleFull(): void {
const bodyClass = document.body.classList
if (bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
this.expand()
} else {
this.close()
}
if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
bodyClass.remove(CLASS_NAME_SIDEBAR_MINI)
bodyClass.add(CLASS_NAME_SIDEBAR_MINI_HAD)
}
}
toggleMini(): void {
const bodyClass = document.body.classList
if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI_HAD)) {
bodyClass.remove(CLASS_NAME_SIDEBAR_MINI_HAD)
bodyClass.add(CLASS_NAME_SIDEBAR_MINI)
}
if (bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
this.expand()
} else {
this.collapse()
}
}
toggle(state: string): void {
if (state === 'full') {
this.toggleFull()
} else if (state === 'mini') {
this.toggleMini()
}
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/
domReady(() => {
const fullBtn = document.querySelectorAll(SELECTOR_FULL_TOGGLE)
const miniBtn = document.querySelectorAll(SELECTOR_MINI_TOGGLE)
for (const btn of fullBtn) {
btn.addEventListener('click', () => {
const data = new PushMenu()
data.toggle('full')
})
}
for (const btn of miniBtn) {
btn.addEventListener('click', () => {
const data = new PushMenu()
data.toggle('mini')
})
}
})
export default PushMenu
//

50
ts/sidebar-hover.ts Normal file
View File

@@ -0,0 +1,50 @@
/**
* --------------------------------------------
* AdminLTE treeview.ts
* License MIT
* --------------------------------------------
*/
import {
domReady
} from './util/index'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const CLASS_NAME_SIDEBAR_HOVER = 'sidebar-hover'
const SELECTOR_SIDEBAR = '.sidebar'
class SidebarHover {
onHover(): void {
const bodyClass = document.body.classList
bodyClass.add(CLASS_NAME_SIDEBAR_HOVER)
}
notHover(): void {
const bodyClass = document.body.classList
bodyClass.remove(CLASS_NAME_SIDEBAR_HOVER)
}
init(): void {
const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
selSidebar?.addEventListener('mouseover', () => {
this.onHover()
})
selSidebar?.addEventListener('mouseout', () => {
this.notHover()
})
}
}
domReady(() => {
const data = new SidebarHover()
data.init()
})
export default SidebarHover

67
ts/sidebar-overlay.ts Normal file
View File

@@ -0,0 +1,67 @@
/**
* --------------------------------------------
* AdminLTE treeview.ts
* License MIT
* --------------------------------------------
*/
import {
domReady
} from './util/index'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close'
const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
const CLASS_NAME_SIDEBAR_SM = 'sidebar-sm'
const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_SIDEBAR_SM}`
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
class SidebarOverlay {
addSidebaBreakPoint(): void {
const bodyClass = document.body.classList
const widthOutput: number = window.innerWidth
if (widthOutput > 576) {
bodyClass.remove(CLASS_NAME_SIDEBAR_SM)
} else {
bodyClass.add(CLASS_NAME_SIDEBAR_SM)
}
}
removeOverlaySidebar(): void {
const bodyClass = document.body.classList
if (bodyClass.contains(CLASS_NAME_SIDEBAR_SM)) {
bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
}
}
init(): void {
const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
selContentWrapper?.addEventListener('touchstart', this.removeOverlaySidebar)
selContentWrapper?.addEventListener('click', this.removeOverlaySidebar)
}
}
domReady(() => {
const data = new SidebarOverlay()
data.addSidebaBreakPoint()
data.init()
window.addEventListener('resize', () => {
data.addSidebaBreakPoint()
data.init()
})
})
export default SidebarOverlay

111
ts/treeview.ts Normal file
View File

@@ -0,0 +1,111 @@
/* eslint-disable no-console */
/**
* --------------------------------------------
* AdminLTE treeview.ts
* License MIT
* --------------------------------------------
*/
import {
domReady
} from './util/index'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const CLASS_NAME_MENU_OPEN = 'menu-open'
const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_DATA_TOGGLE = '[data-widget="treeview"]'
const Defaults = {
transitionDuration: 300
}
/**
* Class Definition
* ====================================================
*/
class Treeview {
open(navItem: Element | null, childNavItem: HTMLElement | null | undefined): void {
console.log('🚀 ~ file: treeview.ts ~ line 31 ~ Treeview ~ open ~ childNavItem', childNavItem)
navItem?.classList.add(CLASS_NAME_MENU_OPEN)
const height: number = childNavItem?.scrollHeight ?? 0
childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms`)
childNavItem?.style.setProperty('overflow', 'hidden')
childNavItem?.style.setProperty('display', 'block')
childNavItem?.style.setProperty('height', '0px')
setTimeout(() => {
childNavItem?.style.setProperty('height', `${height}px`)
}, 1)
setTimeout(() => {
childNavItem?.style.removeProperty('overflow')
childNavItem?.style.setProperty('height', 'auto')
}, Defaults.transitionDuration)
}
close(navItem: Element, childNavItem: HTMLElement | null | undefined): void {
navItem.classList.remove(CLASS_NAME_MENU_OPEN)
const height: number = childNavItem?.scrollHeight ?? 0
childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms`)
childNavItem?.style.setProperty('overflow', 'hidden')
childNavItem?.style.setProperty('height', `${height}px`)
setTimeout(() => {
childNavItem?.style.setProperty('height', '0px')
}, 1)
setTimeout(() => {
// childNavItem?.style.removeProperty('height')
childNavItem?.style.removeProperty('display')
childNavItem?.style.removeProperty('overflow')
}, Defaults.transitionDuration)
}
toggle(treeviewMenu: Element): void {
const navItem: HTMLElement | null = treeviewMenu.closest(SELECTOR_NAV_ITEM)
const childNavItem: HTMLElement | null | undefined = navItem?.querySelector('.nav-treeview')
if (navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
this.close(navItem, childNavItem)
} else {
this.open(navItem, childNavItem)
}
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/
const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
domReady(() => {
for (const btn of button) {
btn.addEventListener('click', event => {
event.preventDefault()
const treeviewMenu = event.target as Element
const data = new Treeview()
data.toggle(treeviewMenu)
})
}
})
export default Treeview
//

20
ts/util/index.ts Normal file
View File

@@ -0,0 +1,20 @@
const domReady = (callBack: () => void): void => {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', callBack)
} else {
callBack()
}
}
const windowReady = (callBack: () => void): void => {
if (document.readyState === 'complete') {
callBack()
} else {
window.addEventListener('load', callBack)
}
}
export {
domReady,
windowReady
}