46 lines
2.4 KiB
JavaScript
46 lines
2.4 KiB
JavaScript
export const RECIPE_SEARCH_SHELL_BASE_SHADOW =
|
|
'var(--shadow-shell), inset 0 2px 6px rgba(var(--overlay-rgb),0.16), inset 0 -1px 2px rgba(255,255,255,0.02)';
|
|
|
|
function escapeHtml(s) {
|
|
return String(s)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|
|
|
|
export function getRecipeSearchFieldHTML({
|
|
shellId,
|
|
inputId,
|
|
placeholder = 'Szukaj przepisów...',
|
|
inputAriaLabel = '',
|
|
inputValue = '',
|
|
filterButtonId = '',
|
|
filterButtonAction = '',
|
|
filterButtonLabel = 'Otwórz filtry',
|
|
} = {}) {
|
|
const hasFilterButton = Boolean(filterButtonId);
|
|
const actionAttr = hasFilterButton && filterButtonAction
|
|
? ` onclick="${escapeHtml(filterButtonAction)}"`
|
|
: '';
|
|
const inputPadding = hasFilterButton ? 'pl-8 pr-14' : 'pl-8 pr-8';
|
|
const ariaLabel = inputAriaLabel || placeholder;
|
|
|
|
return `
|
|
<div id="${escapeHtml(shellId)}" class="relative z-[1] mx-auto flex items-center w-full overflow-hidden" style="width:min(calc(100% - 0.5rem), 22.4rem); background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; border-radius:999px !important; box-shadow:${RECIPE_SEARCH_SHELL_BASE_SHADOW} !important; transition:box-shadow 180ms ease;">
|
|
<input type="text" id="${escapeHtml(inputId)}" value="${escapeHtml(inputValue)}" placeholder="${escapeHtml(placeholder)}" aria-label="${escapeHtml(ariaLabel)}" class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] ${inputPadding}" style="background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;">
|
|
${hasFilterButton
|
|
? `
|
|
<button id="${escapeHtml(filterButtonId)}"${actionAttr} class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 text-[rgb(var(--text-body-soft-rgb))] hover:text-[rgb(var(--text-emphasis-rgb))] flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; box-shadow:none !important;" aria-label="${escapeHtml(filterButtonLabel)}">
|
|
<i class="fas fa-sliders-h" aria-hidden="true"></i>
|
|
</button>`
|
|
: ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
export function syncRecipeSearchShellShadow(searchShell) {
|
|
if (!searchShell) return;
|
|
searchShell.style.boxShadow = RECIPE_SEARCH_SHELL_BASE_SHADOW;
|
|
}
|