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
Walter Burditt 2 years ago
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()
})
window.addEventListener('resize', () => {
const sidebarOverlay = document.createElement('div') data.init()
sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY })
document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
const sidebarOverlay = document.createElement('div')
sidebarOverlay.addEventListener('touchstart', event => { sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
event.preventDefault() document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
const target = event.currentTarget as HTMLElement
const data = new PushMenu(target, Defaults) sidebarOverlay.addEventListener('touchstart', event => {
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() 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()
})
let button = event.currentTarget as HTMLElement | undefined const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE)
if (button?.dataset.lteToggle !== 'sidebar') { fullBtn.forEach(btn => {
button = button?.closest(SELECTOR_SIDEBAR_TOGGLE) as HTMLElement | undefined btn.addEventListener('click', event => {
} event.preventDefault()
if (button) { let button = event.currentTarget as HTMLElement | undefined
event?.preventDefault()
const data = new PushMenu(button, Defaults) if (button?.dataset.lteToggle !== 'sidebar') {
data.toggle() 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…
Cancel
Save