SHA256
59 lines
2.0 KiB
JavaScript
59 lines
2.0 KiB
JavaScript
export function renderHeader({ title = '', centerNode = null, leftAction, leftLabel = '', rightActions = [] }) {
|
||
const wrap = document.createElement('header');
|
||
wrap.className = 'page-header app-topbar-shell';
|
||
|
||
const left = document.createElement('div');
|
||
left.className = 'header-left';
|
||
if (leftAction) {
|
||
const btn = document.createElement('button');
|
||
btn.type = 'button';
|
||
const rawLabel = String(leftAction.label || '').trim();
|
||
const isBackAction = rawLabel === '←' || rawLabel === '<' || rawLabel === '‹';
|
||
btn.className = `icon-btn${isBackAction ? ' header-back-btn' : ''}`;
|
||
btn.textContent = isBackAction ? '←' : rawLabel;
|
||
if (isBackAction) {
|
||
btn.setAttribute('aria-label', leftAction.ariaLabel || 'Назад');
|
||
btn.title = leftAction.title || 'Назад';
|
||
}
|
||
btn.addEventListener('click', leftAction.onClick);
|
||
left.append(btn);
|
||
}
|
||
if (leftLabel) {
|
||
const label = document.createElement('span');
|
||
label.className = 'header-left-label';
|
||
label.textContent = leftLabel;
|
||
left.append(label);
|
||
}
|
||
|
||
const center = document.createElement('div');
|
||
center.className = 'header-center';
|
||
if (centerNode instanceof Node) {
|
||
center.append(centerNode);
|
||
} else {
|
||
const h1 = document.createElement('h1');
|
||
h1.className = 'page-title';
|
||
h1.textContent = title;
|
||
center.append(h1);
|
||
}
|
||
|
||
const right = document.createElement('div');
|
||
right.className = 'header-actions';
|
||
rightActions.forEach((action) => {
|
||
const btn = document.createElement('button');
|
||
btn.type = 'button';
|
||
btn.className = `icon-btn${action.className ? ` ${action.className}` : ''}`;
|
||
if (action.title) btn.title = action.title;
|
||
if (action.ariaLabel) btn.setAttribute('aria-label', action.ariaLabel);
|
||
if (action.iconNode instanceof Node) {
|
||
btn.append(action.iconNode);
|
||
} else {
|
||
btn.textContent = action.label;
|
||
}
|
||
btn.addEventListener('click', action.onClick);
|
||
right.append(btn);
|
||
});
|
||
|
||
wrap.append(left, center, right);
|
||
return wrap;
|
||
}
|