wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

component working now, need sanity check for other svelte 5 updates

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-03-12 16:22:31 -07:00
parent 221bb70a00
commit 5834fd3008
Failed to extract signature
2 changed files with 47 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/components/BeforeAfter/BeforeAfter.stories.svelte
View file

@ -39,15 +39,21 @@
afterSrc={afterImg}
afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
>
<div slot="beforeOverlay" class="overlay p-3 before">
<p class="h4 font-bold">July 7, 2020</p>
<p class="body-note">Initially, this site was far smaller.</p>
</div>
<div slot="afterOverlay" class="overlay p-3 after">
<p class="h4 font-bold">Oct. 20, 2020</p>
<p class="body-note">But then forces built up.</p>
</div>
<p slot="caption">Photos by MAXAR Technologies, 2021.</p>
{#snippet beforeOverlay()}
<div class="overlay p-3 before">
<p class="h4 font-bold">July 7, 2020</p>
<p class="body-note">Initially, this site was far smaller.</p>
</div>
{/snippet}
{#snippet afterOverlay()}
<div class="overlay p-3 after">
<p class="h4 font-bold">Oct. 20, 2020</p>
<p class="body-note">But then forces built up.</p>
</div>
{/snippet}
{#snippet caption()}
<p class="body-note">Photos by MAXAR Technologies, 2021.</p>
{/snippet}
</BeforeAfter>
<style lang="scss">
@ -71,15 +77,16 @@
afterSrc={afterImg}
afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
>
<div let:description={id} slot="beforeOverlay" class="overlay p-3">
<p class="body-caption" {id}>
On July 7, 2020, the base contained only a few transport vehicles.
</p>
</div>
<div let:description={id} slot="afterOverlay" class="overlay p-3">
<!-- 👇 id can also be used on an element containing multiple text elements -->
<div {id}>
<p class="body-caption">
{#snippet beforeOverlay()}
<div let:description={id} class="overlay p-3">
<p class="body-caption" {id}>
On July 7, 2020, the base contained only a few transport vehicles.
</p>
</div>
{/snippet}
{#snippet afterOverlay()}
<div let:description={id} class="overlay p-3">
<p class="body-caption" {id}>
But by October, tanks and artillery could be seen.
</p>
<p class="body-caption">
@ -87,9 +94,12 @@
based here.
</p>
</div>
</div>
<p slot="caption">Photos by MAXAR Technologies, 2021.</p>
{/snippet}
{#snippet caption()}
<p class="body-note">Photos by MAXAR Technologies, 2021.</p>
{/snippet}
</BeforeAfter>
<style lang="scss">
div.overlay {
max-width: 250px;

26
src/components/BeforeAfter/BeforeAfter.svelte
View file

@ -88,19 +88,23 @@
caption,
}: Props = $props();
let img: HTMLImageElement;
let imgOffset: DOMRect | null = null;
/** DOM nodes are undefined until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation.
*/
let img: HTMLImageElement | undefined = $state(undefined);
/** Defaults with an empty DOMRect with all values set to 0 */
let imgOffset: DOMRect = $state(new DOMRect());
let sliding = false;
let figure: HTMLElement;
let beforeOverlayWidth = 0;
let figure: HTMLElement | undefined = $state(undefined);
let beforeOverlayWidth = $state(0);
let isFocused = false;
let containerWidth: number;
let containerWidth: number = $state(0); // check if this should be undefined
let containerHeight = $derived(
containerWidth && heightRatio ? containerWidth * heightRatio : height
);
let w = $derived((imgOffset && imgOffset.width) || 0);
let w = $derived(imgOffset.width);
let x = $derived(w * offset);
let figStyle = $derived(`width:100%;height:${containerHeight}px;`);
const imgStyle = 'width:100%;height:100%;';
@ -110,13 +114,15 @@
const onfocus = () => (isFocused = true);
const onblur = () => (isFocused = false);
/** Handle left or right arrows being pressed */
const handleKeyDown = (e: KeyboardEvent) => {
if (!isFocused) return;
const { keyCode } = e; // DEPRECATED, change to key or code tk
const { code, key } = e;
const margin = handleMargin / w;
if (keyCode === 39) {
if (code === 'ArrowRight' || key === 'ArrowRight') {
offset = Math.min(1 - margin, offset + keyPressStep);
} else if (keyCode === 37) {
} else if (code === 'ArrowLeft' || key === 'ArrowLeft') {
offset = Math.max(0 + margin, offset - keyPressStep);
}
};
@ -129,6 +135,7 @@
measureImage();
};
/** This can probably get fixed?? */
const measureLoadedImage = (e: Event) => {
if (e.type === 'load') {
imgOffset = (e.target as HTMLImageElement).getBoundingClientRect();
@ -182,6 +189,7 @@
<Block {width} {id} class="photo before-after fmy-6 {cls}">
<div style="height: {containerHeight}px;" bind:clientWidth={containerWidth}>
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<figure
style={figStyle}
class="before-after-container relative overflow-hidden my-0 mx-auto"