|
|
@@ -1,6 +1,6 @@
|
|
|
/*!
|
|
|
- * AdminLTE v4.0.0-rc6 (https://adminlte.io)
|
|
|
- * Copyright 2014-2025 Colorlib <https://colorlib.com>
|
|
|
+ * AdminLTE v4.0.0-rc7 (https://adminlte.io)
|
|
|
+ * Copyright 2014-2026 Colorlib <https://colorlib.com>
|
|
|
* Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
|
|
|
*/
|
|
|
(function (global, factory) {
|
|
|
@@ -12,7 +12,6 @@
|
|
|
const domContentLoadedCallbacks = [];
|
|
|
const onDOMContentLoaded = (callback) => {
|
|
|
if (document.readyState === 'loading') {
|
|
|
- // add listener on the first call when the document is in loading state
|
|
|
if (!domContentLoadedCallbacks.length) {
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
for (const callback of domContentLoadedCallbacks) {
|
|
|
@@ -26,8 +25,11 @@
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
- /* SLIDE UP */
|
|
|
const slideUp = (target, duration = 500) => {
|
|
|
+ if (duration <= 1) {
|
|
|
+ target.style.display = 'none';
|
|
|
+ return;
|
|
|
+ }
|
|
|
target.style.transitionProperty = 'height, margin, padding';
|
|
|
target.style.transitionDuration = `${duration}ms`;
|
|
|
target.style.boxSizing = 'border-box';
|
|
|
@@ -52,7 +54,6 @@
|
|
|
target.style.removeProperty('transition-property');
|
|
|
}, duration);
|
|
|
};
|
|
|
- /* SLIDE DOWN */
|
|
|
const slideDown = (target, duration = 500) => {
|
|
|
target.style.removeProperty('display');
|
|
|
let { display } = globalThis.getComputedStyle(target);
|
|
|
@@ -60,6 +61,9 @@
|
|
|
display = 'block';
|
|
|
}
|
|
|
target.style.display = display;
|
|
|
+ if (duration <= 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
const height = target.offsetHeight;
|
|
|
target.style.overflow = 'hidden';
|
|
|
target.style.height = '0';
|
|
|
@@ -85,59 +89,33 @@
|
|
|
}, duration);
|
|
|
};
|
|
|
|
|
|
- /**
|
|
|
- * --------------------------------------------
|
|
|
- * @file AdminLTE layout.ts
|
|
|
- * @description Layout for AdminLTE.
|
|
|
- * @license MIT
|
|
|
- * --------------------------------------------
|
|
|
- */
|
|
|
- /**
|
|
|
- * ------------------------------------------------------------------------
|
|
|
- * Constants
|
|
|
- * ------------------------------------------------------------------------
|
|
|
- */
|
|
|
const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition';
|
|
|
const CLASS_NAME_APP_LOADED = 'app-loaded';
|
|
|
- /**
|
|
|
- * Class Definition
|
|
|
- * ====================================================
|
|
|
- */
|
|
|
class Layout {
|
|
|
_element;
|
|
|
+ _holdTransitionTimer;
|
|
|
constructor(element) {
|
|
|
this._element = element;
|
|
|
+ this._holdTransitionTimer = undefined;
|
|
|
}
|
|
|
- holdTransition() {
|
|
|
- let resizeTimer;
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- document.body.classList.add(CLASS_NAME_HOLD_TRANSITIONS);
|
|
|
- clearTimeout(resizeTimer);
|
|
|
- resizeTimer = setTimeout(() => {
|
|
|
- document.body.classList.remove(CLASS_NAME_HOLD_TRANSITIONS);
|
|
|
- }, 400);
|
|
|
- });
|
|
|
+ holdTransition(time = 100) {
|
|
|
+ if (this._holdTransitionTimer) {
|
|
|
+ clearTimeout(this._holdTransitionTimer);
|
|
|
+ }
|
|
|
+ document.body.classList.add(CLASS_NAME_HOLD_TRANSITIONS);
|
|
|
+ this._holdTransitionTimer = setTimeout(() => {
|
|
|
+ document.body.classList.remove(CLASS_NAME_HOLD_TRANSITIONS);
|
|
|
+ }, time);
|
|
|
}
|
|
|
}
|
|
|
onDOMContentLoaded(() => {
|
|
|
- const data = new Layout(document.body);
|
|
|
- data.holdTransition();
|
|
|
+ const layout = new Layout(document.body);
|
|
|
+ window.addEventListener('resize', () => layout.holdTransition(200));
|
|
|
setTimeout(() => {
|
|
|
document.body.classList.add(CLASS_NAME_APP_LOADED);
|
|
|
}, 400);
|
|
|
});
|
|
|
|
|
|
- /**
|
|
|
- * --------------------------------------------
|
|
|
- * @file AdminLTE card-widget.ts
|
|
|
- * @description Card widget for AdminLTE.
|
|
|
- * @license MIT
|
|
|
- * --------------------------------------------
|
|
|
- */
|
|
|
- /**
|
|
|
- * Constants
|
|
|
- * ====================================================
|
|
|
- */
|
|
|
const DATA_KEY$4 = 'lte.card-widget';
|
|
|
const EVENT_KEY$4 = `.${DATA_KEY$4}`;
|
|
|
const EVENT_COLLAPSED$2 = `collapsed${EVENT_KEY$4}`;
|
|
|
@@ -180,7 +158,6 @@
|
|
|
const event = new Event(EVENT_COLLAPSED$2);
|
|
|
if (this._parent) {
|
|
|
this._parent.classList.add(CLASS_NAME_COLLAPSING);
|
|
|
- // Only target direct children to avoid affecting nested cards
|
|
|
const elm = this._parent?.querySelectorAll(`:scope > ${SELECTOR_CARD_BODY}, :scope > ${SELECTOR_CARD_FOOTER}`);
|
|
|
elm.forEach(el => {
|
|
|
if (el instanceof HTMLElement) {
|
|
|
@@ -200,7 +177,6 @@
|
|
|
const event = new Event(EVENT_EXPANDED$2);
|
|
|
if (this._parent) {
|
|
|
this._parent.classList.add(CLASS_NAME_EXPANDING);
|
|
|
- // Only target direct children to avoid affecting nested cards
|
|
|
const elm = this._parent?.querySelectorAll(`:scope > ${SELECTOR_CARD_BODY}, :scope > ${SELECTOR_CARD_FOOTER}`);
|
|
|
elm.forEach(el => {
|
|
|
if (el instanceof HTMLElement) {
|
|
|
@@ -279,11 +255,6 @@
|
|
|
this.maximize();
|
|
|
}
|
|
|
}
|
|
|
- /**
|
|
|
- *
|
|
|
- * Data Api implementation
|
|
|
- * ====================================================
|
|
|
- */
|
|
|
onDOMContentLoaded(() => {
|
|
|
const collapseBtn = document.querySelectorAll(SELECTOR_DATA_COLLAPSE);
|
|
|
collapseBtn.forEach(btn => {
|
|
|
@@ -314,26 +285,13 @@
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- /**
|
|
|
- * --------------------------------------------
|
|
|
- * @file AdminLTE treeview.ts
|
|
|
- * @description Treeview plugin for AdminLTE.
|
|
|
- * @license MIT
|
|
|
- * --------------------------------------------
|
|
|
- */
|
|
|
- /**
|
|
|
- * ------------------------------------------------------------------------
|
|
|
- * Constants
|
|
|
- * ------------------------------------------------------------------------
|
|
|
- */
|
|
|
- // const NAME = 'Treeview'
|
|
|
const DATA_KEY$3 = 'lte.treeview';
|
|
|
const EVENT_KEY$3 = `.${DATA_KEY$3}`;
|
|
|
const EVENT_EXPANDED$1 = `expanded${EVENT_KEY$3}`;
|
|
|
const EVENT_COLLAPSED$1 = `collapsed${EVENT_KEY$3}`;
|
|
|
const EVENT_LOAD_DATA_API = `load${EVENT_KEY$3}`;
|
|
|
- const CLASS_NAME_MENU_OPEN$1 = 'menu-open';
|
|
|
- const SELECTOR_NAV_ITEM$1 = '.nav-item';
|
|
|
+ const CLASS_NAME_MENU_OPEN = 'menu-open';
|
|
|
+ const SELECTOR_NAV_ITEM = '.nav-item';
|
|
|
const SELECTOR_NAV_LINK = '.nav-link';
|
|
|
const SELECTOR_TREEVIEW_MENU = '.nav-treeview';
|
|
|
const SELECTOR_DATA_TOGGLE$1 = '[data-lte-toggle="treeview"]';
|
|
|
@@ -341,10 +299,6 @@
|
|
|
animationSpeed: 300,
|
|
|
accordion: true
|
|
|
};
|
|
|
- /**
|
|
|
- * Class Definition
|
|
|
- * ====================================================
|
|
|
- */
|
|
|
class Treeview {
|
|
|
_element;
|
|
|
_config;
|
|
|
@@ -355,10 +309,10 @@
|
|
|
open() {
|
|
|
const event = new Event(EVENT_EXPANDED$1);
|
|
|
if (this._config.accordion) {
|
|
|
- const openMenuList = this._element.parentElement?.querySelectorAll(`${SELECTOR_NAV_ITEM$1}.${CLASS_NAME_MENU_OPEN$1}`);
|
|
|
+ const openMenuList = this._element.parentElement?.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`);
|
|
|
openMenuList?.forEach(openMenu => {
|
|
|
if (openMenu !== this._element.parentElement) {
|
|
|
- openMenu.classList.remove(CLASS_NAME_MENU_OPEN$1);
|
|
|
+ openMenu.classList.remove(CLASS_NAME_MENU_OPEN);
|
|
|
const childElement = openMenu?.querySelector(SELECTOR_TREEVIEW_MENU);
|
|
|
if (childElement) {
|
|
|
slideUp(childElement, this._config.animationSpeed);
|
|
|
@@ -366,7 +320,7 @@
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
- this._element.classList.add(CLASS_NAME_MENU_OPEN$1);
|
|
|
+ this._element.classList.add(CLASS_NAME_MENU_OPEN);
|
|
|
const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU);
|
|
|
if (childElement) {
|
|
|
slideDown(childElement, this._config.animationSpeed);
|
|
|
@@ -375,7 +329,7 @@
|
|
|
}
|
|
|
close() {
|
|
|
const event = new Event(EVENT_COLLAPSED$1);
|
|
|
- this._element.classList.remove(CLASS_NAME_MENU_OPEN$1);
|
|
|
+ this._element.classList.remove(CLASS_NAME_MENU_OPEN);
|
|
|
const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU);
|
|
|
if (childElement) {
|
|
|
slideUp(childElement, this._config.animationSpeed);
|
|
|
@@ -383,7 +337,7 @@
|
|
|
this._element.dispatchEvent(event);
|
|
|
}
|
|
|
toggle() {
|
|
|
- if (this._element.classList.contains(CLASS_NAME_MENU_OPEN$1)) {
|
|
|
+ if (this._element.classList.contains(CLASS_NAME_MENU_OPEN)) {
|
|
|
this.close();
|
|
|
}
|
|
|
else {
|
|
|
@@ -391,13 +345,8 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- /**
|
|
|
- * ------------------------------------------------------------------------
|
|
|
- * Data Api implementation
|
|
|
- * ------------------------------------------------------------------------
|
|
|
- */
|
|
|
onDOMContentLoaded(() => {
|
|
|
- const openMenuItems = document.querySelectorAll(`${SELECTOR_NAV_ITEM$1}.${CLASS_NAME_MENU_OPEN$1}`);
|
|
|
+ const openMenuItems = document.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`);
|
|
|
openMenuItems.forEach(menuItem => {
|
|
|
const childElement = menuItem.querySelector(SELECTOR_TREEVIEW_MENU);
|
|
|
if (childElement) {
|
|
|
@@ -410,11 +359,10 @@
|
|
|
button.forEach(btn => {
|
|
|
btn.addEventListener('click', event => {
|
|
|
const target = event.target;
|
|
|
- const targetItem = target.closest(SELECTOR_NAV_ITEM$1);
|
|
|
+ const targetItem = target.closest(SELECTOR_NAV_ITEM);
|
|
|
const targetLink = target.closest(SELECTOR_NAV_LINK);
|
|
|
const targetTreeviewMenu = targetItem?.querySelector(SELECTOR_TREEVIEW_MENU);
|
|
|
const lteToggleElement = event.currentTarget;
|
|
|
- // Avoid creating Treeview instances on non menu elements
|
|
|
if (!targetTreeviewMenu) {
|
|
|
return;
|
|
|
}
|
|
|
@@ -422,10 +370,8 @@
|
|
|
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 = {
|
|
|
accordion: accordionAttr === undefined ? Default.accordion : accordionAttr === 'true',
|
|
|
animationSpeed: animationSpeedAttr === undefined ? Default.animationSpeed : Number(animationSpeedAttr)
|
|
|
@@ -437,17 +383,6 @@
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- /**
|
|
|
- * --------------------------------------------
|
|
|
- * @file AdminLTE direct-chat.ts
|
|
|
- * @description Direct chat for AdminLTE.
|
|
|
- * @license MIT
|
|
|
- * --------------------------------------------
|
|
|
- */
|
|
|
- /**
|
|
|
- * Constants
|
|
|
- * ====================================================
|
|
|
- */
|
|
|
const DATA_KEY$2 = 'lte.direct-chat';
|
|
|
const EVENT_KEY$2 = `.${DATA_KEY$2}`;
|
|
|
const EVENT_EXPANDED = `expanded${EVENT_KEY$2}`;
|
|
|
@@ -455,10 +390,6 @@
|
|
|
const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="chat-pane"]';
|
|
|
const SELECTOR_DIRECT_CHAT = '.direct-chat';
|
|
|
const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open';
|
|
|
- /**
|
|
|
- * Class Definition
|
|
|
- * ====================================================
|
|
|
- */
|
|
|
class DirectChat {
|
|
|
_element;
|
|
|
constructor(element) {
|
|
|
@@ -477,11 +408,6 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- /**
|
|
|
- *
|
|
|
- * Data Api implementation
|
|
|
- * ====================================================
|
|
|
- */
|
|
|
onDOMContentLoaded(() => {
|
|
|
const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE);
|
|
|
button.forEach(btn => {
|
|
|
@@ -497,17 +423,6 @@
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- /**
|
|
|
- * --------------------------------------------
|
|
|
- * @file AdminLTE fullscreen.ts
|
|
|
- * @description Fullscreen plugin for AdminLTE.
|
|
|
- * @license MIT
|
|
|
- * --------------------------------------------
|
|
|
- */
|
|
|
- /**
|
|
|
- * Constants
|
|
|
- * ============================================================================
|
|
|
- */
|
|
|
const DATA_KEY$1 = 'lte.fullscreen';
|
|
|
const EVENT_KEY$1 = `.${DATA_KEY$1}`;
|
|
|
const EVENT_MAXIMIZED = `maximized${EVENT_KEY$1}`;
|
|
|
@@ -515,10 +430,6 @@
|
|
|
const SELECTOR_FULLSCREEN_TOGGLE = '[data-lte-toggle="fullscreen"]';
|
|
|
const SELECTOR_MAXIMIZE_ICON = '[data-lte-icon="maximize"]';
|
|
|
const SELECTOR_MINIMIZE_ICON = '[data-lte-icon="minimize"]';
|
|
|
- /**
|
|
|
- * Class Definition.
|
|
|
- * ============================================================================
|
|
|
- */
|
|
|
class FullScreen {
|
|
|
_element;
|
|
|
_config;
|
|
|
@@ -563,10 +474,6 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- /**
|
|
|
- * Data Api implementation
|
|
|
- * ============================================================================
|
|
|
- */
|
|
|
onDOMContentLoaded(() => {
|
|
|
const buttons = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE);
|
|
|
buttons.forEach(btn => {
|
|
|
@@ -582,44 +489,24 @@
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- /**
|
|
|
- * --------------------------------------------
|
|
|
- * @file AdminLTE push-menu.ts
|
|
|
- * @description Push menu for AdminLTE.
|
|
|
- * @license MIT
|
|
|
- * --------------------------------------------
|
|
|
- */
|
|
|
- /**
|
|
|
- * ------------------------------------------------------------------------
|
|
|
- * Constants
|
|
|
- * ------------------------------------------------------------------------
|
|
|
- */
|
|
|
const DATA_KEY = 'lte.push-menu';
|
|
|
const EVENT_KEY = `.${DATA_KEY}`;
|
|
|
const EVENT_OPEN = `open${EVENT_KEY}`;
|
|
|
const EVENT_COLLAPSE = `collapse${EVENT_KEY}`;
|
|
|
const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini';
|
|
|
- const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse';
|
|
|
- const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open';
|
|
|
const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand';
|
|
|
const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay';
|
|
|
- const CLASS_NAME_MENU_OPEN = 'menu-open';
|
|
|
+ const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse';
|
|
|
+ const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open';
|
|
|
const SELECTOR_APP_SIDEBAR = '.app-sidebar';
|
|
|
- const SELECTOR_SIDEBAR_MENU = '.sidebar-menu';
|
|
|
- const SELECTOR_NAV_ITEM = '.nav-item';
|
|
|
- const SELECTOR_NAV_TREEVIEW = '.nav-treeview';
|
|
|
const SELECTOR_APP_WRAPPER = '.app-wrapper';
|
|
|
const SELECTOR_SIDEBAR_EXPAND = `[class*="${CLASS_NAME_SIDEBAR_EXPAND}"]`;
|
|
|
const SELECTOR_SIDEBAR_TOGGLE = '[data-lte-toggle="sidebar"]';
|
|
|
const STORAGE_KEY_SIDEBAR_STATE = 'lte.sidebar.state';
|
|
|
const Defaults = {
|
|
|
sidebarBreakpoint: 992,
|
|
|
- enablePersistence: true
|
|
|
+ enablePersistence: false
|
|
|
};
|
|
|
- /**
|
|
|
- * Class Definition
|
|
|
- * ====================================================
|
|
|
- */
|
|
|
class PushMenu {
|
|
|
_element;
|
|
|
_config;
|
|
|
@@ -627,100 +514,82 @@
|
|
|
this._element = element;
|
|
|
this._config = { ...Defaults, ...config };
|
|
|
}
|
|
|
- menusClose() {
|
|
|
- const navTreeview = document.querySelectorAll(SELECTOR_NAV_TREEVIEW);
|
|
|
- navTreeview.forEach(navTree => {
|
|
|
- navTree.style.removeProperty('display');
|
|
|
- navTree.style.removeProperty('height');
|
|
|
- });
|
|
|
- const navSidebar = document.querySelector(SELECTOR_SIDEBAR_MENU);
|
|
|
- const navItem = navSidebar?.querySelectorAll(SELECTOR_NAV_ITEM);
|
|
|
- if (navItem) {
|
|
|
- navItem.forEach(navI => {
|
|
|
- navI.classList.remove(CLASS_NAME_MENU_OPEN);
|
|
|
- });
|
|
|
- }
|
|
|
+ isCollapsed() {
|
|
|
+ return document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE);
|
|
|
+ }
|
|
|
+ isExplicitlyOpen() {
|
|
|
+ return document.body.classList.contains(CLASS_NAME_SIDEBAR_OPEN);
|
|
|
+ }
|
|
|
+ isMiniMode() {
|
|
|
+ return document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI);
|
|
|
+ }
|
|
|
+ isMobileSize() {
|
|
|
+ return globalThis.innerWidth <= this._config.sidebarBreakpoint;
|
|
|
}
|
|
|
expand() {
|
|
|
- const event = new Event(EVENT_OPEN);
|
|
|
document.body.classList.remove(CLASS_NAME_SIDEBAR_COLLAPSE);
|
|
|
- document.body.classList.add(CLASS_NAME_SIDEBAR_OPEN);
|
|
|
- this._element.dispatchEvent(event);
|
|
|
+ if (this.isMobileSize()) {
|
|
|
+ document.body.classList.add(CLASS_NAME_SIDEBAR_OPEN);
|
|
|
+ }
|
|
|
+ this._element.dispatchEvent(new Event(EVENT_OPEN));
|
|
|
}
|
|
|
collapse() {
|
|
|
- const event = new Event(EVENT_COLLAPSE);
|
|
|
document.body.classList.remove(CLASS_NAME_SIDEBAR_OPEN);
|
|
|
document.body.classList.add(CLASS_NAME_SIDEBAR_COLLAPSE);
|
|
|
- this._element.dispatchEvent(event);
|
|
|
- }
|
|
|
- addSidebarBreakPoint() {
|
|
|
- const sidebarExpandList = document.querySelector(SELECTOR_SIDEBAR_EXPAND)?.classList ?? [];
|
|
|
- const sidebarExpand = Array.from(sidebarExpandList).find(className => className.startsWith(CLASS_NAME_SIDEBAR_EXPAND)) ?? '';
|
|
|
- const sidebar = document.getElementsByClassName(sidebarExpand)[0];
|
|
|
- const sidebarContent = globalThis.getComputedStyle(sidebar, '::before').getPropertyValue('content');
|
|
|
- this._config = { ...this._config, sidebarBreakpoint: Number(sidebarContent.replace(/[^\d.-]/g, '')) };
|
|
|
- // FIXED: Don't auto-collapse on mobile if sidebar is currently open
|
|
|
- // This prevents resize events (triggered by scrolling) from closing the sidebar
|
|
|
- const isCurrentlyOpen = document.body.classList.contains(CLASS_NAME_SIDEBAR_OPEN);
|
|
|
- if (window.innerWidth <= this._config.sidebarBreakpoint) {
|
|
|
- // Only collapse if not currently open (prevents scroll-triggered closes)
|
|
|
- if (!isCurrentlyOpen) {
|
|
|
- this.collapse();
|
|
|
- }
|
|
|
- }
|
|
|
- else {
|
|
|
- if (!document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
|
|
|
- this.expand();
|
|
|
- }
|
|
|
- if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI) && document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
|
|
|
- this.collapse();
|
|
|
- }
|
|
|
- }
|
|
|
+ this._element.dispatchEvent(new Event(EVENT_COLLAPSE));
|
|
|
}
|
|
|
toggle() {
|
|
|
- if (document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
|
|
|
+ const isCollapsed = this.isCollapsed();
|
|
|
+ if (isCollapsed) {
|
|
|
this.expand();
|
|
|
}
|
|
|
else {
|
|
|
this.collapse();
|
|
|
}
|
|
|
- this.saveSidebarState();
|
|
|
+ if (this._config.enablePersistence) {
|
|
|
+ this.saveSidebarState(isCollapsed ? CLASS_NAME_SIDEBAR_OPEN : CLASS_NAME_SIDEBAR_COLLAPSE);
|
|
|
+ }
|
|
|
}
|
|
|
- /**
|
|
|
- * Save sidebar state to localStorage
|
|
|
- */
|
|
|
- saveSidebarState() {
|
|
|
- if (!this._config.enablePersistence) {
|
|
|
+ setupSidebarBreakPoint() {
|
|
|
+ const sidebarExpand = document.querySelector(SELECTOR_SIDEBAR_EXPAND);
|
|
|
+ if (!sidebarExpand) {
|
|
|
return;
|
|
|
}
|
|
|
- // Check for SSR environment
|
|
|
- if (globalThis.window === undefined || globalThis.localStorage === undefined) {
|
|
|
+ const content = globalThis.getComputedStyle(sidebarExpand, '::before')
|
|
|
+ .getPropertyValue('content');
|
|
|
+ if (!content || content === 'none') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const breakpointValue = Number(content.replace(/[^\d.-]/g, ''));
|
|
|
+ if (Number.isNaN(breakpointValue)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this._config = { ...this._config, sidebarBreakpoint: breakpointValue };
|
|
|
+ }
|
|
|
+ updateStateByResponsiveLogic() {
|
|
|
+ if (this.isMobileSize()) {
|
|
|
+ if (!this.isExplicitlyOpen()) {
|
|
|
+ this.collapse();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (!(this.isMiniMode() && this.isCollapsed())) {
|
|
|
+ this.expand();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ saveSidebarState(state) {
|
|
|
+ if (globalThis.localStorage === undefined) {
|
|
|
return;
|
|
|
}
|
|
|
try {
|
|
|
- const state = document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE) ?
|
|
|
- CLASS_NAME_SIDEBAR_COLLAPSE :
|
|
|
- CLASS_NAME_SIDEBAR_OPEN;
|
|
|
localStorage.setItem(STORAGE_KEY_SIDEBAR_STATE, state);
|
|
|
}
|
|
|
catch {
|
|
|
- // localStorage may be unavailable (private browsing, quota exceeded, etc.)
|
|
|
}
|
|
|
}
|
|
|
- /**
|
|
|
- * Load sidebar state from localStorage
|
|
|
- * Only applies on desktop; mobile always starts collapsed
|
|
|
- */
|
|
|
loadSidebarState() {
|
|
|
- if (!this._config.enablePersistence) {
|
|
|
- return;
|
|
|
- }
|
|
|
- // Check for SSR environment
|
|
|
- if (globalThis.window === undefined || globalThis.localStorage === undefined) {
|
|
|
- return;
|
|
|
- }
|
|
|
- // Don't restore state on mobile - let responsive behavior handle it
|
|
|
- if (globalThis.innerWidth <= this._config.sidebarBreakpoint) {
|
|
|
+ if (globalThis.localStorage === undefined) {
|
|
|
return;
|
|
|
}
|
|
|
try {
|
|
|
@@ -731,36 +600,62 @@
|
|
|
else if (storedState === CLASS_NAME_SIDEBAR_OPEN) {
|
|
|
this.expand();
|
|
|
}
|
|
|
- // If null (never saved), let default behavior apply
|
|
|
+ else {
|
|
|
+ this.updateStateByResponsiveLogic();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ catch {
|
|
|
+ this.updateStateByResponsiveLogic();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ clearSidebarState() {
|
|
|
+ if (globalThis.localStorage === undefined) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ localStorage.removeItem(STORAGE_KEY_SIDEBAR_STATE);
|
|
|
}
|
|
|
catch {
|
|
|
- // localStorage may be unavailable
|
|
|
}
|
|
|
}
|
|
|
init() {
|
|
|
- this.addSidebarBreakPoint();
|
|
|
- this.loadSidebarState();
|
|
|
+ this.setupSidebarBreakPoint();
|
|
|
+ if (!this._config.enablePersistence) {
|
|
|
+ this.clearSidebarState();
|
|
|
+ }
|
|
|
+ if (this._config.enablePersistence && !this.isMobileSize()) {
|
|
|
+ this.loadSidebarState();
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.updateStateByResponsiveLogic();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- /**
|
|
|
- * ------------------------------------------------------------------------
|
|
|
- * Data Api implementation
|
|
|
- * ------------------------------------------------------------------------
|
|
|
- */
|
|
|
onDOMContentLoaded(() => {
|
|
|
const sidebar = document?.querySelector(SELECTOR_APP_SIDEBAR);
|
|
|
- if (sidebar) {
|
|
|
- const data = new PushMenu(sidebar, Defaults);
|
|
|
- data.init();
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- data.init();
|
|
|
- });
|
|
|
+ if (!sidebar) {
|
|
|
+ return;
|
|
|
}
|
|
|
+ const sidebarBreakpointAttr = sidebar.dataset.sidebarBreakpoint;
|
|
|
+ const enablePersistenceAttr = sidebar.dataset.enablePersistence;
|
|
|
+ const config = {
|
|
|
+ sidebarBreakpoint: sidebarBreakpointAttr === undefined ?
|
|
|
+ Defaults.sidebarBreakpoint :
|
|
|
+ Number(sidebarBreakpointAttr),
|
|
|
+ enablePersistence: enablePersistenceAttr === undefined ?
|
|
|
+ Defaults.enablePersistence :
|
|
|
+ enablePersistenceAttr === 'true'
|
|
|
+ };
|
|
|
+ const pushMenu = new PushMenu(sidebar, config);
|
|
|
+ pushMenu.init();
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ pushMenu.setupSidebarBreakPoint();
|
|
|
+ pushMenu.updateStateByResponsiveLogic();
|
|
|
+ });
|
|
|
const sidebarOverlay = document.createElement('div');
|
|
|
sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY;
|
|
|
document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay);
|
|
|
let overlayTouchMoved = false;
|
|
|
- // Handle touch events on overlay (area outside sidebar)
|
|
|
sidebarOverlay.addEventListener('touchstart', () => {
|
|
|
overlayTouchMoved = false;
|
|
|
}, { passive: true });
|
|
|
@@ -770,17 +665,13 @@
|
|
|
sidebarOverlay.addEventListener('touchend', event => {
|
|
|
if (!overlayTouchMoved) {
|
|
|
event.preventDefault();
|
|
|
- const target = event.currentTarget;
|
|
|
- const data = new PushMenu(target, Defaults);
|
|
|
- data.collapse();
|
|
|
+ pushMenu.collapse();
|
|
|
}
|
|
|
overlayTouchMoved = false;
|
|
|
}, { passive: false });
|
|
|
sidebarOverlay.addEventListener('click', event => {
|
|
|
event.preventDefault();
|
|
|
- const target = event.currentTarget;
|
|
|
- const data = new PushMenu(target, Defaults);
|
|
|
- data.collapse();
|
|
|
+ pushMenu.collapse();
|
|
|
});
|
|
|
const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE);
|
|
|
fullBtn.forEach(btn => {
|
|
|
@@ -792,17 +683,12 @@
|
|
|
}
|
|
|
if (button) {
|
|
|
event?.preventDefault();
|
|
|
- const data = new PushMenu(button, Defaults);
|
|
|
- data.toggle();
|
|
|
+ pushMenu.toggle();
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- /**
|
|
|
- * AdminLTE Accessibility Module
|
|
|
- * WCAG 2.1 AA Compliance Features
|
|
|
- */
|
|
|
class AccessibilityManager {
|
|
|
config;
|
|
|
liveRegion = null;
|
|
|
@@ -838,7 +724,6 @@
|
|
|
this.initTableAccessibility();
|
|
|
this.initFormAccessibility();
|
|
|
}
|
|
|
- // WCAG 4.1.3: Status Messages
|
|
|
createLiveRegion() {
|
|
|
if (this.liveRegion)
|
|
|
return;
|
|
|
@@ -850,7 +735,6 @@
|
|
|
this.liveRegion.setAttribute('role', 'status');
|
|
|
document.body.append(this.liveRegion);
|
|
|
}
|
|
|
- // WCAG 2.4.1: Bypass Blocks
|
|
|
addSkipLinks() {
|
|
|
const skipLinksContainer = document.createElement('div');
|
|
|
skipLinksContainer.className = 'skip-links';
|
|
|
@@ -865,7 +749,6 @@
|
|
|
skipLinksContainer.append(skipToMain);
|
|
|
skipLinksContainer.append(skipToNav);
|
|
|
document.body.insertBefore(skipLinksContainer, document.body.firstChild);
|
|
|
- // Ensure targets exist and are focusable
|
|
|
this.ensureSkipTargets();
|
|
|
}
|
|
|
ensureSkipTargets() {
|
|
|
@@ -884,7 +767,6 @@
|
|
|
nav.setAttribute('tabindex', '-1');
|
|
|
}
|
|
|
}
|
|
|
- // WCAG 2.4.3: Focus Order & 2.4.7: Focus Visible
|
|
|
initFocusManagement() {
|
|
|
document.addEventListener('keydown', (event) => {
|
|
|
if (event.key === 'Tab') {
|
|
|
@@ -894,7 +776,6 @@
|
|
|
this.handleEscapeKey(event);
|
|
|
}
|
|
|
});
|
|
|
- // Focus management for modals and dropdowns
|
|
|
this.initModalFocusManagement();
|
|
|
this.initDropdownFocusManagement();
|
|
|
}
|
|
|
@@ -902,14 +783,12 @@
|
|
|
const focusableElements = this.getFocusableElements();
|
|
|
const currentIndex = focusableElements.indexOf(document.activeElement);
|
|
|
if (event.shiftKey) {
|
|
|
- // Shift+Tab (backward)
|
|
|
if (currentIndex <= 0) {
|
|
|
event.preventDefault();
|
|
|
focusableElements.at(-1)?.focus();
|
|
|
}
|
|
|
}
|
|
|
else if (currentIndex >= focusableElements.length - 1) {
|
|
|
- // Tab (forward)
|
|
|
event.preventDefault();
|
|
|
focusableElements[0]?.focus();
|
|
|
}
|
|
|
@@ -927,30 +806,23 @@
|
|
|
return Array.from(document.querySelectorAll(selector));
|
|
|
}
|
|
|
handleEscapeKey(event) {
|
|
|
- // Close modals, dropdowns, etc.
|
|
|
const activeModal = document.querySelector('.modal.show');
|
|
|
- const activeDropdown = document.querySelector('.dropdown-menu.show');
|
|
|
if (activeModal) {
|
|
|
- const closeButton = activeModal.querySelector('[data-bs-dismiss="modal"]');
|
|
|
- closeButton?.click();
|
|
|
- event.preventDefault();
|
|
|
+ return;
|
|
|
}
|
|
|
- else if (activeDropdown) {
|
|
|
+ const activeDropdown = document.querySelector('.dropdown-menu.show');
|
|
|
+ if (activeDropdown) {
|
|
|
const toggleButton = document.querySelector('[data-bs-toggle="dropdown"][aria-expanded="true"]');
|
|
|
toggleButton?.click();
|
|
|
event.preventDefault();
|
|
|
}
|
|
|
}
|
|
|
- // WCAG 2.1.1: Keyboard Access
|
|
|
initKeyboardNavigation() {
|
|
|
- // Add keyboard support for custom components
|
|
|
document.addEventListener('keydown', (event) => {
|
|
|
const target = event.target;
|
|
|
- // Handle arrow key navigation for menus
|
|
|
if (target.closest('.nav, .navbar-nav, .dropdown-menu')) {
|
|
|
this.handleMenuNavigation(event);
|
|
|
}
|
|
|
- // Handle Enter and Space for custom buttons
|
|
|
if ((event.key === 'Enter' || event.key === ' ') && target.hasAttribute('role') && target.getAttribute('role') === 'button' && !target.matches('button, input[type="button"], input[type="submit"]')) {
|
|
|
event.preventDefault();
|
|
|
target.click();
|
|
|
@@ -991,14 +863,11 @@
|
|
|
event.preventDefault();
|
|
|
menuItems[nextIndex]?.focus();
|
|
|
}
|
|
|
- // WCAG 2.3.3: Animation from Interactions
|
|
|
respectReducedMotion() {
|
|
|
const prefersReducedMotion = globalThis.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
|
if (prefersReducedMotion) {
|
|
|
document.body.classList.add('reduce-motion');
|
|
|
- // Disable smooth scrolling
|
|
|
document.documentElement.style.scrollBehavior = 'auto';
|
|
|
- // Reduce animation duration
|
|
|
const style = document.createElement('style');
|
|
|
style.textContent = `
|
|
|
*, *::before, *::after {
|
|
|
@@ -1010,18 +879,15 @@
|
|
|
document.head.append(style);
|
|
|
}
|
|
|
}
|
|
|
- // WCAG 3.3.1: Error Identification
|
|
|
initErrorAnnouncements() {
|
|
|
const observer = new MutationObserver((mutations) => {
|
|
|
mutations.forEach((mutation) => {
|
|
|
mutation.addedNodes.forEach((node) => {
|
|
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
|
const element = node;
|
|
|
- // Check for error messages
|
|
|
if (element.matches('.alert-danger, .invalid-feedback, .error')) {
|
|
|
this.announce(element.textContent || 'Error occurred', 'assertive');
|
|
|
}
|
|
|
- // Check for success messages
|
|
|
if (element.matches('.alert-success, .success')) {
|
|
|
this.announce(element.textContent || 'Success', 'polite');
|
|
|
}
|
|
|
@@ -1034,14 +900,11 @@
|
|
|
subtree: true
|
|
|
});
|
|
|
}
|
|
|
- // WCAG 1.3.1: Info and Relationships
|
|
|
initTableAccessibility() {
|
|
|
document.querySelectorAll('table').forEach((table) => {
|
|
|
- // Add table role if missing
|
|
|
if (!table.hasAttribute('role')) {
|
|
|
table.setAttribute('role', 'table');
|
|
|
}
|
|
|
- // Ensure headers have proper scope
|
|
|
table.querySelectorAll('th').forEach((th) => {
|
|
|
if (!th.hasAttribute('scope')) {
|
|
|
const isInThead = th.closest('thead');
|
|
|
@@ -1054,7 +917,6 @@
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
- // Add caption if missing but title exists
|
|
|
if (!table.querySelector('caption') && table.hasAttribute('title')) {
|
|
|
const caption = document.createElement('caption');
|
|
|
caption.textContent = table.getAttribute('title') || '';
|
|
|
@@ -1062,18 +924,15 @@
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
- // WCAG 3.3.2: Labels or Instructions
|
|
|
initFormAccessibility() {
|
|
|
document.querySelectorAll('input, select, textarea').forEach((input) => {
|
|
|
const htmlInput = input;
|
|
|
- // Ensure all inputs have labels
|
|
|
if (!htmlInput.labels?.length && !htmlInput.hasAttribute('aria-label') && !htmlInput.hasAttribute('aria-labelledby')) {
|
|
|
const placeholder = htmlInput.getAttribute('placeholder');
|
|
|
if (placeholder) {
|
|
|
htmlInput.setAttribute('aria-label', placeholder);
|
|
|
}
|
|
|
}
|
|
|
- // Add required indicators
|
|
|
if (htmlInput.hasAttribute('required')) {
|
|
|
const label = htmlInput.labels?.[0];
|
|
|
if (label && !label.querySelector('.required-indicator')) {
|
|
|
@@ -1083,8 +942,6 @@
|
|
|
label.append(indicator);
|
|
|
}
|
|
|
}
|
|
|
- // Handle invalid state unless the element explicitly opts out via the
|
|
|
- // 'disable-adminlte-validations' class.
|
|
|
if (!htmlInput.classList.contains('disable-adminlte-validations')) {
|
|
|
htmlInput.addEventListener('invalid', () => {
|
|
|
this.handleFormError(htmlInput);
|
|
|
@@ -1100,10 +957,6 @@
|
|
|
errorElement.id = errorId;
|
|
|
errorElement.className = 'invalid-feedback';
|
|
|
errorElement.setAttribute('role', 'alert');
|
|
|
- // Always append the error element as the last child of the parent.
|
|
|
- // This prevents breaking layouts where inputs use Bootstrap's
|
|
|
- // `.input-group-text` decorators, ensuring the error stays below
|
|
|
- // the entire input group.
|
|
|
input.parentNode?.append(errorElement);
|
|
|
}
|
|
|
errorElement.textContent = input.validationMessage;
|
|
|
@@ -1111,7 +964,6 @@
|
|
|
input.classList.add('is-invalid');
|
|
|
this.announce(`Error in ${input.labels?.[0]?.textContent || input.name}: ${input.validationMessage}`, 'assertive');
|
|
|
}
|
|
|
- // Modal focus management
|
|
|
initModalFocusManagement() {
|
|
|
document.addEventListener('shown.bs.modal', (event) => {
|
|
|
const modal = event.target;
|
|
|
@@ -1119,18 +971,15 @@
|
|
|
if (focusableElements.length > 0) {
|
|
|
focusableElements[0].focus();
|
|
|
}
|
|
|
- // Store previous focus
|
|
|
this.focusHistory.push(document.activeElement);
|
|
|
});
|
|
|
document.addEventListener('hidden.bs.modal', () => {
|
|
|
- // Restore previous focus
|
|
|
const previousElement = this.focusHistory.pop();
|
|
|
if (previousElement) {
|
|
|
previousElement.focus();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
- // Dropdown focus management
|
|
|
initDropdownFocusManagement() {
|
|
|
document.addEventListener('shown.bs.dropdown', (event) => {
|
|
|
const dropdown = event.target;
|
|
|
@@ -1141,7 +990,6 @@
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
- // Public API methods
|
|
|
announce(message, priority = 'polite') {
|
|
|
if (!this.liveRegion) {
|
|
|
this.createLiveRegion();
|
|
|
@@ -1149,7 +997,6 @@
|
|
|
if (this.liveRegion) {
|
|
|
this.liveRegion.setAttribute('aria-live', priority);
|
|
|
this.liveRegion.textContent = message;
|
|
|
- // Clear after announcement
|
|
|
setTimeout(() => {
|
|
|
if (this.liveRegion) {
|
|
|
this.liveRegion.textContent = '';
|
|
|
@@ -1161,7 +1008,6 @@
|
|
|
const element = document.querySelector(selector);
|
|
|
if (element) {
|
|
|
element.focus();
|
|
|
- // Ensure element is visible
|
|
|
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
|
}
|
|
|
}
|
|
|
@@ -1186,7 +1032,6 @@
|
|
|
});
|
|
|
}
|
|
|
addLandmarks() {
|
|
|
- // Add main landmark if missing
|
|
|
const main = document.querySelector('main');
|
|
|
if (!main) {
|
|
|
const appMain = document.querySelector('.app-main');
|
|
|
@@ -1195,7 +1040,6 @@
|
|
|
appMain.id = 'main';
|
|
|
}
|
|
|
}
|
|
|
- // Add navigation landmarks
|
|
|
document.querySelectorAll('.navbar-nav, .nav').forEach((nav, index) => {
|
|
|
if (!nav.hasAttribute('role')) {
|
|
|
nav.setAttribute('role', 'navigation');
|
|
|
@@ -1204,35 +1048,17 @@
|
|
|
nav.setAttribute('aria-label', `Navigation ${index + 1}`);
|
|
|
}
|
|
|
});
|
|
|
- // Add search landmark
|
|
|
const searchForm = document.querySelector('form[role="search"], .navbar-search');
|
|
|
if (searchForm && !searchForm.hasAttribute('role')) {
|
|
|
searchForm.setAttribute('role', 'search');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- // Initialize accessibility when DOM is ready
|
|
|
const initAccessibility = (config) => {
|
|
|
return new AccessibilityManager(config);
|
|
|
};
|
|
|
|
|
|
- /**
|
|
|
- * AdminLTE v4.0.0-rc5
|
|
|
- * Author: Colorlib
|
|
|
- * Website: AdminLTE.io <https://adminlte.io>
|
|
|
- * License: Open source - MIT <https://opensource.org/licenses/MIT>
|
|
|
- */
|
|
|
onDOMContentLoaded(() => {
|
|
|
- /**
|
|
|
- * Initialize AdminLTE Core Components
|
|
|
- * -------------------------------
|
|
|
- */
|
|
|
- const layout = new Layout(document.body);
|
|
|
- layout.holdTransition();
|
|
|
- /**
|
|
|
- * Initialize Accessibility Features - WCAG 2.1 AA Compliance
|
|
|
- * --------------------------------------------------------
|
|
|
- */
|
|
|
const accessibilityManager = initAccessibility({
|
|
|
announcements: true,
|
|
|
skipLinks: true,
|
|
|
@@ -1240,12 +1066,7 @@
|
|
|
keyboardNavigation: true,
|
|
|
reducedMotion: true
|
|
|
});
|
|
|
- // Add semantic landmarks
|
|
|
accessibilityManager.addLandmarks();
|
|
|
- // Mark app as loaded after initialization
|
|
|
- setTimeout(() => {
|
|
|
- document.body.classList.add('app-loaded');
|
|
|
- }, 400);
|
|
|
});
|
|
|
|
|
|
exports.CardWidget = CardWidget;
|
Aigars Silkalns