feat: extend module platform with UI slots, runtime components, CLI tooling and {{userId}} search support
Completes the generic module platform that enables modules to contribute
UI elements, runtime JS components, and search resources without any
core hardcoding.
New generic UI slot types:
- topbar.right_item: module-contributed topbar buttons
- layout.body_end_template: module-contributed dialog/overlay templates
- layout.head_style: module-contributed global CSS
- runtime.component: declarative JS component registration with phase ordering
New infrastructure:
- ModuleAutoloader: PSR-4 autoloading for module-local PHP classes
- ModuleRuntimePageBuilder: symlinks module pages into runtime directory
- ModuleRuntimeAssetPublisher: publishes module CSS/JS to web/modules/
- ModulePermissionSynchronizer: syncs module permissions to DB
- CLI scripts: module-runtime-sync, module-build, module-migrate,
module-permissions-sync, module-assets-sync
- {{userId}} placeholder in SearchDataService for user-scoped search queries
- Component runtime with phased initialization (early/default/late)
- AppContainer.protectExistingBindings() to prevent module→core overwrites
- Architecture tests: ModuleStructureContractTest, CoreTemplateIsolationTest,
FrontendComponentRuntimeContractTest, AppContainerIsolationContractTest
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,68 +1,80 @@
|
||||
/**
|
||||
* Sidebar collapse/show toggle with localStorage persistence and Ctrl+B shortcut.
|
||||
*/
|
||||
import { requireEl, warnOnce } from '../core/app-dom.js';
|
||||
import { warnOnce, resolveHost } from '../core/app-dom.js';
|
||||
import { isEditableTarget } from '../core/app-form-utils.js';
|
||||
import { createUiStorage } from '../core/app-ui-storage.js';
|
||||
|
||||
export function initSidebarToggle(options = {}) {
|
||||
const COLLAPSED_STORAGE_KEY = 'sidebar-collapsed';
|
||||
const HIDDEN_STORAGE_KEY = 'sidebar-hidden';
|
||||
|
||||
export function initSidebarToggle(root = document, options = {}) {
|
||||
const {
|
||||
buttonSelector = '[data-sidebar-toggle]',
|
||||
asideSelector = '#app-sidebar',
|
||||
containerSelector = '.app-container',
|
||||
storageKey = 'app-sidebar-collapsed',
|
||||
hiddenStorageKey = 'app-sidebar-hidden'
|
||||
storageNamespace = 'app-ui',
|
||||
storageVersion = 'v1',
|
||||
storageScope = 'sidebar',
|
||||
collapsedStorageKey = COLLAPSED_STORAGE_KEY,
|
||||
hiddenStorageKey = HIDDEN_STORAGE_KEY,
|
||||
} = options;
|
||||
|
||||
const aside = requireEl(asideSelector, { module: 'sidebar-toggle' });
|
||||
if (!aside) {return null;}
|
||||
const host = resolveHost(root);
|
||||
const aside = host.matches?.(asideSelector) ? host : host.querySelector(asideSelector);
|
||||
if (!(aside instanceof HTMLElement)) {
|
||||
warnOnce('UI_EL_MISSING', `Missing sidebar: ${asideSelector}`, { module: 'sidebar-toggle' });
|
||||
return { destroy: () => {} };
|
||||
}
|
||||
if (aside.dataset.sidebarToggleBound === '1' && aside._sidebarToggleApi) {
|
||||
return aside._sidebarToggleApi;
|
||||
}
|
||||
|
||||
const buttons = Array.from(document.querySelectorAll(buttonSelector));
|
||||
const storage = createUiStorage({
|
||||
namespace: storageNamespace,
|
||||
version: storageVersion,
|
||||
scope: storageScope,
|
||||
});
|
||||
const scopedCollapsedKey = storage.buildKey('state', collapsedStorageKey);
|
||||
const scopedHiddenKey = storage.buildKey('state', hiddenStorageKey);
|
||||
|
||||
const buttons = Array.from(host.querySelectorAll(buttonSelector));
|
||||
if (!buttons.length) {
|
||||
warnOnce('UI_EL_MISSING', `Missing sidebar toggle buttons: ${buttonSelector}`, { module: 'sidebar-toggle' });
|
||||
}
|
||||
const container = document.querySelector(containerSelector);
|
||||
const root = document.documentElement;
|
||||
const container = host.querySelector(containerSelector);
|
||||
const rootEl = document.documentElement;
|
||||
|
||||
const readStored = () => {
|
||||
try {
|
||||
return window.localStorage.getItem(storageKey);
|
||||
} catch (error) {
|
||||
return null;
|
||||
const scopedValue = storage.getItem(scopedCollapsedKey);
|
||||
if (scopedValue === '1' || scopedValue === '0') {
|
||||
return scopedValue;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const readHiddenStored = () => {
|
||||
try {
|
||||
return window.localStorage.getItem(hiddenStorageKey);
|
||||
} catch (error) {
|
||||
return null;
|
||||
const scopedValue = storage.getItem(scopedHiddenKey);
|
||||
if (scopedValue === '1' || scopedValue === '0') {
|
||||
return scopedValue;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const writeStored = (collapsed) => {
|
||||
try {
|
||||
window.localStorage.setItem(storageKey, collapsed ? '1' : '0');
|
||||
} catch (error) {
|
||||
// ignore storage errors
|
||||
}
|
||||
storage.setItem(scopedCollapsedKey, collapsed ? '1' : '0');
|
||||
};
|
||||
|
||||
const writeHiddenStored = (hidden) => {
|
||||
try {
|
||||
window.localStorage.setItem(hiddenStorageKey, hidden ? '1' : '0');
|
||||
} catch (error) {
|
||||
// ignore storage errors
|
||||
}
|
||||
storage.setItem(scopedHiddenKey, hidden ? '1' : '0');
|
||||
};
|
||||
|
||||
const applyState = (collapsed, { persist = false } = {}) => {
|
||||
aside.classList.toggle('is-collapsed', collapsed);
|
||||
if (container) {
|
||||
if (container instanceof HTMLElement) {
|
||||
container.classList.toggle('is-sidebar-collapsed', collapsed);
|
||||
}
|
||||
if (root) {
|
||||
root.classList.toggle('sidebar-collapsed', collapsed);
|
||||
}
|
||||
rootEl.classList.toggle('sidebar-collapsed', collapsed);
|
||||
buttons.forEach((button) => {
|
||||
if (!button.getAttribute('aria-controls')) {
|
||||
button.setAttribute('aria-controls', aside.id || 'app-sidebar');
|
||||
@@ -76,12 +88,10 @@ export function initSidebarToggle(options = {}) {
|
||||
|
||||
const applyHidden = (hidden, { persist = false } = {}) => {
|
||||
aside.classList.toggle('is-hidden', hidden);
|
||||
if (container) {
|
||||
if (container instanceof HTMLElement) {
|
||||
container.classList.toggle('is-sidebar-hidden', hidden);
|
||||
}
|
||||
if (root) {
|
||||
root.classList.toggle('sidebar-hidden', hidden);
|
||||
}
|
||||
rootEl.classList.toggle('sidebar-hidden', hidden);
|
||||
buttons.forEach((button) => {
|
||||
if (!button.getAttribute('aria-controls')) {
|
||||
button.setAttribute('aria-controls', aside.id || 'app-sidebar');
|
||||
@@ -101,7 +111,7 @@ export function initSidebarToggle(options = {}) {
|
||||
if (stored === '1' || stored === '0') {
|
||||
return stored === '1';
|
||||
}
|
||||
return root?.classList.contains('sidebar-collapsed') ?? false;
|
||||
return rootEl.classList.contains('sidebar-collapsed');
|
||||
};
|
||||
|
||||
const controller = {
|
||||
@@ -110,11 +120,11 @@ export function initSidebarToggle(options = {}) {
|
||||
open: ({ persist = true } = {}) => applyState(false, { persist }),
|
||||
close: ({ persist = true } = {}) => applyState(true, { persist }),
|
||||
toggle: ({ persist = true } = {}) => applyState(!isCollapsed(), { persist }),
|
||||
apply: (collapsed, { persist = false } = {}) => applyState(!!collapsed, { persist }),
|
||||
apply: (collapsed, { persist = false } = {}) => applyState(Boolean(collapsed), { persist }),
|
||||
show: ({ persist = true } = {}) => applyHidden(false, { persist }),
|
||||
hide: ({ persist = true } = {}) => applyHidden(true, { persist }),
|
||||
toggleVisibility: ({ persist = true } = {}) => applyHidden(!isHidden(), { persist }),
|
||||
applyVisibility: (hidden, { persist = false } = {}) => applyHidden(!!hidden, { persist })
|
||||
applyVisibility: (hidden, { persist = false } = {}) => applyHidden(Boolean(hidden), { persist }),
|
||||
};
|
||||
|
||||
applyState(getInitialState(), { persist: false });
|
||||
@@ -123,8 +133,9 @@ export function initSidebarToggle(options = {}) {
|
||||
applyHidden(hiddenStored === '1', { persist: false });
|
||||
}
|
||||
|
||||
const cleanupFns = [];
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener('click', (event) => {
|
||||
const onClick = (event) => {
|
||||
event.preventDefault();
|
||||
const action = (button.dataset.sidebarAction || '').toLowerCase();
|
||||
if (action === 'visibility') {
|
||||
@@ -132,37 +143,52 @@ export function initSidebarToggle(options = {}) {
|
||||
return;
|
||||
}
|
||||
controller.toggle({ persist: true });
|
||||
});
|
||||
};
|
||||
button.addEventListener('click', onClick);
|
||||
cleanupFns.push(() => button.removeEventListener('click', onClick));
|
||||
});
|
||||
|
||||
document.addEventListener('app:sidebar', (event) => {
|
||||
const onSidebarEvent = (event) => {
|
||||
const detail = event.detail || {};
|
||||
const action = detail.action;
|
||||
const persist = detail.persist ?? false;
|
||||
if (action === 'open') {controller.open({ persist });}
|
||||
if (action === 'close') {controller.close({ persist });}
|
||||
if (action === 'toggle') {controller.toggle({ persist });}
|
||||
if (action === 'show') {controller.show({ persist });}
|
||||
if (action === 'hide') {controller.hide({ persist });}
|
||||
if (action === 'toggle-visibility') {controller.toggleVisibility({ persist });}
|
||||
});
|
||||
if (action === 'open') { controller.open({ persist }); }
|
||||
if (action === 'close') { controller.close({ persist }); }
|
||||
if (action === 'toggle') { controller.toggle({ persist }); }
|
||||
if (action === 'show') { controller.show({ persist }); }
|
||||
if (action === 'hide') { controller.hide({ persist }); }
|
||||
if (action === 'toggle-visibility') { controller.toggleVisibility({ persist }); }
|
||||
};
|
||||
document.addEventListener('app:sidebar', onSidebarEvent);
|
||||
cleanupFns.push(() => document.removeEventListener('app:sidebar', onSidebarEvent));
|
||||
|
||||
window.AppSidebar = controller;
|
||||
return controller;
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (!(event.metaKey || event.ctrlKey)) {return;}
|
||||
if (event.altKey) {return;}
|
||||
if (event.key.toLowerCase() !== 'b') {return;}
|
||||
if (isEditableTarget(event.target)) {return;}
|
||||
if (!window.AppSidebar || typeof window.AppSidebar.toggleVisibility !== 'function') {return;}
|
||||
event.preventDefault();
|
||||
window.AppSidebar.toggleVisibility({ persist: true });
|
||||
});
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => initSidebarToggle());
|
||||
} else {
|
||||
initSidebarToggle();
|
||||
const onShortcut = (event) => {
|
||||
if (!(event.metaKey || event.ctrlKey)) {
|
||||
return;
|
||||
}
|
||||
if (event.altKey) {
|
||||
return;
|
||||
}
|
||||
if (event.key.toLowerCase() !== 'b') {
|
||||
return;
|
||||
}
|
||||
if (isEditableTarget(event.target)) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
controller.toggleVisibility({ persist: true });
|
||||
};
|
||||
document.addEventListener('keydown', onShortcut);
|
||||
cleanupFns.push(() => document.removeEventListener('keydown', onShortcut));
|
||||
|
||||
const destroy = () => {
|
||||
cleanupFns.forEach((cleanup) => cleanup());
|
||||
delete aside.dataset.sidebarToggleBound;
|
||||
delete aside._sidebarToggleApi;
|
||||
};
|
||||
|
||||
const api = { ...controller, destroy };
|
||||
aside.dataset.sidebarToggleBound = '1';
|
||||
aside._sidebarToggleApi = api;
|
||||
return api;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user