Update planner search and planner editor

2026-04-08 22:16:20 +02:00
parent 4706430316
commit 165f39d0b7
7 changed files with 693 additions and 301 deletions
--- a/js/ui/recipeSearchField.js
+++ b/js/ui/recipeSearchField.js
@@ -0,0 +1,45 @@
+export const RECIPE_SEARCH_SHELL_BASE_SHADOW =
+    '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)';
+
+function escapeHtml(s) {
+    return String(s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+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:#393937 !important; border:1px solid #41423f !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-[#c9c3b8] hover:text-[#f0e8dc] 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;
+}