mirror of https://github.com/ColorlibHQ/AdminLTE
Add checks for if sidebar exists
Added checks to some scripting to check if a sidebar exists before trying to load some code that affects the sidebar and throws console errors because there was no sidebar on the page.pull/5015/head
parent
ec3d689ea1
commit
9625827c3a
|
@ -18,6 +18,7 @@ const distPath = (path != undefined) ? path : '../../../dist'
|
||||||
|
|
||||||
<!-- OPTIONAL SCRIPTS -->
|
<!-- OPTIONAL SCRIPTS -->
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
|
const SELECTOR_APP_SIDEBAR = '.app-sidebar'
|
||||||
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
|
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
|
||||||
const Default = {
|
const Default = {
|
||||||
scrollbarTheme: 'os-theme-light',
|
scrollbarTheme: 'os-theme-light',
|
||||||
|
@ -25,14 +26,16 @@ const distPath = (path != undefined) ? path : '../../../dist'
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
|
if (document.querySelector(SELECTOR_APP_SIDEBAR)) {
|
||||||
OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR_WRAPPER), {
|
if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
|
||||||
scrollbars: {
|
OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR_WRAPPER), {
|
||||||
theme: Default.scrollbarTheme,
|
scrollbars: {
|
||||||
autoHide: Default.scrollbarAutoHide,
|
theme: Default.scrollbarTheme,
|
||||||
clickScroll: true
|
autoHide: Default.scrollbarAutoHide,
|
||||||
}
|
clickScroll: true
|
||||||
})
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -29,6 +29,7 @@ const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand'
|
||||||
const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay'
|
const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay'
|
||||||
const CLASS_NAME_MENU_OPEN = 'menu-open'
|
const CLASS_NAME_MENU_OPEN = 'menu-open'
|
||||||
|
|
||||||
|
const SELECTOR_APP_SIDEBAR = '.app-sidebar'
|
||||||
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
|
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
|
||||||
const SELECTOR_SIDEBAR_MENU = '.sidebar-menu'
|
const SELECTOR_SIDEBAR_MENU = '.sidebar-menu'
|
||||||
const SELECTOR_NAV_ITEM = '.nav-item'
|
const SELECTOR_NAV_ITEM = '.nav-item'
|
||||||
|
@ -151,49 +152,53 @@ class PushMenu {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
domReady(() => {
|
domReady(() => {
|
||||||
const data = new PushMenu(document.body, Defaults)
|
const sidebar = document.querySelector(SELECTOR_APP_SIDEBAR)
|
||||||
data.init()
|
|
||||||
|
|
||||||
window.addEventListener('resize', () => {
|
if (sidebar) {
|
||||||
|
const data = new PushMenu(document.body, Defaults)
|
||||||
data.init()
|
data.init()
|
||||||
})
|
|
||||||
|
|
||||||
const sidebarOverlay = document.createElement('div')
|
window.addEventListener('resize', () => {
|
||||||
sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
|
data.init()
|
||||||
document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
|
|
||||||
|
|
||||||
sidebarOverlay.addEventListener('touchstart', event => {
|
|
||||||
event.preventDefault()
|
|
||||||
const target = event.currentTarget as HTMLElement
|
|
||||||
const data = new PushMenu(target, Defaults)
|
|
||||||
data.collapse()
|
|
||||||
})
|
|
||||||
sidebarOverlay.addEventListener('click', event => {
|
|
||||||
event.preventDefault()
|
|
||||||
const target = event.currentTarget as HTMLElement
|
|
||||||
const data = new PushMenu(target, Defaults)
|
|
||||||
data.collapse()
|
|
||||||
})
|
|
||||||
|
|
||||||
const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE)
|
|
||||||
|
|
||||||
fullBtn.forEach(btn => {
|
|
||||||
btn.addEventListener('click', event => {
|
|
||||||
event.preventDefault()
|
|
||||||
|
|
||||||
let button = event.currentTarget as HTMLElement | undefined
|
|
||||||
|
|
||||||
if (button?.dataset.lteToggle !== 'sidebar') {
|
|
||||||
button = button?.closest(SELECTOR_SIDEBAR_TOGGLE) as HTMLElement | undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
if (button) {
|
|
||||||
event?.preventDefault()
|
|
||||||
const data = new PushMenu(button, Defaults)
|
|
||||||
data.toggle()
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
})
|
|
||||||
|
const sidebarOverlay = document.createElement('div')
|
||||||
|
sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
|
||||||
|
document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
|
||||||
|
|
||||||
|
sidebarOverlay.addEventListener('touchstart', event => {
|
||||||
|
event.preventDefault()
|
||||||
|
const target = event.currentTarget as HTMLElement
|
||||||
|
const data = new PushMenu(target, Defaults)
|
||||||
|
data.collapse()
|
||||||
|
})
|
||||||
|
sidebarOverlay.addEventListener('click', event => {
|
||||||
|
event.preventDefault()
|
||||||
|
const target = event.currentTarget as HTMLElement
|
||||||
|
const data = new PushMenu(target, Defaults)
|
||||||
|
data.collapse()
|
||||||
|
})
|
||||||
|
|
||||||
|
const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE)
|
||||||
|
|
||||||
|
fullBtn.forEach(btn => {
|
||||||
|
btn.addEventListener('click', event => {
|
||||||
|
event.preventDefault()
|
||||||
|
|
||||||
|
let button = event.currentTarget as HTMLElement | undefined
|
||||||
|
|
||||||
|
if (button?.dataset.lteToggle !== 'sidebar') {
|
||||||
|
button = button?.closest(SELECTOR_SIDEBAR_TOGGLE) as HTMLElement | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
if (button) {
|
||||||
|
event?.preventDefault()
|
||||||
|
const data = new PushMenu(button, Defaults)
|
||||||
|
data.toggle()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
export default PushMenu
|
export default PushMenu
|
||||||
|
|
Loading…
Reference in New Issue