daycards strip
This commit is contained in:
Vincent van der Wal
@@ -0,0 +1,289 @@
|
||||
<script lang="ts">
|
||||
import { onMount, tick } from 'svelte';
|
||||
|
||||
import { formatZoned, getRelativeDayLabel, isSameDayInZone } from '$lib/utils/date';
|
||||
|
||||
import { getTempStyle } from '../../utils/colors';
|
||||
import { getWeatherIconName } from '../../utils/weather-codes';
|
||||
import { type FetchedDaily, type WeatherUnits } from './types';
|
||||
|
||||
interface Props {
|
||||
daily: FetchedDaily | null;
|
||||
selectedDay: Date;
|
||||
units: WeatherUnits;
|
||||
onSelectDay: (date: Date, index: number) => void;
|
||||
canExtend?: boolean;
|
||||
onExtend?: () => void;
|
||||
canExtendPast?: boolean;
|
||||
onExtendPast?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
daily,
|
||||
selectedDay,
|
||||
units,
|
||||
onSelectDay,
|
||||
canExtend = false,
|
||||
onExtend,
|
||||
canExtendPast = false,
|
||||
onExtendPast
|
||||
}: Props = $props();
|
||||
|
||||
// ─── Scroll-driven collapse (full → compact) ────────────────────────────────
|
||||
// 0 = full cards (at the top of the page), 1 = compact square strip (stuck).
|
||||
// The progress sentinel sits ABOVE the sticky strip, so the strip shrinking
|
||||
// (which reflows the table BELOW it) never feeds back into the measurement.
|
||||
let progress = $state(0);
|
||||
let sentinelEl = $state<HTMLDivElement>();
|
||||
let stripScrollEl = $state<HTMLDivElement>();
|
||||
let daysWrapEl = $state<HTMLDivElement>();
|
||||
// Resolved in onMount (client only) so this never touches `window` during the
|
||||
// prerender of city pages.
|
||||
let scrollParent: HTMLElement | Window | null = $state(null);
|
||||
|
||||
const clamp = (v: number, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, v));
|
||||
const lerp = (a: number, b: number) => a + (b - a) * progress;
|
||||
|
||||
function findScrollParent(el: HTMLElement | null): HTMLElement | Window {
|
||||
let node = el?.parentElement ?? null;
|
||||
while (node) {
|
||||
const oy = getComputedStyle(node).overflowY;
|
||||
if (oy === 'auto' || oy === 'scroll') return node;
|
||||
node = node.parentElement;
|
||||
}
|
||||
return window;
|
||||
}
|
||||
|
||||
// Distance (px) over which the collapse plays out once the strip sticks.
|
||||
const RANGE = 120;
|
||||
let ticking = false;
|
||||
|
||||
function measure() {
|
||||
ticking = false;
|
||||
if (!sentinelEl || !scrollParent) return;
|
||||
const topRef = scrollParent instanceof Window ? 0 : scrollParent.getBoundingClientRect().top;
|
||||
const top = sentinelEl.getBoundingClientRect().top - topRef;
|
||||
progress = clamp(-top / RANGE);
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
if (ticking) return;
|
||||
ticking = true;
|
||||
requestAnimationFrame(measure);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
scrollParent = findScrollParent(sentinelEl ?? null);
|
||||
const target: EventTarget = scrollParent;
|
||||
target.addEventListener('scroll', onScroll, { passive: true });
|
||||
window.addEventListener('resize', onScroll, { passive: true });
|
||||
measure();
|
||||
return () => {
|
||||
target.removeEventListener('scroll', onScroll);
|
||||
window.removeEventListener('resize', onScroll);
|
||||
};
|
||||
});
|
||||
|
||||
// Re-measure once data (and therefore the strip height) changes.
|
||||
$effect(() => {
|
||||
void daily;
|
||||
tick().then(measure);
|
||||
});
|
||||
|
||||
// Start scrolled so the "Past" button sits just off the left edge (revealed by
|
||||
// scrolling left), with the first day flush to the content edge — same as the
|
||||
// desktop cards. Runs once per dataset.
|
||||
let scrolledForRef: FetchedDaily | null = null;
|
||||
$effect(() => {
|
||||
const d = daily;
|
||||
if (!d || !canExtendPast || !stripScrollEl || !daysWrapEl || scrolledForRef === d) return;
|
||||
scrolledForRef = d;
|
||||
const scroll = stripScrollEl;
|
||||
const wrap = daysWrapEl;
|
||||
requestAnimationFrame(() => {
|
||||
// 12px = the strip's px-3 left padding, so the first day lands on the edge
|
||||
scroll.scrollLeft +=
|
||||
wrap.getBoundingClientRect().left - scroll.getBoundingClientRect().left - 12;
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Derived sizing ─────────────────────────────────────────────────────────
|
||||
const CELL_W = 64;
|
||||
// Full height fits the whole stack (weekday, label, icon, temps, precip+wind)
|
||||
// without clipping; the horizontal scroll container also clips vertically, so
|
||||
// the content must fit inside the cell.
|
||||
let cellH = $derived(lerp(134, 64));
|
||||
let iconSize = $derived(lerp(40, 20));
|
||||
// Top padding eases from pt-1.5 (6px) when full to pt-0.5 (2px) when compact.
|
||||
let padTop = $derived(lerp(6, 1));
|
||||
// The secondary rows collapse (height + opacity together) faster than the
|
||||
// overall shrink, so the cell reaches a clean square before it stops shrinking.
|
||||
let detailFactor = $derived(clamp(1 - progress * 1.6));
|
||||
let relFactor = $derived(clamp(1 - progress * 2));
|
||||
// Bar background/divider/shadow fade in promptly once it starts collapsing.
|
||||
let chromeOpacity = $derived(clamp(progress / 0.35));
|
||||
</script>
|
||||
|
||||
<!-- progress sentinel: 0-height marker just above the sticky strip -->
|
||||
<div bind:this={sentinelEl} aria-hidden="true"></div>
|
||||
|
||||
<div class="daystrip sticky -top-3 z-30 -mx-3 md:hidden" style="--chrome:{chromeOpacity}">
|
||||
<div class="flex gap-1.5 overflow-x-auto px-3 py-2" bind:this={stripScrollEl}>
|
||||
{#if daily}
|
||||
{#if canExtendPast && onExtendPast}
|
||||
<button
|
||||
type="button"
|
||||
class="strip-side flex shrink-0 flex-col items-center justify-center rounded-xl border border-dashed border-border/70 text-muted-foreground"
|
||||
style="width:{CELL_W}px;height:{cellH}px"
|
||||
onclick={onExtendPast}
|
||||
aria-label="Load recent past days"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.75"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 6l-6 6 6 6" />
|
||||
</svg>
|
||||
<span class="text-[9px] leading-tight font-semibold">Past</span>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-1.5" bind:this={daysWrapEl}>
|
||||
{#each daily.dailyDates as time, index (index)}
|
||||
{@const selected = isSameDayInZone(time, selectedDay, daily.timezone)}
|
||||
{@const tempMax = daily.daily.temperature_2m_max[index]}
|
||||
{@const tempMin = daily.daily.temperature_2m_min[index]}
|
||||
{@const wCode = daily.daily.weather_code[index]}
|
||||
{@const precipSum = daily.daily.precipitation_sum[index]}
|
||||
{@const windMax = daily.daily.windspeed_10m_max[index]}
|
||||
{@const maxStyle = getTempStyle(tempMax, String(units.temperature_unit))}
|
||||
{#if tempMax != null && !isNaN(tempMax) && !(tempMax === 0 && tempMin === 0)}
|
||||
<button
|
||||
type="button"
|
||||
class="strip-cell flex shrink-0 cursor-pointer flex-col items-center justify-start gap-0.5 rounded-xl border px-1 pb-1.5 {selected
|
||||
? 'border-primary bg-primary/10 ring-1 ring-primary/50'
|
||||
: 'border-border/60 bg-card'}"
|
||||
style="width:{CELL_W}px;height:{cellH}px;padding-top:{padTop}px"
|
||||
aria-pressed={selected}
|
||||
onclick={() => onSelectDay(time, index)}
|
||||
>
|
||||
<span
|
||||
class="text-[11px] font-semibold tracking-wide {selected ? 'text-primary' : ''}"
|
||||
>
|
||||
{formatZoned(time, daily.timezone, 'EEE').toUpperCase()}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="overflow-hidden text-[9px] leading-none text-muted-foreground"
|
||||
style="opacity:{relFactor};max-height:{relFactor * 14}px"
|
||||
>
|
||||
{getRelativeDayLabel(time, daily.timezone)}
|
||||
</span>
|
||||
|
||||
<div class="relative">
|
||||
<svg class="fill-foreground" width="{iconSize}px" height="{iconSize}px">
|
||||
<use
|
||||
xlink:href="/images/weather-icons/{getWeatherIconName(wCode, true)}.svg#Layer_1"
|
||||
></use>
|
||||
</svg>
|
||||
<!-- night companion icon, present in the full view, fades as it collapses -->
|
||||
<svg
|
||||
class="absolute -right-1 -bottom-0.5 rounded-full bg-card fill-foreground/60 p-px ring-1 ring-border/60"
|
||||
width="{iconSize * 0.44}px"
|
||||
height="{iconSize * 0.44}px"
|
||||
style="opacity:{relFactor}"
|
||||
>
|
||||
<use
|
||||
xlink:href="/images/weather-icons/{getWeatherIconName(
|
||||
wCode,
|
||||
false
|
||||
)}.svg#Layer_1"
|
||||
></use>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex items-baseline gap-1 leading-none">
|
||||
<span
|
||||
class="rounded-md px-1.5 py-0.5 text-[12px] font-extrabold tabular-nums"
|
||||
style="background-color:{maxStyle.bg};color:{maxStyle.fg}"
|
||||
>
|
||||
{tempMax.toFixed(0)}°
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold tabular-nums text-muted-foreground">
|
||||
{tempMin.toFixed(0)}°
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex w-full flex-col items-center gap-0.5 overflow-hidden text-[10px] tabular-nums text-muted-foreground"
|
||||
style="opacity:{detailFactor};max-height:{detailFactor * 42}px"
|
||||
>
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<svg class="fill-sky-500" width="13" height="13">
|
||||
<use xlink:href="/images/weather-icons/wi-raindrop.svg#Layer_1"></use>
|
||||
</svg>
|
||||
{Number(precipSum ?? 0).toFixed(precipSum >= 10 ? 0 : 1)}
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<svg class="fill-muted-foreground" width="13" height="13">
|
||||
<use xlink:href="/images/weather-icons/wi-strong-wind.svg#Layer_1"></use>
|
||||
</svg>
|
||||
{windMax?.toFixed(0) ?? '-'}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if canExtend && onExtend}
|
||||
<button
|
||||
type="button"
|
||||
class="strip-side flex shrink-0 flex-col items-center justify-center rounded-xl border border-dashed border-border/70 text-muted-foreground"
|
||||
style="width:{CELL_W}px;height:{cellH}px"
|
||||
onclick={onExtend}
|
||||
aria-label="Load the longer-range forecast"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.75"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14" />
|
||||
</svg>
|
||||
<span class="text-[9px] leading-tight font-semibold">15d</span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* The bar background/divider/shadow fade in only once the strip has collapsed
|
||||
into its compact form, so at the top of the page it reads as plain cards. */
|
||||
.daystrip {
|
||||
background: color-mix(
|
||||
in oklab,
|
||||
var(--color-background) calc(var(--chrome) * 100%),
|
||||
transparent
|
||||
);
|
||||
backdrop-filter: blur(calc(var(--chrome) * 6px));
|
||||
border-bottom: 1px solid
|
||||
color-mix(in oklab, var(--color-border) calc(var(--chrome) * 100%), transparent);
|
||||
box-shadow: 0 6px 12px -8px rgba(0, 0, 0, calc(var(--chrome) * 0.35));
|
||||
}
|
||||
.strip-cell,
|
||||
.strip-side {
|
||||
transition:
|
||||
border-color 0.15s,
|
||||
background-color 0.15s;
|
||||
}
|
||||
.daystrip :global(.overflow-x-auto) {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user