admin-lte 4.0.4 → 4.1.0

package/src/ts/fullscreen.ts

@@ -6,6 +6,7 @@
  * --------------------------------------------
  */
 
+import { BaseComponent, dispatchCustomEvent } from './base-component'
 import {
   getLifecycleSignal,
   onDOMContentLoaded
@@ -15,8 +16,8 @@ import {
  * Constants
  * ============================================================================
  */
-const DATA_KEY = 'lte.fullscreen'
-const EVENT_KEY = `.${DATA_KEY}`
+const NAME = 'fullscreen'
+const EVENT_KEY = `.lte.${NAME}`
 const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
 const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
 
@@ -48,7 +49,7 @@ function syncFullScreenState(): void {
   const eventName = isFullScreen ? EVENT_MAXIMIZED : EVENT_MINIMIZED
 
   document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE).forEach(button => {
-    button.dispatchEvent(new Event(eventName))
+    dispatchCustomEvent(button, eventName)
   })
 }
 
@@ -56,13 +57,17 @@ function syncFullScreenState(): void {
  * Class Definition.
  * ============================================================================
  */
-class FullScreen {
-  _element: HTMLElement
-  _config: undefined
+class FullScreen extends BaseComponent {
+  static get NAME(): string {
+    return NAME
+  }
+
+  static getInstance(element: Element | null | undefined): FullScreen | null {
+    return this._getInstance(element) as FullScreen | null
+  }
 
-  constructor(element: HTMLElement, config?: undefined) {
-    this._element = element
-    this._config = config
+  static getOrCreateInstance(element: HTMLElement): FullScreen {
+    return this.getInstance(element) ?? new this(element)
   }
 
   inFullScreen(): void {
@@ -96,25 +101,29 @@ class FullScreen {
 /**
  * Data Api implementation
  * ============================================================================
+ * Toggle clicks are delegated on `document`; the fullscreenchange listener is
+ * re-registered per page load with the lifecycle signal.
  */
-onDOMContentLoaded(() => {
-  document.addEventListener('fullscreenchange', syncFullScreenState, { signal: getLifecycleSignal() })
 
-  const buttons = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE)
+document.addEventListener('click', event => {
+  const target = event.target
 
-  buttons.forEach(btn => {
-    btn.addEventListener('click', event => {
-      event.preventDefault()
+  if (!(target instanceof Element)) {
+    return
+  }
 
-      const target = event.target as HTMLElement
-      const button = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | undefined
+  const button = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | null
 
-      if (button) {
-        const data = new FullScreen(button, undefined)
-        data.toggleFullScreen()
-      }
-    })
-  })
+  if (!button) {
+    return
+  }
+
+  event.preventDefault()
+  FullScreen.getOrCreateInstance(button).toggleFullScreen()
+})
+
+onDOMContentLoaded(() => {
+  document.addEventListener('fullscreenchange', syncFullScreenState, { signal: getLifecycleSignal() })
 })
 
 export default FullScreen

package/src/ts/push-menu.ts

@@ -6,6 +6,7 @@
  * ----------------------------------------------------------------------------
  */
 
+import { BaseComponent, dispatchCustomEvent } from './base-component'
 import {
   getLifecycleSignal,
   onDOMContentLoaded
@@ -17,11 +18,17 @@ import {
  * ----------------------------------------------------------------------------
  */
 
-const DATA_KEY = 'lte.push-menu'
-const EVENT_KEY = `.${DATA_KEY}`
+const NAME = 'push-menu'
+const EVENT_KEY = `.lte.${NAME}`
+
+// Cancelable "before" events: preventDefault() aborts the state change.
 const EVENT_OPEN = `open${EVENT_KEY}`
 const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
 
+// "After" events, dispatched once the classes have been applied.
+const EVENT_OPENED = `opened${EVENT_KEY}`
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+
 const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
 const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand'
 const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay'
@@ -68,12 +75,23 @@ const Defaults: Config = {
  * ----------------------------------------------------------------------------
  */
 
-class PushMenu {
-  _element: HTMLElement
+class PushMenu extends BaseComponent {
+  static get NAME(): string {
+    return NAME
+  }
+
+  static getInstance(element: Element | null | undefined): PushMenu | null {
+    return this._getInstance(element) as PushMenu | null
+  }
+
+  static getOrCreateInstance(element: HTMLElement, config: Partial<Config> = {}): PushMenu {
+    return this.getInstance(element) ?? new this(element, config)
+  }
+
   _config: Config
 
-  constructor(element: HTMLElement, config: Config) {
-    this._element = element
+  constructor(element: HTMLElement, config: Partial<Config> = {}) {
+    super(element)
     this._config = { ...Defaults, ...config }
   }
 
@@ -118,6 +136,12 @@ class PushMenu {
    * Expand the sidebar menu.
    */
   expand(): void {
+    // The "open" event is cancelable: preventDefault() keeps the sidebar
+    // in its current state.
+    if (dispatchCustomEvent(this._element, EVENT_OPEN, { cancelable: true }).defaultPrevented) {
+      return
+    }
+
     // Remove the sidebar-collapse class. Only on mobile, add the sidebar-open
     // class to indicate the sidebar is explicitly open.
 
@@ -127,24 +151,24 @@ class PushMenu {
       document.body.classList.add(CLASS_NAME_SIDEBAR_OPEN)
     }
 
-    // Dispatch the expand event.
-
-    this._element.dispatchEvent(new Event(EVENT_OPEN))
+    dispatchCustomEvent(this._element, EVENT_OPENED)
   }
 
   /**
    * Collapse the sidebar menu.
    */
   collapse(): void {
+    if (dispatchCustomEvent(this._element, EVENT_COLLAPSE, { cancelable: true }).defaultPrevented) {
+      return
+    }
+
     // Remove the sidebar-open class (if present), and add the sidebar-collapse
     // class.
 
     document.body.classList.remove(CLASS_NAME_SIDEBAR_OPEN)
     document.body.classList.add(CLASS_NAME_SIDEBAR_COLLAPSE)
 
-    // Dispatch the collapse event.
-
-    this._element.dispatchEvent(new Event(EVENT_COLLAPSE))
+    dispatchCustomEvent(this._element, EVENT_COLLAPSED)
   }
 
   /**
@@ -332,12 +356,40 @@ class PushMenu {
  * ----------------------------------------------------------------------------
  * Data Api implementation
  * ----------------------------------------------------------------------------
+ * Toggle clicks are handled by one delegated listener on `document`, so
+ * toggle buttons added later work and the listener survives Turbo's <body>
+ * swaps. The instance itself is created per page load below and can be
+ * retrieved anywhere with:
+ *
+ *   PushMenu.getInstance(document.querySelector('.app-sidebar'))
  */
 
+document.addEventListener('click', event => {
+  const target = event.target
+
+  if (!(target instanceof Element)) {
+    return
+  }
+
+  const button = target.closest(SELECTOR_SIDEBAR_TOGGLE)
+
+  if (!button) {
+    return
+  }
+
+  event.preventDefault()
+
+  const sidebar = document.querySelector(SELECTOR_APP_SIDEBAR) as HTMLElement | null
+
+  if (sidebar) {
+    PushMenu.getOrCreateInstance(sidebar).toggle()
+  }
+})
+
 onDOMContentLoaded(() => {
   // Find the sidebar element in the DOM.
 
-  const sidebar = document?.querySelector(SELECTOR_APP_SIDEBAR) as HTMLElement | undefined
+  const sidebar = document.querySelector(SELECTOR_APP_SIDEBAR) as HTMLElement | null
 
   if (!sidebar) {
     return
@@ -358,9 +410,11 @@ onDOMContentLoaded(() => {
       enablePersistenceAttr === 'true'
   }
 
-  // Initialize the PushMenu plugin (a unique instance).
+  // Initialize the PushMenu plugin (a unique instance per sidebar element;
+  // Turbo navigations swap in a fresh element, so a fresh instance is
+  // created and the old one is garbage-collected with the old <body>).
 
-  const pushMenu = new PushMenu(sidebar, config)
+  const pushMenu = PushMenu.getOrCreateInstance(sidebar, config)
   pushMenu.init()
 
   // Update the sidebar state only when the viewport crosses the sidebar
@@ -416,27 +470,6 @@ onDOMContentLoaded(() => {
     event.preventDefault()
     pushMenu.collapse()
   })
-
-  // Handle click events on sidebar toggle buttons.
-
-  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()
-        pushMenu.toggle()
-      }
-    })
-  })
 })
 
 export default PushMenu

package/src/ts/treeview.ts

@@ -6,6 +6,7 @@
  * --------------------------------------------
  */
 
+import { BaseComponent, dispatchCustomEvent } from './base-component'
 import {
   onDOMContentLoaded,
   slideDown,
@@ -18,10 +19,14 @@ import {
  * ------------------------------------------------------------------------
  */
 
-// const NAME = 'Treeview'
-const DATA_KEY = 'lte.treeview'
-const EVENT_KEY = `.${DATA_KEY}`
+const NAME = 'treeview'
+const EVENT_KEY = `.lte.${NAME}`
 
+// Cancelable "before" events (dispatched on the nav-item as an action starts)
+const EVENT_EXPAND = `expand${EVENT_KEY}`
+const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
+
+// "After" events (dispatched on the nav-item when the animation finished)
 const EVENT_EXPANDED = `expanded${EVENT_KEY}`
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
 const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
@@ -56,17 +61,30 @@ const setAriaExpanded = (navItem: Element, expanded: boolean): void => {
  * ====================================================
  */
 
-class Treeview {
-  _element: HTMLElement
+class Treeview extends BaseComponent {
+  static get NAME(): string {
+    return NAME
+  }
+
+  static getInstance(element: Element | null | undefined): Treeview | null {
+    return this._getInstance(element) as Treeview | null
+  }
+
+  static getOrCreateInstance(element: HTMLElement, config: Partial<Config> = {}): Treeview {
+    return this.getInstance(element) ?? new this(element, config)
+  }
+
   _config: Config
 
-  constructor(element: HTMLElement, config: Config) {
-    this._element = element
+  constructor(element: HTMLElement, config: Partial<Config> = {}) {
+    super(element)
     this._config = { ...Default, ...config }
   }
 
   open(): void {
-    const event = new Event(EVENT_EXPANDED)
+    if (dispatchCustomEvent(this._element, EVENT_EXPAND, { cancelable: true }).defaultPrevented) {
+      return
+    }
 
     if (this._config.accordion) {
       const openMenuList = this._element.parentElement?.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
@@ -90,26 +108,36 @@ class Treeview {
     this._element.classList.add(CLASS_NAME_MENU_OPEN)
     setAriaExpanded(this._element, true)
 
-    const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    const childElement = this._element.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
     if (childElement) {
       slideDown(childElement, this._config.animationSpeed)
     }
 
-    this._element.dispatchEvent(event)
+    setTimeout(() => {
+      if (this._element.classList.contains(CLASS_NAME_MENU_OPEN)) {
+        dispatchCustomEvent(this._element, EVENT_EXPANDED)
+      }
+    }, this._config.animationSpeed)
   }
 
   close(): void {
-    const event = new Event(EVENT_COLLAPSED)
+    if (dispatchCustomEvent(this._element, EVENT_COLLAPSE, { cancelable: true }).defaultPrevented) {
+      return
+    }
 
     this._element.classList.remove(CLASS_NAME_MENU_OPEN)
     setAriaExpanded(this._element, false)
 
-    const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    const childElement = this._element.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
     if (childElement) {
       slideUp(childElement, this._config.animationSpeed)
     }
 
-    this._element.dispatchEvent(event)
+    setTimeout(() => {
+      if (!this._element.classList.contains(CLASS_NAME_MENU_OPEN)) {
+        dispatchCustomEvent(this._element, EVENT_COLLAPSED)
+      }
+    }, this._config.animationSpeed)
   }
 
   toggle(): void {
@@ -125,8 +153,50 @@ class Treeview {
  * ------------------------------------------------------------------------
  * Data Api implementation
  * ------------------------------------------------------------------------
+ * Clicks are handled by one delegated listener on `document`, so nav items
+ * added after load (dynamic menus, Turbo Frames) work without
+ * re-initialisation. Initial state (pre-opened menus, ARIA stamping) is
+ * applied per page load below.
  */
 
+document.addEventListener('click', event => {
+  const target = event.target
+
+  if (!(target instanceof Element)) {
+    return
+  }
+
+  const toggleRoot = target.closest(SELECTOR_DATA_TOGGLE) as HTMLElement | null
+
+  if (!toggleRoot) {
+    return
+  }
+
+  const targetItem = target.closest(SELECTOR_NAV_ITEM) as HTMLElement | null
+  const targetLink = target.closest(SELECTOR_NAV_LINK)
+
+  // Avoid creating Treeview instances on non menu elements
+  if (!targetItem?.querySelector(SELECTOR_TREEVIEW_MENU)) {
+    return
+  }
+
+  if (target.getAttribute('href') === '#' || targetLink?.getAttribute('href') === '#') {
+    event.preventDefault()
+  }
+
+  // Read config from data attributes on the treeview root, falling back to
+  // Default. The config of the first interaction sticks to the instance.
+  const accordionAttr = toggleRoot.dataset.accordion
+  const animationSpeedAttr = toggleRoot.dataset.animationSpeed
+
+  const config: Config = {
+    accordion: accordionAttr === undefined ? Default.accordion : accordionAttr === 'true',
+    animationSpeed: animationSpeedAttr === undefined ? Default.animationSpeed : Number(animationSpeedAttr)
+  }
+
+  Treeview.getOrCreateInstance(targetItem, config).toggle()
+})
+
 onDOMContentLoaded(() => {
   const openMenuItems = document.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
 
@@ -149,42 +219,6 @@ onDOMContentLoaded(() => {
       }
     })
   })
-
-  const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
-
-  button.forEach(btn => {
-    btn.addEventListener('click', event => {
-      const target = event.target as HTMLElement
-      const targetItem = target.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
-      const targetLink = target.closest(SELECTOR_NAV_LINK) as HTMLAnchorElement | undefined
-      const targetTreeviewMenu = targetItem?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
-      const lteToggleElement = event.currentTarget as HTMLElement
-
-      // Avoid creating Treeview instances on non menu elements
-      if (!targetTreeviewMenu) {
-        return
-      }
-
-      if (target?.getAttribute('href') === '#' || targetLink?.getAttribute('href') === '#') {
-        event.preventDefault()
-      }
-
-      if (targetItem) {
-        // Read data attributes
-        const accordionAttr = lteToggleElement.dataset.accordion
-        const animationSpeedAttr = lteToggleElement.dataset.animationSpeed
-
-        // Build config from data attributes, fallback to Default
-        const config: Config = {
-          accordion: accordionAttr === undefined ? Default.accordion : accordionAttr === 'true',
-          animationSpeed: animationSpeedAttr === undefined ? Default.animationSpeed : Number(animationSpeedAttr)
-        }
-
-        const data = new Treeview(targetItem, config)
-        data.toggle()
-      }
-    })
-  })
 })
 
-export default Treeview
+export default Treeview

package/src/ts/util/index.ts

@@ -109,7 +109,7 @@ const safePropertyAccess = (obj: Record<string, unknown>, property: string): unk
  * the previous animation's steps: without this, rapidly toggling a treeview or
  * card leaves a stale cleanup timer that strips height/transition mid-animation
  * and desyncs the element's display state from its component's classes. */
-const slideTimers = new WeakMap<HTMLElement, number[]>()
+const slideTimers = new WeakMap<HTMLElement, Array<ReturnType<typeof globalThis.setTimeout>>>()
 
 const cancelSlide = (target: HTMLElement): void => {
   const timers = slideTimers.get(target) ?? []