@phosart/common 0.4.22

package/dist/ModalGallery/ImageSection.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import '@fortawesome/fontawesome-free/css/all.min.css';
+
+	import type { ArtPiece } from '../util/art.js';
+	import ImageView from './ImageView.svelte';
+
+	interface Props {
+		piece: ArtPiece;
+		onnext: () => void;
+		onprev: () => void;
+	}
+
+	let { piece, onnext, onprev }: Props = $props();
+
+	function doOnNext(e: Event) {
+		e.stopPropagation();
+		onnext();
+	}
+	function doOnPrev(e: Event) {
+		e.stopPropagation();
+		onprev();
+	}
+
+	let containerWidth: number = $state(0);
+	let containerHeight: number = $state(0);
+	let containerHeightLessInfo = $derived(Math.max(0, containerHeight - 50));
+
+	let scaleByHeight = $derived(
+		containerWidth / containerHeightLessInfo >
+			piece.image.full.fallback.w / piece.image.full.fallback.h
+	);
+	let scalingFactor: number = $derived(
+		scaleByHeight
+			? containerHeightLessInfo / piece.image.full.fallback.h
+			: containerWidth / piece.image.full.fallback.w
+	);
+
+	let w = $derived(piece.image.full.fallback.w * scalingFactor);
+	let h = $derived(piece.image.full.fallback.h * scalingFactor + 50);
+
+	let nameInHeader = $derived(w > 500);
+</script>
+
+<div class="image-section">
+	<div class="nav-container">
+		<div
+			class="fa-solid fa-arrow-left hoverable"
+			style="font-size: 32pt;"
+			onclick={doOnPrev}
+			onkeypress={doOnPrev}
+			role="button"
+			tabindex={-1}
+		></div>
+	</div>
+
+	<div class="main-container">
+		<div class="bounding-div" bind:clientHeight={containerHeight} bind:clientWidth={containerWidth}>
+			<div
+				class="bounded-div"
+				onclick={(e) => e.stopPropagation()}
+				onkeypress={(e) => e.stopPropagation()}
+				role="button"
+				tabindex={-1}
+				style="width: {w}px; height: {h}px"
+			>
+				<ImageView {piece} {nameInHeader} />
+			</div>
+		</div>
+	</div>
+
+	<div class="nav-container">
+		<div
+			class="fa-solid fa-arrow-right hoverable"
+			style="font-size: 32pt;"
+			onclick={doOnNext}
+			onkeypress={doOnPrev}
+			role="button"
+			tabindex={-1}
+		></div>
+	</div>
+</div>
+
+<style>
+	:global(:root) {
+		--info-height: 50px;
+		--carousel-height: 100px;
+	}
+
+	@media only screen and (max-width: 800px) {
+		:global(:root) {
+			--info-height: 50px;
+			--carousel-height: 75px;
+		}
+		.nav-container.nav-container {
+			width: 0;
+		}
+	}
+
+	.image-section {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		overflow: visible;
+		max-height: calc(100% - 50px - var(--carousel-height));
+		position: relative;
+		height: 100%;
+		padding: 2rem;
+	}
+	.nav-container {
+		color: white;
+		height: min-content;
+		width: 50px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		transition: width 0.2s ease-in-out;
+		overflow: hidden;
+	}
+
+	.hoverable {
+		color: gray;
+		cursor: pointer;
+	}
+	.hoverable:hover {
+		color: white;
+	}
+
+	.main-container {
+		flex-grow: 1;
+		height: 100%;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		overflow: hidden;
+	}
+
+	.bounding-div {
+		flex-grow: 1;
+		height: 100%;
+		position: relative;
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.bounded-div {
+		overflow: hidden;
+		border-radius: 12px;
+		display: flex;
+		position: relative;
+	}
+</style>

package/dist/ModalGallery/ImageSection.svelte.d.ts

@@ -0,0 +1,11 @@
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import type { ArtPiece } from '../util/art.ts';
+interface Props {
+    piece: ArtPiece;
+    onnext: () => void;
+    onprev: () => void;
+}
+declare const ImageSection: import("svelte").Component<Props, {}, "">;
+type ImageSection = ReturnType<typeof ImageSection>;
+export default ImageSection;
+//# sourceMappingURL=ImageSection.svelte.d.ts.map

package/dist/ModalGallery/ImageSection.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSection.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/ModalGallery/ImageSection.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,+CAA+C,CAAC;AAEvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI9C,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AA6DF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/ModalGallery/ImageView.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	import Image from '../Image.svelte';
+
+	import Spinner from './Spinner.svelte';
+	import Headline from '../Postcard/Headline.svelte';
+	import Description from '../Postcard/Description.svelte';
+	import type { ArtPiece } from '../util/art.js';
+
+	interface Props {
+		piece: ArtPiece;
+		nameInHeader: boolean;
+	}
+
+	let { piece, nameInHeader }: Props = $props();
+
+	let loading = $state(true);
+	let showingDescription = $state(false);
+
+	let selectedAlt: number | null = $state(null);
+
+	let image = $derived(typeof selectedAlt === 'number' ? piece.alts![selectedAlt] : piece);
+
+	run(() => {
+		if (piece) loading = true;
+	});
+</script>
+
+<Spinner {loading} />
+
+<div class="image-container">
+	<Image
+		video={image.video?.full}
+		controls
+		picture={image.image.full}
+		alt={image.alt}
+		onloaded={() => (loading = false)}
+	/>
+</div>
+
+<div class="headline-container">
+	<Headline {piece} bind:showingDescription showName={nameInHeader} />
+</div>
+<div class="description-container">
+	<Description
+		{piece}
+		bind:visible={showingDescription}
+		showName={!nameInHeader}
+		{selectedAlt}
+		onselectalt={(i) => (selectedAlt = i ?? null)}
+	/>
+</div>
+
+<style>
+	.image-container {
+		position: absolute;
+		top: var(--info-height);
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+	.description-container {
+		position: absolute;
+		top: var(--info-height);
+		height: calc(100% - var(--info-height));
+		left: 0;
+		right: 0;
+		color: #ddd;
+		overflow-x: hidden;
+		overflow-y: auto;
+
+		& > :global(*) {
+			background-color: #000c;
+		}
+		:global(strong) {
+			color: white;
+		}
+		pointer-events: none;
+	}
+
+	.headline-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		color: white;
+		background-color: black;
+		height: var(--info-height);
+		z-index: 9;
+	}
+</style>

package/dist/ModalGallery/ImageView.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ArtPiece } from '../util/art.ts';
+interface Props {
+    piece: ArtPiece;
+    nameInHeader: boolean;
+}
+declare const ImageView: import("svelte").Component<Props, {}, "">;
+type ImageView = ReturnType<typeof ImageView>;
+export default ImageView;
+//# sourceMappingURL=ImageView.svelte.d.ts.map

