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

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);