From 9625827c3ae4fd78e0c30ff8f866ac679830592e Mon Sep 17 00:00:00 2001 From: Walter Burditt Date: Sat, 1 Apr 2023 14:58:32 -0700 Subject: [PATCH 1/2] 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. --- src/html/components/_scripts.astro | 19 ++++---- src/ts/push-menu.ts | 77 ++++++++++++++++-------------- 2 files changed, 52 insertions(+), 44 deletions(-) diff --git a/src/html/components/_scripts.astro b/src/html/components/_scripts.astro index aa5ddba6a4e..518b25dfb06 100644 --- a/src/html/components/_scripts.astro +++ b/src/html/components/_scripts.astro @@ -18,6 +18,7 @@ const distPath = (path != undefined) ? path : '../../../dist' diff --git a/src/ts/push-menu.ts b/src/ts/push-menu.ts index 712697e39ac..f0425a19eb8 100644 --- a/src/ts/push-menu.ts +++ b/src/ts/push-menu.ts @@ -29,6 +29,7 @@ const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand' const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay' const CLASS_NAME_MENU_OPEN = 'menu-open' +const SELECTOR_APP_SIDEBAR = '.app-sidebar' const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper' const SELECTOR_SIDEBAR_MENU = '.sidebar-menu' const SELECTOR_NAV_ITEM = '.nav-item' @@ -151,49 +152,53 @@ class PushMenu { */ domReady(() => { - const data = new PushMenu(document.body, Defaults) - data.init() + const sidebar = document.querySelector(SELECTOR_APP_SIDEBAR) - window.addEventListener('resize', () => { + if (sidebar) { + const data = new PushMenu(document.body, Defaults) data.init() - }) - - 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 => { + + window.addEventListener('resize', () => { + data.init() + }) + + 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() + }) - let button = event.currentTarget as HTMLElement | undefined + const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE) - if (button?.dataset.lteToggle !== 'sidebar') { - button = button?.closest(SELECTOR_SIDEBAR_TOGGLE) as HTMLElement | undefined - } + fullBtn.forEach(btn => { + btn.addEventListener('click', event => { + event.preventDefault() - if (button) { - event?.preventDefault() - const data = new PushMenu(button, Defaults) - data.toggle() - } + 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 From 5d2ebcec020f411382c55ad6e4212fda9647ecbd Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Sun, 2 Apr 2023 11:51:52 +0530 Subject: [PATCH 2/2] Add checks for if sidebar exists (refined) --- src/html/components/_scripts.astro | 23 +++++----- src/ts/push-menu.ts | 68 +++++++++++++++--------------- 2 files changed, 45 insertions(+), 46 deletions(-) diff --git a/src/html/components/_scripts.astro b/src/html/components/_scripts.astro index 518b25dfb06..2273f0b5a96 100644 --- a/src/html/components/_scripts.astro +++ b/src/html/components/_scripts.astro @@ -18,24 +18,23 @@ const distPath = (path != undefined) ? path : '../../../dist' diff --git a/src/ts/push-menu.ts b/src/ts/push-menu.ts index f0425a19eb8..e146285e660 100644 --- a/src/ts/push-menu.ts +++ b/src/ts/push-menu.ts @@ -152,53 +152,53 @@ class PushMenu { */ domReady(() => { - const sidebar = document.querySelector(SELECTOR_APP_SIDEBAR) + const sidebar = document?.querySelector(SELECTOR_APP_SIDEBAR) as HTMLElement | undefined if (sidebar) { - const data = new PushMenu(document.body, Defaults) + const data = new PushMenu(sidebar, Defaults) data.init() window.addEventListener('resize', () => { data.init() }) + } - 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 => { + 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() - 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 - let button = event.currentTarget as HTMLElement | undefined - - if (button?.dataset.lteToggle !== 'sidebar') { - button = button?.closest(SELECTOR_SIDEBAR_TOGGLE) 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() - } - }) + if (button) { + event?.preventDefault() + const data = new PushMenu(button, Defaults) + data.toggle() + } }) - } + }) }) export default PushMenu