|
|
@@ -23,13 +23,9 @@ const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
|
|
|
const EVENT_CLOSE = `close${EVENT_KEY}`
|
|
|
|
|
|
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_SIDEBAR_IS_HOVER = 'sidebar-is-hover'
|
|
|
const CLASS_NAME_MENU_OPEN = 'menu-open'
|
|
|
const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile'
|
|
|
@@ -40,11 +36,11 @@ const SELECTOR_NAV_ITEM = '.nav-item'
|
|
|
const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
|
|
|
const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]'
|
|
|
const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]'
|
|
|
-const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_LAYOUT_MOBILE}`
|
|
|
+const SELECTOR_LAYOUT_MOBILE = `.${CLASS_NAME_LAYOUT_MOBILE}`
|
|
|
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
|
|
|
|
|
|
const Defaults = {
|
|
|
- onLayouMobile: 992
|
|
|
+ onLayoutMobile: 992
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
@@ -65,20 +61,7 @@ class PushMenu {
|
|
|
this._config = config
|
|
|
}
|
|
|
|
|
|
- sidebarOpening(): void {
|
|
|
- this._bodyClass.add(CLASS_NAME_SIDEBAR_OPENING)
|
|
|
- setTimeout(() => {
|
|
|
- this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPENING)
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
-
|
|
|
- sidebarColllapsing(): void {
|
|
|
- this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSING)
|
|
|
- setTimeout(() => {
|
|
|
- this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSING)
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
-
|
|
|
+ // TODO
|
|
|
menusClose(): void {
|
|
|
const navTreeview = document.querySelectorAll<HTMLElement>(SELECTOR_NAV_TREEVIEW)
|
|
|
|
|
|
@@ -99,7 +82,6 @@ class PushMenu {
|
|
|
|
|
|
expand(): void {
|
|
|
const event = new Event(EVENT_OPEN)
|
|
|
- this.sidebarOpening()
|
|
|
|
|
|
this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
|
|
|
this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
|
|
|
@@ -111,22 +93,19 @@ class PushMenu {
|
|
|
collapse(): void {
|
|
|
const event = new Event(EVENT_COLLAPSE)
|
|
|
|
|
|
- this.sidebarColllapsing()
|
|
|
-
|
|
|
+ this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
|
|
|
+ this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
|
|
|
this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
|
|
|
+
|
|
|
this._element?.dispatchEvent(event)
|
|
|
}
|
|
|
|
|
|
close(): void {
|
|
|
const event = new Event(EVENT_CLOSE)
|
|
|
|
|
|
- this._bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
|
|
|
this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
|
|
|
this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
|
|
|
-
|
|
|
- if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
|
|
|
- this.menusClose()
|
|
|
- }
|
|
|
+ this._bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
|
|
|
|
|
|
this._element?.dispatchEvent(event)
|
|
|
}
|
|
|
@@ -145,19 +124,24 @@ class PushMenu {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- addSidebaBreakPoint(): void {
|
|
|
+ addSidebarBreakPoint(): void {
|
|
|
const bodyClass = document.body.classList
|
|
|
const widthOutput = window.innerWidth
|
|
|
|
|
|
- if (widthOutput < Defaults.onLayouMobile) {
|
|
|
+ if (widthOutput < Defaults.onLayoutMobile) {
|
|
|
bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
|
|
|
+ this.close()
|
|
|
}
|
|
|
|
|
|
- if (widthOutput >= Defaults.onLayouMobile) {
|
|
|
+ if (widthOutput >= Defaults.onLayoutMobile) {
|
|
|
bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
|
|
|
if (!bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
|
|
|
this.expand()
|
|
|
}
|
|
|
+
|
|
|
+ if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
|
|
|
+ this.collapse()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -170,32 +154,15 @@ class PushMenu {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- closeSidebar(): void {
|
|
|
- const widthOutput: number = window.innerWidth
|
|
|
- if (widthOutput < Defaults.onLayouMobile) {
|
|
|
- document.body.classList.add(CLASS_NAME_SIDEBAR_CLOSE)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
toggleFull(): void {
|
|
|
if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
|
|
|
this.expand()
|
|
|
} else {
|
|
|
this.close()
|
|
|
}
|
|
|
-
|
|
|
- if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
|
|
|
- this._bodyClass.remove(CLASS_NAME_SIDEBAR_MINI)
|
|
|
- this._bodyClass.add(CLASS_NAME_SIDEBAR_MINI_HAD)
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
toggleMini(): void {
|
|
|
- if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_MINI_HAD)) {
|
|
|
- this._bodyClass.remove(CLASS_NAME_SIDEBAR_MINI_HAD)
|
|
|
- this._bodyClass.add(CLASS_NAME_SIDEBAR_MINI)
|
|
|
- }
|
|
|
-
|
|
|
if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
|
|
|
this.expand()
|
|
|
} else {
|
|
|
@@ -204,18 +171,16 @@ class PushMenu {
|
|
|
}
|
|
|
|
|
|
init() {
|
|
|
- this.addSidebaBreakPoint()
|
|
|
+ this.addSidebarBreakPoint()
|
|
|
this.sidebarHover()
|
|
|
|
|
|
- const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
|
|
|
- const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
|
|
|
+ const targetLayoutMobile = document.querySelector(SELECTOR_LAYOUT_MOBILE)
|
|
|
+ const targetContentWrapper = targetLayoutMobile?.querySelector(SELECTOR_CONTENT_WRAPPER)
|
|
|
|
|
|
- if (selContentWrapper) {
|
|
|
- selContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
|
|
|
- selContentWrapper.addEventListener('click', this.removeOverlaySidebar)
|
|
|
+ if (targetContentWrapper) {
|
|
|
+ targetContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
|
|
|
+ targetContentWrapper.addEventListener('click', this.removeOverlaySidebar)
|
|
|
}
|
|
|
-
|
|
|
- this.closeSidebar()
|
|
|
}
|
|
|
}
|
|
|
|
Daniel