Compare commits
19 Commits
570e44257f
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 6f902098a8 | |||
| 6d6194df37 | |||
| 68e5227db1 | |||
| 544df5175d | |||
| 53a7212dfe | |||
| ded24b53b4 | |||
| 3d62d88d48 | |||
| b9538a35b6 | |||
| 120959365e | |||
| 7049cb1d48 | |||
| bc505d6b4c | |||
| 7328b6ec4c | |||
| 2f362a7e56 | |||
| e914f93781 | |||
| 5499476a17 | |||
| 8702830f68 | |||
| 08a275093c | |||
| c43b3766cd | |||
| 63937ed7d1 |
709
index.html
709
index.html
@@ -383,11 +383,68 @@
|
||||
font-size: 0.54rem;
|
||||
line-height: 0.72rem;
|
||||
}
|
||||
#recipe-grid > .recipe-catalog-card {
|
||||
background: rgba(var(--surface-rgb), 0.7) !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.34) !important;
|
||||
border-radius: 1.08rem !important;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(var(--overlay-rgb), 0.06),
|
||||
0 8px 18px rgba(var(--overlay-rgb), 0.08) !important;
|
||||
backdrop-filter: blur(14px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(140%);
|
||||
}
|
||||
.dark #recipe-grid > .recipe-catalog-card {
|
||||
background: rgba(var(--surface-rgb), 0.62) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.22),
|
||||
0 10px 24px rgba(0, 0, 0, 0.26) !important;
|
||||
}
|
||||
#recipe-grid > .recipe-catalog-card .recipe-browser-card-media {
|
||||
height: 5.45rem;
|
||||
background: rgb(var(--skeleton-rgb)) !important;
|
||||
}
|
||||
#recipe-grid > .recipe-catalog-card .recipe-browser-card-body {
|
||||
padding: 0.62rem;
|
||||
}
|
||||
#recipe-grid > .recipe-catalog-card .recipe-browser-card-title {
|
||||
min-height: 2.64rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 650 !important;
|
||||
line-height: 0.88rem;
|
||||
color: rgb(var(--text-emphasis-rgb)) !important;
|
||||
}
|
||||
#recipe-grid > .recipe-catalog-card .recipe-browser-card-meta {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0.1rem;
|
||||
color: rgb(var(--text-muted-rgb)) !important;
|
||||
}
|
||||
#recipe-grid > .recipe-catalog-card .recipe-browser-card-meta i {
|
||||
color: rgb(var(--text-dim-rgb)) !important;
|
||||
}
|
||||
#recipe-grid > .recipe-catalog-card > div:first-child::after {
|
||||
display: none;
|
||||
}
|
||||
#recipe-grid > .recipe-catalog-card:active {
|
||||
transform: scale(0.985);
|
||||
}
|
||||
#recipe-grid > *:hover,
|
||||
#planner-picker-grid > *:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
#recipe-grid > .recipe-catalog-card:hover {
|
||||
box-shadow:
|
||||
0 2px 4px rgba(var(--overlay-rgb), 0.08),
|
||||
0 12px 24px rgba(var(--overlay-rgb), 0.12) !important;
|
||||
}
|
||||
.dark #recipe-grid > .recipe-catalog-card:hover {
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, 0.24),
|
||||
0 14px 30px rgba(0, 0, 0, 0.34) !important;
|
||||
}
|
||||
#recipe-grid > * img,
|
||||
#planner-picker-grid > * img {
|
||||
transition: transform 240ms ease;
|
||||
@@ -405,38 +462,243 @@
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
|
||||
pointer-events: none;
|
||||
}
|
||||
#recipe-topbar #recipe-search-shell {
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
margin-inline: 0;
|
||||
#recipe-search-shell,
|
||||
#pantry-search-shell {
|
||||
isolation: auto;
|
||||
}
|
||||
#recipe-topbar #recipe-search-shell::after {
|
||||
#recipe-search-shell::after,
|
||||
#pantry-search-shell::after {
|
||||
display: none;
|
||||
}
|
||||
#recipe-topbar #recipe-search-shell,
|
||||
#recipe-topbar #recipe-search-shell:focus-within {
|
||||
background: rgb(var(--sunken-rgb)) !important;
|
||||
border: 1px solid rgb(var(--border-input-rgb)) !important;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
#recipe-topbar #recipe-search-input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
#recipe-bottom-controls,
|
||||
#recipe-bottom-default-actions,
|
||||
#pantry-bottom-controls,
|
||||
#shopping-bottom-controls {
|
||||
bottom: calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)) !important;
|
||||
height: var(--recipe-bottom-control-size, 3.9rem) !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
transition: opacity 160ms ease;
|
||||
}
|
||||
html.is-nav-menu-open #recipe-bottom-controls,
|
||||
html.is-nav-menu-open #pantry-bottom-controls,
|
||||
html.is-nav-menu-open #shopping-bottom-controls {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
html.is-nav-menu-open #recipe-bottom-controls *,
|
||||
html.is-nav-menu-open #pantry-bottom-controls *,
|
||||
html.is-nav-menu-open #shopping-bottom-controls * {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
#recipe-search-shell.recipe-search-field,
|
||||
#recipe-search-shell.recipe-search-field:focus-within,
|
||||
#pantry-search-shell.recipe-search-field,
|
||||
#pantry-search-shell.recipe-search-field:focus-within {
|
||||
position: absolute !important;
|
||||
left: var(--catalog-menu-left, 1rem);
|
||||
right: var(--catalog-search-right, calc(1rem + var(--recipe-bottom-control-size, 3.9rem) + 0.5rem));
|
||||
bottom: 0;
|
||||
min-width: 0;
|
||||
height: var(--recipe-bottom-control-size, 3.9rem);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.32) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
|
||||
0 8px 20px rgba(var(--overlay-rgb), 0.14),
|
||||
0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
|
||||
backdrop-filter: blur(28px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
}
|
||||
.dark #recipe-search-shell.recipe-search-field,
|
||||
.dark #recipe-search-shell.recipe-search-field:focus-within,
|
||||
.dark #pantry-search-shell.recipe-search-field,
|
||||
.dark #pantry-search-shell.recipe-search-field:focus-within {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.24),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
||||
0 10px 24px rgba(0, 0, 0, 0.3),
|
||||
0 24px 54px rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
#recipe-search-input,
|
||||
#pantry-search-input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
background-image: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
color: rgb(var(--text-body-rgb)) !important;
|
||||
caret-color: rgb(var(--text-body-rgb));
|
||||
padding: 0 !important;
|
||||
}
|
||||
#recipe-topbar #recipe-search-input::placeholder {
|
||||
#recipe-search-input::-webkit-search-cancel-button,
|
||||
#recipe-search-input::-webkit-search-decoration,
|
||||
#recipe-search-input::-webkit-search-results-button,
|
||||
#recipe-search-input::-webkit-search-results-decoration,
|
||||
#pantry-search-input::-webkit-search-cancel-button,
|
||||
#pantry-search-input::-webkit-search-decoration,
|
||||
#pantry-search-input::-webkit-search-results-button,
|
||||
#pantry-search-input::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
#recipe-search-input::placeholder,
|
||||
#pantry-search-input::placeholder {
|
||||
color: rgb(var(--text-dim-rgb)) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
#recipe-topbar #recipe-filter-btn {
|
||||
#recipe-search-close,
|
||||
#recipe-search-close:hover,
|
||||
#recipe-search-close:focus,
|
||||
#recipe-search-close:focus-visible,
|
||||
#recipe-search-close:active,
|
||||
#pantry-search-close,
|
||||
#pantry-search-close:hover,
|
||||
#pantry-search-close:focus,
|
||||
#pantry-search-close:focus-visible,
|
||||
#pantry-search-close:active {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
background-image: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
outline: none;
|
||||
}
|
||||
#main-view .recipe-glass-btn,
|
||||
#pantry-view .recipe-glass-btn,
|
||||
#shopping-view .recipe-glass-btn,
|
||||
#app-bottom-nav .recipe-nav-toggle {
|
||||
position: relative;
|
||||
border: 1px solid rgba(255, 255, 255, 0.32) !important;
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
background-image: none !important;
|
||||
color: rgb(var(--text-body-rgb));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
|
||||
0 8px 20px rgba(var(--overlay-rgb), 0.14),
|
||||
0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
|
||||
backdrop-filter: blur(28px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
}
|
||||
.dark #main-view .recipe-glass-btn,
|
||||
.dark #pantry-view .recipe-glass-btn,
|
||||
.dark #shopping-view .recipe-glass-btn,
|
||||
.dark #app-bottom-nav .recipe-nav-toggle {
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
background-image: none !important;
|
||||
color: rgb(var(--text-body-rgb));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.24),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
||||
0 10px 24px rgba(0, 0, 0, 0.3),
|
||||
0 24px 54px rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
#main-view .recipe-glass-btn:hover,
|
||||
#pantry-view .recipe-glass-btn:hover,
|
||||
#shopping-view .recipe-glass-btn:hover,
|
||||
#app-bottom-nav .recipe-nav-toggle:hover {
|
||||
background: rgba(var(--overlay-rgb), 0.1) !important;
|
||||
color: rgb(var(--text-emphasis-rgb));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.dark #main-view .recipe-glass-btn:hover,
|
||||
.dark #pantry-view .recipe-glass-btn:hover,
|
||||
.dark #shopping-view .recipe-glass-btn:hover,
|
||||
.dark #app-bottom-nav .recipe-nav-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.09) !important;
|
||||
}
|
||||
#main-view #recipe-search-shell.recipe-search-field:hover,
|
||||
#pantry-view #pantry-search-shell.recipe-search-field:hover {
|
||||
transform: none;
|
||||
}
|
||||
#recipe-filter-btn,
|
||||
#pantry-filter-bottom-btn {
|
||||
border-radius: 999px;
|
||||
}
|
||||
#main-view #recipe-filter-btn.recipe-bottom-action,
|
||||
#pantry-view #pantry-filter-bottom-btn.recipe-bottom-action {
|
||||
border-radius: 999px;
|
||||
}
|
||||
#main-view #recipe-filter-wrap,
|
||||
#pantry-view #pantry-filter-bottom-wrap {
|
||||
left: var(--catalog-filter-left, calc(100vw - 4.05rem)) !important;
|
||||
right: auto !important;
|
||||
bottom: 0;
|
||||
}
|
||||
#main-view #recipe-search-wrap,
|
||||
#pantry-view #pantry-search-wrap {
|
||||
left: var(--catalog-search-btn-left, calc(100vw - 7.6rem)) !important;
|
||||
right: auto !important;
|
||||
bottom: 0;
|
||||
}
|
||||
#main-view .recipe-bottom-action,
|
||||
#pantry-view .recipe-bottom-action,
|
||||
#shopping-view .recipe-bottom-action {
|
||||
width: var(--recipe-bottom-control-size, 3.9rem);
|
||||
height: var(--recipe-bottom-control-size, 3.9rem);
|
||||
border-radius: 999px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#main-view .recipe-bottom-action i,
|
||||
#pantry-view .recipe-bottom-action i,
|
||||
#shopping-view .recipe-bottom-action i {
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
html.is-inline-search-open #recipe-bottom-controls,
|
||||
html.is-inline-search-open #pantry-bottom-controls {
|
||||
height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)) !important;
|
||||
}
|
||||
html.is-inline-search-open #recipe-search-shell.recipe-search-field,
|
||||
html.is-inline-search-open #recipe-search-shell.recipe-search-field:focus-within,
|
||||
html.is-inline-search-open #pantry-search-shell.recipe-search-field,
|
||||
html.is-inline-search-open #pantry-search-shell.recipe-search-field:focus-within {
|
||||
left: var(--catalog-inline-search-field-left, calc(1rem + var(--recipe-inline-search-control-size, 3.12rem) + 0.5rem));
|
||||
right: var(--catalog-inline-search-field-right, calc(1rem + var(--recipe-inline-search-control-size, 3.12rem) + 0.5rem));
|
||||
height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
|
||||
}
|
||||
html.is-inline-search-open #main-view #recipe-filter-wrap,
|
||||
html.is-inline-search-open #pantry-view #pantry-filter-bottom-wrap {
|
||||
left: var(--catalog-inline-search-close-left, calc(100vw - 3.9rem)) !important;
|
||||
}
|
||||
html.is-inline-search-open #main-view .recipe-bottom-action,
|
||||
html.is-inline-search-open #pantry-view .recipe-bottom-action {
|
||||
width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
|
||||
height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
|
||||
}
|
||||
html.is-inline-search-open #recipe-filter-float-controls,
|
||||
html.is-inline-search-open #pantry-top-controls,
|
||||
html.is-inline-search-open #shopping-top-controls {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(0.35rem) scale(0.985);
|
||||
}
|
||||
.dark #pantry-filter-popover {
|
||||
background: rgba(var(--app-bg-rgb), 0.82) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.24),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
||||
0 10px 24px rgba(0, 0, 0, 0.36),
|
||||
0 26px 60px rgba(0, 0, 0, 0.46) !important;
|
||||
}
|
||||
#planner-picker-search-shell {
|
||||
min-height: 3rem;
|
||||
width: min(calc(100% - 0.5rem), 22.4rem);
|
||||
@@ -476,6 +738,90 @@
|
||||
inset 0 2px 7px rgba(var(--overlay-rgb), 0.18),
|
||||
inset 0 -1px 2px rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
#planner-view #planner-cal-bar {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 0 !important;
|
||||
z-index: 20;
|
||||
background: rgba(255, 255, 255, 0.5) !important;
|
||||
border-bottom: 1px solid rgba(var(--line-rgb), 0.08) !important;
|
||||
backdrop-filter: blur(28px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
}
|
||||
.dark #planner-view #planner-cal-bar {
|
||||
background: rgba(35, 34, 32, 0.5) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
}
|
||||
#planner-view #calendar-swipe-zone,
|
||||
#planner-view #calendar-week-wrap,
|
||||
#planner-view #calendar-month-wrap {
|
||||
background: transparent !important;
|
||||
}
|
||||
#planner-view #planner-scroll {
|
||||
padding-top: 10rem !important;
|
||||
}
|
||||
#planner-meal-slots .planner-add-meal {
|
||||
background: rgba(var(--overlay-rgb), 0.05) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.28) !important;
|
||||
color: rgb(var(--text-body-soft-rgb)) !important;
|
||||
backdrop-filter: blur(18px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(180%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
|
||||
0 1px 3px rgba(var(--overlay-rgb), 0.08);
|
||||
transition: background-color 160ms ease, transform 160ms ease;
|
||||
}
|
||||
#planner-meal-slots .planner-add-meal:hover {
|
||||
background: rgba(var(--overlay-rgb), 0.1) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
#planner-meal-slots .planner-add-meal:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
.dark #planner-meal-slots .planner-add-meal {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
||||
0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.dark #planner-meal-slots .planner-add-meal:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
#planner-meal-slots > div[data-slot-id] {
|
||||
box-shadow:
|
||||
0 2px 4px rgba(var(--overlay-rgb), 0.08),
|
||||
0 14px 32px rgba(var(--overlay-rgb), 0.18) !important;
|
||||
}
|
||||
#planner-meal-slots > div[data-slot-id] > div:first-child {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
.dark #planner-meal-slots > div[data-slot-id] {
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, 0.22),
|
||||
0 14px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
.dark #planner-meal-slots > div[data-slot-id] > div:first-child {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
#planner-meal-slots .planner-kcal-pill {
|
||||
background: rgba(var(--overlay-rgb), 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.28);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06);
|
||||
}
|
||||
.dark #planner-meal-slots .planner-kcal-pill {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
#planner-picker-search {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
@@ -489,8 +835,7 @@
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
#planner-picker-search::placeholder,
|
||||
#pantry-search::placeholder {
|
||||
#planner-picker-search::placeholder {
|
||||
color: rgba(var(--text-body-soft-rgb), 0.72) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -536,28 +881,173 @@
|
||||
inset-inline: 0;
|
||||
bottom: 0;
|
||||
z-index: 30;
|
||||
--dock-width: min(calc(100% - 2.4rem), 24.5rem);
|
||||
--dock-pad: 0.42rem;
|
||||
--dock-gap: 0.06rem;
|
||||
--dock-radius: 999px;
|
||||
--recipe-dock-width: var(--dock-width);
|
||||
--recipe-bottom-control-size: 3.9rem;
|
||||
--recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
|
||||
--recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
|
||||
--recipe-collapsed-dock-radius: 999px;
|
||||
--recipe-toggle-size: calc(var(--recipe-collapsed-dock-width) - (var(--dock-pad) * 2));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 0.85rem calc(1.58rem + env(safe-area-inset-bottom));
|
||||
pointer-events: none;
|
||||
transition: opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
html.is-inline-search-open #app-bottom-nav {
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
transform: none;
|
||||
}
|
||||
#app-bottom-nav .recipe-nav-toggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: var(--dock-pad);
|
||||
bottom: var(--dock-pad);
|
||||
left: var(--dock-pad);
|
||||
width: var(--recipe-toggle-size);
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 999px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.95rem;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transition:
|
||||
transform 220ms ease,
|
||||
color 160ms ease,
|
||||
background-color 160ms ease,
|
||||
box-shadow 180ms ease,
|
||||
opacity 280ms ease;
|
||||
}
|
||||
#app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open):not(.is-nav-collapsing) .recipe-nav-toggle {
|
||||
display: inline-flex;
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
|
||||
display: inline-flex;
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav.is-collapsed-tab .recipe-nav-toggle {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
#app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .bottom-dock {
|
||||
width: var(--recipe-collapsed-dock-width);
|
||||
height: var(--recipe-collapsed-dock-height);
|
||||
border-radius: var(--recipe-collapsed-dock-radius);
|
||||
opacity: 1;
|
||||
transform: translate(
|
||||
calc((var(--recipe-collapsed-dock-width) - var(--recipe-dock-width)) / 2),
|
||||
calc(var(--recipe-controls-lift, 0px) * -1)
|
||||
);
|
||||
pointer-events: auto;
|
||||
}
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing:not(.is-nav-menu-open) .bottom-dock {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-menu-open .recipe-nav-toggle {
|
||||
opacity: 0;
|
||||
transform: translateY(0) scale(0.98);
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-menu-open .bottom-dock {
|
||||
opacity: 1;
|
||||
width: var(--recipe-dock-width);
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
#app-bottom-nav.is-compact-tab .bottom-dock {
|
||||
width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
|
||||
transform: translate(
|
||||
var(--nav-compact-translate-x, 0px),
|
||||
calc(var(--recipe-controls-lift, 0px) * -1)
|
||||
);
|
||||
border-radius: 999px;
|
||||
}
|
||||
#app-bottom-nav .bottom-dock {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: min(calc(100% - 2.4rem), 24.5rem);
|
||||
height: 3.34rem;
|
||||
width: var(--dock-width);
|
||||
height: var(--recipe-bottom-control-size, 3.9rem);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
align-items: stretch;
|
||||
gap: 0.06rem;
|
||||
padding: 0.22rem;
|
||||
border-radius: 1.68rem;
|
||||
background: rgb(var(--card-rgb));
|
||||
border: 1px solid rgb(var(--border-card-rgb));
|
||||
gap: 0.02rem;
|
||||
padding: 0.28rem;
|
||||
border-radius: var(--dock-radius);
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.32) !important;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(28px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
box-shadow:
|
||||
inset 0 1px 8px rgba(var(--overlay-rgb), 0.15),
|
||||
var(--shadow-shell);
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
|
||||
0 8px 20px rgba(var(--overlay-rgb), 0.14),
|
||||
0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
|
||||
pointer-events: auto;
|
||||
transform-origin: left center;
|
||||
transition:
|
||||
opacity 220ms ease,
|
||||
width 540ms cubic-bezier(0.16, 1, 0.3, 1),
|
||||
height 540ms cubic-bezier(0.16, 1, 0.3, 1),
|
||||
border-radius 540ms cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 540ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
html.is-inline-search-open #app-bottom-nav .bottom-dock {
|
||||
width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
|
||||
height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
|
||||
border-radius: 999px;
|
||||
transform: translate(
|
||||
calc((var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)) - var(--recipe-dock-width)) / 2),
|
||||
calc(var(--recipe-controls-lift, 0px) * -1)
|
||||
);
|
||||
pointer-events: auto;
|
||||
}
|
||||
html.is-inline-search-open #app-bottom-nav .recipe-nav-toggle {
|
||||
display: inline-flex;
|
||||
width: var(--recipe-inline-toggle-size, var(--recipe-toggle-size));
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
html.is-inline-search-open #app-bottom-nav .nav-slot {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dark #app-bottom-nav .bottom-dock {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.24),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
||||
0 10px 24px rgba(0, 0, 0, 0.3),
|
||||
0 24px 54px rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
#app-bottom-nav .nav-slot {
|
||||
min-width: 0;
|
||||
@@ -565,6 +1055,17 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 140ms ease;
|
||||
}
|
||||
#app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .nav-slot {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing .nav-slot {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav .nav-tab,
|
||||
#app-bottom-nav .nav-action {
|
||||
@@ -573,14 +1074,16 @@
|
||||
border: 0;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
width: 2.18rem;
|
||||
height: 2.18rem;
|
||||
width: 2.33rem;
|
||||
height: 2.33rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 1.35rem;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 0.16rem;
|
||||
flex: 0 0 auto;
|
||||
color: rgba(var(--text-primary-rgb), 0.94);
|
||||
cursor: pointer;
|
||||
@@ -592,9 +1095,34 @@
|
||||
}
|
||||
#app-bottom-nav .nav-tab i,
|
||||
#app-bottom-nav .nav-action i {
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1;
|
||||
}
|
||||
#app-bottom-nav .nav-label {
|
||||
display: none;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.18;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active::after {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.18;
|
||||
content: "";
|
||||
}
|
||||
#app-bottom-nav #nav-planner.is-active::after { content: "Planer"; }
|
||||
#app-bottom-nav #nav-recipes.is-active::after { content: "Katalog"; }
|
||||
#app-bottom-nav #nav-pantry.is-active::after { content: "Spiżarnia"; }
|
||||
#app-bottom-nav #nav-shopping.is-active::after { content: "Zakupy"; }
|
||||
#app-bottom-nav .nav-tab:hover,
|
||||
#app-bottom-nav .nav-action:hover {
|
||||
transform: translateY(-1px);
|
||||
@@ -602,12 +1130,40 @@
|
||||
background: var(--hover-overlay) !important;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: min(100%, 4rem);
|
||||
height: 3.15rem;
|
||||
padding: 0.32rem 0.22rem 0.28rem;
|
||||
color: rgb(var(--text-primary-rgb));
|
||||
background: rgb(var(--app-bg-rgb)) !important;
|
||||
border-radius: 1.46rem;
|
||||
box-shadow: none !important;
|
||||
background: rgba(var(--overlay-rgb), 0.24) !important;
|
||||
border-radius: 999px;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.18) !important;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active .nav-label {
|
||||
display: none;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active i {
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active::after {
|
||||
font-size: 0.66rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
#app-bottom-nav.is-double-compact .nav-tab.is-active::after {
|
||||
font-size: 0.62rem;
|
||||
line-height: 1.24;
|
||||
}
|
||||
#app-bottom-nav.is-double-compact .nav-tab.is-active {
|
||||
height: 3.25rem;
|
||||
padding: 0.28rem 0.2rem 0.32rem;
|
||||
}
|
||||
.dark #app-bottom-nav .nav-tab.is-active {
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.26) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
#app-bottom-nav .nav-tab:active,
|
||||
#app-bottom-nav .nav-action:active {
|
||||
@@ -622,24 +1178,63 @@
|
||||
@media (max-width: 380px) {
|
||||
#app-bottom-nav {
|
||||
padding-inline: 0.7rem;
|
||||
--dock-width: min(calc(100% - 1.6rem), 22.5rem);
|
||||
--dock-pad: 0.38rem;
|
||||
--dock-gap: 0.05rem;
|
||||
--dock-radius: 999px;
|
||||
--recipe-bottom-control-size: 3.78rem;
|
||||
--recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
|
||||
--recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
|
||||
--recipe-collapsed-dock-radius: 999px;
|
||||
}
|
||||
#app-bottom-nav .bottom-dock {
|
||||
width: min(calc(100% - 1.6rem), 22.5rem);
|
||||
height: 3.12rem;
|
||||
gap: 0.05rem;
|
||||
padding: 0.2rem;
|
||||
border-radius: 1.56rem;
|
||||
width: var(--dock-width);
|
||||
height: var(--recipe-bottom-control-size, 3.78rem);
|
||||
gap: 0.01rem;
|
||||
padding: 0.24rem;
|
||||
border-radius: var(--dock-radius);
|
||||
}
|
||||
#app-bottom-nav .nav-tab,
|
||||
#app-bottom-nav .nav-action {
|
||||
width: 2.02rem;
|
||||
height: 2.02rem;
|
||||
border-radius: 1.28rem;
|
||||
width: 2.18rem;
|
||||
height: 2.18rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 1.36rem;
|
||||
width: min(100%, 3.72rem);
|
||||
height: 2.88rem;
|
||||
padding: 0.24rem 0.18rem 0.2rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
#app-bottom-nav .nav-label {
|
||||
font-size: 0.56rem;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active::after {
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
#app-bottom-nav.is-double-compact .nav-tab.is-active::after {
|
||||
font-size: 0.58rem;
|
||||
line-height: 1.24;
|
||||
}
|
||||
#app-bottom-nav.is-double-compact .nav-tab.is-active {
|
||||
height: 2.94rem;
|
||||
padding: 0.22rem 0.18rem 0.24rem;
|
||||
}
|
||||
#app-bottom-nav.is-compact-tab .bottom-dock {
|
||||
width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
|
||||
transform: translate(
|
||||
var(--nav-compact-translate-x, 0px),
|
||||
calc(var(--recipe-controls-lift, 0px) * -1)
|
||||
);
|
||||
}
|
||||
html.is-inline-search-open #app-bottom-nav.is-compact-tab .bottom-dock,
|
||||
html.is-inline-search-open #app-bottom-nav .bottom-dock {
|
||||
width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8));
|
||||
height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8));
|
||||
transform: translate(
|
||||
calc((var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8)) - var(--recipe-dock-width)) / 2),
|
||||
calc(var(--recipe-controls-lift, 0px) * -1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -665,14 +1260,18 @@
|
||||
</head>
|
||||
<body class="m-0 min-h-dvh bg-white text-gray-800 antialiased">
|
||||
<script>
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const useDarkTheme = savedTheme ? savedTheme === 'dark' : true;
|
||||
if (useDarkTheme) document.documentElement.classList.add('dark');
|
||||
const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const applySystemTheme = (isDark) => {
|
||||
document.documentElement.classList.toggle('dark', isDark);
|
||||
const themeMeta = document.querySelector('meta[name="theme-color"]');
|
||||
if (themeMeta) {
|
||||
const appBgRgb = getComputedStyle(document.documentElement).getPropertyValue('--app-bg-rgb').trim();
|
||||
if (appBgRgb) themeMeta.setAttribute('content', `rgb(${appBgRgb})`);
|
||||
const varName = isDark ? '--sunken-deep-rgb' : '--app-bg-rgb';
|
||||
const rgb = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
|
||||
if (rgb) themeMeta.setAttribute('content', `rgb(${rgb})`);
|
||||
}
|
||||
};
|
||||
applySystemTheme(darkModeQuery.matches);
|
||||
darkModeQuery.addEventListener('change', (e) => applySystemTheme(e.matches));
|
||||
</script>
|
||||
|
||||
<div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
|
||||
@@ -682,7 +1281,7 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const APP_ASSET_VERSION = '20260417-svg7';
|
||||
const APP_ASSET_VERSION = '20260507-pantry-calendar-full-width';
|
||||
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
|
||||
const APP_VERSION_QUERY_KEY = 'appv';
|
||||
|
||||
|
||||
@@ -1,59 +1,32 @@
|
||||
function syncThemeToggleButton(btn, isDark) {
|
||||
if (!btn) return;
|
||||
const icon = btn.querySelector('i');
|
||||
if (icon) icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
|
||||
btn.setAttribute('aria-label', isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw');
|
||||
btn.title = isDark ? 'Jasny motyw' : 'Ciemny motyw';
|
||||
}
|
||||
|
||||
function setupThemeToggle() {
|
||||
const btn = document.getElementById('nav-theme-toggle');
|
||||
if (!btn) return;
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
const html = document.documentElement;
|
||||
const isDark = html.classList.toggle('dark');
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||
|
||||
syncThemeToggleButton(btn, isDark);
|
||||
|
||||
const meta = document.querySelector('meta[name="theme-color"]');
|
||||
if (meta) {
|
||||
const varName = isDark ? '--sunken-deep-rgb' : '--app-bg-rgb';
|
||||
const rgb = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
|
||||
if (rgb) meta.setAttribute('content', `rgb(${rgb})`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getBottomNavHTML() {
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
return `
|
||||
<nav id="app-bottom-nav" aria-label="Główna nawigacja">
|
||||
<div class="bottom-dock">
|
||||
<div id="app-bottom-nav-dock" class="bottom-dock">
|
||||
<button type="button" id="recipe-nav-toggle" class="recipe-nav-toggle" aria-label="Otwórz menu" aria-expanded="false" aria-controls="app-bottom-nav-dock">
|
||||
<i id="recipe-nav-toggle-icon" class="far fa-calendar-alt" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div class="nav-slot">
|
||||
<button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
|
||||
<i class="far fa-calendar-alt" aria-hidden="true"></i>
|
||||
<span class="nav-label">Planer</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-slot">
|
||||
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Przepisy">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Katalog">
|
||||
<i class="fas fa-book-open" aria-hidden="true"></i>
|
||||
<span class="nav-label">Katalog</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-slot">
|
||||
<button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
|
||||
<i class="fas fa-warehouse" aria-hidden="true"></i>
|
||||
<span class="nav-label">Spiżarnia</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-slot" style="position:relative;">
|
||||
<button type="button" data-tab="shopping" id="nav-shopping" class="nav-tab" aria-label="Zakupy">
|
||||
<i class="fas fa-cart-shopping" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-slot">
|
||||
<button type="button" id="nav-theme-toggle" class="nav-action" aria-label="${isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw'}" title="${isDark ? 'Jasny motyw' : 'Ciemny motyw'}">
|
||||
<i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i>
|
||||
<span class="nav-label">Zakupy</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -70,12 +43,130 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
|
||||
if (!main || !planner || !pantry || !shopping || !nav) return;
|
||||
|
||||
const TABS = ['recipes', 'planner', 'pantry', 'shopping'];
|
||||
const COLLAPSED_TABS = new Set();
|
||||
const EXTRA_CONTROL_SLOTS = { recipes: 1, planner: 1, pantry: 1, shopping: 1 };
|
||||
const DOUBLE_COMPACT_TABS = new Set();
|
||||
const COLLAPSED_TAB_ICON = {
|
||||
recipes: 'fas fa-book-open',
|
||||
planner: 'far fa-calendar-alt',
|
||||
pantry: 'fas fa-warehouse',
|
||||
shopping: 'fas fa-cart-shopping',
|
||||
};
|
||||
const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu', planner: 'Otwórz menu', pantry: 'Otwórz menu', shopping: 'Otwórz menu' };
|
||||
let isRecipeMenuOpen = false;
|
||||
let activeTab = 'planner';
|
||||
let previousTab = 'planner';
|
||||
let collapseTimer = null;
|
||||
|
||||
const syncRecipeNavMetrics = () => {
|
||||
const rootFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 16;
|
||||
const navStyles = window.getComputedStyle(nav);
|
||||
const navPadLeft = parseFloat(navStyles.paddingLeft) || 0;
|
||||
const navPadRight = parseFloat(navStyles.paddingRight) || 0;
|
||||
const navContentWidth = nav.clientWidth - navPadLeft - navPadRight;
|
||||
const isCompact = window.matchMedia('(max-width: 380px)').matches;
|
||||
const dockInset = (isCompact ? 1.6 : 2.4) * rootFontSize;
|
||||
const dockMax = (isCompact ? 22.5 : 24.5) * rootFontSize;
|
||||
const dockWidth = Math.min(navContentWidth - dockInset, dockMax);
|
||||
if (dockWidth <= 0) return;
|
||||
|
||||
const padLeft = (isCompact ? 0.38 : 0.42) * rootFontSize;
|
||||
const padRight = (isCompact ? 0.38 : 0.42) * rootFontSize;
|
||||
const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize;
|
||||
const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2);
|
||||
const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
|
||||
const bottomControlSize = controlSize * 1.28;
|
||||
const controlGap = 0.5 * rootFontSize;
|
||||
const inlineSearchControlSize = bottomControlSize * 0.8;
|
||||
const controlsLift = 0;
|
||||
const collapsedDockWidth = bottomControlSize;
|
||||
const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
|
||||
const inlineCollapsedSlotWidth = Math.max(28, inlineSearchControlSize - padLeft - padRight);
|
||||
const controlCluster = bottomControlSize + controlGap;
|
||||
const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster;
|
||||
const toolbarButtonLeft = dockLeft + dockWidth - bottomControlSize;
|
||||
const searchRight = Math.max(16, nav.clientWidth - toolbarButtonLeft + controlGap);
|
||||
const inlineSearchCloseLeft = dockLeft + dockWidth - inlineSearchControlSize;
|
||||
const inlineSearchFieldLeft = dockLeft + inlineSearchControlSize + controlGap;
|
||||
const inlineSearchFieldRight = Math.max(16, nav.clientWidth - inlineSearchCloseLeft + controlGap);
|
||||
|
||||
nav.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
|
||||
nav.style.setProperty('--recipe-collapsed-dock-width', `${collapsedDockWidth}px`);
|
||||
nav.style.setProperty('--recipe-toggle-size', `${collapsedSlotWidth}px`);
|
||||
nav.style.setProperty('--recipe-inline-search-control-size', `${inlineSearchControlSize}px`);
|
||||
nav.style.setProperty('--recipe-inline-toggle-size', `${inlineCollapsedSlotWidth}px`);
|
||||
nav.style.setProperty('--nav-compact-extra-width', `${compactExtraWidth}px`);
|
||||
nav.style.setProperty('--nav-compact-translate-x', `${compactExtraWidth * -0.5}px`);
|
||||
document.documentElement.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
|
||||
document.documentElement.style.setProperty('--catalog-menu-left', `${dockLeft}px`);
|
||||
document.documentElement.style.setProperty('--catalog-menu-width', `${collapsedDockWidth}px`);
|
||||
document.documentElement.style.setProperty('--catalog-filter-left', `${toolbarButtonLeft}px`);
|
||||
document.documentElement.style.setProperty('--catalog-search-btn-left', `${toolbarButtonLeft}px`);
|
||||
document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}px`);
|
||||
document.documentElement.style.setProperty('--catalog-inline-search-close-left', `${inlineSearchCloseLeft}px`);
|
||||
document.documentElement.style.setProperty('--catalog-inline-search-field-left', `${inlineSearchFieldLeft}px`);
|
||||
document.documentElement.style.setProperty('--catalog-inline-search-field-right', `${inlineSearchFieldRight}px`);
|
||||
document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`);
|
||||
document.documentElement.style.setProperty('--recipe-bottom-control-size', `${bottomControlSize}px`);
|
||||
document.documentElement.style.setProperty('--recipe-inline-search-control-size', `${inlineSearchControlSize}px`);
|
||||
document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
|
||||
};
|
||||
|
||||
const updateToggleForTab = (tab) => {
|
||||
const icon = document.getElementById('recipe-nav-toggle-icon');
|
||||
const button = document.getElementById('recipe-nav-toggle');
|
||||
const nextIconClass = COLLAPSED_TAB_ICON[tab];
|
||||
if (icon && nextIconClass) {
|
||||
icon.className = nextIconClass;
|
||||
}
|
||||
if (button && COLLAPSED_TAB_LABEL[tab]) {
|
||||
button.setAttribute('aria-label', COLLAPSED_TAB_LABEL[tab]);
|
||||
}
|
||||
};
|
||||
|
||||
const setRecipeMenuOpen = (open) => {
|
||||
syncRecipeNavMetrics();
|
||||
window.clearTimeout(collapseTimer);
|
||||
isRecipeMenuOpen = open;
|
||||
nav.classList.remove('is-nav-collapsing');
|
||||
nav.classList.toggle('is-nav-menu-open', open);
|
||||
document.documentElement.classList.toggle('is-nav-menu-open', open);
|
||||
document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
};
|
||||
|
||||
const apply = (tab) => {
|
||||
const wasCollapsedTab = COLLAPSED_TABS.has(previousTab);
|
||||
const isCollapsedTab = COLLAPSED_TABS.has(tab);
|
||||
const isCompactTab = (EXTRA_CONTROL_SLOTS[tab] || 0) > 0;
|
||||
const isDoubleCompact = DOUBLE_COMPACT_TABS.has(tab);
|
||||
main.classList.toggle('hidden', tab !== 'recipes');
|
||||
planner.classList.toggle('hidden', tab !== 'planner');
|
||||
pantry.classList.toggle('hidden', tab !== 'pantry');
|
||||
shopping.classList.toggle('hidden', tab !== 'shopping');
|
||||
nav.classList.toggle('is-collapsed-tab', isCollapsedTab);
|
||||
nav.classList.toggle('is-compact-tab', isCompactTab);
|
||||
nav.classList.toggle('is-double-compact', isDoubleCompact);
|
||||
activeTab = tab;
|
||||
updateToggleForTab(tab);
|
||||
syncRecipeNavMetrics();
|
||||
setRecipeMenuOpen(false);
|
||||
|
||||
if (isCollapsedTab && (!wasCollapsedTab || tab !== previousTab)) {
|
||||
nav.classList.add('is-nav-menu-open', 'is-nav-collapsing');
|
||||
document.documentElement.classList.add('is-nav-menu-open');
|
||||
document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', 'false');
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
nav.classList.remove('is-nav-menu-open');
|
||||
document.documentElement.classList.remove('is-nav-menu-open');
|
||||
collapseTimer = window.setTimeout(() => {
|
||||
nav.classList.remove('is-nav-collapsing');
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (tab === 'pantry' && typeof refreshPantry === 'function') refreshPantry();
|
||||
if (tab === 'shopping' && typeof refreshShoppingList === 'function') refreshShoppingList();
|
||||
@@ -90,18 +181,60 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
|
||||
else btn.removeAttribute('aria-current');
|
||||
}
|
||||
});
|
||||
|
||||
window.dispatchEvent(new CustomEvent('app-tab-change', { detail: { tab } }));
|
||||
previousTab = tab;
|
||||
};
|
||||
|
||||
nav.addEventListener('click', (e) => {
|
||||
const toggle = e.target.closest('#recipe-nav-toggle');
|
||||
if (toggle) {
|
||||
e.stopPropagation();
|
||||
const wasInlineSearchOpen = document.documentElement.classList.contains('is-inline-search-open');
|
||||
if (wasInlineSearchOpen) {
|
||||
setRecipeMenuOpen(false);
|
||||
window.closeRecipeSearch?.();
|
||||
window.closePantrySearch?.();
|
||||
window.closePantryFilter?.();
|
||||
window.closeShoppingCalendar?.();
|
||||
window.closeShoppingBoughtPopup?.();
|
||||
window.closeFilters?.();
|
||||
return;
|
||||
}
|
||||
setRecipeMenuOpen(!isRecipeMenuOpen);
|
||||
window.closeRecipeSearch?.();
|
||||
window.closePantrySearch?.();
|
||||
window.closePantryFilter?.();
|
||||
window.closeShoppingCalendar?.();
|
||||
window.closeShoppingBoughtPopup?.();
|
||||
window.closeFilters?.();
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = e.target.closest('.nav-tab[data-tab]');
|
||||
if (!btn || btn.hasAttribute('disabled')) return;
|
||||
const tab = btn.getAttribute('data-tab');
|
||||
if (TABS.includes(tab)) apply(tab);
|
||||
});
|
||||
|
||||
setupThemeToggle();
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!isRecipeMenuOpen || !nav.classList.contains('is-collapsed-tab')) return;
|
||||
if (e.composedPath().includes(nav)) return;
|
||||
setRecipeMenuOpen(false);
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && isRecipeMenuOpen) setRecipeMenuOpen(false);
|
||||
});
|
||||
|
||||
window.addEventListener('resize', syncRecipeNavMetrics);
|
||||
|
||||
apply('planner');
|
||||
|
||||
window.switchAppTab = (tab) => {
|
||||
if (TABS.includes(tab)) apply(tab);
|
||||
};
|
||||
|
||||
window.refreshStockViews = () => {
|
||||
if (typeof refreshPantry === 'function') refreshPantry();
|
||||
};
|
||||
|
||||
270
js/ui/calendarPopover.js
Normal file
270
js/ui/calendarPopover.js
Normal file
@@ -0,0 +1,270 @@
|
||||
const STYLE_ID = 'calendar-popover-liquid-styles';
|
||||
const DEFAULT_POPOVER_CLASS = 'absolute left-0 right-0 top-full mt-2 z-[50] transition-all duration-200 pointer-events-none';
|
||||
const DEFAULT_POPOVER_STYLE = 'opacity:0; transform:translateY(-6px) scale(0.98);';
|
||||
const DEFAULT_PANEL_CLASS = 'calendar-liquid-panel rounded-[1.35rem] py-3';
|
||||
const DEFAULT_PANEL_STYLE = 'background-image:none !important;';
|
||||
|
||||
const DEFAULT_OPEN_TRIGGER_STYLE = {
|
||||
background: 'rgb(var(--sunken-rgb))',
|
||||
borderColor: 'rgb(var(--border-input-rgb))',
|
||||
};
|
||||
|
||||
const DEFAULT_CLOSED_TRIGGER_STYLE = {
|
||||
background: 'rgb(var(--card-rgb))',
|
||||
borderColor: 'rgb(var(--border-card-rgb))',
|
||||
};
|
||||
|
||||
export function ensureCalendarPopoverStyles() {
|
||||
if (typeof document === 'undefined') return;
|
||||
if (document.getElementById(STYLE_ID)) return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.id = STYLE_ID;
|
||||
style.textContent = `
|
||||
.calendar-liquid-panel {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.32) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
|
||||
0 8px 20px rgba(var(--overlay-rgb), 0.14),
|
||||
0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
|
||||
backdrop-filter: blur(28px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
}
|
||||
|
||||
.dark .calendar-liquid-panel {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.24),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
||||
0 10px 24px rgba(0, 0, 0, 0.3),
|
||||
0 24px 54px rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
|
||||
.calendar-liquid-btn {
|
||||
background: rgba(255, 255, 255, 0.16) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.24) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.45),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.08),
|
||||
0 6px 14px rgba(var(--overlay-rgb), 0.14) !important;
|
||||
backdrop-filter: blur(22px) saturate(165%);
|
||||
-webkit-backdrop-filter: blur(22px) saturate(165%);
|
||||
transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.calendar-liquid-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.22) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.dark .calendar-liquid-btn {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.2),
|
||||
0 8px 18px rgba(0, 0, 0, 0.28) !important;
|
||||
}
|
||||
|
||||
.dark .calendar-liquid-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.calendar-liquid-btn input,
|
||||
.calendar-liquid-btn input:focus,
|
||||
.calendar-liquid-btn input:active {
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
background-image: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
appearance: none !important;
|
||||
-webkit-appearance: none !important;
|
||||
-moz-appearance: textfield !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
.calendar-liquid-btn input[type='number']::-webkit-outer-spin-button,
|
||||
.calendar-liquid-btn input[type='number']::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.calendar-liquid-btn input:-webkit-autofill,
|
||||
.calendar-liquid-btn input:-webkit-autofill:hover,
|
||||
.calendar-liquid-btn input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: rgb(var(--text-body-rgb));
|
||||
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
|
||||
box-shadow: 0 0 0 1000px transparent inset !important;
|
||||
transition: background-color 9999s ease-in-out 0s;
|
||||
}
|
||||
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
function byId(idOrElement) {
|
||||
if (!idOrElement) return null;
|
||||
if (typeof idOrElement === 'string') return document.getElementById(idOrElement);
|
||||
return idOrElement;
|
||||
}
|
||||
|
||||
function setStyles(el, styles = {}, important = false) {
|
||||
if (!el) return;
|
||||
Object.entries(styles).forEach(([name, value]) => {
|
||||
if (value == null) return;
|
||||
if (important) {
|
||||
const cssName = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
|
||||
el.style.setProperty(cssName, value, 'important');
|
||||
}
|
||||
else el.style[name] = value;
|
||||
});
|
||||
}
|
||||
|
||||
export function createCalendarPopoverHTML({
|
||||
id,
|
||||
calendarHTML,
|
||||
popoverClass = DEFAULT_POPOVER_CLASS,
|
||||
popoverStyle = DEFAULT_POPOVER_STYLE,
|
||||
panelClass = DEFAULT_PANEL_CLASS,
|
||||
panelStyle = DEFAULT_PANEL_STYLE,
|
||||
wrapInPanel = true,
|
||||
}) {
|
||||
ensureCalendarPopoverStyles();
|
||||
const body = wrapInPanel
|
||||
? `<div class="${panelClass}" style="${panelStyle}">${calendarHTML}</div>`
|
||||
: calendarHTML;
|
||||
return `
|
||||
<div id="${id}" class="${popoverClass}" style="${popoverStyle}">
|
||||
${body}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function syncCalendarPopoverVisibility({
|
||||
popup,
|
||||
isOpen,
|
||||
chevron,
|
||||
chevronOpenTransform = 'rotate(180deg)',
|
||||
chevronClosedTransform = 'rotate(0deg)',
|
||||
trigger,
|
||||
openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE,
|
||||
closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE,
|
||||
triggerImportant = false,
|
||||
}) {
|
||||
const popupEl = byId(popup);
|
||||
if (popupEl) {
|
||||
popupEl.style.opacity = isOpen ? '1' : '0';
|
||||
popupEl.style.transform = isOpen ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
|
||||
popupEl.style.pointerEvents = isOpen ? 'auto' : 'none';
|
||||
}
|
||||
|
||||
const chevronEl = byId(chevron);
|
||||
if (chevronEl) chevronEl.style.transform = isOpen ? chevronOpenTransform : chevronClosedTransform;
|
||||
|
||||
setStyles(
|
||||
byId(trigger),
|
||||
isOpen ? openTriggerStyle : closedTriggerStyle,
|
||||
triggerImportant,
|
||||
);
|
||||
}
|
||||
|
||||
export function stabilizeSwipeCalendarLayout({
|
||||
calendar,
|
||||
viewport,
|
||||
hideViewport = false,
|
||||
maxAttempts = 8,
|
||||
}) {
|
||||
const viewportEl = byId(viewport);
|
||||
if (hideViewport && viewportEl) {
|
||||
viewportEl.style.opacity = '0';
|
||||
viewportEl.style.visibility = 'hidden';
|
||||
viewportEl.style.transition = 'opacity 120ms ease';
|
||||
}
|
||||
|
||||
calendar?.render?.();
|
||||
|
||||
const ensureStableLayout = (attempt = 0) => {
|
||||
const width = viewportEl ? (viewportEl.clientWidth || viewportEl.getBoundingClientRect().width) : 0;
|
||||
if (viewportEl && width < 8 && attempt < maxAttempts) {
|
||||
requestAnimationFrame(() => ensureStableLayout(attempt + 1));
|
||||
return;
|
||||
}
|
||||
|
||||
calendar?.reapplyLayout?.();
|
||||
calendar?.resetTrackPosition?.();
|
||||
requestAnimationFrame(() => {
|
||||
calendar?.reapplyLayout?.();
|
||||
calendar?.resetTrackPosition?.();
|
||||
if (hideViewport && viewportEl) {
|
||||
viewportEl.style.visibility = 'visible';
|
||||
viewportEl.style.opacity = '1';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
requestAnimationFrame(() => ensureStableLayout());
|
||||
}
|
||||
|
||||
export function createCalendarPopoverController({
|
||||
popupId,
|
||||
viewportId,
|
||||
triggerId,
|
||||
chevronId,
|
||||
chevronOpenTransform,
|
||||
chevronClosedTransform,
|
||||
getCalendar,
|
||||
openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE,
|
||||
closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE,
|
||||
triggerImportant = false,
|
||||
hideViewportDuringLayout = false,
|
||||
}) {
|
||||
const calendar = () => (typeof getCalendar === 'function' ? getCalendar() : null);
|
||||
|
||||
const sync = (isOpen) => {
|
||||
syncCalendarPopoverVisibility({
|
||||
popup: popupId,
|
||||
isOpen,
|
||||
chevron: chevronId,
|
||||
chevronOpenTransform,
|
||||
chevronClosedTransform,
|
||||
trigger: triggerId,
|
||||
openTriggerStyle,
|
||||
closedTriggerStyle,
|
||||
triggerImportant,
|
||||
});
|
||||
};
|
||||
|
||||
const stabilize = () => {
|
||||
stabilizeSwipeCalendarLayout({
|
||||
calendar: calendar(),
|
||||
viewport: viewportId,
|
||||
hideViewport: hideViewportDuringLayout,
|
||||
});
|
||||
};
|
||||
|
||||
const close = ({ clearPendingRange = false } = {}) => {
|
||||
sync(false);
|
||||
const instance = calendar();
|
||||
if (clearPendingRange) instance?.clearPendingRange?.();
|
||||
instance?.resetTrackPosition?.();
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
sync(true);
|
||||
stabilize();
|
||||
};
|
||||
|
||||
return {
|
||||
sync,
|
||||
open,
|
||||
close,
|
||||
stabilize,
|
||||
};
|
||||
}
|
||||
75
js/ui/filterPopover.js
Normal file
75
js/ui/filterPopover.js
Normal file
@@ -0,0 +1,75 @@
|
||||
const STYLE_ID = 'filter-popover-liquid-styles';
|
||||
|
||||
export function ensureFilterPopoverStyles() {
|
||||
if (typeof document === 'undefined') return;
|
||||
if (document.getElementById(STYLE_ID)) return;
|
||||
const style = document.createElement('style');
|
||||
style.id = STYLE_ID;
|
||||
style.textContent = `
|
||||
.filter-liquid-surface {
|
||||
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.78);
|
||||
--filter-liquid-border: rgba(255, 255, 255, 0.32);
|
||||
--filter-liquid-chip-bg: rgba(var(--surface-rgb), 0.55);
|
||||
--filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.95);
|
||||
--filter-liquid-chip-active-border: rgba(255, 255, 255, 0.6);
|
||||
--filter-liquid-track-bg: rgba(var(--overlay-rgb), 0.16);
|
||||
--filter-liquid-accent-bg: rgba(255, 255, 255, 0.72);
|
||||
--filter-liquid-text-active: rgb(var(--text-emphasis-rgb));
|
||||
--filter-liquid-text-secondary: rgb(var(--text-body-soft-rgb));
|
||||
--filter-liquid-text-muted: rgb(var(--text-muted-rgb));
|
||||
--filter-liquid-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
|
||||
0 8px 20px rgba(var(--overlay-rgb), 0.16),
|
||||
0 22px 52px rgba(var(--overlay-rgb), 0.24);
|
||||
}
|
||||
|
||||
.dark .filter-liquid-surface {
|
||||
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.82);
|
||||
--filter-liquid-border: rgba(255, 255, 255, 0.12);
|
||||
--filter-liquid-chip-bg: rgba(255, 255, 255, 0.06);
|
||||
--filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.3);
|
||||
--filter-liquid-chip-active-border: rgba(255, 255, 255, 0.38);
|
||||
--filter-liquid-track-bg: rgba(255, 255, 255, 0.1);
|
||||
--filter-liquid-accent-bg: rgba(255, 255, 255, 0.32);
|
||||
--filter-liquid-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.24),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
||||
0 10px 24px rgba(0, 0, 0, 0.36),
|
||||
0 26px 60px rgba(0, 0, 0, 0.46);
|
||||
}
|
||||
|
||||
.filter-liquid-panel {
|
||||
isolation: isolate;
|
||||
background: var(--filter-liquid-panel-bg) !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid var(--filter-liquid-border) !important;
|
||||
box-shadow: var(--filter-liquid-shadow) !important;
|
||||
backdrop-filter: blur(28px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
}
|
||||
|
||||
.filter-liquid-surface.filter-liquid-panel-soft {
|
||||
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.52);
|
||||
}
|
||||
|
||||
.dark .filter-liquid-surface.filter-liquid-panel-soft {
|
||||
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.6);
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
ensureFilterPopoverStyles();
|
||||
|
||||
export function filterChipStyle(active) {
|
||||
const background = active ? 'var(--filter-liquid-chip-active-bg)' : 'var(--filter-liquid-chip-bg)';
|
||||
const color = active ? 'var(--filter-liquid-text-active)' : 'var(--filter-liquid-text-secondary)';
|
||||
const borderRule = active
|
||||
? 'border:1px solid var(--filter-liquid-chip-active-border);'
|
||||
: 'border:1px solid transparent;';
|
||||
const shadow = active
|
||||
? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(var(--overlay-rgb),0.18);'
|
||||
: 'box-shadow:none;';
|
||||
return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
|
||||
}
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
updateKitchenItemAmount,
|
||||
} from '../services/pantryShopping.js?v=2';
|
||||
import { showAppToast } from './toast.js';
|
||||
import { ensureCalendarPopoverStyles } from './calendarPopover.js';
|
||||
|
||||
const CATEGORY_ICONS = {
|
||||
pieczywo: 'fa-bread-slice',
|
||||
@@ -79,7 +80,7 @@ function mediaHtml(image, icon, sizeClass = 'w-9 h-9', radiusClass = 'rounded-lg
|
||||
const fit = image.endsWith('.svg') ? 'object-contain' : 'object-cover';
|
||||
return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} ${fit} shrink-0">`;
|
||||
}
|
||||
return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb));"><i class="fas ${icon} text-sm" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
|
||||
return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:transparent;"><i class="fas ${icon} text-sm" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
|
||||
}
|
||||
|
||||
function compactMetaText(text, tone = 'default') {
|
||||
@@ -123,6 +124,11 @@ function formatPackCount(amount, packSize) {
|
||||
return `${formatPreciseQty((Number(amount) || 0) / Number(packSize))} opak.`;
|
||||
}
|
||||
|
||||
function parseQtyInput(value) {
|
||||
const normalized = String(value ?? '').trim().replace(',', '.');
|
||||
return normalizeQty(Number(normalized) || 0);
|
||||
}
|
||||
|
||||
function getQtyStepMeta(def, product = null) {
|
||||
const productPackSize = Number(product?.packSize);
|
||||
if (Number.isFinite(productPackSize) && productPackSize > 0) {
|
||||
@@ -152,17 +158,18 @@ function getQtyStepMeta(def, product = null) {
|
||||
export function getIngredientCardHTML({
|
||||
idBase,
|
||||
overlayClass = 'fixed inset-0 z-[70] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5',
|
||||
overlayStyle = 'pointer-events:none; background:rgba(var(--overlay-rgb),0.5);',
|
||||
cardClass = 'relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden',
|
||||
cardStyle = 'background:rgb(var(--app-bg-rgb)); pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;',
|
||||
overlayStyle = 'pointer-events:none;',
|
||||
cardClass = 'calendar-liquid-panel relative w-full max-w-xs rounded-2xl overflow-hidden',
|
||||
cardStyle = 'pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;',
|
||||
} = {}) {
|
||||
if (!idBase) throw new Error('getIngredientCardHTML requires idBase');
|
||||
ensureCalendarPopoverStyles();
|
||||
return `
|
||||
<div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}">
|
||||
<div id="${idBase}" class="${cardClass}" style="${cardStyle}">
|
||||
<div class="relative px-4 pt-4 pb-2">
|
||||
<div class="flex items-start gap-3 pr-10">
|
||||
<div id="${idBase}-hero" class="relative w-20 h-20 rounded-2xl flex items-center justify-center shrink-0 overflow-hidden" style="background:rgb(var(--card-rgb));">
|
||||
<div id="${idBase}-hero" class="relative w-20 h-20 rounded-2xl flex items-center justify-center shrink-0 overflow-hidden" style="background:transparent;">
|
||||
<img id="${idBase}-img" class="w-full h-full hidden" alt="" />
|
||||
<div id="${idBase}-fallback" class="absolute inset-0 flex items-center justify-center">
|
||||
<i id="${idBase}-fallback-icon" class="fas fa-box-open text-2xl" style="color:rgb(var(--text-subdued-rgb));"></i>
|
||||
@@ -170,7 +177,7 @@ export function getIngredientCardHTML({
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pt-0.5">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<button type="button" id="${idBase}-back" class="hidden w-5 h-5 rounded-full items-center justify-center shrink-0" style="background:rgb(var(--card-rgb)); color:rgb(var(--text-body-rgb));" aria-label="Wróć do składnika">
|
||||
<button type="button" id="${idBase}-back" class="calendar-liquid-btn hidden w-5 h-5 rounded-full items-center justify-center shrink-0" style="color:rgb(var(--text-body-rgb));" aria-label="Wróć do składnika">
|
||||
<i class="fas fa-chevron-left text-[9px]"></i>
|
||||
</button>
|
||||
<p id="${idBase}-category" class="text-[10px] font-semibold uppercase tracking-wider truncate" style="color:rgb(var(--success-rgb));"></p>
|
||||
@@ -179,7 +186,7 @@ export function getIngredientCardHTML({
|
||||
<p id="${idBase}-subtitle" class="text-[11px] mt-0.5 hidden" style="color:rgb(var(--text-dim-rgb));"></p>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" id="${idBase}-close" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="background:rgb(var(--card-rgb)); color:rgb(var(--text-body-rgb));" aria-label="Zamknij">
|
||||
<button type="button" id="${idBase}-close" class="calendar-liquid-btn absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="color:rgb(var(--text-body-rgb));" aria-label="Zamknij">
|
||||
<i class="fas fa-times text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -371,28 +378,28 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
|
||||
<p class="text-[16px] font-bold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(stockValueLabel)}</p>
|
||||
${stockSubLabel ? `<p class="text-[11px] mt-1" style="color:rgb(var(--text-dim-rgb));">${esc(stockSubLabel)}</p>` : ''}
|
||||
</div>
|
||||
<button type="button" class="ingredient-card-stock-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="background:${state.stockEditorOpen ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-soft-rgb))'}; color:${state.stockEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};">
|
||||
<button type="button" class="calendar-liquid-btn ingredient-card-stock-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="color:${state.stockEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};">
|
||||
${esc(actionLabel)}
|
||||
</button>
|
||||
</div>
|
||||
${state.stockEditorOpen ? `
|
||||
<div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));">
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" class="ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz szkic zapasu">
|
||||
<button type="button" class="calendar-liquid-btn ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz szkic zapasu">
|
||||
<i class="fas fa-minus text-xs"></i>
|
||||
</button>
|
||||
<label class="flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2" style="background:rgb(var(--card-soft-rgb));">
|
||||
<input type="number" min="0" step="${usesPackStep ? '1' : step}" value="${draftInputValue}" class="ingredient-card-stock-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
|
||||
<label class="calendar-liquid-btn flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2">
|
||||
<input type="text" inputmode="decimal" value="${draftInputValue}" class="ingredient-card-stock-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
|
||||
<span class="text-[12px] font-medium shrink-0" style="color:rgb(var(--text-dim-rgb));">${esc(draftInputUnit)}</span>
|
||||
</label>
|
||||
<button type="button" class="ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ szkic zapasu">
|
||||
<button type="button" class="calendar-liquid-btn ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ szkic zapasu">
|
||||
<i class="fas fa-plus text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
${usesPackStep ? `<p class="text-[10px] mt-2 text-right" style="color:rgb(var(--text-dim-rgb));">${esc(formatQtyWithUnit(draftQty, def.pantryUnit))}</p>` : ''}
|
||||
<div class="flex items-center justify-between gap-3 mt-3">
|
||||
<button type="button" class="ingredient-card-stock-clear text-[11px] font-semibold" style="color:rgb(var(--text-dim-rgb));">Wyzeruj</button>
|
||||
<button type="button" class="ingredient-card-stock-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="background:rgb(var(--text-body-rgb)); color:rgb(var(--app-bg-rgb));">Zapisz</button>
|
||||
<button type="button" class="calendar-liquid-btn ingredient-card-stock-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="color:rgb(var(--text-emphasis-rgb));">Zapisz</button>
|
||||
</div>
|
||||
</div>` : ''}
|
||||
</div>`;
|
||||
@@ -420,8 +427,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
|
||||
|
||||
wrap.querySelector('.ingredient-card-stock-input')?.addEventListener('input', (event) => {
|
||||
state.stockDraftQty = usesPackStep
|
||||
? normalizeQty((Number(event.target.value) || 0) * step)
|
||||
: normalizeQty(event.target.value);
|
||||
? normalizeQty(parseQtyInput(event.target.value) * step)
|
||||
: parseQtyInput(event.target.value);
|
||||
});
|
||||
|
||||
wrap.querySelector('.ingredient-card-stock-clear')?.addEventListener('click', () => {
|
||||
@@ -432,8 +439,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
|
||||
wrap.querySelector('.ingredient-card-stock-save')?.addEventListener('click', () => {
|
||||
const input = wrap.querySelector('.ingredient-card-stock-input');
|
||||
const nextQty = usesPackStep
|
||||
? normalizeQty((Number(input?.value) || 0) * step)
|
||||
: normalizeQty(input?.value ?? state.stockDraftQty ?? qty);
|
||||
? normalizeQty(parseQtyInput(input?.value) * step)
|
||||
: parseQtyInput(input?.value ?? state.stockDraftQty ?? qty);
|
||||
if (product) {
|
||||
setPantryProductQty(def.id, product.id, nextQty);
|
||||
} else {
|
||||
@@ -480,21 +487,21 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
|
||||
<p class="text-[16px] font-bold tabular-nums" style="color:${hasShoppingItem ? 'rgb(var(--text-body-rgb))' : 'rgb(var(--text-dim-rgb))'};">${esc(shopValueLabel)}</p>
|
||||
${shopSubLabel ? `<p class="text-[11px] mt-1" style="color:rgb(var(--text-dim-rgb));">${esc(shopSubLabel)}</p>` : ''}
|
||||
</div>
|
||||
<button type="button" class="ingredient-card-shop-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="background:${state.shopEditorOpen ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-soft-rgb))'}; color:${state.shopEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};">
|
||||
<button type="button" class="calendar-liquid-btn ingredient-card-shop-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="color:${state.shopEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};">
|
||||
${esc(actionLabel)}
|
||||
</button>
|
||||
</div>
|
||||
${state.shopEditorOpen ? `
|
||||
<div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));">
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" class="ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz ilość na liście">
|
||||
<button type="button" class="calendar-liquid-btn ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz ilość na liście">
|
||||
<i class="fas fa-minus text-xs"></i>
|
||||
</button>
|
||||
<label class="flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2" style="background:rgb(var(--card-soft-rgb));">
|
||||
<input type="number" min="0" step="${usesPackStep ? '1' : defaultAmount}" value="${shopInputValue}" class="ingredient-card-shop-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
|
||||
<label class="calendar-liquid-btn flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2">
|
||||
<input type="text" inputmode="decimal" value="${shopInputValue}" class="ingredient-card-shop-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
|
||||
<span class="text-[12px] font-medium shrink-0" style="color:rgb(var(--text-dim-rgb));">${esc(shopInputUnit)}</span>
|
||||
</label>
|
||||
<button type="button" class="ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ ilość na liście">
|
||||
<button type="button" class="calendar-liquid-btn ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ ilość na liście">
|
||||
<i class="fas fa-plus text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -503,7 +510,7 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
|
||||
${hasShoppingItem
|
||||
? '<button type="button" class="ingredient-card-shop-remove text-[11px] font-semibold" style="color:rgb(var(--text-dim-rgb));">Usuń z listy</button>'
|
||||
: '<span></span>'}
|
||||
<button type="button" class="ingredient-card-shop-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="background:rgb(var(--text-body-rgb)); color:rgb(var(--app-bg-rgb));">Zapisz</button>
|
||||
<button type="button" class="calendar-liquid-btn ingredient-card-shop-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="color:rgb(var(--text-emphasis-rgb));">Zapisz</button>
|
||||
</div>
|
||||
</div>` : ''}
|
||||
</div>`;
|
||||
@@ -531,8 +538,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
|
||||
|
||||
wrap.querySelector('.ingredient-card-shop-input')?.addEventListener('input', (event) => {
|
||||
state.shopDraftQty = usesPackStep
|
||||
? normalizeQty((Number(event.target.value) || 0) * step)
|
||||
: normalizeQty(event.target.value);
|
||||
? normalizeQty(parseQtyInput(event.target.value) * step)
|
||||
: parseQtyInput(event.target.value);
|
||||
});
|
||||
|
||||
wrap.querySelector('.ingredient-card-shop-remove')?.addEventListener('click', () => {
|
||||
@@ -549,8 +556,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
|
||||
wrap.querySelector('.ingredient-card-shop-save')?.addEventListener('click', () => {
|
||||
const input = wrap.querySelector('.ingredient-card-shop-input');
|
||||
const nextAmount = usesPackStep
|
||||
? normalizeQty((Number(input?.value) || 0) * step)
|
||||
: normalizeQty(input?.value ?? state.shopDraftQty ?? defaultAmount);
|
||||
? normalizeQty(parseQtyInput(input?.value) * step)
|
||||
: parseQtyInput(input?.value ?? state.shopDraftQty ?? defaultAmount);
|
||||
let toastText = null;
|
||||
if (shoppingItem) {
|
||||
updateKitchenItemAmount(KITCHEN_LIST_ID, shoppingItem.id, nextAmount);
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import {
|
||||
addDays,
|
||||
addMonths,
|
||||
addWeeks,
|
||||
sameDay,
|
||||
sameMonth,
|
||||
startOfDay,
|
||||
startOfMonth,
|
||||
startOfWeekMonday,
|
||||
@@ -21,10 +24,19 @@ export const CALENDAR_WEEKDAYS_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'so', 'nd
|
||||
export const CALENDAR_DAY_ATTR = 'data-calendar-day';
|
||||
export const CALENDAR_HANDLE_CLASS = 'block h-1 w-10 rounded-full bg-[rgb(var(--text-subdued-rgb))]/75';
|
||||
|
||||
function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
|
||||
function escapeAttrValue(value) {
|
||||
return String(value)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/</g, '<');
|
||||
}
|
||||
|
||||
function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}, options = {}) {
|
||||
const { mode, selectedDate } = meta;
|
||||
const isSelected = selectedDate && sameDay(day, selectedDate);
|
||||
const showIndicator = !!dayState.showIndicator;
|
||||
const isSelected = typeof meta.isSelected === 'boolean'
|
||||
? meta.isSelected
|
||||
: !!(selectedDate && sameDay(day, selectedDate));
|
||||
const showIndicator = !!(dayState.showIndicator || dayState.showDot);
|
||||
const isDisabled = !!dayState.disabled;
|
||||
const isDimmed = !!dayState.dimmed && !isSelected;
|
||||
const defaultBg = 'rgb(var(--card-soft-rgb))';
|
||||
@@ -34,16 +46,25 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
|
||||
let bg;
|
||||
let borderColor;
|
||||
let text;
|
||||
let borderClass = 'border';
|
||||
let borderClass = theme.borderClass || 'border';
|
||||
let shadow = theme.shadow || 'none';
|
||||
|
||||
if (isSelected) {
|
||||
bg = theme.selectedBg || 'rgb(var(--card-rgb))';
|
||||
const keepDimmedBg = !!dayState.dimmed
|
||||
&& theme.selectedBg == null
|
||||
&& theme.selectedUsesDimmedBg !== false;
|
||||
bg = theme.selectedBg
|
||||
|| (keepDimmedBg ? (theme.dimmedBg ?? 'transparent') : null)
|
||||
|| theme.bg
|
||||
|| 'rgb(var(--card-rgb))';
|
||||
borderColor = theme.selectedBorder || 'rgb(var(--border-input-rgb))';
|
||||
text = theme.selectedText || 'rgb(var(--text-emphasis-rgb))';
|
||||
shadow = theme.selectedShadow || shadow;
|
||||
borderClass = theme.selectedBorderClass || 'border';
|
||||
} else if (isDimmed) {
|
||||
bg = theme.dimmedBg ?? 'transparent';
|
||||
text = theme.dimText || 'rgb(var(--text-faint-rgb))';
|
||||
borderClass = 'border-0';
|
||||
borderClass = theme.dimmedBorderClass || 'border-0';
|
||||
} else {
|
||||
bg = theme.bg || defaultBg;
|
||||
borderColor = theme.border || defaultBorder;
|
||||
@@ -53,18 +74,23 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
|
||||
const dot = isSelected ? (theme.selectedDot || 'rgb(var(--text-emphasis-rgb))') : (theme.dot || 'rgb(var(--text-faint-rgb))');
|
||||
const opacity = isDimmed ? String(theme.dimOpacity ?? 0.72) : '1';
|
||||
const borderStyle = borderColor ? `border-color:${borderColor};` : 'border:none;';
|
||||
const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full ${borderClass} text-xs font-medium transition-colors leading-tight overflow-hidden`;
|
||||
const extraClass = !isDisabled && options.dayClassName ? ` ${options.dayClassName}` : '';
|
||||
const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full ${borderClass}${extraClass} text-xs font-medium transition-colors leading-tight overflow-hidden`;
|
||||
const innerClass = mode === 'month'
|
||||
? 'relative flex h-full w-full flex-col items-center justify-center'
|
||||
: 'relative flex h-full w-full items-center justify-center';
|
||||
const dotBottom = mode === 'month' ? '0.24rem' : '0.2rem';
|
||||
const tagName = isDisabled ? 'div' : 'button';
|
||||
const buttonAttrs = isDisabled ? '' : ` type="button" ${dayAttr}="${day.getTime()}"`;
|
||||
const dayAttrValue = typeof options.getDayAttrValue === 'function'
|
||||
? options.getDayAttrValue(day, meta)
|
||||
: day.getTime();
|
||||
const buttonAttrs = isDisabled ? '' : ` type="button" ${dayAttr}="${escapeAttrValue(dayAttrValue)}"`;
|
||||
const dayStyle = options.dayStyle || '';
|
||||
|
||||
return `
|
||||
<${tagName}${buttonAttrs}
|
||||
class="${outerClass}"
|
||||
style="background:${bg};${borderStyle}color:${text};opacity:${opacity};">
|
||||
style="background:${bg};${borderStyle}color:${text};opacity:${opacity};box-shadow:${shadow};${dayStyle}">
|
||||
<span class="${innerClass}">
|
||||
<span class="text-[13px] font-semibold leading-none ${showIndicator ? '-translate-y-[0.18rem]' : ''}">${day.getDate()}</span>
|
||||
${showIndicator
|
||||
@@ -75,12 +101,13 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
|
||||
`;
|
||||
}
|
||||
|
||||
function getMonthCells(monthAnchor) {
|
||||
export function getCalendarMonthCells(monthAnchor, { fixedWeekCount = null } = {}) {
|
||||
const first = startOfMonth(monthAnchor);
|
||||
const startGrid = startOfWeekMonday(first);
|
||||
const cells = [];
|
||||
for (let i = 0; i < 42; i++) cells.push(addDays(startGrid, i));
|
||||
while (cells.length > 35 && cells.slice(-7).every((day) => day.getMonth() !== first.getMonth())) {
|
||||
const maxCells = fixedWeekCount ? fixedWeekCount * 7 : 42;
|
||||
for (let i = 0; i < maxCells; i++) cells.push(addDays(startGrid, i));
|
||||
while (!fixedWeekCount && cells.length > 35 && cells.slice(-7).every((day) => day.getMonth() !== first.getMonth())) {
|
||||
cells.splice(-7);
|
||||
}
|
||||
return { cells, month: first.getMonth() };
|
||||
@@ -99,7 +126,7 @@ function getDayState(day, meta, resolveDayState) {
|
||||
return {
|
||||
disabled: !!resolved.disabled,
|
||||
dimmed: !!resolved.dimmed,
|
||||
showIndicator: !!resolved.showIndicator,
|
||||
showIndicator: !!(resolved.showIndicator || resolved.showDot),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -116,8 +143,8 @@ export function createCalendarWeekdayHeaderHTML(labels = CALENDAR_WEEKDAYS_SHORT
|
||||
export function createCalendarTopbarHTML({
|
||||
todayId,
|
||||
wrapperClass = 'px-4 pt-4 pb-3 flex items-center justify-end',
|
||||
controlsStyle = 'background:rgb(var(--card-soft-rgb));border-color:rgb(var(--card-strong-rgb));',
|
||||
todayButtonActiveClass = 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-3 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap',
|
||||
controlsStyle = 'background:transparent;border-color:rgb(var(--card-strong-rgb));',
|
||||
todayButtonActiveClass = 'h-full shrink-0 inline-flex min-w-[7.25rem] max-w-[12.5rem] items-center justify-center rounded-full bg-transparent px-3 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap',
|
||||
todayButtonDimClass = 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-3 text-[10px] font-semibold leading-none text-[rgb(var(--text-faint-rgb))] cursor-default',
|
||||
}) {
|
||||
return `
|
||||
@@ -133,6 +160,45 @@ export function createCalendarTopbarHTML({
|
||||
`;
|
||||
}
|
||||
|
||||
export function createCollapsibleCalendarHTML({
|
||||
idPrefix = 'calendar',
|
||||
swipeZoneId = `${idPrefix}-swipe-zone`,
|
||||
weekWrapId = `${idPrefix}-week-wrap`,
|
||||
weekGridId = `${idPrefix}-week-grid`,
|
||||
monthWrapId = `${idPrefix}-month-wrap`,
|
||||
monthGridId = `${idPrefix}-month-grid`,
|
||||
toggleId = `${idPrefix}-mode-toggle`,
|
||||
iconId = `${idPrefix}-handle-icon`,
|
||||
wrapperClass = 'overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]',
|
||||
wrapperStyle = 'touch-action: none',
|
||||
weekWrapClass = 'px-3 overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]',
|
||||
weekWrapStyle = 'overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.75rem',
|
||||
monthWrapClass = 'px-3 bg-[rgb(var(--app-bg-rgb))]',
|
||||
monthWrapStyle = 'overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 0',
|
||||
weekGridClass = 'grid grid-cols-7 gap-1.5 max-w-full overflow-x-hidden',
|
||||
monthGridClass = 'grid grid-cols-7 gap-1.5',
|
||||
toggleClass = 'w-full flex items-center justify-center py-1 pb-2 pt-0.5 text-[rgb(var(--text-faint-rgb))] hover:text-[rgb(var(--text-body-soft-rgb))] transition-colors',
|
||||
toggleLabel = 'Przełącz widok kalendarza',
|
||||
weekdayLabels = CALENDAR_WEEKDAYS_SHORT,
|
||||
weekdayHeaderOptions = {},
|
||||
} = {}) {
|
||||
return `
|
||||
<div id="${swipeZoneId}" class="${wrapperClass}" style="${wrapperStyle}">
|
||||
<div id="${weekWrapId}" class="${weekWrapClass}" style="${weekWrapStyle}">
|
||||
${createCalendarWeekdayHeaderHTML(weekdayLabels, weekdayHeaderOptions)}
|
||||
<div id="${weekGridId}" class="${weekGridClass}"></div>
|
||||
</div>
|
||||
<div id="${monthWrapId}" class="${monthWrapClass}" style="${monthWrapStyle}">
|
||||
${createCalendarWeekdayHeaderHTML(weekdayLabels, weekdayHeaderOptions)}
|
||||
<div id="${monthGridId}" class="${monthGridClass}"></div>
|
||||
</div>
|
||||
<button id="${toggleId}" type="button" class="${toggleClass}" aria-label="${toggleLabel}">
|
||||
<i id="${iconId}" class="fas fa-chevron-down text-[10px]"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function formatCalendarMonthYear(date) {
|
||||
return `${CALENDAR_MONTHS_LONG[date.getMonth()]} ${date.getFullYear()}`;
|
||||
}
|
||||
@@ -141,6 +207,27 @@ export function formatCalendarSelectedDate(date) {
|
||||
return `${date.getDate()} ${CALENDAR_MONTHS_SHORT[date.getMonth()]} ${date.getFullYear()}`;
|
||||
}
|
||||
|
||||
export function formatCalendarWeekRange(weekAnchorDate) {
|
||||
const start = startOfWeekMonday(weekAnchorDate);
|
||||
const end = addDays(start, 6);
|
||||
const sameYear = start.getFullYear() === end.getFullYear();
|
||||
const sameMonth = sameYear && start.getMonth() === end.getMonth();
|
||||
|
||||
if (sameMonth) {
|
||||
return `${start.getDate()}–${end.getDate()} ${CALENDAR_MONTHS_SHORT[end.getMonth()]} ${end.getFullYear()}`;
|
||||
}
|
||||
if (sameYear) {
|
||||
return `${start.getDate()} ${CALENDAR_MONTHS_SHORT[start.getMonth()]} – ${end.getDate()} ${CALENDAR_MONTHS_SHORT[end.getMonth()]} ${end.getFullYear()}`;
|
||||
}
|
||||
return `${start.getDate()} ${CALENDAR_MONTHS_SHORT[start.getMonth()]} ${start.getFullYear()} – ${end.getDate()} ${CALENDAR_MONTHS_SHORT[end.getMonth()]} ${end.getFullYear()}`;
|
||||
}
|
||||
|
||||
export function formatCalendarPeriodLabel(mode, weekAnchorDate, monthAnchorDate) {
|
||||
return mode === 'week'
|
||||
? formatCalendarWeekRange(weekAnchorDate)
|
||||
: formatCalendarMonthYear(monthAnchorDate);
|
||||
}
|
||||
|
||||
export function isCalendarOnToday(mode, weekStart, monthAnchor, selectedDate) {
|
||||
const today = startOfDay(new Date());
|
||||
if (!sameDay(selectedDate, today)) return false;
|
||||
@@ -157,10 +244,13 @@ export function syncCalendarTodayButton(buttonEl, isOnToday, selectedDate, optio
|
||||
const {
|
||||
ariaLabelGo = 'Przejdź do dzisiejszego dnia',
|
||||
ariaLabelCurrent = 'Widok jest ustawiony na bieżący okres',
|
||||
labelText,
|
||||
} = options;
|
||||
const active = buttonEl.dataset.calActiveClass
|
||||
|| 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-3 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap';
|
||||
if (selectedDate != null) {
|
||||
|| 'h-full shrink-0 inline-flex min-w-[7.25rem] max-w-[12.5rem] items-center justify-center rounded-full bg-transparent px-3 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap';
|
||||
if (labelText != null) {
|
||||
buttonEl.textContent = labelText;
|
||||
} else if (selectedDate != null) {
|
||||
buttonEl.textContent = formatCalendarSelectedDate(selectedDate);
|
||||
}
|
||||
buttonEl.className = active;
|
||||
@@ -174,8 +264,13 @@ export function renderCalendarGrid({
|
||||
mode,
|
||||
anchorDate,
|
||||
selectedDate,
|
||||
isSelectedDate,
|
||||
resolveDayState,
|
||||
dayAttr = CALENDAR_DAY_ATTR,
|
||||
getDayAttrValue,
|
||||
dayClassName = '',
|
||||
dayStyle = '',
|
||||
fixedWeekCount = null,
|
||||
theme,
|
||||
}) {
|
||||
if (!gridEl) return;
|
||||
@@ -185,25 +280,48 @@ export function renderCalendarGrid({
|
||||
const cells = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const day = addDays(weekStart, i);
|
||||
const selected = typeof isSelectedDate === 'function'
|
||||
? !!isSelectedDate(day, { mode, selectedDate, inCurrentMonth: true })
|
||||
: !!(selectedDate && sameDay(day, selectedDate));
|
||||
const meta = {
|
||||
mode,
|
||||
selectedDate,
|
||||
inCurrentMonth: true,
|
||||
isSelected: selected,
|
||||
};
|
||||
cells.push(getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr, theme));
|
||||
cells.push(getCalendarDayHTML(
|
||||
day,
|
||||
meta,
|
||||
getDayState(day, meta, resolveDayState),
|
||||
dayAttr,
|
||||
theme,
|
||||
{ getDayAttrValue, dayClassName, dayStyle },
|
||||
));
|
||||
}
|
||||
gridEl.innerHTML = cells.join('');
|
||||
return;
|
||||
}
|
||||
|
||||
const { cells, month } = getMonthCells(anchorDate);
|
||||
const { cells, month } = getCalendarMonthCells(anchorDate, { fixedWeekCount });
|
||||
gridEl.innerHTML = cells.map((day) => {
|
||||
const inCurrentMonth = day.getMonth() === month;
|
||||
const selected = typeof isSelectedDate === 'function'
|
||||
? !!isSelectedDate(day, { mode, selectedDate, inCurrentMonth })
|
||||
: !!(selectedDate && sameDay(day, selectedDate));
|
||||
const meta = {
|
||||
mode,
|
||||
selectedDate,
|
||||
inCurrentMonth: day.getMonth() === month,
|
||||
inCurrentMonth,
|
||||
isSelected: selected,
|
||||
};
|
||||
return getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr, theme);
|
||||
return getCalendarDayHTML(
|
||||
day,
|
||||
meta,
|
||||
getDayState(day, meta, resolveDayState),
|
||||
dayAttr,
|
||||
theme,
|
||||
{ getDayAttrValue, dayClassName, dayStyle },
|
||||
);
|
||||
}).join('');
|
||||
}
|
||||
|
||||
@@ -215,6 +333,7 @@ export function renderCollapsibleCalendar({
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr = CALENDAR_DAY_ATTR,
|
||||
theme,
|
||||
}) {
|
||||
renderCalendarGrid({
|
||||
gridEl: weekGridEl,
|
||||
@@ -223,6 +342,7 @@ export function renderCollapsibleCalendar({
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr,
|
||||
theme,
|
||||
});
|
||||
renderCalendarGrid({
|
||||
gridEl: monthGridEl,
|
||||
@@ -231,6 +351,7 @@ export function renderCollapsibleCalendar({
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr,
|
||||
theme,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -256,6 +377,253 @@ export function syncCollapsibleCalendarMode({
|
||||
if (handleEl) handleEl.className = CALENDAR_HANDLE_CLASS;
|
||||
}
|
||||
|
||||
export function syncCollapsibleCalendarToggleIcon(iconEl, mode) {
|
||||
if (iconEl) iconEl.className = mode === 'month' ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
|
||||
}
|
||||
|
||||
export function bindCollapsibleCalendarSwipeGesture({
|
||||
zoneEl,
|
||||
weekWrapEl,
|
||||
monthWrapEl,
|
||||
getMode,
|
||||
setMode,
|
||||
getWeekAnchor,
|
||||
setWeekAnchor,
|
||||
getMonthAnchor,
|
||||
setMonthAnchor,
|
||||
getSelectedDate,
|
||||
setSelectedDate,
|
||||
rerender,
|
||||
resolveDayState,
|
||||
dayAttr = CALENDAR_DAY_ATTR,
|
||||
theme,
|
||||
selectOnNavigateOutside = true,
|
||||
enableVerticalModeSwipe = true,
|
||||
threshold = 40,
|
||||
animationMs = 260,
|
||||
} = {}) {
|
||||
if (!zoneEl) return () => {};
|
||||
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let ptrId = null;
|
||||
let moved = false;
|
||||
let axisLocked = null;
|
||||
let suppressClickUntil = 0;
|
||||
let animatingNav = false;
|
||||
|
||||
let dragWrap = null;
|
||||
let wrapWidth = 0;
|
||||
let prevGhost = null;
|
||||
let nextGhost = null;
|
||||
let prevWrapPosition = '';
|
||||
let prevWrapOverflow = '';
|
||||
|
||||
const getActiveWrap = () => (getMode?.() === 'week' ? weekWrapEl : monthWrapEl);
|
||||
|
||||
const buildGhost = (anchorDate, mode) => {
|
||||
if (!dragWrap) return null;
|
||||
const ghost = dragWrap.cloneNode(true);
|
||||
ghost.removeAttribute('id');
|
||||
ghost.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));
|
||||
ghost.style.position = 'absolute';
|
||||
ghost.style.top = '0';
|
||||
ghost.style.width = '100%';
|
||||
ghost.style.pointerEvents = 'none';
|
||||
ghost.setAttribute('aria-hidden', 'true');
|
||||
let ghostGridEl = null;
|
||||
ghost.querySelectorAll('.grid-cols-7').forEach((grid) => {
|
||||
if (!grid.classList.contains('text-center')) ghostGridEl = grid;
|
||||
});
|
||||
if (ghostGridEl) {
|
||||
renderCalendarGrid({
|
||||
gridEl: ghostGridEl,
|
||||
mode,
|
||||
anchorDate,
|
||||
selectedDate: getSelectedDate?.(),
|
||||
resolveDayState,
|
||||
dayAttr,
|
||||
theme,
|
||||
});
|
||||
}
|
||||
return ghost;
|
||||
};
|
||||
|
||||
const activateCarousel = () => {
|
||||
const mode = getMode?.() || 'week';
|
||||
dragWrap = getActiveWrap();
|
||||
if (!dragWrap) return;
|
||||
wrapWidth = dragWrap.getBoundingClientRect().width || zoneEl.getBoundingClientRect().width;
|
||||
if (wrapWidth <= 0) return;
|
||||
prevWrapPosition = dragWrap.style.position;
|
||||
prevWrapOverflow = dragWrap.style.overflow;
|
||||
dragWrap.style.position = 'relative';
|
||||
dragWrap.style.overflow = 'visible';
|
||||
|
||||
const prevAnchor = mode === 'week'
|
||||
? addWeeks(getWeekAnchor?.() || new Date(), -1)
|
||||
: addMonths(getMonthAnchor?.() || new Date(), -1);
|
||||
const nextAnchor = mode === 'week'
|
||||
? addWeeks(getWeekAnchor?.() || new Date(), 1)
|
||||
: addMonths(getMonthAnchor?.() || new Date(), 1);
|
||||
|
||||
prevGhost = buildGhost(prevAnchor, mode);
|
||||
nextGhost = buildGhost(nextAnchor, mode);
|
||||
if (prevGhost) {
|
||||
prevGhost.style.left = `-${wrapWidth}px`;
|
||||
dragWrap.appendChild(prevGhost);
|
||||
}
|
||||
if (nextGhost) {
|
||||
nextGhost.style.left = `${wrapWidth}px`;
|
||||
dragWrap.appendChild(nextGhost);
|
||||
}
|
||||
dragWrap.style.willChange = 'transform';
|
||||
dragWrap.style.transition = 'none';
|
||||
};
|
||||
|
||||
const clearCarousel = () => {
|
||||
if (prevGhost?.parentNode) prevGhost.parentNode.removeChild(prevGhost);
|
||||
if (nextGhost?.parentNode) nextGhost.parentNode.removeChild(nextGhost);
|
||||
prevGhost = null;
|
||||
nextGhost = null;
|
||||
if (dragWrap) {
|
||||
dragWrap.style.transition = '';
|
||||
dragWrap.style.transform = '';
|
||||
dragWrap.style.willChange = '';
|
||||
dragWrap.style.position = prevWrapPosition;
|
||||
dragWrap.style.overflow = prevWrapOverflow;
|
||||
}
|
||||
dragWrap = null;
|
||||
};
|
||||
|
||||
const setTranslate = (x, ms) => {
|
||||
if (!dragWrap) return;
|
||||
dragWrap.style.transition = ms ? `transform ${ms}ms ease` : 'none';
|
||||
dragWrap.style.transform = `translate3d(${x}px, 0, 0)`;
|
||||
};
|
||||
|
||||
const onPointerDown = (event) => {
|
||||
if (ptrId !== null || animatingNav) return;
|
||||
if (event.pointerType === 'mouse' && event.button !== 0) return;
|
||||
startX = event.clientX;
|
||||
startY = event.clientY;
|
||||
ptrId = event.pointerId;
|
||||
moved = false;
|
||||
axisLocked = null;
|
||||
try { zoneEl.setPointerCapture(event.pointerId); } catch (_) {}
|
||||
};
|
||||
|
||||
const onPointerMove = (event) => {
|
||||
if (event.pointerId !== ptrId) return;
|
||||
const dx = event.clientX - startX;
|
||||
const dy = event.clientY - startY;
|
||||
if (!moved && (Math.abs(dx) > 6 || Math.abs(dy) > 6)) {
|
||||
moved = true;
|
||||
axisLocked = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
|
||||
if (axisLocked === 'x') activateCarousel();
|
||||
}
|
||||
if (axisLocked === 'x' && dragWrap) {
|
||||
setTranslate(dx, 0);
|
||||
}
|
||||
};
|
||||
|
||||
const onPointerUp = (event) => {
|
||||
if (event.pointerId !== ptrId) return;
|
||||
const dx = event.clientX - startX;
|
||||
const dy = event.clientY - startY;
|
||||
ptrId = null;
|
||||
|
||||
if (!moved) return;
|
||||
const horizontal = axisLocked === 'x';
|
||||
|
||||
if (horizontal && dragWrap) {
|
||||
if (Math.abs(dx) < threshold) {
|
||||
setTranslate(0, animationMs);
|
||||
setTimeout(clearCarousel, animationMs + 20);
|
||||
return;
|
||||
}
|
||||
|
||||
suppressClickUntil = performance.now() + 500;
|
||||
animatingNav = true;
|
||||
const targetX = dx > 0 ? wrapWidth : -wrapWidth;
|
||||
setTranslate(targetX, animationMs);
|
||||
setTimeout(() => {
|
||||
const mode = getMode?.() || 'week';
|
||||
const sign = dx > 0 ? -1 : 1;
|
||||
const selected = getSelectedDate?.();
|
||||
if (mode === 'week') {
|
||||
const nextWeek = addWeeks(getWeekAnchor?.() || selected || new Date(), sign);
|
||||
setWeekAnchor?.(nextWeek);
|
||||
if (selectOnNavigateOutside && selected && !weekContains(nextWeek, selected)) {
|
||||
setSelectedDate?.(new Date(nextWeek));
|
||||
}
|
||||
} else {
|
||||
const nextMonth = addMonths(getMonthAnchor?.() || selected || new Date(), sign);
|
||||
setMonthAnchor?.(nextMonth);
|
||||
if (selectOnNavigateOutside && selected && !sameMonth(nextMonth, selected)) {
|
||||
setSelectedDate?.(startOfMonth(nextMonth));
|
||||
}
|
||||
}
|
||||
clearCarousel();
|
||||
rerender?.();
|
||||
animatingNav = false;
|
||||
}, animationMs);
|
||||
return;
|
||||
}
|
||||
|
||||
if (enableVerticalModeSwipe && !horizontal && Math.abs(dy) >= 30) {
|
||||
const mode = getMode?.() || 'week';
|
||||
const selected = getSelectedDate?.() || new Date();
|
||||
let triggered = false;
|
||||
if (mode === 'week' && dy > 0) {
|
||||
setMode?.('month');
|
||||
setMonthAnchor?.(startOfMonth(selected));
|
||||
triggered = true;
|
||||
} else if (mode === 'month' && dy < 0) {
|
||||
setMode?.('week');
|
||||
setWeekAnchor?.(startOfWeekMonday(selected));
|
||||
triggered = true;
|
||||
}
|
||||
if (triggered) {
|
||||
suppressClickUntil = performance.now() + 350;
|
||||
rerender?.();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onClickCapture = (event) => {
|
||||
if (performance.now() < suppressClickUntil) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
suppressClickUntil = 0;
|
||||
}
|
||||
};
|
||||
|
||||
const onPointerCancel = () => {
|
||||
ptrId = null;
|
||||
moved = false;
|
||||
if (dragWrap) {
|
||||
setTranslate(0, animationMs);
|
||||
setTimeout(clearCarousel, animationMs + 20);
|
||||
}
|
||||
};
|
||||
|
||||
zoneEl.addEventListener('pointerdown', onPointerDown);
|
||||
zoneEl.addEventListener('pointermove', onPointerMove);
|
||||
zoneEl.addEventListener('pointerup', onPointerUp);
|
||||
zoneEl.addEventListener('click', onClickCapture, { capture: true });
|
||||
zoneEl.addEventListener('pointercancel', onPointerCancel);
|
||||
|
||||
return () => {
|
||||
zoneEl.removeEventListener('pointerdown', onPointerDown);
|
||||
zoneEl.removeEventListener('pointermove', onPointerMove);
|
||||
zoneEl.removeEventListener('pointerup', onPointerUp);
|
||||
zoneEl.removeEventListener('click', onClickCapture, { capture: true });
|
||||
zoneEl.removeEventListener('pointercancel', onPointerCancel);
|
||||
if (dragWrap) clearCarousel();
|
||||
};
|
||||
}
|
||||
|
||||
export function bindCalendarDayClicks(containerEl, onSelect, dayAttr = CALENDAR_DAY_ATTR) {
|
||||
if (!containerEl || typeof onSelect !== 'function') return;
|
||||
containerEl.addEventListener('click', (event) => {
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
import { INGREDIENTS, RECIPES, PRODUCTS, getProductsForIngredient } from '../data/catalog.js?v=9';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
import {
|
||||
addDays,
|
||||
addMonths,
|
||||
sameDay,
|
||||
sameMonth,
|
||||
startOfDay,
|
||||
startOfWeekMonday,
|
||||
} from '../services/dateUtils.js';
|
||||
@@ -17,14 +14,17 @@ import {
|
||||
import { dayHasAnyMeal, autoSelectProducts, saveLastProductSelection } from '../services/planIngredients.js?v=4';
|
||||
import { loadPantry } from '../services/pantryShopping.js?v=2';
|
||||
import {
|
||||
bindCollapsibleCalendarSwipeGesture,
|
||||
bindCalendarDayClicks,
|
||||
bindCalendarHorizontalSwipe,
|
||||
createCollapsibleCalendarHTML,
|
||||
createCalendarTopbarHTML,
|
||||
createCalendarWeekdayHeaderHTML,
|
||||
formatCalendarPeriodLabel,
|
||||
isCalendarOnToday,
|
||||
renderCalendarGrid,
|
||||
renderCollapsibleCalendar,
|
||||
syncCalendarTodayButton,
|
||||
} from './mealCalendar.js?v=14';
|
||||
syncCollapsibleCalendarMode,
|
||||
syncCollapsibleCalendarToggleIcon,
|
||||
} from './mealCalendar.js?v=15';
|
||||
import { createIngredientCardController, getIngredientCardHTML } from './ingredientCard.js?v=20260417-116';
|
||||
|
||||
function esc(s) {
|
||||
@@ -52,25 +52,38 @@ export function getMealPlanEditorHTML() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mpe-cal-wrap" class="hidden relative z-[1] shrink-0 px-5 pt-3 pb-3 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;">
|
||||
<div id="mpe-cal-wrap" class="hidden relative z-[2] shrink-0 px-5 pt-3 pb-3 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;">
|
||||
<div id="mpe-top-shadow" class="pointer-events-none absolute inset-x-0 -bottom-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(var(--overlay-rgb),0.12), rgba(var(--overlay-rgb),0.03), rgba(var(--overlay-rgb),0));"></div>
|
||||
<div id="mpe-cal-section" class="hidden">
|
||||
${createCalendarTopbarHTML({
|
||||
todayId: 'mpe-cal-today',
|
||||
wrapperClass: 'mb-2 flex items-center justify-end gap-3',
|
||||
})}
|
||||
${createCalendarWeekdayHeaderHTML()}
|
||||
<div id="mpe-cal-grid" class="grid grid-cols-7 gap-1.5"></div>
|
||||
<button id="mpe-cal-toggle" type="button" class="w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors"><i id="mpe-cal-toggle-icon" class="fas fa-chevron-down text-[10px]"></i></button>
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mt-3 mb-2">Pora posiłku</p>
|
||||
<div id="mpe-slot-chips" class="flex flex-wrap gap-1.5"></div>
|
||||
${createCollapsibleCalendarHTML({
|
||||
idPrefix: 'mpe-cal',
|
||||
swipeZoneId: 'mpe-cal-swipe-zone',
|
||||
weekWrapId: 'mpe-cal-week-wrap',
|
||||
weekGridId: 'mpe-cal-week-grid',
|
||||
monthWrapId: 'mpe-cal-month-wrap',
|
||||
monthGridId: 'mpe-cal-month-grid',
|
||||
toggleId: 'mpe-cal-toggle',
|
||||
iconId: 'mpe-cal-toggle-icon',
|
||||
weekWrapClass: 'overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]',
|
||||
monthWrapClass: 'bg-[rgb(var(--app-bg-rgb))]',
|
||||
weekWrapStyle: 'overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.25rem',
|
||||
toggleClass: 'w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors',
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div id="mpe-summary-wrap" class="relative z-[1] shrink-0 px-5 pb-3 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;">
|
||||
<div id="mpe-nutrition-section"></div>
|
||||
<div id="mpe-servings-row" class="mt-3"></div>
|
||||
<div id="mpe-top-shadow" class="pointer-events-none absolute inset-x-0 -bottom-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(var(--overlay-rgb),0.12), rgba(var(--overlay-rgb),0.03), rgba(var(--overlay-rgb),0));"></div>
|
||||
</div>
|
||||
<div id="mpe-ing-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important; padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));">
|
||||
<div id="mpe-slot-section" class="pt-3 pb-1 hidden">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Pora posiłku</p>
|
||||
<div id="mpe-slot-chips" class="flex flex-wrap gap-1.5"></div>
|
||||
</div>
|
||||
<div id="mpe-summary-wrap" class="relative z-[1] pt-3 pb-3 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;">
|
||||
<div id="mpe-nutrition-section"></div>
|
||||
<div id="mpe-servings-row" class="mt-3"></div>
|
||||
</div>
|
||||
<div id="mpe-ing-section" class="mb-4">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Składniki</p>
|
||||
<div id="mpe-ing-list" class="space-y-1.5"></div>
|
||||
@@ -155,6 +168,18 @@ export function setupMealPlanEditor() {
|
||||
|
||||
/* ── Calendar ──────────────────────────────────── */
|
||||
|
||||
function resolveCalendarDayState(day, meta, plans = loadPlans(), today = startOfDay(new Date())) {
|
||||
const isSelected = S.date && sameDay(day, S.date);
|
||||
const isPast = day.getTime() < today.getTime();
|
||||
return {
|
||||
disabled: isPast && !isSelected,
|
||||
dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
|
||||
showIndicator: meta.mode === 'month'
|
||||
? meta.inCurrentMonth && dayHasAnyMeal(plans, day)
|
||||
: dayHasAnyMeal(plans, day),
|
||||
};
|
||||
}
|
||||
|
||||
function renderCal() {
|
||||
const wrap = document.getElementById('mpe-cal-wrap');
|
||||
const sec = document.getElementById('mpe-cal-section');
|
||||
@@ -169,45 +194,46 @@ export function setupMealPlanEditor() {
|
||||
}
|
||||
wrap.classList.remove('hidden');
|
||||
sec.classList.remove('hidden');
|
||||
const grid = document.getElementById('mpe-cal-grid');
|
||||
const weekGrid = document.getElementById('mpe-cal-week-grid');
|
||||
const monthGrid = document.getElementById('mpe-cal-month-grid');
|
||||
const todayBtn = document.getElementById('mpe-cal-today');
|
||||
const icon = document.getElementById('mpe-cal-toggle-icon');
|
||||
if (!grid) return;
|
||||
if (!weekGrid || !monthGrid) return;
|
||||
const today = startOfDay(new Date());
|
||||
const plans = loadPlans();
|
||||
const mode = S.calExpanded ? 'month' : 'week';
|
||||
|
||||
if (icon) {
|
||||
icon.className = S.calExpanded ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
|
||||
}
|
||||
syncCollapsibleCalendarMode({
|
||||
mode,
|
||||
weekWrapEl: document.getElementById('mpe-cal-week-wrap'),
|
||||
monthWrapEl: document.getElementById('mpe-cal-month-wrap'),
|
||||
activePaddingBottom: '0.25rem',
|
||||
});
|
||||
syncCollapsibleCalendarToggleIcon(icon, mode);
|
||||
syncCalendarTodayButton(
|
||||
todayBtn,
|
||||
isCalendarOnToday(mode, startOfWeekMonday(S.calDate), S.calDate, S.date),
|
||||
S.date,
|
||||
{
|
||||
labelText: formatCalendarPeriodLabel(mode, S.calDate, S.calDate),
|
||||
},
|
||||
);
|
||||
|
||||
renderCalendarGrid({
|
||||
gridEl: grid,
|
||||
mode,
|
||||
anchorDate: S.calDate,
|
||||
renderCollapsibleCalendar({
|
||||
weekGridEl: weekGrid,
|
||||
monthGridEl: monthGrid,
|
||||
weekAnchorDate: S.calDate,
|
||||
monthAnchorDate: S.calDate,
|
||||
selectedDate: S.date,
|
||||
resolveDayState: (day, meta) => {
|
||||
const isSelected = S.date && sameDay(day, S.date);
|
||||
const isPast = day.getTime() < today.getTime();
|
||||
return {
|
||||
disabled: isPast && !isSelected,
|
||||
dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
|
||||
showIndicator: meta.mode === 'month'
|
||||
? meta.inCurrentMonth && dayHasAnyMeal(plans, day)
|
||||
: dayHasAnyMeal(plans, day),
|
||||
};
|
||||
},
|
||||
resolveDayState: (day, meta) => resolveCalendarDayState(day, meta, plans, today),
|
||||
});
|
||||
syncScrollShadows();
|
||||
}
|
||||
|
||||
function renderSlots() {
|
||||
const el = document.getElementById('mpe-slot-chips');
|
||||
const sec = document.getElementById('mpe-slot-section');
|
||||
if (sec) sec.classList.toggle('hidden', !S.showCal);
|
||||
if (!el || !S.showCal) return;
|
||||
const r = RECIPES[S.recipeId];
|
||||
if (!r) return;
|
||||
@@ -611,50 +637,39 @@ export function setupMealPlanEditor() {
|
||||
});
|
||||
}
|
||||
document.getElementById('mpe-confirm-btn')?.addEventListener('click', handleConfirm);
|
||||
bindCalendarDayClicks(document.getElementById('mpe-cal-grid'), (date) => {
|
||||
const selectCalendarDate = (date) => {
|
||||
S.date = date;
|
||||
S.calDate = new Date(date);
|
||||
renderCal();
|
||||
});
|
||||
|
||||
bindCalendarHorizontalSwipe(document.getElementById('mpe-cal-grid'), {
|
||||
onPrev: () => {
|
||||
if (!S.showCal) return;
|
||||
S.calDate = S.calExpanded ? addMonths(S.calDate, -1) : addDays(S.calDate, -7);
|
||||
renderCal();
|
||||
},
|
||||
onNext: () => {
|
||||
if (!S.showCal) return;
|
||||
S.calDate = S.calExpanded ? addMonths(S.calDate, 1) : addDays(S.calDate, 7);
|
||||
renderCal();
|
||||
},
|
||||
renderGhost: (ghostGrid, direction) => {
|
||||
if (!S.showCal) return false;
|
||||
const sign = direction === 'prev' ? -1 : 1;
|
||||
const mode = S.calExpanded ? 'month' : 'week';
|
||||
const anchor = S.calExpanded
|
||||
? addMonths(S.calDate, sign)
|
||||
: addDays(S.calDate, 7 * sign);
|
||||
const today = startOfDay(new Date());
|
||||
const plans = loadPlans();
|
||||
renderCalendarGrid({
|
||||
gridEl: ghostGrid,
|
||||
mode,
|
||||
anchorDate: anchor,
|
||||
selectedDate: S.date,
|
||||
resolveDayState: (day, meta) => {
|
||||
const isSelected = S.date && sameDay(day, S.date);
|
||||
const isPast = day.getTime() < today.getTime();
|
||||
return {
|
||||
disabled: isPast && !isSelected,
|
||||
dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
|
||||
showIndicator: meta.mode === 'month'
|
||||
? meta.inCurrentMonth && dayHasAnyMeal(plans, day)
|
||||
: dayHasAnyMeal(plans, day),
|
||||
};
|
||||
|
||||
bindCalendarDayClicks(document.getElementById('mpe-cal-week-grid'), selectCalendarDate);
|
||||
bindCalendarDayClicks(document.getElementById('mpe-cal-month-grid'), selectCalendarDate);
|
||||
|
||||
bindCollapsibleCalendarSwipeGesture({
|
||||
zoneEl: document.getElementById('mpe-cal-swipe-zone'),
|
||||
weekWrapEl: document.getElementById('mpe-cal-week-wrap'),
|
||||
monthWrapEl: document.getElementById('mpe-cal-month-wrap'),
|
||||
getMode: () => (S.calExpanded ? 'month' : 'week'),
|
||||
setMode: (mode) => {
|
||||
S.calExpanded = mode === 'month';
|
||||
},
|
||||
});
|
||||
getWeekAnchor: () => S.calDate,
|
||||
setWeekAnchor: (date) => {
|
||||
S.calDate = startOfDay(date);
|
||||
},
|
||||
getMonthAnchor: () => S.calDate,
|
||||
setMonthAnchor: (date) => {
|
||||
S.calDate = startOfDay(date);
|
||||
},
|
||||
getSelectedDate: () => S.date,
|
||||
setSelectedDate: (date) => {
|
||||
S.date = startOfDay(date);
|
||||
},
|
||||
rerender: renderCal,
|
||||
resolveDayState: (day, meta) => resolveCalendarDayState(day, meta),
|
||||
selectOnNavigateOutside: false,
|
||||
enableVerticalModeSwipe: false,
|
||||
});
|
||||
document.getElementById('mpe-cal-today')?.addEventListener('click', () => {
|
||||
const today = startOfDay(new Date());
|
||||
@@ -824,7 +839,10 @@ export function setupMealPlanEditor() {
|
||||
if (e.target.closest('#mpe-add-btn')) {
|
||||
S.addOpen = true; S.addQuery = '';
|
||||
renderAddArea();
|
||||
document.getElementById('mpe-add-search')?.focus();
|
||||
requestAnimationFrame(() => {
|
||||
document.getElementById('mpe-add-area')?.scrollIntoView({ behavior: 'smooth', block: 'end' });
|
||||
document.getElementById('mpe-add-search')?.focus({ preventScroll: true });
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { addDays, startOfMonth, startOfWeekMonday } from '../services/dateUtils.js';
|
||||
import { addDays, startOfMonth } from '../services/dateUtils.js';
|
||||
import { renderCalendarGrid } from './mealCalendar.js?v=15';
|
||||
|
||||
const DEFAULT_WEEKDAYS = ['pn', 'wt', 'śr', 'cz', 'pt', 'sb', 'nd'];
|
||||
const DEFAULT_MONTHS_LONG = [
|
||||
@@ -7,14 +8,17 @@ const DEFAULT_MONTHS_LONG = [
|
||||
];
|
||||
|
||||
const DEFAULT_THEME = {
|
||||
selectedBg: 'rgb(var(--card-rgb))',
|
||||
selectedBorder: 'rgb(var(--border-input-rgb))',
|
||||
selectedBorder: 'rgba(var(--text-emphasis-rgb),0.34)',
|
||||
selectedBorderClass: 'border',
|
||||
selectedText: 'rgb(var(--text-emphasis-rgb))',
|
||||
selectedDot: 'rgb(var(--text-emphasis-rgb))',
|
||||
selectedShadow: '0 0 0 1px rgba(var(--text-emphasis-rgb),0.10)',
|
||||
bg: 'rgb(var(--app-bg-rgb))',
|
||||
border: 'rgb(var(--card-raised-rgb))',
|
||||
border: 'transparent',
|
||||
borderClass: 'border-0',
|
||||
text: 'rgb(var(--text-body-soft-rgb))',
|
||||
dimmedBg: 'transparent',
|
||||
dimmedBorderClass: 'border-0',
|
||||
dimText: 'rgb(var(--text-faint-rgb))',
|
||||
dimOpacity: 0.58,
|
||||
dot: 'rgb(var(--text-faint-rgb))',
|
||||
@@ -54,50 +58,30 @@ export function createSwipePopoverCalendarHTML({
|
||||
monthLabelTextClass = 'text-[10px] font-semibold leading-none tabular-nums whitespace-nowrap',
|
||||
}) {
|
||||
const weekdayHeader = `
|
||||
<div class="grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium uppercase tracking-wide mb-1 leading-none" style="color:rgb(var(--text-dim-rgb));">
|
||||
<div class="grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium uppercase tracking-wide mb-1.5 leading-none" style="color:rgb(var(--text-dim-rgb));">
|
||||
${weekdays.map((d) => `<div>${d}</div>`).join('')}
|
||||
</div>
|
||||
`;
|
||||
const gripLeft = `
|
||||
<div data-swc-grip aria-hidden="true" style="position:absolute; left:0; top:50%; transform:translateY(-50%); width:0.76rem; height:1rem; pointer-events:none; opacity:0.66;">
|
||||
<span style="position:absolute; left:0; top:50%; transform:translateY(-50%); width:1.5px; height:1.22rem; border-radius:999px; background:rgba(var(--text-faint-rgb),0.84);"></span>
|
||||
<span style="position:absolute; left:0.16rem; top:50%; transform:translateY(-50%); width:1.5px; height:1.0rem; border-radius:999px; background:rgba(var(--text-faint-rgb),0.74);"></span>
|
||||
<span style="position:absolute; left:0.34rem; top:50%; transform:translateY(-50%); width:1.5px; height:0.56rem; border-radius:999px; background:rgba(var(--text-faint-rgb),0.62);"></span>
|
||||
</div>
|
||||
`;
|
||||
const gripRight = `
|
||||
<div data-swc-grip aria-hidden="true" style="position:absolute; right:0; top:50%; transform:translateY(-50%); width:0.76rem; height:1rem; pointer-events:none; opacity:0.66;">
|
||||
<span style="position:absolute; right:0; top:50%; transform:translateY(-50%); width:1.5px; height:1.22rem; border-radius:999px; background:rgba(var(--text-faint-rgb),0.84);"></span>
|
||||
<span style="position:absolute; right:0.16rem; top:50%; transform:translateY(-50%); width:1.5px; height:1.0rem; border-radius:999px; background:rgba(var(--text-faint-rgb),0.74);"></span>
|
||||
<span style="position:absolute; right:0.34rem; top:50%; transform:translateY(-50%); width:1.5px; height:0.56rem; border-radius:999px; background:rgba(var(--text-faint-rgb),0.62);"></span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return `
|
||||
<div class="pb-3 px-3 flex items-center justify-end gap-3">
|
||||
<div class="flex h-[2.05rem] min-w-0 max-w-[min(100%,20rem)] items-center justify-center rounded-full border" style="background:rgb(var(--app-bg-rgb)); border-color:rgb(var(--card-raised-rgb));">
|
||||
<div class="flex h-[2.05rem] min-w-0 max-w-[min(100%,20rem)] items-center justify-center rounded-full border" style="background:transparent; border-color:rgb(var(--border-input-rgb));">
|
||||
<span id="${idPrefix}-month-label" class="h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center px-3 ${monthLabelTextClass}" style="color:rgb(var(--text-body-soft-rgb));"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="${idPrefix}-viewport" style="overflow:hidden; position:relative; touch-action:pan-y;">
|
||||
<div id="${idPrefix}-viewport" style="overflow:hidden; position:relative; touch-action:pan-y; -webkit-user-select:none; user-select:none; cursor:grab;">
|
||||
<div id="${idPrefix}-track" style="display:flex; align-items:flex-start; position:relative; will-change:transform;">
|
||||
<div class="swc-panel" data-panel="prev" style="flex-shrink:0; pointer-events:none; position:relative; overflow:hidden;">
|
||||
${weekdayHeader}
|
||||
<div id="${idPrefix}-prev-grid" class="grid grid-cols-7 gap-1.5"></div>
|
||||
${gripLeft}
|
||||
${gripRight}
|
||||
</div>
|
||||
<div class="swc-panel" data-panel="current" style="flex-shrink:0; position:relative; overflow:hidden;">
|
||||
${weekdayHeader}
|
||||
<div id="${idPrefix}-grid" class="grid grid-cols-7 gap-1.5"></div>
|
||||
${gripLeft}
|
||||
${gripRight}
|
||||
</div>
|
||||
<div class="swc-panel" data-panel="next" style="flex-shrink:0; pointer-events:none; position:relative; overflow:hidden;">
|
||||
${weekdayHeader}
|
||||
<div id="${idPrefix}-next-grid" class="grid grid-cols-7 gap-1.5"></div>
|
||||
${gripLeft}
|
||||
${gripRight}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,6 +95,7 @@ export function initSwipePopoverCalendar({
|
||||
theme = DEFAULT_THEME,
|
||||
getMonthAnchor,
|
||||
setMonthAnchor,
|
||||
canNavigateToMonth,
|
||||
getSelectionKeys,
|
||||
onSelectionCommit,
|
||||
resolveDayState,
|
||||
@@ -137,50 +122,37 @@ export function initSwipePopoverCalendar({
|
||||
const SWIPE_THRESHOLD = 40;
|
||||
const ANIMATION_MS = 260;
|
||||
|
||||
let viewportWidth = 0;
|
||||
let panelWidth = 0;
|
||||
let panelHandle = 0;
|
||||
let dragHandleWidth = 0;
|
||||
let panelInset = 0;
|
||||
let restOffset = 0;
|
||||
let animatingNav = false;
|
||||
let pendingRangeStart = null;
|
||||
let suppressClickUntil = 0;
|
||||
|
||||
const panels = Array.from(track.querySelectorAll('.swc-panel'));
|
||||
|
||||
const syncGripVisibility = (showAdjacent = false) => {
|
||||
panels.forEach((panel) => {
|
||||
const isCurrent = panel.dataset.panel === 'current';
|
||||
panel.querySelectorAll('[data-swc-grip]').forEach((grip) => {
|
||||
grip.style.opacity = (isCurrent || showAdjacent) ? '0.66' : '0';
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const applyLayout = () => {
|
||||
const vw = viewport.clientWidth || viewport.getBoundingClientRect().width;
|
||||
if (!vw) return;
|
||||
viewportWidth = vw;
|
||||
const computedHandle = panelHandlePx == null
|
||||
const computedInset = panelHandlePx == null
|
||||
? Math.round(vw * panelHandleRatio)
|
||||
: panelHandlePx;
|
||||
panelHandle = Math.max(panelHandleMin, Math.min(panelHandleMax, computedHandle));
|
||||
dragHandleWidth = panelHandle;
|
||||
panelInset = Math.max(panelHandleMin, Math.min(panelHandleMax, computedInset));
|
||||
panelWidth = vw;
|
||||
restOffset = -panelWidth;
|
||||
panels.forEach((panel) => {
|
||||
panel.style.width = `${panelWidth}px`;
|
||||
panel.style.boxSizing = 'border-box';
|
||||
panel.style.paddingLeft = `${panelHandle}px`;
|
||||
panel.style.paddingRight = `${panelHandle}px`;
|
||||
panel.style.paddingLeft = `${panelInset}px`;
|
||||
panel.style.paddingRight = `${panelInset}px`;
|
||||
});
|
||||
track.style.transition = 'none';
|
||||
track.style.transform = `translate3d(${restOffset}px, 0, 0)`;
|
||||
syncGripVisibility(false);
|
||||
};
|
||||
|
||||
const resetTrackPosition = () => {
|
||||
track.style.transition = 'none';
|
||||
track.style.transform = `translate3d(${restOffset}px, 0, 0)`;
|
||||
syncGripVisibility(false);
|
||||
};
|
||||
|
||||
const setDragTranslate = (dx, ms) => {
|
||||
@@ -188,6 +160,27 @@ export function initSwipePopoverCalendar({
|
||||
track.style.transform = `translate3d(${restOffset + dx}px, 0, 0)`;
|
||||
};
|
||||
|
||||
const snapBack = () => {
|
||||
setDragTranslate(0, ANIMATION_MS);
|
||||
};
|
||||
|
||||
const getNavigationTarget = (monthDelta) => {
|
||||
const anchor = normalizeMonth(getMonthAnchor());
|
||||
return startOfMonth(new Date(anchor.getFullYear(), anchor.getMonth() + monthDelta, 1));
|
||||
};
|
||||
|
||||
const canNavigate = (monthDelta) => {
|
||||
if (typeof canNavigateToMonth !== 'function') return true;
|
||||
const anchor = normalizeMonth(getMonthAnchor());
|
||||
const target = getNavigationTarget(monthDelta);
|
||||
return canNavigateToMonth(target, { currentMonth: anchor, monthDelta }) !== false;
|
||||
};
|
||||
|
||||
const getAllowedDragDx = (dx) => {
|
||||
if (dx === 0) return 0;
|
||||
return canNavigate(dx > 0 ? -1 : 1) ? dx : 0;
|
||||
};
|
||||
|
||||
const getSelectedSet = (previewSelection = null) => {
|
||||
const raw = previewSelection ?? getSelectionKeys();
|
||||
if (Array.isArray(raw)) return new Set(raw);
|
||||
@@ -197,60 +190,43 @@ export function initSwipePopoverCalendar({
|
||||
|
||||
const renderMonthGrid = (targetGrid, monthAnchor, selectedSet) => {
|
||||
if (!targetGrid) return;
|
||||
const first = startOfMonth(monthAnchor);
|
||||
const gridStart = startOfWeekMonday(first);
|
||||
const cells = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
|
||||
targetGrid.innerHTML = cells.map((day) => {
|
||||
const dk = dateKeyLocal(day);
|
||||
const inCurrentMonth = day.getMonth() === first.getMonth();
|
||||
const isSelected = selectedSet.has(dk);
|
||||
const calendarTheme = {
|
||||
...DEFAULT_THEME,
|
||||
...theme,
|
||||
borderClass: theme.borderClass || DEFAULT_THEME.borderClass,
|
||||
dimmedBorderClass: theme.dimmedBorderClass || DEFAULT_THEME.dimmedBorderClass,
|
||||
selectedBorderClass: theme.selectedBorderClass || DEFAULT_THEME.selectedBorderClass,
|
||||
};
|
||||
|
||||
renderCalendarGrid({
|
||||
gridEl: targetGrid,
|
||||
mode: 'month',
|
||||
anchorDate: monthAnchor,
|
||||
fixedWeekCount: 6,
|
||||
selectedDate: null,
|
||||
isSelectedDate: (day) => selectedSet.has(dateKeyLocal(day)),
|
||||
dayAttr: 'data-dk',
|
||||
getDayAttrValue: dateKeyLocal,
|
||||
dayClassName: 'swc-day',
|
||||
dayStyle: 'touch-action:pan-y;',
|
||||
theme: calendarTheme,
|
||||
resolveDayState: (day, { inCurrentMonth, isSelected }) => {
|
||||
const resolved = (typeof resolveDayState === 'function'
|
||||
? resolveDayState(day, { inCurrentMonth, isSelected })
|
||||
: {}) || {};
|
||||
const disabled = !!resolved.disabled;
|
||||
const dimmed = !!resolved.dimmed;
|
||||
const showDot = !!resolved.showDot;
|
||||
|
||||
let bg;
|
||||
let borderColor;
|
||||
let text;
|
||||
let borderClass = 'border';
|
||||
if (isSelected) {
|
||||
bg = theme.selectedBg;
|
||||
borderColor = theme.selectedBorder;
|
||||
text = theme.selectedText;
|
||||
} else if (dimmed) {
|
||||
bg = theme.dimmedBg;
|
||||
borderColor = 'transparent';
|
||||
text = theme.dimText;
|
||||
borderClass = 'border-0';
|
||||
} else {
|
||||
bg = theme.bg;
|
||||
borderColor = theme.border;
|
||||
text = theme.text;
|
||||
}
|
||||
const opacity = dimmed && !isSelected ? String(theme.dimOpacity ?? 0.58) : '1';
|
||||
const dotColor = isSelected ? theme.selectedDot : theme.dot;
|
||||
const tag = disabled ? 'div' : 'button';
|
||||
const attrs = disabled ? '' : `type="button" data-dk="${dk}"`;
|
||||
const dayClass = disabled ? '' : ' swc-day';
|
||||
|
||||
return `
|
||||
<${tag} ${attrs}
|
||||
class="mx-auto flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full ${borderClass}${dayClass} text-xs font-medium leading-tight overflow-hidden"
|
||||
style="background:${bg}; border-color:${borderColor}; color:${text}; opacity:${opacity}; touch-action:none;">
|
||||
<span class="relative flex h-full w-full flex-col items-center justify-center">
|
||||
<span class="text-[13px] font-semibold leading-none ${showDot ? '-translate-y-[0.18rem]' : ''}">${day.getDate()}</span>
|
||||
${showDot ? `<span class="absolute left-1/2 w-1 h-1 -translate-x-1/2 rounded-full opacity-75" style="bottom:0.24rem; background:${dotColor};" aria-hidden="true"></span>` : ''}
|
||||
</span>
|
||||
</${tag}>
|
||||
`;
|
||||
}).join('');
|
||||
return {
|
||||
disabled: !!resolved.disabled,
|
||||
dimmed: !!resolved.dimmed,
|
||||
showIndicator: !!resolved.showDot,
|
||||
};
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const render = (previewSelection = null) => {
|
||||
const anchor = normalizeMonth(getMonthAnchor());
|
||||
const selectedSet = getSelectedSet(previewSelection);
|
||||
const rangePreview = selectionMode === 'range' && pendingRangeStart ? [pendingRangeStart] : null;
|
||||
const selectedSet = getSelectedSet(previewSelection ?? rangePreview);
|
||||
if (monthLabelEl) monthLabelEl.textContent = monthLabel(anchor, monthsLong);
|
||||
renderMonthGrid(gridEl, anchor, selectedSet);
|
||||
renderMonthGrid(prevGridEl, new Date(anchor.getFullYear(), anchor.getMonth() - 1, 1), selectedSet);
|
||||
@@ -259,12 +235,15 @@ export function initSwipePopoverCalendar({
|
||||
};
|
||||
|
||||
const commitNavigation = (monthDelta) => {
|
||||
if (!canNavigate(monthDelta)) {
|
||||
snapBack();
|
||||
return;
|
||||
}
|
||||
animatingNav = true;
|
||||
const targetDx = monthDelta < 0 ? panelWidth : -panelWidth;
|
||||
setDragTranslate(targetDx, ANIMATION_MS);
|
||||
setTimeout(() => {
|
||||
const anchor = normalizeMonth(getMonthAnchor());
|
||||
setMonthAnchor(startOfMonth(new Date(anchor.getFullYear(), anchor.getMonth() + monthDelta, 1)));
|
||||
setMonthAnchor(getNavigationTarget(monthDelta));
|
||||
render();
|
||||
resetTrackPosition();
|
||||
animatingNav = false;
|
||||
@@ -272,49 +251,28 @@ export function initSwipePopoverCalendar({
|
||||
};
|
||||
|
||||
if (selectionMode === 'range') {
|
||||
let dragStart = null;
|
||||
let dragCurrent = null;
|
||||
let dragging = false;
|
||||
gridEl.addEventListener('pointerdown', (e) => {
|
||||
if (animatingNav) return;
|
||||
gridEl.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.swc-day');
|
||||
if (!btn) return;
|
||||
e.stopPropagation();
|
||||
dragStart = btn.dataset.dk;
|
||||
dragCurrent = btn.dataset.dk;
|
||||
dragging = true;
|
||||
gridEl.setPointerCapture(e.pointerId);
|
||||
render([dragStart]);
|
||||
});
|
||||
gridEl.addEventListener('pointermove', (e) => {
|
||||
if (!dragging || animatingNav) return;
|
||||
e.preventDefault();
|
||||
const el = document.elementFromPoint(e.clientX, e.clientY);
|
||||
const btn = el?.closest('.swc-day');
|
||||
if (btn?.dataset.dk && btn.dataset.dk !== dragCurrent) {
|
||||
dragCurrent = btn.dataset.dk;
|
||||
render(dayRange(dragStart, dragCurrent));
|
||||
const selectedKey = btn.dataset.dk;
|
||||
if (!pendingRangeStart) {
|
||||
pendingRangeStart = selectedKey;
|
||||
if (typeof onSelectionCommit === 'function') onSelectionCommit([selectedKey]);
|
||||
render([selectedKey]);
|
||||
return;
|
||||
}
|
||||
});
|
||||
gridEl.addEventListener('pointerup', () => {
|
||||
if (!dragging) return;
|
||||
dragging = false;
|
||||
const range = dayRange(dragStart, dragCurrent);
|
||||
dragStart = null;
|
||||
dragCurrent = null;
|
||||
|
||||
const range = dayRange(pendingRangeStart, selectedKey);
|
||||
pendingRangeStart = null;
|
||||
if (typeof onSelectionCommit === 'function') onSelectionCommit(range);
|
||||
render();
|
||||
});
|
||||
gridEl.addEventListener('pointercancel', () => {
|
||||
dragging = false;
|
||||
dragStart = null;
|
||||
dragCurrent = null;
|
||||
render();
|
||||
});
|
||||
} else {
|
||||
gridEl.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.swc-day');
|
||||
if (!btn) return;
|
||||
e.stopPropagation();
|
||||
if (typeof onSelectionCommit === 'function') onSelectionCommit(btn.dataset.dk);
|
||||
render();
|
||||
});
|
||||
@@ -325,22 +283,18 @@ export function initSwipePopoverCalendar({
|
||||
let startY = 0;
|
||||
let moved = false;
|
||||
let axis = null;
|
||||
let hasPointerCapture = false;
|
||||
|
||||
viewport.addEventListener('pointerdown', (e) => {
|
||||
if (animatingNav || ptrId !== null) return;
|
||||
if (e.pointerType === 'mouse' && e.button !== 0) return;
|
||||
if (!panelWidth) applyLayout();
|
||||
const rect = viewport.getBoundingClientRect();
|
||||
const localX = e.clientX - rect.left;
|
||||
const inLeft = localX <= dragHandleWidth;
|
||||
const inRight = localX >= (viewportWidth - dragHandleWidth);
|
||||
if (!inLeft && !inRight) return;
|
||||
ptrId = e.pointerId;
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
moved = false;
|
||||
axis = null;
|
||||
try { viewport.setPointerCapture(e.pointerId); } catch (_) {}
|
||||
hasPointerCapture = false;
|
||||
});
|
||||
|
||||
viewport.addEventListener('pointermove', (e) => {
|
||||
@@ -350,28 +304,52 @@ export function initSwipePopoverCalendar({
|
||||
if (!moved && (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD)) {
|
||||
moved = true;
|
||||
axis = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
|
||||
if (axis === 'x') syncGripVisibility(true);
|
||||
}
|
||||
if (axis === 'x') setDragTranslate(dx, 0);
|
||||
if (axis === 'x') {
|
||||
e.preventDefault();
|
||||
suppressClickUntil = Date.now() + 450;
|
||||
if (!hasPointerCapture) {
|
||||
try {
|
||||
viewport.setPointerCapture(e.pointerId);
|
||||
hasPointerCapture = true;
|
||||
} catch (_) {}
|
||||
}
|
||||
setDragTranslate(getAllowedDragDx(dx), 0);
|
||||
}
|
||||
});
|
||||
|
||||
const endGesture = (e) => {
|
||||
if (e && e.pointerId !== ptrId) return;
|
||||
if (e && hasPointerCapture) {
|
||||
try { viewport.releasePointerCapture(e.pointerId); } catch (_) {}
|
||||
}
|
||||
hasPointerCapture = false;
|
||||
ptrId = null;
|
||||
if (!moved || axis !== 'x') return;
|
||||
const dx = e ? e.clientX - startX : 0;
|
||||
if (Math.abs(dx) >= SWIPE_THRESHOLD) commitNavigation(dx > 0 ? -1 : 1);
|
||||
const monthDelta = dx > 0 ? -1 : 1;
|
||||
if (Math.abs(dx) >= SWIPE_THRESHOLD && canNavigate(monthDelta)) commitNavigation(monthDelta);
|
||||
else {
|
||||
setDragTranslate(0, ANIMATION_MS);
|
||||
setTimeout(() => syncGripVisibility(false), ANIMATION_MS + 20);
|
||||
snapBack();
|
||||
}
|
||||
moved = false;
|
||||
axis = null;
|
||||
};
|
||||
|
||||
viewport.addEventListener('pointerup', endGesture);
|
||||
viewport.addEventListener('pointercancel', endGesture);
|
||||
viewport.addEventListener('click', (e) => {
|
||||
if (Date.now() > suppressClickUntil) return;
|
||||
suppressClickUntil = 0;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, true);
|
||||
window.addEventListener('pointerup', endGesture);
|
||||
window.addEventListener('pointercancel', endGesture);
|
||||
window.addEventListener('resize', applyLayout);
|
||||
|
||||
return { render, reapplyLayout: applyLayout, resetTrackPosition };
|
||||
const clearPendingRange = () => {
|
||||
pendingRangeStart = null;
|
||||
render();
|
||||
};
|
||||
|
||||
return { render, reapplyLayout: applyLayout, resetTrackPosition, clearPendingRange };
|
||||
}
|
||||
|
||||
@@ -1,25 +1,28 @@
|
||||
import { RECIPES } from '../data/catalog.js?v=9';
|
||||
import { RECIPES, CATEGORY_LABELS } from '../data/catalog.js?v=9';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
import { applyFilters, getFilterState } from './RecipeList.js';
|
||||
import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
|
||||
|
||||
const PANTRY_CATEGORY_ORDER = ['pieczywo', 'nabial', 'mieso_ryby', 'warzywa', 'owoce', 'suche', 'przyprawy', 'inne'];
|
||||
const PANTRY_SECTION_FILTERS = [
|
||||
{ id: 'shortfalls', label: 'Potrzebne' },
|
||||
{ id: 'sufficient', label: 'W spiżarni' },
|
||||
{ id: 'notPlanned', label: 'Poza planem' },
|
||||
];
|
||||
|
||||
const FILTER_PANEL_TRANSITION = 'opacity 180ms ease, transform 180ms ease';
|
||||
const FILTER_SURFACE = 'rgb(var(--sunken-rgb))';
|
||||
const FILTER_SURFACE_SOFT = 'rgb(var(--app-bg-rgb))';
|
||||
const FILTER_BORDER = 'rgb(var(--border-input-rgb))';
|
||||
const FILTER_CHIP_ACTIVE_BG = 'rgb(var(--card-rgb))';
|
||||
const FILTER_TEXT_SECONDARY = 'rgb(var(--text-body-soft-rgb))';
|
||||
const FILTER_TEXT_MUTED = 'rgb(var(--text-muted-rgb))';
|
||||
const FILTER_TEXT_ACTIVE = 'rgb(var(--text-emphasis-rgb))';
|
||||
const FILTER_TRACK = 'rgb(var(--card-rgb))';
|
||||
const FILTER_TRACK_FILL = 'rgba(var(--border-input-rgb), 0.58)';
|
||||
const FILTER_TEXT_MUTED = 'var(--filter-liquid-text-muted)';
|
||||
const FILTER_TEXT_ACTIVE = 'var(--filter-liquid-text-active)';
|
||||
const FILTER_TRACK = 'var(--filter-liquid-track-bg)';
|
||||
const FILTER_TRACK_FILL = 'var(--filter-liquid-accent-bg)';
|
||||
const PREP_TIME_MIN = 5;
|
||||
const PREP_TIME_MAX = 120;
|
||||
const PREP_TIME_STEP = 5;
|
||||
const PREP_TIME_MIN_GAP = PREP_TIME_STEP;
|
||||
const FILTER_CONTEXTS = {
|
||||
recipes: {
|
||||
anchorShellId: 'recipe-topbar',
|
||||
buttonId: 'recipe-filter-btn',
|
||||
anchorShellId: 'recipe-filter-float-btn',
|
||||
buttonId: 'recipe-filter-float-btn',
|
||||
getState: () => getFilterState(),
|
||||
applyState: (nextState) => applyFilters(nextState),
|
||||
showSlots: true,
|
||||
@@ -61,6 +64,15 @@ export function getFilterHTML() {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#filter-panel::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#filter-panel > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#filter-view .prep-time-range-track,
|
||||
#filter-view .prep-time-range-fill {
|
||||
border-radius: 9999px;
|
||||
@@ -71,15 +83,27 @@ export function getFilterHTML() {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid rgba(var(--text-emphasis-rgb),0.16);
|
||||
background: ${FILTER_TRACK_FILL};
|
||||
box-shadow: 0 0 0 1px rgba(var(--overlay-rgb),0.12);
|
||||
border: 1px solid rgba(255,255,255,0.34);
|
||||
background: rgba(var(--surface-rgb),0.42);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,0.42),
|
||||
0 0 0 1px rgba(var(--overlay-rgb),0.1),
|
||||
0 4px 10px rgba(var(--overlay-rgb),0.18);
|
||||
touch-action: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dark #filter-view .prep-time-range-handle {
|
||||
border-color: rgba(255,255,255,0.18);
|
||||
background: rgba(255,255,255,0.26);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,0.24),
|
||||
0 0 0 1px rgba(0,0,0,0.22),
|
||||
0 4px 12px rgba(0,0,0,0.34);
|
||||
}
|
||||
</style>
|
||||
<div id="filter-view" class="absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
|
||||
<div id="filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="background:${FILTER_SURFACE} !important; background-image:none !important; border:1px solid ${FILTER_BORDER} !important; opacity:0; transform:translateY(-0.5rem) scale(0.98); transform-origin:top center; transition:${FILTER_PANEL_TRANSITION}; box-shadow:var(--shadow-shell); width:min(calc(100% - 1.5rem), 22rem);">
|
||||
<div id="filter-view" class="filter-liquid-surface absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
|
||||
<div id="filter-panel" class="filter-liquid-panel absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="opacity:0; transform:translateY(0.65rem) scale(0.98); transform-origin:bottom center; transition:${FILTER_PANEL_TRANSITION}; width:min(calc(100% - 1.5rem), 22rem);">
|
||||
<div class="shrink-0 px-3 pt-3 pb-2 flex items-center justify-between gap-3">
|
||||
<p class="text-[11px] font-semibold leading-none" style="color:${FILTER_TEXT_ACTIVE};">Filtry</p>
|
||||
<button id="filter-clear-btn" type="button" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:${FILTER_TEXT_MUTED};">Wyczyść</button>
|
||||
@@ -174,16 +198,6 @@ function formatTimeRangeSummary(minMinutes, maxMinutes) {
|
||||
return `${formatTimeValue(minMinutes)} - ${formatTimeValue(maxMinutes)}`;
|
||||
}
|
||||
|
||||
function getChipStyle(active) {
|
||||
const background = active ? FILTER_CHIP_ACTIVE_BG : FILTER_SURFACE_SOFT;
|
||||
const color = active ? FILTER_TEXT_ACTIVE : FILTER_TEXT_SECONDARY;
|
||||
const borderRule = active ? `border:1px solid ${FILTER_BORDER};` : 'border:none;';
|
||||
const shadow = active
|
||||
? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(var(--overlay-rgb),0.08);'
|
||||
: '';
|
||||
return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
|
||||
}
|
||||
|
||||
function clampTimeValue(value) {
|
||||
return Math.min(Math.max(value, PREP_TIME_MIN), PREP_TIME_MAX);
|
||||
}
|
||||
@@ -197,6 +211,12 @@ function getSliderPercent(value) {
|
||||
return ((value - PREP_TIME_MIN) / (PREP_TIME_MAX - PREP_TIME_MIN)) * 100;
|
||||
}
|
||||
|
||||
function getClosedPanelTransform(panel) {
|
||||
return panel?.dataset.placement === 'below'
|
||||
? 'translateY(-0.5rem) scale(0.98)'
|
||||
: 'translateY(0.65rem) scale(0.98)';
|
||||
}
|
||||
|
||||
function setActiveTimeHandle(activeHandle) {
|
||||
const minHandle = document.getElementById('prep-time-min-handle');
|
||||
const maxHandle = document.getElementById('prep-time-max-handle');
|
||||
@@ -244,19 +264,33 @@ function positionFilterPanel() {
|
||||
|
||||
const viewRect = view.getBoundingClientRect();
|
||||
const anchorRect = (searchShell || button).getBoundingClientRect();
|
||||
const gap = 8;
|
||||
const isRecipeContext = activeFilterContext === 'recipes';
|
||||
const gap = isRecipeContext ? 12 : 8;
|
||||
const margin = 12;
|
||||
const width = Math.min(anchorRect.width, viewRect.width - margin * 2);
|
||||
const top = Math.max(margin, anchorRect.bottom - viewRect.top + gap);
|
||||
const left = Math.max(
|
||||
margin,
|
||||
Math.min(anchorRect.left - viewRect.left, viewRect.width - width - margin),
|
||||
);
|
||||
const maxHeight = Math.max(220, viewRect.height - top - margin);
|
||||
|
||||
const maxPanelWidth = isRecipeContext ? 352 : anchorRect.width;
|
||||
const width = Math.min(maxPanelWidth, viewRect.width - margin * 2);
|
||||
const spaceBelow = viewRect.bottom - anchorRect.bottom - margin;
|
||||
const preferredMaxHeight = Math.min(420, viewRect.height - margin * 2);
|
||||
const spaceAbove = anchorRect.top - viewRect.top - gap - margin;
|
||||
const opensUpward = isRecipeContext || (spaceBelow < 260 && anchorRect.top - viewRect.top > spaceBelow);
|
||||
const maxHeight = opensUpward
|
||||
? Math.max(220, Math.min(preferredMaxHeight, spaceAbove))
|
||||
: Math.max(220, viewRect.height - Math.max(margin, anchorRect.bottom - viewRect.top + gap) - margin);
|
||||
const leftBase = isRecipeContext
|
||||
? (viewRect.width - width) / 2
|
||||
: anchorRect.left - viewRect.left;
|
||||
const left = Math.max(margin, Math.min(leftBase, viewRect.width - width - margin));
|
||||
panel.style.width = `${width}px`;
|
||||
panel.style.left = `${left}px`;
|
||||
panel.style.top = `${top}px`;
|
||||
panel.style.transformOrigin = opensUpward ? 'bottom center' : 'top center';
|
||||
panel.dataset.placement = opensUpward ? 'above' : 'below';
|
||||
if (opensUpward) {
|
||||
panel.style.top = 'auto';
|
||||
panel.style.bottom = `${Math.max(margin, viewRect.bottom - anchorRect.top + gap)}px`;
|
||||
} else {
|
||||
panel.style.top = `${Math.max(margin, anchorRect.bottom - viewRect.top + gap)}px`;
|
||||
panel.style.bottom = 'auto';
|
||||
}
|
||||
panel.style.maxHeight = `${maxHeight}px`;
|
||||
if (body) body.style.maxHeight = `${maxHeight - 56}px`;
|
||||
}
|
||||
@@ -276,6 +310,7 @@ function showFilterPanel() {
|
||||
view.style.pointerEvents = 'auto';
|
||||
view.setAttribute('aria-hidden', 'false');
|
||||
positionFilterPanel();
|
||||
panel.style.transform = getClosedPanelTransform(panel);
|
||||
setRecipeAreaBlur(true);
|
||||
|
||||
syncPanelCount();
|
||||
@@ -296,7 +331,7 @@ function hideFilterPanel() {
|
||||
view.style.pointerEvents = 'none';
|
||||
view.setAttribute('aria-hidden', 'true');
|
||||
panel.style.opacity = '0';
|
||||
panel.style.transform = 'translateY(-0.5rem) scale(0.98)';
|
||||
panel.style.transform = getClosedPanelTransform(panel);
|
||||
setRecipeAreaBlur(false);
|
||||
syncPanelCount();
|
||||
|
||||
@@ -315,7 +350,7 @@ function renderSlotChips() {
|
||||
|
||||
wrap.innerHTML = MEAL_SLOTS.map((slot) => {
|
||||
const active = localSlots.includes(slot.id);
|
||||
return `<button type="button" data-filter-slot="${escapeHtml(slot.id)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(slot.label)}</button>`;
|
||||
return `<button type="button" data-filter-slot="${escapeHtml(slot.id)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${filterChipStyle(active)}">${escapeHtml(slot.label)}</button>`;
|
||||
}).join('');
|
||||
|
||||
wrap.querySelectorAll('[data-filter-slot]').forEach((btn) => {
|
||||
@@ -337,7 +372,7 @@ function renderTagChips() {
|
||||
const allTags = collectAllTags();
|
||||
wrap.innerHTML = allTags.map((tag) => {
|
||||
const active = localTags.includes(tag.toLowerCase());
|
||||
return `<button type="button" data-filter-tag="${escapeHtml(tag)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(tag)}</button>`;
|
||||
return `<button type="button" data-filter-tag="${escapeHtml(tag)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${filterChipStyle(active)}">${escapeHtml(tag)}</button>`;
|
||||
}).join('');
|
||||
|
||||
wrap.querySelectorAll('[data-filter-tag]').forEach((btn) => {
|
||||
@@ -373,10 +408,17 @@ function syncPanelCount() {
|
||||
|
||||
if (button) {
|
||||
const highlight = isFilterPanelOpen() || count > 0;
|
||||
button.style.setProperty('background', highlight ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
|
||||
const isRecipeGlassButton = button.classList.contains('recipe-glass-btn');
|
||||
if (isRecipeGlassButton) {
|
||||
button.style.removeProperty('background');
|
||||
button.style.removeProperty('border-color');
|
||||
button.style.removeProperty('color');
|
||||
} else {
|
||||
button.style.setProperty('background', highlight ? 'rgba(var(--overlay-rgb), 0.12)' : 'rgb(var(--card-rgb))', 'important');
|
||||
button.style.setProperty('border-color', highlight ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
|
||||
button.style.setProperty('color', highlight ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
|
||||
}
|
||||
}
|
||||
|
||||
const badge = button?.querySelector('[id$="-filter-count"]');
|
||||
if (!badge) return;
|
||||
@@ -397,6 +439,7 @@ function syncLiveFilters() {
|
||||
}
|
||||
|
||||
export function setupFilter() {
|
||||
ensureFilterPopoverStyles();
|
||||
const rangeTrack = document.getElementById('prep-time-range-fill')?.parentElement;
|
||||
const minHandle = document.getElementById('prep-time-min-handle');
|
||||
const maxHandle = document.getElementById('prep-time-max-handle');
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=9';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
import {
|
||||
addMonths,
|
||||
addWeeks,
|
||||
sameDay,
|
||||
sameMonth,
|
||||
startOfDay,
|
||||
startOfMonth,
|
||||
startOfWeekMonday,
|
||||
weekContains,
|
||||
} from '../services/dateUtils.js';
|
||||
import {
|
||||
computeEntryNutrition,
|
||||
@@ -26,17 +22,18 @@ import {
|
||||
savePlans,
|
||||
} from '../services/planStore.js?v=2';
|
||||
import {
|
||||
CALENDAR_HANDLE_CLASS,
|
||||
CALENDAR_MONTHS_SHORT,
|
||||
bindCollapsibleCalendarSwipeGesture,
|
||||
bindCalendarDayClicks,
|
||||
createCollapsibleCalendarHTML,
|
||||
createCalendarTopbarHTML,
|
||||
createCalendarWeekdayHeaderHTML,
|
||||
formatCalendarPeriodLabel,
|
||||
isCalendarOnToday,
|
||||
renderCalendarGrid,
|
||||
renderCollapsibleCalendar,
|
||||
syncCalendarTodayButton,
|
||||
syncCollapsibleCalendarMode,
|
||||
} from '../ui/mealCalendar.js?v=14';
|
||||
syncCollapsibleCalendarToggleIcon,
|
||||
} from '../ui/mealCalendar.js?v=15';
|
||||
import {
|
||||
filterRecipesByQuery,
|
||||
renderRecipeGrid,
|
||||
@@ -67,6 +64,9 @@ function syncTodayButton(mode, weekStart, monthAnchor, selected) {
|
||||
document.getElementById('cal-go-today'),
|
||||
isCalendarOnToday(mode, weekStart, monthAnchor, selected),
|
||||
selected,
|
||||
{
|
||||
labelText: formatCalendarPeriodLabel(mode, weekStart, monthAnchor),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@@ -74,29 +74,16 @@ export function getMealPlannerHTML() {
|
||||
return `
|
||||
<div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-[rgb(var(--app-bg-rgb))] z-10">
|
||||
<div id="planner-cal-bar" class="shrink-0 bg-[rgb(var(--app-bg-rgb))] border-b border-[rgb(var(--card-strong-rgb))] mt-3 relative z-10">
|
||||
<div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-between gap-3 min-w-0">
|
||||
<h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Plan posiłków</h1>
|
||||
<div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-end gap-3 min-w-0">
|
||||
${createCalendarTopbarHTML({
|
||||
todayId: 'cal-go-today',
|
||||
wrapperClass: 'flex shrink-0 items-center justify-end',
|
||||
})}
|
||||
</div>
|
||||
<div id="calendar-swipe-zone" class="overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]" style="touch-action: none">
|
||||
<div id="calendar-week-wrap" class="px-3 overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]" style="overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.75rem">
|
||||
${createCalendarWeekdayHeaderHTML()}
|
||||
<div id="calendar-week-grid" class="grid grid-cols-7 gap-1.5 max-w-full overflow-x-hidden"></div>
|
||||
</div>
|
||||
<div id="calendar-month-wrap" class="px-3 bg-[rgb(var(--app-bg-rgb))]" style="overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 0">
|
||||
${createCalendarWeekdayHeaderHTML()}
|
||||
<div id="calendar-month-grid" class="grid grid-cols-7 gap-1.5"></div>
|
||||
</div>
|
||||
<button id="calendar-mode-toggle" type="button" class="w-full flex items-center justify-center py-1 pb-2 pt-0.5 text-[rgb(var(--text-faint-rgb))] hover:text-[rgb(var(--text-body-soft-rgb))] transition-colors" aria-label="Przełącz widok kalendarza">
|
||||
<i id="calendar-handle-icon" class="fas fa-chevron-down text-[10px]"></i>
|
||||
</button>
|
||||
</div>
|
||||
${createCollapsibleCalendarHTML({ idPrefix: 'calendar' })}
|
||||
</div>
|
||||
|
||||
<div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-24 bg-[rgb(var(--app-bg-rgb))]">
|
||||
<div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-32 bg-[rgb(var(--app-bg-rgb))]">
|
||||
<div id="planner-summary-card" class="mb-3">
|
||||
<div class="h-full flex flex-col" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important; box-shadow:none !important;">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
|
||||
@@ -192,223 +179,7 @@ function syncModeToggle(mode) {
|
||||
weekWrapEl: document.getElementById('calendar-week-wrap'),
|
||||
monthWrapEl: document.getElementById('calendar-month-wrap'),
|
||||
});
|
||||
const icon = document.getElementById('calendar-handle-icon');
|
||||
if (icon) icon.className = mode === 'month' ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
|
||||
}
|
||||
|
||||
function bindCalendarSwipeGesture(state, rerender) {
|
||||
const zone = document.getElementById('calendar-swipe-zone');
|
||||
if (!zone) return;
|
||||
|
||||
const ANIMATION_MS = 260;
|
||||
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let ptrId = null;
|
||||
let moved = false;
|
||||
let axisLocked = null;
|
||||
let suppressClickUntil = 0;
|
||||
let animatingNav = false;
|
||||
|
||||
let dragWrap = null;
|
||||
let wrapWidth = 0;
|
||||
let prevGhost = null;
|
||||
let nextGhost = null;
|
||||
let prevWrapPosition = '';
|
||||
let prevWrapOverflow = '';
|
||||
|
||||
const getActiveWrap = () => document.getElementById(
|
||||
state.mode === 'week' ? 'calendar-week-wrap' : 'calendar-month-wrap',
|
||||
);
|
||||
|
||||
const resolveDayStateForGhost = (day, meta) => {
|
||||
const today = startOfDay(new Date());
|
||||
const isSelected = sameDay(day, state.selected);
|
||||
const isPast = day.getTime() < today.getTime();
|
||||
return {
|
||||
disabled: isPast && !isSelected,
|
||||
dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
|
||||
showIndicator: meta.mode === 'month'
|
||||
? meta.inCurrentMonth && dayHasAnyMeal(state.plans, day)
|
||||
: dayHasAnyMeal(state.plans, day),
|
||||
};
|
||||
};
|
||||
|
||||
const buildGhost = (anchorDate, mode) => {
|
||||
if (!dragWrap) return null;
|
||||
const ghost = dragWrap.cloneNode(true);
|
||||
ghost.removeAttribute('id');
|
||||
ghost.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));
|
||||
ghost.style.position = 'absolute';
|
||||
ghost.style.top = '0';
|
||||
ghost.style.width = '100%';
|
||||
ghost.style.pointerEvents = 'none';
|
||||
ghost.setAttribute('aria-hidden', 'true');
|
||||
let ghostGridEl = null;
|
||||
ghost.querySelectorAll('.grid-cols-7').forEach((g) => {
|
||||
if (!g.classList.contains('text-center')) ghostGridEl = g;
|
||||
});
|
||||
if (ghostGridEl) {
|
||||
renderCalendarGrid({
|
||||
gridEl: ghostGridEl,
|
||||
mode,
|
||||
anchorDate,
|
||||
selectedDate: state.selected,
|
||||
resolveDayState: resolveDayStateForGhost,
|
||||
});
|
||||
}
|
||||
return ghost;
|
||||
};
|
||||
|
||||
const activateCarousel = () => {
|
||||
dragWrap = getActiveWrap();
|
||||
if (!dragWrap) return;
|
||||
wrapWidth = dragWrap.getBoundingClientRect().width || zone.getBoundingClientRect().width;
|
||||
prevWrapPosition = dragWrap.style.position;
|
||||
prevWrapOverflow = dragWrap.style.overflow;
|
||||
dragWrap.style.position = 'relative';
|
||||
dragWrap.style.overflow = 'visible';
|
||||
|
||||
const prevAnchor = state.mode === 'week'
|
||||
? addWeeks(state.weekStart, -1)
|
||||
: addMonths(state.monthAnchor, -1);
|
||||
const nextAnchor = state.mode === 'week'
|
||||
? addWeeks(state.weekStart, 1)
|
||||
: addMonths(state.monthAnchor, 1);
|
||||
|
||||
prevGhost = buildGhost(prevAnchor, state.mode);
|
||||
nextGhost = buildGhost(nextAnchor, state.mode);
|
||||
if (prevGhost) {
|
||||
prevGhost.style.left = `-${wrapWidth}px`;
|
||||
dragWrap.appendChild(prevGhost);
|
||||
}
|
||||
if (nextGhost) {
|
||||
nextGhost.style.left = `${wrapWidth}px`;
|
||||
dragWrap.appendChild(nextGhost);
|
||||
}
|
||||
dragWrap.style.willChange = 'transform';
|
||||
dragWrap.style.transition = 'none';
|
||||
};
|
||||
|
||||
const clearCarousel = () => {
|
||||
if (prevGhost?.parentNode) prevGhost.parentNode.removeChild(prevGhost);
|
||||
if (nextGhost?.parentNode) nextGhost.parentNode.removeChild(nextGhost);
|
||||
prevGhost = null;
|
||||
nextGhost = null;
|
||||
if (dragWrap) {
|
||||
dragWrap.style.transition = '';
|
||||
dragWrap.style.transform = '';
|
||||
dragWrap.style.willChange = '';
|
||||
dragWrap.style.position = prevWrapPosition;
|
||||
dragWrap.style.overflow = prevWrapOverflow;
|
||||
}
|
||||
dragWrap = null;
|
||||
};
|
||||
|
||||
const setTranslate = (x, ms) => {
|
||||
if (!dragWrap) return;
|
||||
dragWrap.style.transition = ms ? `transform ${ms}ms ease` : 'none';
|
||||
dragWrap.style.transform = `translate3d(${x}px, 0, 0)`;
|
||||
};
|
||||
|
||||
zone.addEventListener('pointerdown', (e) => {
|
||||
if (ptrId !== null || animatingNav) return;
|
||||
if (e.pointerType === 'mouse' && e.button !== 0) return;
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
ptrId = e.pointerId;
|
||||
moved = false;
|
||||
axisLocked = null;
|
||||
try { zone.setPointerCapture(e.pointerId); } catch (_) {}
|
||||
});
|
||||
|
||||
zone.addEventListener('pointermove', (e) => {
|
||||
if (e.pointerId !== ptrId) return;
|
||||
const dx = e.clientX - startX;
|
||||
const dy = e.clientY - startY;
|
||||
if (!moved && (Math.abs(dx) > 6 || Math.abs(dy) > 6)) {
|
||||
moved = true;
|
||||
axisLocked = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
|
||||
if (axisLocked === 'x') activateCarousel();
|
||||
}
|
||||
if (axisLocked === 'x' && dragWrap) {
|
||||
setTranslate(dx, 0);
|
||||
}
|
||||
});
|
||||
|
||||
zone.addEventListener('pointerup', (e) => {
|
||||
if (e.pointerId !== ptrId) return;
|
||||
const dx = e.clientX - startX;
|
||||
const dy = e.clientY - startY;
|
||||
ptrId = null;
|
||||
|
||||
if (!moved) return;
|
||||
|
||||
const horizontal = axisLocked === 'x';
|
||||
|
||||
if (horizontal && dragWrap) {
|
||||
if (Math.abs(dx) < 40) {
|
||||
setTranslate(0, ANIMATION_MS);
|
||||
setTimeout(clearCarousel, ANIMATION_MS + 20);
|
||||
return;
|
||||
}
|
||||
suppressClickUntil = performance.now() + 500;
|
||||
animatingNav = true;
|
||||
const targetX = dx > 0 ? wrapWidth : -wrapWidth;
|
||||
setTranslate(targetX, ANIMATION_MS);
|
||||
setTimeout(() => {
|
||||
if (state.mode === 'week') {
|
||||
state.weekStart = addWeeks(state.weekStart, dx > 0 ? -1 : 1);
|
||||
if (!weekContains(state.weekStart, state.selected)) {
|
||||
state.selected = new Date(state.weekStart);
|
||||
}
|
||||
} else {
|
||||
state.monthAnchor = addMonths(state.monthAnchor, dx > 0 ? -1 : 1);
|
||||
if (!sameMonth(state.monthAnchor, state.selected)) {
|
||||
state.selected = startOfMonth(state.monthAnchor);
|
||||
}
|
||||
}
|
||||
clearCarousel();
|
||||
rerender();
|
||||
animatingNav = false;
|
||||
}, ANIMATION_MS);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!horizontal && Math.abs(dy) >= 30) {
|
||||
let triggered = false;
|
||||
if (state.mode === 'week' && dy > 0) {
|
||||
state.mode = 'month';
|
||||
state.monthAnchor = startOfMonth(state.selected);
|
||||
triggered = true;
|
||||
} else if (state.mode === 'month' && dy < 0) {
|
||||
state.mode = 'week';
|
||||
state.weekStart = startOfWeekMonday(state.selected);
|
||||
triggered = true;
|
||||
}
|
||||
if (triggered) {
|
||||
suppressClickUntil = performance.now() + 350;
|
||||
rerender();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
zone.addEventListener('click', (ev) => {
|
||||
if (performance.now() < suppressClickUntil) {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
suppressClickUntil = 0;
|
||||
}
|
||||
}, { capture: true });
|
||||
|
||||
zone.addEventListener('pointercancel', () => {
|
||||
ptrId = null;
|
||||
moved = false;
|
||||
if (dragWrap) {
|
||||
setTranslate(0, ANIMATION_MS);
|
||||
setTimeout(clearCarousel, ANIMATION_MS + 20);
|
||||
}
|
||||
});
|
||||
syncCollapsibleCalendarToggleIcon(document.getElementById('calendar-handle-icon'), mode);
|
||||
}
|
||||
|
||||
function showPlannerToast(message) {
|
||||
@@ -668,8 +439,8 @@ function renderDayContent(state, onMealRemoved = null) {
|
||||
<i class="fas fa-rotate-left text-[10px]" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>`
|
||||
: `<button type="button" class="planner-edit-meal w-6 h-6 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] hover:text-[rgb(var(--text-body-rgb))] hover:border-[rgb(var(--text-subdued-rgb))] hover:bg-[rgb(var(--card-raised-rgb))] flex items-center justify-center transition-colors" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Edytuj ten przepis">
|
||||
<i class="fas fa-pencil text-[9px]" aria-hidden="true"></i>
|
||||
: `<button type="button" class="planner-edit-meal w-7 h-7 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] hover:text-[rgb(var(--text-body-rgb))] hover:border-[rgb(var(--text-subdued-rgb))] hover:bg-[rgb(var(--card-raised-rgb))] flex items-center justify-center transition-colors" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Edytuj ten przepis">
|
||||
<i class="fas fa-pencil text-[10px]" aria-hidden="true"></i>
|
||||
</button>`;
|
||||
return `
|
||||
<div class="relative overflow-hidden rounded-lg ${isPendingDelete ? 'ring-1 ring-white/5' : ''}" data-planner-swipe-row style="${rowStyle}" data-slot-id="${slot.id}" data-entry-id="${eid}" ${rowAttrs}>
|
||||
@@ -704,32 +475,32 @@ function renderDayContent(state, onMealRemoved = null) {
|
||||
const addBtn = `<button type="button" class="planner-add-meal w-7 h-7 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] flex items-center justify-center shrink-0" data-slot-id="${slot.id}" aria-label="Dodaj przepis"><i class="fas fa-plus text-[10px]"></i></button>`;
|
||||
|
||||
const kcalPill = slotKcal > 0
|
||||
? `<span class="text-[10px] font-semibold tabular-nums shrink-0 px-2 py-0.5 rounded-full" style="background:rgb(var(--app-bg-rgb)); color:rgb(var(--text-body-soft-rgb));">${slotKcal} kcal</span>`
|
||||
? `<span class="planner-kcal-pill text-[10px] font-semibold tabular-nums shrink-0 px-2 py-0.5 rounded-full" style="color:rgb(var(--text-body-soft-rgb));">${slotKcal} kcal</span>`
|
||||
: '';
|
||||
|
||||
const filledCard = `
|
||||
<div class="rounded-xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-3 py-2.5 bg-[rgb(var(--card-rgb))]" style="background:rgb(var(--card-rgb)) !important;">
|
||||
<div class="rounded-2xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-4 py-3 bg-[rgb(var(--card-rgb))]" style="background:rgb(var(--card-rgb)) !important;">
|
||||
<i class="fas ${slot.icon} w-7 text-center text-[13px] text-[rgb(var(--text-dim-rgb))] shrink-0" aria-hidden="true"></i>
|
||||
<span class="text-[13px] font-semibold text-[rgb(var(--text-body-rgb))] truncate min-w-0">${slot.label}</span>
|
||||
<span class="ml-auto"></span>
|
||||
${kcalPill}
|
||||
${addBtn}
|
||||
</div>
|
||||
${entries.length > 0 ? `<div class="px-2.5 pb-2.5 space-y-2 border-t border-[rgb(var(--card-strong-rgb))]" style="padding-top:0.625rem;">${entryCards}</div>` : ''}
|
||||
${entries.length > 0 ? `<div class="px-3 pb-3 space-y-2 border-t border-[rgb(var(--card-strong-rgb))]" style="padding-top:0.75rem;">${entryCards}</div>` : ''}
|
||||
</div>`;
|
||||
|
||||
if (entries.length > 0) return filledCard;
|
||||
|
||||
return `
|
||||
<div class="rounded-xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-3 py-2.5">
|
||||
<div class="rounded-2xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-4 py-3">
|
||||
<i class="fas ${slot.icon} w-7 text-center text-[13px] text-[rgb(var(--text-dim-rgb))] shrink-0" aria-hidden="true"></i>
|
||||
<span class="text-[13px] font-semibold text-[rgb(var(--text-body-rgb))] truncate min-w-0">${slot.label}</span>
|
||||
<span class="ml-auto"></span>
|
||||
${addBtn}
|
||||
</div>
|
||||
<div class="px-3 pb-2.5 -mt-0.5">
|
||||
<div class="px-4 pb-3 -mt-0.5">
|
||||
<p class="text-[11px] text-[rgb(var(--text-faint-rgb))] italic pl-9">Zaplanuj posiłek</p>
|
||||
</div>
|
||||
</div>`;
|
||||
@@ -1291,17 +1062,8 @@ export function setupMealPlanner() {
|
||||
maxMinutes: PICKER_FILTER_MAX_MINUTES,
|
||||
};
|
||||
|
||||
const rerender = () => {
|
||||
syncModeToggle(state.mode);
|
||||
syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
|
||||
const resolveCalendarDayState = (day, meta) => {
|
||||
const today = startOfDay(new Date());
|
||||
renderCollapsibleCalendar({
|
||||
weekGridEl: weekGrid,
|
||||
monthGridEl: monthGrid,
|
||||
weekAnchorDate: state.weekStart,
|
||||
monthAnchorDate: state.monthAnchor,
|
||||
selectedDate: state.selected,
|
||||
resolveDayState: (day, meta) => {
|
||||
const isSelected = sameDay(day, state.selected);
|
||||
const isPast = day.getTime() < today.getTime();
|
||||
return {
|
||||
@@ -1311,7 +1073,18 @@ export function setupMealPlanner() {
|
||||
? meta.inCurrentMonth && dayHasAnyMeal(state.plans, day)
|
||||
: dayHasAnyMeal(state.plans, day),
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
const rerender = () => {
|
||||
syncModeToggle(state.mode);
|
||||
syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
|
||||
renderCollapsibleCalendar({
|
||||
weekGridEl: weekGrid,
|
||||
monthGridEl: monthGrid,
|
||||
weekAnchorDate: state.weekStart,
|
||||
monthAnchorDate: state.monthAnchor,
|
||||
selectedDate: state.selected,
|
||||
resolveDayState: resolveCalendarDayState,
|
||||
});
|
||||
renderDayContent(state, persist);
|
||||
};
|
||||
@@ -1322,15 +1095,11 @@ export function setupMealPlanner() {
|
||||
};
|
||||
|
||||
/* ── calendar scroll shadow ─────────────────── */
|
||||
const plannerScroll = document.getElementById('planner-scroll');
|
||||
const calBar = document.getElementById('planner-cal-bar');
|
||||
if (plannerScroll && calBar) {
|
||||
if (calBar) {
|
||||
const shadow = document.createElement('div');
|
||||
shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
|
||||
shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);pointer-events:none;';
|
||||
calBar.appendChild(shadow);
|
||||
plannerScroll.addEventListener('scroll', () => {
|
||||
shadow.style.opacity = plannerScroll.scrollTop > 2 ? '1' : '0';
|
||||
});
|
||||
}
|
||||
|
||||
bindCalendarDayClicks(weekGrid, (date) => {
|
||||
@@ -1559,7 +1328,30 @@ export function setupMealPlanner() {
|
||||
rerender();
|
||||
};
|
||||
|
||||
bindCalendarSwipeGesture(state, rerender);
|
||||
bindCollapsibleCalendarSwipeGesture({
|
||||
zoneEl: document.getElementById('calendar-swipe-zone'),
|
||||
weekWrapEl: document.getElementById('calendar-week-wrap'),
|
||||
monthWrapEl: document.getElementById('calendar-month-wrap'),
|
||||
getMode: () => state.mode,
|
||||
setMode: (mode) => {
|
||||
state.mode = mode;
|
||||
},
|
||||
getWeekAnchor: () => state.weekStart,
|
||||
setWeekAnchor: (date) => {
|
||||
state.weekStart = startOfWeekMonday(date);
|
||||
},
|
||||
getMonthAnchor: () => state.monthAnchor,
|
||||
setMonthAnchor: (date) => {
|
||||
state.monthAnchor = startOfMonth(date);
|
||||
},
|
||||
getSelectedDate: () => state.selected,
|
||||
setSelectedDate: (date) => {
|
||||
state.selected = startOfDay(date);
|
||||
},
|
||||
rerender,
|
||||
resolveDayState: resolveCalendarDayState,
|
||||
selectOnNavigateOutside: false,
|
||||
});
|
||||
|
||||
document.getElementById('calendar-mode-toggle')?.addEventListener('click', () => {
|
||||
if (state.mode === 'week') {
|
||||
|
||||
@@ -10,7 +10,13 @@ import {
|
||||
createSwipePopoverCalendarHTML,
|
||||
initSwipePopoverCalendar,
|
||||
} from '../ui/swipePopoverCalendar.js';
|
||||
import {
|
||||
createCalendarPopoverHTML,
|
||||
stabilizeSwipeCalendarLayout,
|
||||
syncCalendarPopoverVisibility,
|
||||
} from '../ui/calendarPopover.js';
|
||||
import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116';
|
||||
import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
|
||||
|
||||
/* ── helpers ── */
|
||||
|
||||
@@ -45,16 +51,6 @@ function getActivePantryFilterCount() {
|
||||
return pantryFilters.categories.length + pantryFilters.sections.length;
|
||||
}
|
||||
|
||||
function filterChipStyle(active) {
|
||||
const background = active ? 'rgb(var(--card-rgb))' : 'rgb(var(--app-bg-rgb))';
|
||||
const color = active ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))';
|
||||
const borderRule = active ? 'border:1px solid rgb(var(--border-input-rgb));' : 'border:none;';
|
||||
const shadow = active
|
||||
? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(var(--overlay-rgb),0.08);'
|
||||
: '';
|
||||
return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
|
||||
}
|
||||
|
||||
const CATEGORY_ICONS = {
|
||||
pieczywo: 'fa-bread-slice',
|
||||
nabial: 'fa-cheese',
|
||||
@@ -78,7 +74,7 @@ const MONTHS_SHORT = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'w
|
||||
const DEFAULT_HORIZON_DAYS = 7;
|
||||
const SHORTFALL_ACCENT = 'rgb(var(--danger-rgb))';
|
||||
const PANTRY_CALENDAR_THEME = {
|
||||
bg: 'rgb(var(--app-bg-rgb))',
|
||||
bg: 'rgba(255,255,255,0.08)',
|
||||
border: 'rgb(var(--card-raised-rgb))',
|
||||
text: 'rgb(var(--text-body-soft-rgb))',
|
||||
dimText: 'rgb(var(--text-faint-rgb))',
|
||||
@@ -86,22 +82,23 @@ const PANTRY_CALENDAR_THEME = {
|
||||
dimmedBg: 'transparent',
|
||||
dimmedBorder: 'transparent',
|
||||
dot: 'rgb(var(--text-faint-rgb))',
|
||||
selectedBg: 'rgb(var(--card-rgb))',
|
||||
selectedBorder: 'rgb(var(--border-input-rgb))',
|
||||
selectedBorder: 'rgba(var(--text-emphasis-rgb),0.34)',
|
||||
selectedText: 'rgb(var(--text-emphasis-rgb))',
|
||||
selectedDot: 'rgb(var(--text-emphasis-rgb))',
|
||||
selectedShadow: '0 0 0 1px rgba(var(--text-emphasis-rgb),0.10)',
|
||||
};
|
||||
|
||||
/* ── state ── */
|
||||
|
||||
let ingredientCard = null;
|
||||
let horizonEndDate = addDays(startOfDay(new Date()), DEFAULT_HORIZON_DAYS - 1);
|
||||
let isSearchExpanded = false;
|
||||
let isCalendarOpen = false;
|
||||
let isFilterOpen = false;
|
||||
let calendarMonthAnchor = startOfMonth(horizonEndDate);
|
||||
let pantryGlobalListenersBound = false;
|
||||
let pantryCalendar = null;
|
||||
let pantrySearchQuery = '';
|
||||
let pantrySearchOpen = false;
|
||||
let pantryFilters = {
|
||||
categories: [],
|
||||
sections: [],
|
||||
@@ -164,29 +161,68 @@ function photoStripMedia(image, icon, accentBg) {
|
||||
export function getPantryHTML() {
|
||||
return `
|
||||
<div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
|
||||
<style id="pantry-view-styles">
|
||||
.pv2-tile {
|
||||
background: rgba(var(--surface-rgb), 0.62) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.26) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.48),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.04),
|
||||
0 1px 2px rgba(var(--overlay-rgb), 0.06),
|
||||
0 6px 14px rgba(var(--overlay-rgb), 0.1) !important;
|
||||
backdrop-filter: blur(18px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(160%);
|
||||
}
|
||||
|
||||
<!-- ── floating top bar ── -->
|
||||
<div id="pantry-topbar-outer" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
|
||||
<div class="pointer-events-auto relative z-[1] w-full">
|
||||
<div id="pantry-topbar" class="relative min-h-12">
|
||||
<div id="pantry-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
|
||||
<h1 class="flex-1 min-w-0 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Zapasy</h1>
|
||||
.dark .pv2-tile {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.18),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
||||
0 2px 4px rgba(0, 0, 0, 0.24),
|
||||
0 8px 18px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
<div id="pantry-horizon-wrap" class="relative shrink">
|
||||
<button type="button" id="pantry-horizon-compact" class="min-w-0 max-w-[12rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important;">
|
||||
.pv2-track {
|
||||
background: rgba(var(--overlay-rgb), 0.12);
|
||||
}
|
||||
|
||||
.dark .pv2-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- ── floating horizon pill above bottom nav ── -->
|
||||
<div id="pantry-top-controls" class="pointer-events-none absolute inset-x-0 z-[24] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
|
||||
<div id="pantry-horizon-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:var(--catalog-menu-left, 1rem); width:calc(var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width) - 0.5rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
|
||||
<button type="button" id="pantry-horizon-compact" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3">
|
||||
<span id="pantry-horizon-compact-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
|
||||
<i id="pantry-horizon-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
<i id="pantry-horizon-chevron" class="fas fa-chevron-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
</button>
|
||||
${createCalendarPopoverHTML({
|
||||
id: 'pantry-calendar-popover',
|
||||
calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
|
||||
popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
|
||||
popoverStyle: 'left:0; right:auto; width:var(--recipe-dock-width, calc(100% - 2rem)); opacity:0; transform:translateY(-6px) scale(0.98);',
|
||||
})}
|
||||
</div>
|
||||
<div id="pantry-filter-pill-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width)); width:var(--bottom-filter-pill-width); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
|
||||
<button type="button" id="pantry-filter-pill-btn" class="recipe-glass-btn w-full h-full rounded-full relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
|
||||
<i class="fas fa-sliders-h" aria-hidden="true"></i>
|
||||
<span id="pantry-filter-pill-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pantry-filter-wrap" class="relative shrink-0">
|
||||
<button type="button" id="pantry-filter-toggle" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));">
|
||||
<i class="fas fa-sliders-h text-[12px]"></i>
|
||||
<span id="pantry-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
|
||||
</button>
|
||||
<!-- ── scrollable content ── -->
|
||||
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:1rem; scroll-padding-top:1rem; padding-bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 2.25rem);">
|
||||
<div id="pantry-board"></div>
|
||||
</div>
|
||||
|
||||
<div id="pantry-filter-popover" class="absolute right-0 top-full mt-2 w-[19rem] max-w-[calc(100vw-2rem)] rounded-[1.35rem] px-3 py-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-6px) scale(0.98);">
|
||||
<div class="flex items-center justify-between gap-3 px-0.5 pb-3">
|
||||
<!-- ── floating bottom controls (search + filter) ── -->
|
||||
<div id="pantry-filter-popover" class="filter-liquid-surface filter-liquid-panel absolute z-[25] pointer-events-none rounded-[1.35rem] px-3 pt-3 pb-3 transition-all duration-200" style="left:50%; width:min(calc(100% - 1.5rem), 22rem); transform:translateX(-50%) translateY(0.5rem) scale(0.98); transform-origin:bottom center; bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 1.15rem); opacity:0;">
|
||||
<div class="flex items-center justify-between gap-3 px-0.5 pb-2">
|
||||
<p class="text-[11px] font-semibold leading-none" style="color:rgb(var(--text-emphasis-rgb));">Filtry</p>
|
||||
<button type="button" id="pantry-filter-clear" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
|
||||
Wyczyść
|
||||
@@ -194,35 +230,28 @@ export function getPantryHTML() {
|
||||
</div>
|
||||
<div id="pantry-filter-panel-body" class="space-y-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" id="pantry-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important; color:rgb(var(--text-body-rgb));">
|
||||
<i class="fas fa-search text-[13px]"></i>
|
||||
<div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
|
||||
<div id="pantry-search-wrap" class="pointer-events-auto absolute bottom-0">
|
||||
<button type="button" id="pantry-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj w spiżarni">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
<span id="pantry-search-active-dot" class="hidden absolute -top-1 -right-1 w-[0.65rem] h-[0.65rem] rounded-full" style="background:rgb(var(--text-emphasis-rgb)); border:1px solid rgba(255,255,255,0.42); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="pantry-calendar-popover" class="absolute left-0 right-0 top-full mt-2 rounded-[1.35rem] py-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-6px) scale(0.98);">
|
||||
${createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' })}
|
||||
<div id="pantry-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-none absolute bottom-0 flex items-center gap-2 px-3" style="opacity:0; transform:translateY(0.45rem) scale(0.98); transition:opacity 0.2s ease, transform 0.2s ease;">
|
||||
<i class="fas fa-search shrink-0" aria-hidden="true"></i>
|
||||
<input type="search" id="pantry-search-input" autocomplete="off" placeholder="Szukaj w spiżarni…"
|
||||
class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:rgb(var(--text-body-rgb)); margin:0; padding:0 !important;">
|
||||
</div>
|
||||
|
||||
<div id="pantry-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
|
||||
<i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
<input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
|
||||
class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
|
||||
<button type="button" id="pantry-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:rgb(var(--card-soft-rgb)); border:none; color:rgb(var(--text-dim-rgb));">
|
||||
<i class="fas fa-xmark text-[13px]"></i>
|
||||
<div id="pantry-filter-bottom-wrap" class="pointer-events-auto absolute bottom-0 right-4">
|
||||
<button type="button" id="pantry-filter-bottom-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
|
||||
<i id="pantry-right-btn-icon" class="fas fa-sliders-h" aria-hidden="true"></i>
|
||||
<span id="pantry-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── scrollable content ── -->
|
||||
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.35rem] pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
|
||||
<div id="pantry-board"></div>
|
||||
</div>
|
||||
</div>
|
||||
${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
|
||||
}
|
||||
|
||||
@@ -231,65 +260,63 @@ export function getPantryHTML() {
|
||||
function syncHorizonUI() {
|
||||
ensureValidHorizonDate();
|
||||
|
||||
const defaultRow = document.getElementById('pantry-default-row');
|
||||
const searchShell = document.getElementById('pantry-search-shell');
|
||||
const popover = document.getElementById('pantry-calendar-popover');
|
||||
const filterPopover = document.getElementById('pantry-filter-popover');
|
||||
const filterToggle = document.getElementById('pantry-filter-toggle');
|
||||
const filterCount = document.getElementById('pantry-filter-count');
|
||||
const filterPillCount = document.getElementById('pantry-filter-pill-count');
|
||||
const searchWrap = document.getElementById('pantry-search-wrap');
|
||||
const searchShell = document.getElementById('pantry-search-shell');
|
||||
const rightWrap = document.getElementById('pantry-filter-bottom-wrap');
|
||||
const rightBtn = document.getElementById('pantry-filter-bottom-btn');
|
||||
const rightIcon = document.getElementById('pantry-right-btn-icon');
|
||||
const searchDot = document.getElementById('pantry-search-active-dot');
|
||||
const compactLabel = document.getElementById('pantry-horizon-compact-label');
|
||||
const compactPill = document.getElementById('pantry-horizon-compact');
|
||||
const chevron = document.getElementById('pantry-horizon-chevron');
|
||||
|
||||
if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
|
||||
|
||||
const showCalendar = isCalendarOpen && !isSearchExpanded;
|
||||
const showDefault = !isSearchExpanded;
|
||||
const showFilter = isFilterOpen && showDefault;
|
||||
const activeFilterCount = getActivePantryFilterCount();
|
||||
|
||||
if (defaultRow) {
|
||||
defaultRow.style.opacity = showDefault ? '1' : '0';
|
||||
defaultRow.style.transform = showDefault ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
|
||||
defaultRow.style.pointerEvents = showDefault ? 'auto' : 'none';
|
||||
}
|
||||
|
||||
if (compactPill) {
|
||||
compactPill.style.setProperty('background', showCalendar ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
|
||||
compactPill.style.setProperty('border-color', showCalendar ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
|
||||
}
|
||||
|
||||
if (popover) {
|
||||
popover.style.opacity = showCalendar ? '1' : '0';
|
||||
popover.style.transform = showCalendar ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
|
||||
popover.style.pointerEvents = showCalendar ? 'auto' : 'none';
|
||||
}
|
||||
if (chevron) {
|
||||
chevron.style.transform = showCalendar ? 'rotate(180deg)' : 'rotate(0deg)';
|
||||
}
|
||||
syncCalendarPopoverVisibility({
|
||||
popup: popover,
|
||||
isOpen: isCalendarOpen,
|
||||
chevron,
|
||||
chevronOpenTransform: 'rotate(180deg)',
|
||||
chevronClosedTransform: 'rotate(0deg)',
|
||||
trigger: compactPill,
|
||||
openTriggerStyle: {},
|
||||
closedTriggerStyle: {},
|
||||
triggerImportant: true,
|
||||
});
|
||||
|
||||
if (filterPopover) {
|
||||
filterPopover.style.opacity = showFilter ? '1' : '0';
|
||||
filterPopover.style.transform = showFilter ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
|
||||
filterPopover.style.pointerEvents = showFilter ? 'auto' : 'none';
|
||||
}
|
||||
if (filterToggle) {
|
||||
const isActive = showFilter || hasActivePantryFilters();
|
||||
filterToggle.style.setProperty('background', isActive ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
|
||||
filterToggle.style.setProperty('border-color', isActive ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
|
||||
filterToggle.style.setProperty('color', isActive ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
|
||||
filterPopover.style.opacity = isFilterOpen ? '1' : '0';
|
||||
filterPopover.style.transform = isFilterOpen
|
||||
? 'translateX(-50%) translateY(0) scale(1)'
|
||||
: 'translateX(-50%) translateY(0.5rem) scale(0.98)';
|
||||
filterPopover.style.pointerEvents = isFilterOpen ? 'auto' : 'none';
|
||||
}
|
||||
if (filterCount) {
|
||||
filterCount.textContent = String(activeFilterCount);
|
||||
filterCount.classList.toggle('hidden', activeFilterCount === 0);
|
||||
filterCount.classList.toggle('flex', activeFilterCount > 0);
|
||||
filterCount.classList.toggle('hidden', true);
|
||||
filterCount.classList.toggle('flex', false);
|
||||
}
|
||||
|
||||
if (filterPillCount) {
|
||||
filterPillCount.textContent = String(activeFilterCount);
|
||||
filterPillCount.classList.toggle('hidden', activeFilterCount === 0);
|
||||
filterPillCount.classList.toggle('flex', activeFilterCount > 0);
|
||||
}
|
||||
if (searchWrap) searchWrap.classList.toggle('hidden', pantrySearchOpen);
|
||||
if (searchShell) {
|
||||
searchShell.style.opacity = isSearchExpanded ? '1' : '0';
|
||||
searchShell.style.transform = isSearchExpanded ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
|
||||
searchShell.style.pointerEvents = isSearchExpanded ? 'auto' : 'none';
|
||||
searchShell.style.opacity = pantrySearchOpen ? '1' : '0';
|
||||
searchShell.style.pointerEvents = pantrySearchOpen ? 'auto' : 'none';
|
||||
searchShell.style.transform = pantrySearchOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
|
||||
}
|
||||
if (rightIcon) rightIcon.className = 'fas fa-xmark';
|
||||
if (rightBtn) rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
|
||||
if (rightWrap) rightWrap.classList.toggle('hidden', !pantrySearchOpen);
|
||||
if (searchDot) searchDot.classList.toggle('hidden', !pantrySearchQuery);
|
||||
|
||||
renderCalendarPopover();
|
||||
renderFilterPopover();
|
||||
@@ -313,6 +340,11 @@ function bindPantryCalendarInteractions() {
|
||||
if (nextAnchor.getTime() < minAnchor.getTime()) return;
|
||||
calendarMonthAnchor = nextAnchor;
|
||||
},
|
||||
canNavigateToMonth: (nextMonth) => {
|
||||
const nextAnchor = startOfMonth(nextMonth);
|
||||
const minAnchor = startOfMonth(getToday());
|
||||
return nextAnchor.getTime() >= minAnchor.getTime();
|
||||
},
|
||||
getSelectionKeys: () => dateKey(horizonEndDate),
|
||||
onSelectionCommit: (selectedKey) => {
|
||||
selectHorizonDate(new Date(`${selectedKey}T00:00:00`));
|
||||
@@ -374,26 +406,35 @@ function renderFilterPopover() {
|
||||
`;
|
||||
}
|
||||
|
||||
function closeSearch() {
|
||||
const input = document.getElementById('pantry-search');
|
||||
const hadQuery = Boolean(input?.value);
|
||||
if (input) {
|
||||
input.value = '';
|
||||
input.blur();
|
||||
}
|
||||
isSearchExpanded = false;
|
||||
syncHorizonUI();
|
||||
function clearSearchInput() {
|
||||
const hadQuery = Boolean(pantrySearchQuery);
|
||||
pantrySearchQuery = '';
|
||||
if (hadQuery) renderBoard();
|
||||
}
|
||||
|
||||
function openSearch() {
|
||||
isSearchExpanded = true;
|
||||
function setPantrySearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
|
||||
const hadQuery = Boolean(pantrySearchQuery);
|
||||
pantrySearchOpen = open;
|
||||
if (open) {
|
||||
isCalendarOpen = false;
|
||||
isFilterOpen = false;
|
||||
}
|
||||
document.documentElement.classList.toggle('is-inline-search-open', pantrySearchOpen);
|
||||
if (clearQuery) pantrySearchQuery = '';
|
||||
const input = document.getElementById('pantry-search-input');
|
||||
if (input) {
|
||||
if (open) {
|
||||
input.value = pantrySearchQuery;
|
||||
if (focusInput) {
|
||||
input.focus();
|
||||
input.setSelectionRange(input.value.length, input.value.length);
|
||||
}
|
||||
} else {
|
||||
input.blur();
|
||||
}
|
||||
}
|
||||
syncHorizonUI();
|
||||
window.requestAnimationFrame(() => {
|
||||
document.getElementById('pantry-search')?.focus();
|
||||
});
|
||||
if (clearQuery && hadQuery) renderBoard();
|
||||
}
|
||||
|
||||
function closeCalendar() {
|
||||
@@ -406,13 +447,12 @@ function closeCalendar() {
|
||||
function openCalendar() {
|
||||
ensureValidHorizonDate();
|
||||
calendarMonthAnchor = startOfMonth(horizonEndDate);
|
||||
isSearchExpanded = false;
|
||||
isFilterOpen = false;
|
||||
isCalendarOpen = true;
|
||||
syncHorizonUI();
|
||||
requestAnimationFrame(() => {
|
||||
pantryCalendar?.reapplyLayout();
|
||||
pantryCalendar?.resetTrackPosition();
|
||||
stabilizeSwipeCalendarLayout({
|
||||
calendar: pantryCalendar,
|
||||
viewport: 'pantry-cal-viewport',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -423,8 +463,8 @@ function closeFilter() {
|
||||
}
|
||||
|
||||
function toggleFilterPanel() {
|
||||
if (pantrySearchOpen) return;
|
||||
isCalendarOpen = false;
|
||||
isSearchExpanded = false;
|
||||
isFilterOpen = !isFilterOpen;
|
||||
syncHorizonUI();
|
||||
}
|
||||
@@ -522,8 +562,8 @@ function classifyIngredients(searchQuery) {
|
||||
/* ══════════════════════ TILE RENDERING ══════════════════════ */
|
||||
|
||||
function tileIconHtml(item, size = 'sm') {
|
||||
const wrap = size === 'lg' ? 'w-9 h-9' : 'w-6 h-6';
|
||||
const iconSize = size === 'lg' ? 'text-[18px]' : 'text-[12px]';
|
||||
const wrap = size === 'lg' ? 'w-11 h-11' : 'w-7 h-7';
|
||||
const iconSize = size === 'lg' ? 'text-[22px]' : 'text-[15px]';
|
||||
if (item.image) {
|
||||
return `<div class="${wrap} shrink-0 overflow-hidden"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain"></div>`;
|
||||
}
|
||||
@@ -533,12 +573,12 @@ function tileIconHtml(item, size = 'sm') {
|
||||
function shortfallTileHtml(item) {
|
||||
const clamp = item.name.length > 25 ? ' min-w-0' : '';
|
||||
return `
|
||||
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
|
||||
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
|
||||
${tileIconHtml(item, 'lg')}
|
||||
<div class="flex-1 min-w-0 flex flex-col gap-1">
|
||||
<p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
|
||||
<div class="pv2-track flex-1 h-1 rounded-full overflow-hidden">
|
||||
<div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div>
|
||||
</div>
|
||||
<span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--text-body-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
|
||||
@@ -550,12 +590,12 @@ function shortfallTileHtml(item) {
|
||||
function sufficientTileHtml(item) {
|
||||
const clamp = item.name.length > 25 ? ' min-w-0' : '';
|
||||
return `
|
||||
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
|
||||
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
|
||||
${tileIconHtml(item, 'lg')}
|
||||
<div class="flex-1 min-w-0 flex flex-col gap-1">
|
||||
<p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
|
||||
<div class="pv2-track flex-1 h-1 rounded-full overflow-hidden">
|
||||
<div class="h-full rounded-full" style="width:100%; background:rgb(var(--success-rgb));"></div>
|
||||
</div>
|
||||
<span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
|
||||
@@ -568,7 +608,7 @@ function notPlannedChipHtml(item) {
|
||||
const hasStock = item.qty > 0;
|
||||
const clamp = item.name.length > 25 ? ' min-w-0' : '';
|
||||
return `
|
||||
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
|
||||
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
|
||||
${tileIconHtml(item)}
|
||||
<p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:${hasStock ? 'rgb(var(--text-muted-rgb))' : 'rgb(var(--text-dim-rgb))'};">${esc(item.name)}</p>
|
||||
<span class="text-[10px] font-semibold tabular-nums shrink-0 ml-auto" style="color:${hasStock ? 'rgb(var(--text-dim-rgb))' : 'rgb(var(--text-subdued-rgb))'};">${esc(formatQty(item.qty))} ${esc(unitLabel(item.unit))}</span>
|
||||
@@ -589,7 +629,7 @@ function renderBoard() {
|
||||
const root = document.getElementById('pantry-board');
|
||||
if (!root) return;
|
||||
|
||||
const q = document.getElementById('pantry-search')?.value || '';
|
||||
const q = pantrySearchQuery;
|
||||
const hasFilters = hasActivePantryFilters();
|
||||
const { shortfalls, sufficient, notPlanned } = classifyIngredients(q);
|
||||
|
||||
@@ -668,6 +708,8 @@ export function refreshPantry() {
|
||||
}
|
||||
|
||||
export function setupPantry() {
|
||||
ensureFilterPopoverStyles();
|
||||
|
||||
if (!ingredientCard) {
|
||||
ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
|
||||
ingredientCard.bind();
|
||||
@@ -676,26 +718,32 @@ export function setupPantry() {
|
||||
syncHorizonUI();
|
||||
renderBoard();
|
||||
|
||||
// Scroll shadow under top bar
|
||||
const pantryScroll = document.getElementById('pantry-scroll');
|
||||
const topbarOuter = document.getElementById('pantry-topbar-outer');
|
||||
if (pantryScroll && topbarOuter) {
|
||||
const shadow = document.createElement('div');
|
||||
shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
|
||||
topbarOuter.appendChild(shadow);
|
||||
pantryScroll.addEventListener('scroll', () => {
|
||||
shadow.style.opacity = pantryScroll.scrollTop > 2 ? '1' : '0';
|
||||
});
|
||||
}
|
||||
|
||||
// Search
|
||||
document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
|
||||
document.getElementById('pantry-search')?.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') closeSearch();
|
||||
document.getElementById('pantry-search-btn')?.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
setPantrySearchOpen(true, { focusInput: true });
|
||||
});
|
||||
document.getElementById('pantry-search-input')?.addEventListener('input', (event) => {
|
||||
pantrySearchQuery = event.target.value.trim();
|
||||
renderBoard();
|
||||
});
|
||||
document.getElementById('pantry-search-input')?.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'Escape') return;
|
||||
event.stopPropagation();
|
||||
setPantrySearchOpen(false, { clearQuery: true });
|
||||
});
|
||||
document.getElementById('pantry-filter-bottom-btn')?.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (pantrySearchOpen) {
|
||||
setPantrySearchOpen(false, { clearQuery: true });
|
||||
}
|
||||
});
|
||||
document.getElementById('pantry-filter-pill-btn')?.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (pantrySearchOpen) return;
|
||||
closeCalendar();
|
||||
toggleFilterPanel();
|
||||
});
|
||||
document.getElementById('pantry-search-toggle')?.addEventListener('click', () => openSearch());
|
||||
document.getElementById('pantry-search-close')?.addEventListener('click', () => closeSearch());
|
||||
document.getElementById('pantry-filter-toggle')?.addEventListener('click', () => toggleFilterPanel());
|
||||
document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
pantryFilters = { categories: [], sections: [] };
|
||||
@@ -747,10 +795,30 @@ export function setupPantry() {
|
||||
if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
|
||||
closeCalendar();
|
||||
}
|
||||
if (isFilterOpen && !target.closest('#pantry-filter-wrap')) {
|
||||
if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-pill-btn')) {
|
||||
closeFilter();
|
||||
}
|
||||
});
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'Escape') return;
|
||||
if (pantrySearchOpen) {
|
||||
setPantrySearchOpen(false, { clearQuery: true });
|
||||
return;
|
||||
}
|
||||
if (pantrySearchQuery) clearSearchInput();
|
||||
if (isFilterOpen) closeFilter();
|
||||
});
|
||||
window.addEventListener('app-tab-change', () => {
|
||||
if (pantrySearchOpen) setPantrySearchOpen(false);
|
||||
closeFilter();
|
||||
closeCalendar();
|
||||
});
|
||||
window.closePantrySearch = () => {
|
||||
if (pantrySearchOpen) setPantrySearchOpen(false);
|
||||
};
|
||||
window.closePantryFilter = () => {
|
||||
closeFilter();
|
||||
};
|
||||
}
|
||||
|
||||
window.refreshPantry = refreshPantry;
|
||||
|
||||
@@ -12,8 +12,8 @@ let filterState = {
|
||||
maxMinutes: DEFAULT_MAX_MINUTES,
|
||||
};
|
||||
|
||||
let isSearchExpanded = false;
|
||||
let recipeListDocListenersBound = false;
|
||||
let recipeSearchOpen = false;
|
||||
|
||||
function matchesFilters(recipe) {
|
||||
const { query, slots, tags, minMinutes, maxMinutes } = filterState;
|
||||
@@ -43,53 +43,80 @@ function getFilteredRecipes() {
|
||||
return Object.values(RECIPES).filter(matchesFilters);
|
||||
}
|
||||
|
||||
function getActiveRecipeFilterCount() {
|
||||
let count = filterState.slots.length + filterState.tags.length;
|
||||
if (filterState.minMinutes > DEFAULT_MIN_MINUTES || filterState.maxMinutes < DEFAULT_MAX_MINUTES) count += 1;
|
||||
return count;
|
||||
}
|
||||
|
||||
function syncRecipeScrollShadow() {
|
||||
const searchShell = document.getElementById('recipe-search-shell');
|
||||
if (searchShell) {
|
||||
searchShell.style.boxShadow = 'var(--shadow-shell)';
|
||||
}
|
||||
syncRecipeTopbarUI();
|
||||
}
|
||||
|
||||
function syncRecipeTopbarUI() {
|
||||
const defaultRow = document.getElementById('recipe-default-row');
|
||||
const searchWrap = document.getElementById('recipe-search-wrap');
|
||||
const searchShell = document.getElementById('recipe-search-shell');
|
||||
|
||||
const showSearch = isSearchExpanded;
|
||||
|
||||
if (defaultRow) {
|
||||
defaultRow.style.opacity = showSearch ? '0' : '1';
|
||||
defaultRow.style.transform = showSearch ? 'translateY(-2px) scale(0.98)' : 'translateY(0) scale(1)';
|
||||
defaultRow.style.pointerEvents = showSearch ? 'none' : 'auto';
|
||||
}
|
||||
|
||||
const rightWrap = document.getElementById('recipe-filter-wrap');
|
||||
const rightBtn = document.getElementById('recipe-filter-btn');
|
||||
const rightIcon = document.getElementById('recipe-right-btn-icon');
|
||||
const filterCount = document.getElementById('recipe-filter-count');
|
||||
const floatingFilterCount = document.getElementById('recipe-filter-float-count');
|
||||
const dot = document.getElementById('recipe-search-active-dot');
|
||||
const isOpen = recipeSearchOpen;
|
||||
if (searchWrap) searchWrap.classList.toggle('hidden', isOpen);
|
||||
if (searchShell) {
|
||||
searchShell.style.opacity = showSearch ? '1' : '0';
|
||||
searchShell.style.transform = showSearch ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
|
||||
searchShell.style.pointerEvents = showSearch ? 'auto' : 'none';
|
||||
searchShell.style.boxShadow = 'var(--shadow-shell)';
|
||||
searchShell.style.opacity = isOpen ? '1' : '0';
|
||||
searchShell.style.pointerEvents = isOpen ? 'auto' : 'none';
|
||||
searchShell.style.transform = isOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
|
||||
}
|
||||
if (rightIcon) {
|
||||
rightIcon.className = 'fas fa-xmark';
|
||||
}
|
||||
if (rightBtn) {
|
||||
rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
|
||||
}
|
||||
if (rightWrap) {
|
||||
rightWrap.classList.toggle('hidden', !isOpen);
|
||||
}
|
||||
if (filterCount) {
|
||||
const showCount = false;
|
||||
filterCount.classList.toggle('hidden', !showCount);
|
||||
filterCount.classList.toggle('flex', showCount);
|
||||
}
|
||||
if (floatingFilterCount) {
|
||||
const activeCount = getActiveRecipeFilterCount();
|
||||
floatingFilterCount.textContent = String(activeCount);
|
||||
floatingFilterCount.classList.toggle('hidden', activeCount === 0);
|
||||
floatingFilterCount.classList.toggle('flex', activeCount > 0);
|
||||
}
|
||||
if (dot) {
|
||||
const hasQuery = Boolean(filterState.query);
|
||||
dot.classList.toggle('hidden', !hasQuery);
|
||||
}
|
||||
}
|
||||
|
||||
function closeSearch() {
|
||||
function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
|
||||
const hadQuery = Boolean(filterState.query);
|
||||
recipeSearchOpen = open;
|
||||
if (open) window.closeFilters?.();
|
||||
document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen);
|
||||
if (clearQuery) {
|
||||
filterState.query = '';
|
||||
}
|
||||
const input = document.getElementById('recipe-search-input');
|
||||
const hadQuery = Boolean(input?.value);
|
||||
if (input) {
|
||||
input.value = '';
|
||||
if (open) {
|
||||
input.value = filterState.query;
|
||||
if (focusInput) {
|
||||
input.focus();
|
||||
input.setSelectionRange(input.value.length, input.value.length);
|
||||
}
|
||||
} else {
|
||||
input.blur();
|
||||
}
|
||||
filterState.query = '';
|
||||
isSearchExpanded = false;
|
||||
}
|
||||
syncRecipeTopbarUI();
|
||||
if (hadQuery) renderGrid();
|
||||
}
|
||||
|
||||
function openSearch() {
|
||||
isSearchExpanded = true;
|
||||
window.closeFilters?.();
|
||||
syncRecipeTopbarUI();
|
||||
window.requestAnimationFrame(() => {
|
||||
document.getElementById('recipe-search-input')?.focus();
|
||||
});
|
||||
if (clearQuery && hadQuery) renderGrid();
|
||||
}
|
||||
|
||||
function renderGrid() {
|
||||
@@ -102,7 +129,7 @@ function renderGrid() {
|
||||
emptyStateEl: emptyState,
|
||||
recipes: getFilteredRecipes(),
|
||||
showSlotLabels: false,
|
||||
cardClassName: 'recipe-list-card',
|
||||
cardClassName: 'recipe-list-card recipe-catalog-card',
|
||||
});
|
||||
syncRecipeTopbarUI();
|
||||
requestAnimationFrame(syncRecipeScrollShadow);
|
||||
@@ -111,46 +138,43 @@ function renderGrid() {
|
||||
export function getRecipeListHTML() {
|
||||
return `
|
||||
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[rgb(var(--app-bg-rgb))] z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
|
||||
<div id="recipe-top-bar" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
|
||||
<div class="pointer-events-auto relative z-[1] w-full">
|
||||
<div id="recipe-topbar" class="relative min-h-12">
|
||||
|
||||
<div id="recipe-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
|
||||
<h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Katalog przepisów</h1>
|
||||
|
||||
<div id="recipe-filter-wrap" class="relative shrink-0">
|
||||
<button type="button" id="recipe-filter-btn" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));" aria-label="Otwórz filtry">
|
||||
<i class="fas fa-sliders-h text-[12px]" aria-hidden="true"></i>
|
||||
<span id="recipe-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button type="button" id="recipe-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important; color:rgb(var(--text-body-rgb));" aria-label="Szukaj">
|
||||
<i class="fas fa-search text-[13px]" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="recipe-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
|
||||
<i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
<input type="search" id="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
|
||||
class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
|
||||
<button type="button" id="recipe-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:rgb(var(--card-soft-rgb)); border:none; color:rgb(var(--text-dim-rgb));">
|
||||
<i class="fas fa-xmark text-[13px]"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${getRecipeGridSectionHTML({
|
||||
scrollId: 'recipe-scroll',
|
||||
gridId: 'recipe-grid',
|
||||
emptyStateId: 'recipe-empty-state',
|
||||
scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-[5.35rem] pb-24 bg-[rgb(var(--app-bg-rgb))]',
|
||||
scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-32 bg-[rgb(var(--app-bg-rgb))]',
|
||||
gridClassName: 'grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]',
|
||||
emptyTitle: 'Brak wyników',
|
||||
emptyMessage: 'Zmień kryteria wyszukiwania lub filtry',
|
||||
})}
|
||||
<div id="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
|
||||
<div id="recipe-search-wrap" class="pointer-events-auto absolute bottom-0">
|
||||
<button type="button" id="recipe-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj przepisów">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
<span id="recipe-search-active-dot" class="hidden absolute -top-1 -right-1 w-[0.65rem] h-[0.65rem] rounded-full" style="background:rgb(var(--text-emphasis-rgb)); border:1px solid rgba(255,255,255,0.42); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="recipe-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-none absolute bottom-0 flex items-center gap-2 px-3" style="opacity:0; transform:translateY(0.45rem) scale(0.98); transition:opacity 0.2s ease, transform 0.2s ease;">
|
||||
<i class="fas fa-search shrink-0" aria-hidden="true"></i>
|
||||
<input type="search" id="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
|
||||
class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:rgb(var(--text-body-rgb)); margin:0; padding:0 !important;">
|
||||
</div>
|
||||
|
||||
<div id="recipe-filter-wrap" class="pointer-events-auto absolute bottom-0 right-4">
|
||||
<button type="button" id="recipe-filter-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
|
||||
<i id="recipe-right-btn-icon" class="fas fa-sliders-h" aria-hidden="true"></i>
|
||||
<span id="recipe-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="recipe-filter-float-controls" class="pointer-events-none absolute inset-x-0 z-[33] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
|
||||
<div id="recipe-filter-float-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width)); width:var(--bottom-filter-pill-width); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
|
||||
<button type="button" id="recipe-filter-float-btn" class="recipe-glass-btn w-full h-full rounded-full relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
|
||||
<i class="fas fa-sliders-h" aria-hidden="true"></i>
|
||||
<span id="recipe-filter-float-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -175,23 +199,28 @@ export function refreshRecipeList() {
|
||||
export function setupRecipeList() {
|
||||
renderGrid();
|
||||
|
||||
document.getElementById('recipe-search-btn')?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
setSearchOpen(true, { focusInput: true });
|
||||
});
|
||||
document.getElementById('recipe-search-input')?.addEventListener('input', (e) => {
|
||||
filterState.query = e.target.value.trim();
|
||||
renderGrid();
|
||||
});
|
||||
document.getElementById('recipe-search-input')?.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeSearch();
|
||||
if (e.key !== 'Escape') return;
|
||||
e.stopPropagation();
|
||||
setSearchOpen(false, { clearQuery: true });
|
||||
});
|
||||
|
||||
document.getElementById('recipe-search-toggle')?.addEventListener('click', () => openSearch());
|
||||
document.getElementById('recipe-search-close')?.addEventListener('click', () => closeSearch());
|
||||
|
||||
document.getElementById('recipe-filter-btn')?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
if (isSearchExpanded) {
|
||||
isSearchExpanded = false;
|
||||
syncRecipeTopbarUI();
|
||||
if (recipeSearchOpen) {
|
||||
setSearchOpen(false, { clearQuery: true });
|
||||
}
|
||||
});
|
||||
document.getElementById('recipe-filter-float-btn')?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
if (recipeSearchOpen) return;
|
||||
window.openFilters?.('recipes');
|
||||
});
|
||||
|
||||
@@ -202,24 +231,24 @@ export function setupRecipeList() {
|
||||
if (recipeId) window.openRecipeDetail?.(recipeId);
|
||||
});
|
||||
|
||||
const recipeScroll = document.getElementById('recipe-scroll');
|
||||
const recipeTopBar = document.getElementById('recipe-top-bar');
|
||||
if (recipeScroll && recipeTopBar) {
|
||||
const shadow = document.createElement('div');
|
||||
shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
|
||||
recipeTopBar.appendChild(shadow);
|
||||
recipeScroll.addEventListener('scroll', () => {
|
||||
shadow.style.opacity = recipeScroll.scrollTop > 2 ? '1' : '0';
|
||||
});
|
||||
}
|
||||
|
||||
if (!recipeListDocListenersBound) {
|
||||
recipeListDocListenersBound = true;
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key !== 'Escape' || !isSearchExpanded) return;
|
||||
if (!document.getElementById('main-view')?.classList.contains('hidden')) {
|
||||
closeSearch();
|
||||
const isRecipeViewVisible = !document.getElementById('main-view')?.classList.contains('hidden');
|
||||
if (e.key !== 'Escape') return;
|
||||
if (isRecipeViewVisible) {
|
||||
if (recipeSearchOpen) setSearchOpen(false, { clearQuery: true });
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('app-tab-change', () => {
|
||||
if (recipeSearchOpen) setSearchOpen(false);
|
||||
syncRecipeTopbarUI();
|
||||
});
|
||||
|
||||
window.closeRecipeSearch = () => {
|
||||
if (recipeSearchOpen) setSearchOpen(false);
|
||||
syncRecipeTopbarUI();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +16,9 @@ import { aggregateSelectedDaysIngredientNeed } from '../services/planIngredients
|
||||
import { loadPlans, dateKey } from '../services/planStore.js?v=2';
|
||||
import { addDays, startOfDay, startOfMonth } from '../services/dateUtils.js';
|
||||
import { createSwipePopoverCalendarHTML, initSwipePopoverCalendar } from '../ui/swipePopoverCalendar.js';
|
||||
import { createCalendarPopoverController, createCalendarPopoverHTML } from '../ui/calendarPopover.js';
|
||||
import { showAppToast } from '../ui/toast.js';
|
||||
import { ensureFilterPopoverStyles } from '../ui/filterPopover.js?v=1';
|
||||
|
||||
/* ── helpers ── */
|
||||
|
||||
@@ -64,6 +66,7 @@ let expandedAmount = 0;
|
||||
let calendarOpen = false;
|
||||
let calendarMonth = startOfMonth(new Date());
|
||||
let shoppingCalendar = null;
|
||||
let shoppingCalendarPopover = null;
|
||||
|
||||
/* ── day helpers ── */
|
||||
|
||||
@@ -116,35 +119,41 @@ function groupByCategory(items) {
|
||||
export function getShoppingListHTML() {
|
||||
return `
|
||||
<div id="shopping-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
|
||||
|
||||
<!-- ── header ── -->
|
||||
<div class="shrink-0 px-4 pt-5 pb-0">
|
||||
|
||||
<!-- title row + pill + bought button (position:relative anchors the popups) -->
|
||||
<div class="flex items-center gap-2 mb-4" style="position:relative;">
|
||||
<h1 class="flex-1 text-[18px] font-bold" style="color:rgb(var(--text-emphasis-rgb));">Lista zakupów</h1>
|
||||
<button type="button" id="sl-range-pill" class="min-w-0 max-w-[10rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all shrink" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell);">
|
||||
<!-- ── floating range pill above bottom nav ── -->
|
||||
<div id="shopping-top-controls" class="pointer-events-none absolute inset-x-0 z-[24] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
|
||||
<div id="shopping-range-wrap" class="pointer-events-auto absolute bottom-0" style="left:var(--catalog-menu-left, 1rem); width:var(--recipe-dock-width, calc(100% - 2rem)); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); position:relative;">
|
||||
<button type="button" id="sl-range-pill" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3 transition-all">
|
||||
<span id="sl-range-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
|
||||
<i id="sl-range-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
</button>
|
||||
<button type="button" id="sl-bought-btn" class="relative h-10 w-10 rounded-full flex items-center justify-center transition-all shrink-0" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell);" aria-label="Kupione">
|
||||
<i class="fas fa-check text-[13px]" style="color:rgb(var(--text-body-rgb));"></i>
|
||||
<span id="sl-bought-badge" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-bold items-center justify-center" style="background:rgb(var(--success-rgb)); color:rgb(var(--on-accent-rgb)); display:none;">0</span>
|
||||
<i id="sl-range-chevron" class="fas fa-chevron-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
</button>
|
||||
|
||||
<!-- popup calendar (absolute, overlays content below) -->
|
||||
<div id="sl-calendar-popup" style="position:absolute; top:calc(100% + 0.5rem); left:0; right:0; z-index:50; pointer-events:none; opacity:0; transform:translateY(-6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
|
||||
<div class="rounded-[1.35rem] py-3" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); box-shadow:var(--shadow-shell);">
|
||||
${createSwipePopoverCalendarHTML({
|
||||
<!-- popup calendar (absolute, overlays content above) -->
|
||||
${createCalendarPopoverHTML({
|
||||
id: 'sl-calendar-popup',
|
||||
calendarHTML: createSwipePopoverCalendarHTML({
|
||||
idPrefix: 'sl-cal',
|
||||
weekdays: WEEKDAY_SHORT,
|
||||
}),
|
||||
popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- popup bought (absolute, overlays content below) -->
|
||||
<div id="sl-bought-popup" style="position:absolute; top:calc(100% + 0.5rem); left:0; right:0; z-index:50; pointer-events:none; opacity:0; transform:translateY(-6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
|
||||
<div class="rounded-[1.35rem] px-3 py-3" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); box-shadow:var(--shadow-shell);">
|
||||
<!-- ── scrollable list ── -->
|
||||
<div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:1rem; scroll-padding-top:1rem; padding-bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 2.25rem);">
|
||||
<div id="sl-board"></div>
|
||||
</div>
|
||||
|
||||
<div id="shopping-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
|
||||
<div id="sl-bought-wrap" class="pointer-events-auto absolute bottom-0" style="left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--recipe-bottom-control-size, 3.9rem));">
|
||||
<button type="button" id="sl-bought-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Kupione">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
<span id="sl-bought-badge" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-bold items-center justify-center" style="background:rgb(var(--success-rgb)); color:rgb(var(--on-accent-rgb)); display:none;">0</span>
|
||||
</button>
|
||||
|
||||
<!-- popup bought (absolute, overlays content above controls) -->
|
||||
<div id="sl-bought-popup" style="position:absolute; bottom:calc(100% + 0.5rem); right:0; width:min(calc(100vw - 1.5rem), 22rem); z-index:50; pointer-events:none; opacity:0; transform:translateY(6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
|
||||
<div class="filter-liquid-surface filter-liquid-panel rounded-[1.35rem] px-3 py-3">
|
||||
<div class="flex items-center justify-between mb-2 px-1">
|
||||
<span class="text-[11px] font-bold uppercase tracking-wider" style="color:rgb(var(--text-dim-rgb));">Kupione (<span id="sl-bought-popup-count">0</span>)</span>
|
||||
<button type="button" id="sl-clear-session" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
|
||||
@@ -156,11 +165,6 @@ export function getShoppingListHTML() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── scrollable list ── -->
|
||||
<div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-3 pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
|
||||
<div id="sl-board"></div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
@@ -188,12 +192,12 @@ function initShoppingCalendar() {
|
||||
showDot: dateKey(day) === todayKey() && !isSelected,
|
||||
}),
|
||||
theme: {
|
||||
selectedBg: 'rgb(var(--card-rgb))',
|
||||
selectedBorder: 'rgb(var(--border-input-rgb))',
|
||||
selectedBorder: 'rgba(var(--text-emphasis-rgb),0.34)',
|
||||
selectedText: 'rgb(var(--text-emphasis-rgb))',
|
||||
selectedDot: 'rgb(var(--text-emphasis-rgb))',
|
||||
bg: 'rgb(var(--app-bg-rgb))',
|
||||
border: 'rgb(var(--card-raised-rgb))',
|
||||
selectedShadow: '0 0 0 1px rgba(var(--text-emphasis-rgb),0.10)',
|
||||
bg: 'rgba(255,255,255,0.08)',
|
||||
border: 'transparent',
|
||||
text: 'rgb(var(--text-body-soft-rgb))',
|
||||
dimmedBg: 'transparent',
|
||||
dimText: CALENDAR_DIM_TEXT,
|
||||
@@ -201,6 +205,16 @@ function initShoppingCalendar() {
|
||||
dot: 'rgb(var(--text-faint-rgb))',
|
||||
},
|
||||
});
|
||||
shoppingCalendarPopover = createCalendarPopoverController({
|
||||
popupId: 'sl-calendar-popup',
|
||||
viewportId: 'sl-cal-viewport',
|
||||
triggerId: 'sl-range-pill',
|
||||
chevronId: 'sl-range-chevron',
|
||||
chevronOpenTransform: 'rotate(180deg)',
|
||||
chevronClosedTransform: 'rotate(0deg)',
|
||||
getCalendar: () => shoppingCalendar,
|
||||
hideViewportDuringLayout: true,
|
||||
});
|
||||
}
|
||||
|
||||
function updatePillLabel() {
|
||||
@@ -212,63 +226,12 @@ function openCalendar() {
|
||||
if (boughtPopupOpen) closeBoughtPopup();
|
||||
calendarOpen = true;
|
||||
calendarMonth = startOfMonth(new Date());
|
||||
const popup = document.getElementById('sl-calendar-popup');
|
||||
const viewport = document.getElementById('sl-cal-viewport');
|
||||
const chevron = document.getElementById('sl-range-chevron');
|
||||
const pill = document.getElementById('sl-range-pill');
|
||||
if (popup) {
|
||||
popup.style.pointerEvents = 'auto';
|
||||
popup.style.opacity = '1';
|
||||
popup.style.transform = 'translateY(0) scale(1)';
|
||||
}
|
||||
if (chevron) chevron.style.transform = 'rotate(180deg)';
|
||||
if (pill) {
|
||||
pill.style.background = 'rgb(var(--sunken-rgb))';
|
||||
pill.style.borderColor = 'rgb(var(--border-input-rgb))';
|
||||
}
|
||||
if (viewport) {
|
||||
viewport.style.opacity = '0';
|
||||
viewport.style.visibility = 'hidden';
|
||||
viewport.style.transition = 'opacity 120ms ease';
|
||||
}
|
||||
shoppingCalendar?.render();
|
||||
// Compute geometry while hidden; reveal only after stable layout.
|
||||
const ensureStableCalendarLayout = (attempt = 0) => {
|
||||
const vw = viewport ? (viewport.clientWidth || viewport.getBoundingClientRect().width) : 0;
|
||||
if (vw < 8 && attempt < 8) {
|
||||
requestAnimationFrame(() => ensureStableCalendarLayout(attempt + 1));
|
||||
return;
|
||||
}
|
||||
shoppingCalendar?.reapplyLayout();
|
||||
shoppingCalendar?.resetTrackPosition();
|
||||
requestAnimationFrame(() => {
|
||||
shoppingCalendar?.reapplyLayout();
|
||||
shoppingCalendar?.resetTrackPosition();
|
||||
if (viewport) {
|
||||
viewport.style.visibility = 'visible';
|
||||
viewport.style.opacity = '1';
|
||||
}
|
||||
});
|
||||
};
|
||||
requestAnimationFrame(() => ensureStableCalendarLayout());
|
||||
shoppingCalendarPopover?.open();
|
||||
}
|
||||
|
||||
function closeCalendar() {
|
||||
calendarOpen = false;
|
||||
const popup = document.getElementById('sl-calendar-popup');
|
||||
const chevron = document.getElementById('sl-range-chevron');
|
||||
const pill = document.getElementById('sl-range-pill');
|
||||
if (popup) {
|
||||
popup.style.pointerEvents = 'none';
|
||||
popup.style.opacity = '0';
|
||||
popup.style.transform = 'translateY(-6px) scale(0.98)';
|
||||
}
|
||||
if (chevron) chevron.style.transform = '';
|
||||
if (pill) {
|
||||
pill.style.background = 'rgb(var(--card-rgb))';
|
||||
pill.style.borderColor = 'rgb(var(--border-card-rgb))';
|
||||
}
|
||||
shoppingCalendar?.resetTrackPosition();
|
||||
shoppingCalendarPopover?.close({ clearPendingRange: true });
|
||||
}
|
||||
|
||||
function toggleCalendar() {
|
||||
@@ -298,7 +261,7 @@ function closeBoughtPopup() {
|
||||
if (popup) {
|
||||
popup.style.pointerEvents = 'none';
|
||||
popup.style.opacity = '0';
|
||||
popup.style.transform = 'translateY(-6px) scale(0.98)';
|
||||
popup.style.transform = 'translateY(6px) scale(0.98)';
|
||||
}
|
||||
if (btn) {
|
||||
btn.style.background = 'rgb(var(--card-rgb))';
|
||||
@@ -326,11 +289,11 @@ function activeItemHtml(item) {
|
||||
const stepAmt = isExpanded ? expandedAmount : Math.max(step, Math.round(item.shortfall / step) * step);
|
||||
|
||||
return `
|
||||
<div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="background:rgb(var(--success-rgb)); box-shadow:var(--shadow-card);">
|
||||
<div class="sl-swipe-bg-buy absolute inset-0 flex items-center pr-5 justify-end">
|
||||
<div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="box-shadow:var(--shadow-card);">
|
||||
<div class="sl-swipe-bg-buy absolute inset-0 flex items-center pr-5 justify-end" style="background:rgb(var(--success-rgb)); opacity:0;">
|
||||
<i class="fas fa-check text-white text-lg"></i>
|
||||
</div>
|
||||
<div class="sl-swipe-inner rounded-xl" style="background:rgb(var(--card-rgb)); position:relative;"
|
||||
<div class="sl-swipe-inner" style="background:rgb(var(--card-rgb)); position:relative;"
|
||||
data-id="${esc(item.ingredientId)}" data-unit="${esc(item.unit)}" data-shortfall="${item.shortfall}">
|
||||
<div class="sl-item-main flex items-center gap-3 py-1.5 px-3 cursor-pointer select-none">
|
||||
${mediaHtml}
|
||||
@@ -370,11 +333,11 @@ function boughtItemHtml(entry) {
|
||||
: `<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb));"><i class="fas ${icon} text-xs" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
|
||||
|
||||
return `
|
||||
<div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="background:rgb(var(--danger-rgb)); box-shadow:var(--shadow-card);">
|
||||
<div class="sl-swipe-bg-undo absolute inset-0 flex items-center pl-5 justify-start">
|
||||
<div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="box-shadow:var(--shadow-card);">
|
||||
<div class="sl-swipe-bg-undo absolute inset-0 flex items-center pl-5 justify-start" style="background:rgb(var(--danger-rgb)); opacity:0;">
|
||||
<i class="fas fa-rotate-left text-white text-lg"></i>
|
||||
</div>
|
||||
<div class="sl-swipe-inner flex items-center gap-3 py-1.5 px-3 rounded-xl" style="background:rgb(var(--card-rgb)); position:relative;" data-entry-id="${esc(entry.id)}">
|
||||
<div class="sl-swipe-inner flex items-center gap-3 py-1.5 px-3" style="background:rgb(var(--card-rgb)); position:relative;" data-entry-id="${esc(entry.id)}">
|
||||
${mediaHtml}
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="block text-[13px] font-medium leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(entry.name)}</span>
|
||||
@@ -389,6 +352,10 @@ function boughtItemHtml(entry) {
|
||||
function attachSwipe(container, opts) {
|
||||
const inner = container.querySelector('.sl-swipe-inner');
|
||||
if (!inner) return;
|
||||
const bgBuy = container.querySelector('.sl-swipe-bg-buy');
|
||||
const bgUndo = container.querySelector('.sl-swipe-bg-undo');
|
||||
const showBg = (el) => { if (el) el.style.opacity = '1'; };
|
||||
const hideBgs = () => { if (bgBuy) bgBuy.style.opacity = '0'; if (bgUndo) bgUndo.style.opacity = '0'; };
|
||||
let startX = 0, startY = 0, dx = 0, tracking = false, decided = false, goingH = false;
|
||||
|
||||
container.addEventListener('pointerdown', (e) => {
|
||||
@@ -407,10 +374,10 @@ function attachSwipe(container, opts) {
|
||||
decided = true;
|
||||
goingH = Math.abs(ddx) > Math.abs(ddy);
|
||||
}
|
||||
if (!goingH) { tracking = false; inner.style.transform = ''; return; }
|
||||
if (!goingH) { tracking = false; inner.style.transform = ''; hideBgs(); return; }
|
||||
dx = ddx;
|
||||
if (dx > 0 && opts.onRight) inner.style.transform = `translateX(${Math.min(dx, 90)}px)`;
|
||||
else if (dx < 0 && opts.onLeft) inner.style.transform = `translateX(${Math.max(dx, -90)}px)`;
|
||||
if (dx > 0 && opts.onRight) { inner.style.transform = `translateX(${Math.min(dx, 90)}px)`; showBg(bgBuy); }
|
||||
else if (dx < 0 && opts.onLeft) { inner.style.transform = `translateX(${Math.max(dx, -90)}px)`; showBg(bgUndo); }
|
||||
});
|
||||
|
||||
const finish = () => {
|
||||
@@ -426,6 +393,7 @@ function attachSwipe(container, opts) {
|
||||
setTimeout(opts.onLeft, 180);
|
||||
} else {
|
||||
inner.style.transform = '';
|
||||
hideBgs();
|
||||
}
|
||||
dx = 0;
|
||||
};
|
||||
@@ -435,6 +403,7 @@ function attachSwipe(container, opts) {
|
||||
tracking = false;
|
||||
inner.style.transition = 'transform 0.2s ease';
|
||||
inner.style.transform = '';
|
||||
hideBgs();
|
||||
dx = 0;
|
||||
});
|
||||
}
|
||||
@@ -613,6 +582,8 @@ export function refreshShoppingList() {
|
||||
}
|
||||
|
||||
export function setupShoppingList() {
|
||||
ensureFilterPopoverStyles();
|
||||
|
||||
if (getSelectedDays().length === 0) setSelectedDays(getDefaultSelectedDays());
|
||||
|
||||
updatePillLabel();
|
||||
@@ -653,5 +624,7 @@ export function setupShoppingList() {
|
||||
renderAll();
|
||||
});
|
||||
|
||||
window.closeShoppingCalendar = () => closeCalendar();
|
||||
window.closeShoppingBoughtPopup = () => closeBoughtPopup();
|
||||
window.refreshShoppingList = refreshShoppingList;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user