fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

topbar anpassungen

Browse Source
This commit is contained in:
Felix Schneider
2026-03-05 12:51:53 +01:00
parent c5f657c8c8
commit b2dab5bd6c
14 changed files with 494 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/js/components/app-async-flash.js
View File

@@ -57,6 +57,10 @@ export function showAsyncFlash(type, message, timeout) {
const notice = document.createElement('div');
notice.className = 'notice';
notice.setAttribute('data-variant', type);
const isAssertive = type === 'error' || type === 'warning';
notice.setAttribute('role', isAssertive ? 'alert' : 'status');
notice.setAttribute('aria-live', isAssertive ? 'assertive' : 'polite');
notice.setAttribute('aria-atomic', 'true');
const messageSpan = document.createElement('span');
messageSpan.textContent = message;

12
web/js/components/app-contrast-toggle.js
View File

@@ -14,18 +14,24 @@ const setIcon = (button, contrast) => {
icon.classList.add(contrast === 'high' ? 'bi-highlights' : 'bi-circle-half');
};
const setPressedState = (button, contrast) => {
button.setAttribute('aria-pressed', contrast === 'high' ? 'true' : 'false');
};
const initContrastToggle = () => {
const button = requireEl('[data-contrast-toggle]', { module: 'contrast-toggle' });
if (!button) {return;}
const root = document.documentElement;
const getCurrent = () => (root.dataset.contrast === 'high' ? 'high' : 'normal');
setIcon(button, getCurrent());
const current = getCurrent();
setIcon(button, current);
setPressedState(button, current);
button.addEventListener('click', () => {
const current = getCurrent();
const next = current === 'high' ? 'normal' : 'high';
const next = getCurrent() === 'high' ? 'normal' : 'high';
setContrast(next);
setIcon(button, next);
setPressedState(button, next);
try {
window.localStorage.setItem(STORAGE_KEY, next);
} catch (e) {

19
web/js/components/app-nav-history.js
View File

@@ -4,14 +4,21 @@ const updateHistoryButtons = () => {
if (!back && !forward) {return;}
const hasHistory = window.history.length > 1;
const setDisabledState = (link, disabled) => {
link.setAttribute('aria-disabled', disabled ? 'true' : 'false');
link.classList.toggle('is-disabled', disabled);
if (disabled) {
link.setAttribute('tabindex', '-1');
} else {
link.removeAttribute('tabindex');
}
};
if (back) {
back.setAttribute('aria-disabled', hasHistory ? 'false' : 'true');
back.classList.toggle('is-disabled', !hasHistory);
setDisabledState(back, !hasHistory);
}
if (forward) {
forward.setAttribute('aria-disabled', hasHistory ? 'false' : 'true');
forward.classList.toggle('is-disabled', !hasHistory);
setDisabledState(forward, !hasHistory);
}
};
@@ -44,8 +51,8 @@ const initHistoryButtons = () => {
if (back) {
back.addEventListener('click', (event) => {
event.preventDefault();
if (window.history.length > 1) {
event.preventDefault();
window.history.back();
}
});
@@ -53,8 +60,8 @@ const initHistoryButtons = () => {
if (forward) {
forward.addEventListener('click', (event) => {
event.preventDefault();
if (window.history.length > 1) {
event.preventDefault();
window.history.forward();
}
});

29
web/js/components/app-tenant-switcher.js
View File

@@ -1,5 +1,16 @@
import { showAsyncFlash } from './app-async-flash.js';
import { warnOnce } from '../core/app-dom.js';
const setPending = (link, pending) => {
link.style.pointerEvents = pending ? 'none' : '';
link.style.opacity = pending ? '0.5' : '';
if (pending) {
link.setAttribute('aria-busy', 'true');
} else {
link.removeAttribute('aria-busy');
}
};
const switchTenant = async (link) => {
const tenantId = link.dataset.switchTenant;
const csrfKey = link.dataset.csrfKey;
@@ -12,8 +23,7 @@ const switchTenant = async (link) => {
}
// Disable link during request
link.style.pointerEvents = 'none';
link.style.opacity = '0.5';
setPending(link, true);
try {
const body = new URLSearchParams({
@@ -37,21 +47,18 @@ const switchTenant = async (link) => {
window.location.reload();
} else {
warnOnce('FETCH_FAILED', 'Tenant switch failed', { module: 'tenant-switcher', error: data.error });
alert(errorMessage);
link.style.pointerEvents = '';
link.style.opacity = '';
showAsyncFlash('error', errorMessage);
setPending(link, false);
}
} else {
warnOnce('FETCH_FAILED', `Tenant switch server error: ${response.status}`, { module: 'tenant-switcher' });
alert(errorMessage);
link.style.pointerEvents = '';
link.style.opacity = '';
showAsyncFlash('error', errorMessage);
setPending(link, false);
}
} catch (error) {
warnOnce('FETCH_ERROR', 'Tenant switch network error', { module: 'tenant-switcher', error });
alert(errorMessage);
link.style.pointerEvents = '';
link.style.opacity = '';
showAsyncFlash('error', errorMessage);
setPending(link, false);
}
};

74
web/js/core/app-grid-factory.js
View File

@@ -52,6 +52,12 @@ const safeStorageSet = (key, value) => {
}
};
const escapeHtmlAttr = (value) => String(value ?? '')
.replaceAll('&', '&')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;');
export function createServerGrid(options) {
const {
container,
@@ -187,6 +193,11 @@ export function createServerGrid(options) {
|| language?.pagination?.rowsPerPage
|| 'Rows per page'
).trim() || 'Rows per page';
const pageSizeCompactLabel = String(
pageSizeConfig.compactLabel
|| language?.pagination?.rowsPerPageShort
|| 'Per page'
).trim() || 'Per page';
let currentLimit = defaultLimit;
const urlLimit = syncLimit ? parseAllowedLimit(params.get(limitParam)) : null;
@@ -225,6 +236,12 @@ export function createServerGrid(options) {
).trim() || 'Actions';
const rowActionOpenLabel = String(language?.actions?.open || 'Open').trim() || 'Open';
const rowActionEditLabel = String(language?.actions?.edit || 'Edit').trim() || 'Edit';
const rowEnterHint = String(
rowInteractionConfig.rowEnterHint
|| language?.actions?.rowEnterHint
|| 'Press Enter to open row'
).trim() || 'Press Enter to open row';
const gridRetryLabel = String(language?.errorRetry || 'Retry').trim() || 'Retry';
const defaultResolveRowActionLabel = (url) => (
/(^|\/)edit(\/|$|\?)/i.test(String(url || '').trim())
? rowActionEditLabel
@@ -419,7 +436,9 @@ export function createServerGrid(options) {
onAction: typeof actions.onAction === 'function' ? actions.onAction : null
} : null;
const rowOpenActionConfig = !explicitActionConfig && showRowActionButton ? {
label: rowActionColumnLabel,
label: gridjsLib.html(
`<span class="app-grid-actions-header" data-tooltip="${escapeHtmlAttr(rowEnterHint)}" data-tooltip-pos="top" aria-label="${escapeHtmlAttr(rowEnterHint)}">${escapeHtmlAttr(rowActionColumnLabel)}</span>`
),
index: null,
items: [{
key: 'row-open',
@@ -430,6 +449,8 @@ export function createServerGrid(options) {
const normalizedLabel = String(dynamicLabel || '').trim();
return normalizedLabel || defaultResolveRowActionLabel(url);
},
ariaLabel: (_rowData, _url, label) => `${String(label || '').trim()}. ${rowEnterHint}`,
title: (_rowData, _url) => rowEnterHint,
href: ({ id }) => id
}],
// For row-open actions the URL itself is the stable row identifier.
@@ -463,14 +484,22 @@ export function createServerGrid(options) {
if (!item || !item.key) {return '';}
const label = typeof item.label === 'function' ? item.label(row, id) : item.label;
if (!label) {return '';}
const ariaLabelRaw = typeof item.ariaLabel === 'function'
? item.ariaLabel(row, id, label)
: item.ariaLabel;
const titleRaw = typeof item.title === 'function'
? item.title(row, id, label)
: item.title;
const ariaAttr = ariaLabelRaw ? ` aria-label="${escapeHtmlAttr(ariaLabelRaw)}"` : '';
const titleAttr = titleRaw ? ` title="${escapeHtmlAttr(titleRaw)}"` : '';
const className = item.className ? ` ${item.className}` : '';
const type = item.type || 'button';
if (type === 'link') {
const href = typeof item.href === 'function' ? item.href({ row, id }) : item.href;
const url = href || '#';
return `<a role="button" class="${className.trim()}" data-grid-action="${item.key}" href="${url}">${label}</a>`;
return `<a role="button" class="${className.trim()}" data-grid-action="${item.key}" href="${url}"${ariaAttr}${titleAttr}>${label}</a>`;
}
return `<button type="button" class="${className.trim()}" data-grid-action="${item.key}">${label}</button>`;
return `<button type="button" class="${className.trim()}" data-grid-action="${item.key}"${ariaAttr}${titleAttr}>${label}</button>`;
}).join('');
return gridjsLib.html(`<div class="${actionConfig.wrapperClass}" role="group">${buttons}</div>`);
}
@@ -636,6 +665,26 @@ export function createServerGrid(options) {
};
const setUpdating = () => containerEl.classList.add('gridjs-is-updating');
const clearUpdating = () => containerEl.classList.remove('gridjs-is-updating');
const ensureErrorRetryControl = () => {
const errorMessage = containerEl.querySelector('.gridjs-message.gridjs-error');
if (!errorMessage) {
return;
}
if (errorMessage.querySelector('[data-grid-retry]')) {
return;
}
const actionsWrap = document.createElement('div');
actionsWrap.className = 'app-grid-error-actions';
const retryButton = document.createElement('button');
retryButton.type = 'button';
retryButton.className = 'outline secondary app-grid-retry';
retryButton.setAttribute('data-grid-retry', '1');
retryButton.textContent = gridRetryLabel;
actionsWrap.appendChild(retryButton);
errorMessage.appendChild(actionsWrap);
};
const store = grid?.config?.store;
if (store?.subscribe) {
@@ -647,6 +696,11 @@ export function createServerGrid(options) {
} else {
clearUpdating();
}
if (state.status === 4) {
setTimeout(() => {
ensureErrorRetryControl();
}, 0);
}
if (state.status >= 2) {
markLoadedOnce();
}
@@ -856,6 +910,16 @@ export function createServerGrid(options) {
});
}
containerEl.addEventListener('click', (event) => {
const retryButton = event.target.closest('[data-grid-retry]');
if (!retryButton) {
return;
}
event.preventDefault();
retryButton.setAttribute('aria-busy', 'true');
updateGrid({ resetPage: false });
});
let pageSizeSelect = null;
const syncPageSizeControl = () => {
if (!pageSizeSelect) {
@@ -905,9 +969,11 @@ export function createServerGrid(options) {
field.dataset.gridPageSizeKey = controlKey;
const caption = document.createElement('span');
caption.textContent = pageSizeLabel;
caption.textContent = pageSizeCompactLabel;
const select = document.createElement('select');
select.setAttribute('aria-label', pageSizeLabel);
select.setAttribute('title', pageSizeLabel);
pageSizeOptions.forEach((option) => {
const optionEl = document.createElement('option');
optionEl.value = String(option);