package/dist/ModalGallery/ImageView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageView.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/ModalGallery/ImageView.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG9C,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;CACtB;AA2CF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/ModalGallery/Spinner.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	interface Props {
+		loading: boolean;
+	}
+
+	let { loading }: Props = $props();
+</script>
+
+<svg class:loading class="loading-spinner" xmlns="http://www.w3.org/2000/svg">
+	<rect
+		width="100%"
+		height="100%"
+		fill="none"
+		stroke="#278965"
+		stroke-linecap="butt"
+		rx="12px"
+		ry="12px"
+	/>
+	<rect
+		width="100%"
+		height="100%"
+		fill="none"
+		stroke="#3EB489"
+		stroke-dasharray="40, 100"
+		stroke-linecap="butt"
+		rx="12px"
+		ry="12px"
+	/>
+</svg>
+
+<style>
+	.loading-spinner {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: 12px;
+		z-index: 10;
+		opacity: 0;
+		transition: opacity 0.2s;
+		pointer-events: none;
+
+		rect {
+			transition: stroke-width 0.2s;
+			stroke-width: 0;
+		}
+
+		&.loading {
+			opacity: 1;
+
+			rect {
+				stroke-width: 4px;
+			}
+			rect:last-of-type {
+				stroke-dashoffset: 600;
+				stroke-dasharray: 200, 80;
+				animation: svgloader forwards linear infinite 0.5s;
+			}
+		}
+	}
+
+	@keyframes svgloader {
+		from {
+			stroke-dashoffset: 280;
+		}
+		to {
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

package/dist/ModalGallery/Spinner.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    loading: boolean;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;
+//# sourceMappingURL=Spinner.svelte.d.ts.map

package/dist/ModalGallery/Spinner.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/ModalGallery/Spinner.svelte.ts"],"names":[],"mappings":"AAGC,UAAU,KAAK;IACd,OAAO,EAAE,OAAO,CAAC;CACjB;AAgBF,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/ModalGallery.svelte

@@ -0,0 +1,165 @@
+<script lang="ts" module>
+	import '@fortawesome/fontawesome-free/css/all.min.css';
+
+	const modelGalleryOpens: boolean[] = [];
+
+	export function useIsModelGalleryOpen() {
+		const idx = modelGalleryOpens.length;
+		modelGalleryOpens.push(false);
+		return {
+			set open(isOpen: boolean) {
+				modelGalleryOpens[idx] = isOpen;
+			},
+			get open() {
+				return modelGalleryOpens[idx];
+			}
+		};
+	}
+
+	export function isAnyModelGalleryOpen() {
+		return modelGalleryOpens.reduce((p, v) => p || v, false);
+	}
+</script>
+
+<script lang="ts">
+	import type { ArtPiece } from './util/art.js';
+	import Modal from './Modal.svelte';
+	import { onMount } from 'svelte';
+	import ImageSection from './ModalGallery/ImageSection.svelte';
+	import Carousel from './ModalGallery/Carousel.svelte';
+	import HighResContext from './HighResContext.svelte';
+
+	interface Props {
+		pieces: ArtPiece[];
+		selected?: number | null;
+		hashUpdateReady?: boolean;
+		browser: boolean;
+	}
+
+	let {
+		pieces,
+		selected = $bindable(null),
+		hashUpdateReady = $bindable(false),
+		browser
+	}: Props = $props();
+
+	const isGalleryOpen = $state(useIsModelGalleryOpen());
+
+	onMount(() => {
+		const handler = (e: KeyboardEvent) => {
+			if (e.code === 'ArrowLeft' && selected !== null) {
+				selected = (selected - 1 + pieces.length) % pieces.length;
+			} else if (e.code === 'ArrowRight' && selected !== null) {
+				selected = (selected + 1) % pieces.length;
+			}
+		};
+
+		const hashchange = (hce: { oldURL?: string; newURL: string }) => {
+			const hash = new URL(hce.newURL).hash.replace(/^#/, '');
+			if (browser) {
+				console.log('H ->', hash);
+				const foundSelected = pieces.findIndex((piece) => piece.slug === hash);
+				if (!isAnyModelGalleryOpen()) {
+					if (foundSelected !== -1) {
+						selected = foundSelected;
+					}
+				} else if (isGalleryOpen.open) {
+					if (!hash || hash == '#') {
+						selected = null;
+					} else if (foundSelected !== -1) {
+						selected = foundSelected;
+					}
+				}
+			}
+		};
+		hashchange({ newURL: window.location.href });
+
+		window.addEventListener('hashchange', hashchange);
+		document.body.addEventListener('keydown', handler);
+
+		hashUpdateReady = true;
+		return () => {
+			window.removeEventListener('hashchange', hashchange);
+			document.body.removeEventListener('keydown', handler);
+		};
+	});
+
+	function updateHash(selected: number | null) {
+		if (!browser) return;
+
+		if (isAnyModelGalleryOpen() === false && window.location.hash) {
+			window.location.hash = '##';
+		} else if (selected !== null && pieces[selected]) {
+			console.log('H <-', pieces[selected].slug);
+			window.location.hash = '#' + encodeURIComponent(pieces[selected].slug);
+		}
+	}
+
+	$effect.pre(() => {
+		isGalleryOpen.open = selected !== null;
+	});
+	$effect.pre(() => {
+		if (hashUpdateReady) {
+			updateHash(selected);
+		}
+	});
+</script>
+
+<Modal open={selected !== null} onclose={() => (selected = null)}>
+	<div class="gallery-container">
+		<div
+			role="button"
+			tabindex={-1}
+			class="fa-solid fa-close hoverable close-button"
+			onclick={(e) => {
+				e.stopPropagation();
+				selected = null;
+			}}
+			onkeypress={() => {
+				selected = null;
+			}}
+		></div>
+		<div style="flex-grow: 1"></div>
+
+		{#if selected !== null}
+			<HighResContext>
+				<ImageSection
+					piece={pieces[selected]}
+					onprev={() =>
+						(selected = selected !== null ? (selected - 1 + pieces.length) % pieces.length : null)}
+					onnext={() => (selected = selected !== null ? (selected + 1) % pieces.length : null)}
+				/>
+			</HighResContext>
+		{/if}
+
+		<div style="flex-grow: 1"></div>
+
+		<Carousel {pieces} {browser} bind:selected />
+	</div>
+</Modal>
+
+<style>
+	.gallery-container {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+		user-select: none;
+	}
+
+	.close-button {
+		font-size: 20pt;
+		position: fixed;
+		top: 20px;
+		left: 20px;
+		z-index: 40;
+	}
+
+	.hoverable {
+		color: gray;
+		cursor: pointer;
+	}
+	.hoverable:hover {
+		color: white;
+	}
+</style>

package/dist/ModalGallery.svelte.d.ts

@@ -0,0 +1,16 @@
+import '@fortawesome/fontawesome-free/css/all.min.css';
+export declare function useIsModelGalleryOpen(): {
+    open: boolean;
+};
+export declare function isAnyModelGalleryOpen(): boolean;
+import type { ArtPiece } from './util/art.ts';
+interface Props {
+    pieces: ArtPiece[];
+    selected?: number | null;
+    hashUpdateReady?: boolean;
+    browser: boolean;
+}
+declare const ModalGallery: import("svelte").Component<Props, {}, "selected" | "hashUpdateReady">;
+type ModalGallery = ReturnType<typeof ModalGallery>;
+export default ModalGallery;
+//# sourceMappingURL=ModalGallery.svelte.d.ts.map

package/dist/ModalGallery.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalGallery.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ModalGallery.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,+CAA+C,CAAC;AAIvD,wBAAgB,qBAAqB;UAIlB,OAAO;EAOzB;AAED,wBAAgB,qBAAqB,YAEpC;AAGF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQ7C,UAAU,KAAK;IACd,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CACjB;AA4GF,QAAA,MAAM,YAAY,uEAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/OpengraphMeta.svelte

@@ -0,0 +1,125 @@
+<script lang="ts" module>
+	import { asString } from './Postcard/ArtistLink.svelte';
+	import { normalizeArtist, type ResourceRef } from './util/art.js';
+	import { useLibraryConfig } from './util/phosart_config.svelte.js';
+
+	interface OpengraphMeta {
+		title: string | null;
+		description: string | null;
+		siteName: string | null;
+		image: string | null;
+		width: number | null;
+		height: number | null;
+	}
+
+	function getMeta(resource: ResourceRef, siteName?: string | null): OpengraphMeta {
+		const base: OpengraphMeta = {
+			title: null,
+			description: null,
+			siteName: siteName ?? null,
+			image: null,
+			width: null,
+			height: null
+		};
+
+		if (!resource.type || !resource.resource) {
+			return base;
+		}
+
+		switch (resource.type) {
+			case 'artist':
+				base.title = `@${resource.resource.info?.name ?? resource.resource.name}`;
+				break;
+			case 'character': {
+				base.title = `${resource.resource.info?.name ?? resource.resource.name}`;
+				if (resource.resource.from) {
+					base.title += ` by @${resource.resource.from}`;
+				}
+				const image =
+					resource.resource.info?.thumbnail?.full.fallback ??
+					resource.resource.info?.picture.full.fallback ??
+					null;
+
+				base.image = image?.src ?? null;
+				base.width = image?.w ?? null;
+				base.height = image?.h ?? null;
+				base.description =
+					resource.resource.info?.short_description ?? resource.resource.info?.description ?? null;
+
+				break;
+			}
+			case 'piece': {
+				base.title = resource.resource.name;
+				const artists = normalizeArtist(resource.resource.artist);
+				if (artists.length > 0) {
+					base.title += ` by ${asString(artists)}`;
+				}
+				base.description = resource.resource.description || resource.resource.alt;
+				base.image = resource.resource.image.full.fallback.src;
+				base.width = resource.resource.image.full.fallback.w;
+				base.height = resource.resource.image.full.fallback.h;
+				break;
+			}
+			case 'tag':
+				base.title = `#${resource.resource}`;
+				break;
+		}
+
+		if (base.siteName) {
+			base.title += ` | ${base.siteName}`;
+		}
+		return base;
+	}
+</script>
+
+<script lang="ts">
+	type Props = ResourceRef &
+		// If unspecified, the following will be inferred from above
+		Partial<OpengraphMeta> & {
+			setPageTitle?: boolean;
+		};
+
+	const {
+		setPageTitle,
+		height: userHeight,
+		image: userImage,
+		siteName: userSiteName,
+		description: userDescription,
+		title: userTitle,
+		width: userWidth,
+		...resourceRef
+	}: Props = $props();
+
+	const config = useLibraryConfig();
+
+	const inferred = getMeta(resourceRef, config.siteName);
+	const height = $derived(userHeight ?? inferred.height);
+	const image = $derived(userImage ?? inferred.image);
+	const siteName = $derived(userSiteName ?? inferred.siteName);
+	const description = $derived(userDescription ?? inferred.description);
+	const title = $derived(userTitle ?? inferred.title);
+	const width = $derived(userWidth ?? inferred.width);
+</script>
+
+<svelte:head>
+	{#if resourceRef.type && resourceRef.resource}
+		{#if siteName}
+			<meta property="og:site_name" content={siteName} />
+		{/if}
+		{#if title}
+			<meta property="og:title" content={title} />
+			{#if setPageTitle}
+				<title>{title}</title>
+			{/if}
+		{/if}
+		{#if description}
+			<meta property="og:description" content={description} />
+		{/if}
+		{#if image && width && height}
+			<meta property="og:image" content={image} />
+			<meta property="og:image:width" content={String(width)} />
+			<meta property="og:image:height" content={String(height)} />
+			<meta name="twitter:card" content="summary_large_image" />
+		{/if}
+	{/if}
+</svelte:head>

package/dist/OpengraphMeta.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type ResourceRef } from './util/art.ts';
+interface OpengraphMeta {
+    title: string | null;
+    description: string | null;
+    siteName: string | null;
+    image: string | null;
+    width: number | null;
+    height: number | null;
+}
+type Props = ResourceRef & Partial<OpengraphMeta> & {
+    setPageTitle?: boolean;
+};
+declare const OpengraphMeta: import("svelte").Component<Props, {}, "">;
+export default OpengraphMeta;
+//# sourceMappingURL=OpengraphMeta.svelte.d.ts.map

package/dist/OpengraphMeta.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpengraphMeta.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OpengraphMeta.svelte.ts"],"names":[],"mappings":"AAIC,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAGlE,UAAU,aAAa;IACtB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AA6DD,KAAK,KAAK,GAAG,WAAW,GAEvB,OAAO,CAAC,aAAa,CAAC,GAAG;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAqDJ,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAE5D,eAAe,aAAa,CAAC"}