@phosart/common 0.4.55 → 0.4.57

package/dist/Image.svelte

@@ -15,6 +15,7 @@
 		loading?: boolean;
 		transformSrc?: (src: string) => string;
 		nsfw?: boolean;
+		lqipFit?: 'cover' | 'contain';
 	}
 
 	let {
@@ -26,7 +27,8 @@
 		controls = false,
 		nolqip = false,
 		loading = $bindable(true),
-		transformSrc: userTransformSrc
+		transformSrc: userTransformSrc,
+		lqipFit = 'contain'
 	}: Props = $props();
 
 	const config = useLibraryConfig();
@@ -43,7 +45,9 @@
 	let src = $derived(highRes ? onlyHighRes(picture) : no4K(picture));
 
 	let background = $derived(
-		!nolqip && src.lqip && showBackground ? `url(${src.lqip.src}) no-repeat center/contain` : 'none'
+		!nolqip && src.lqip && showBackground
+			? `url(${src.lqip.src}) no-repeat center/${lqipFit}`
+			: 'none'
 	);
 
 	$effect(() => {

package/dist/Image.svelte.d.ts

@@ -9,6 +9,7 @@ interface Props {
     loading?: boolean;
     transformSrc?: (src: string) => string;
     nsfw?: boolean;
+    lqipFit?: 'cover' | 'contain';
 }
 declare const Image: import("svelte").Component<Props, {}, "loading">;
 type Image = ReturnType<typeof Image>;

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

@@ -1 +1 @@
-{"version":3,"file":"Image.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Image.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,KAAK,IAAI,UAAU,EAAQ,MAAM,eAAe,CAAC;AAO3E,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAyHF,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Image.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Image.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,KAAK,IAAI,UAAU,EAAQ,MAAM,eAAe,CAAC;AAO3E,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B;AA4HF,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/ModalGallery/ImageSection.svelte

@@ -27,19 +27,23 @@
 		parseInt(getComputedStyle(document.documentElement).getPropertyValue('--info-height') ?? '100')
 	);
 
+	let altWidth: number = $state(0);
 	let containerWidth: number = $state(0);
 	let containerHeight: number = $state(0);
 	let containerHeightLessInfo = $derived(Math.max(0, containerHeight - infoHeight));
+	let containerWidthLessAlt = $derived(containerWidth - altWidth);
 	let isComic = $derived(piece.alts_display === 'comic_panels');
 	let bounded: HTMLDivElement | null = $state(null);
+	let selectedAlt: number | null = $state(null);
 
 	function scale(image: Picture) {
 		const scaleByHeight =
 			!isComic &&
-			containerWidth / containerHeightLessInfo > image.full.fallback.w / image.full.fallback.h;
+			containerWidthLessAlt / containerHeightLessInfo >
+				image.full.fallback.w / image.full.fallback.h;
 		const scalingFactor: number = scaleByHeight
 			? containerHeightLessInfo / image.full.fallback.h
-			: containerWidth / image.full.fallback.w;
+			: containerWidthLessAlt / image.full.fallback.w;
 
 		return scalingFactor;
 	}
@@ -148,35 +152,101 @@
 			bind:this={bounded}
 		>
 			<div class="flex flex-col">
-				<div
-					class="bounded-div"
-					onkeypress={(e) => {
-						e.stopPropagation();
-						scrollDown();
-					}}
-					onclick={(e) => {
-						e.stopPropagation();
-					}}
-					role="button"
-					tabindex={-1}
-					style="width: {w}px; height: {h}px;{isComic ? ' border-radius: 12px 12px 0 0;' : ''}"
-				>
-					<ImageView {piece} {nameInHeader}>
-						{#snippet display(image, onloaded)}
-							<div class="image-container">
-								<Image
-									video={image.video?.full}
-									controls
-									picture={image.image.full}
-									alt={image.alt}
-									nsfw={image.nsfw}
-									{onloaded}
-								/>
-							</div>
-						{/snippet}
-					</ImageView>
+				<div class="flex">
+					<div
+						class="bounded-div"
+						onkeypress={(e) => {
+							e.stopPropagation();
+							scrollDown();
+						}}
+						onclick={(e) => {
+							e.stopPropagation();
+						}}
+						role="button"
+						tabindex={-1}
+						style="
+						z-index: 2; width: {w}px; height: {h}px;{isComic
+							? ' border-radius: 12px 12px 0 0;'
+							: piece.alts && piece.alts.length > 0
+								? ' border-radius: 12px 0 0 12px;'
+								: ''}"
+					>
+						<ImageView bind:selectedAlt {piece} {nameInHeader}>
+							{#snippet display(image, onloaded)}
+								<div class="image-container">
+									<Image
+										video={image.video?.full}
+										controls
+										picture={image.image.full}
+										alt={image.alt}
+										nsfw={image.nsfw}
+										{onloaded}
+									/>
+								</div>
+							{/snippet}
+						</ImageView>
+					</div>
+					{#if piece.alts && piece.alts.length > 0}
+						<div
+							bind:clientWidth={altWidth}
+							style="background-color: transparent; width:75px; position: relative"
+						>
+							{#each piece.alts as alt, i ('alt-' + JSON.stringify(alt))}
+								{@const isOriginal = i === selectedAlt}
+								{@const selPiece = isOriginal ? piece : alt}
+								{@const top = (i * h) / piece.alts.length}
+								{@const WRatio = 75 / selPiece.image.full.fallback.w}
+								{@const myH = selPiece.image.full.fallback.h * WRatio}
+
+								<div>
+									<button
+										onclick={(e) => {
+											e.stopPropagation();
+											selectedAlt = isOriginal ? null : i;
+										}}
+										tabindex={-1}
+										class="altcarry"
+										style="top: {top}px; width:75px; height: {h /
+											piece.alts.length}px; overflow:hidden; position: absolute; z-index: 1;"
+									>
+										<div
+											style="width: 75px; height: {Math.max(
+												myH,
+												h / piece.alts.length
+											)}px; min-height: {myH}px;  position:absolute; top:0;right:0;"
+										>
+											<div class="image-container objr" style="top: 0; object-fit: cover">
+												<Image
+													video={selPiece.video?.full}
+													controls
+													picture={selPiece.image.full}
+													alt={selPiece.alt}
+													loading={false}
+													nolqip
+												/>
+											</div>
+										</div>
+									</button>
+									<div
+										class="alt-tooltip"
+										style="z-index: 3; height: 2rem; text-overflow: elipsis; top: calc({top}px + 1rem);  color: white; padding: 0.5rem; position: absolute; left: -9rem; width: 8rem;  display: flex; justify-content: end; align-items: center;"
+									>
+										<div
+											style="background-color: #0009; border-radius: 0.25rem; padding: 0 0.25rem"
+										>
+											{#if isOriginal}
+												Back to Original Piece
+											{:else}
+												Alt: {alt.name}
+											{/if}
+										</div>
+									</div>
+								</div>
+							{/each}
+						</div>
+					{/if}
 				</div>
-				{#if isComic && piece.alts}
+				{#if isComic && piece.alts && piece.alts.length > 0}
 					{#each piece.alts as alt, i (JSON.stringify(alt))}
 						<div
 							class="bounded-div"
@@ -287,4 +357,30 @@
 		left: 0;
 		right: 0;
 	}
+
+	.objr :global(img) {
+		object-position: right center;
+		object-fit: cover;
+	}
+
+	.altcarry {
+		right: 1rem;
+		transition:
+			right 0.2s ease-in-out,
+			clip-path 0.2s ease-in-out;
+		clip-path: inset(0 0 0 16px);
+	}
+	.altcarry:hover {
+		right: 0rem;
+		clip-path: inset(0 0 0 0);
+	}
+
+	.altcarry:hover ~ .alt-tooltip {
+		opacity: 1;
+	}
+	.alt-tooltip {
+		opacity: 0;
+		user-select: none;
+		transition: opacity 0.2s ease-in-out;
+	}
 </style>

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

@@ -1 +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,EAAW,MAAM,gBAAgB,CAAC;AAMvD,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AAyKF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"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,EAAW,MAAM,gBAAgB,CAAC;AAMvD,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AAsNF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/ModalGallery/ImageView.svelte

@@ -14,17 +14,16 @@
 		display: Snippet<
 			[image: ArtPiece | NonNullable<ArtPiece['alts']>[number], onloaded: () => void]
 		>;
+		selectedAlt?: number | null;
 	}
 
-	let { piece, nameInHeader, display }: Props = $props();
+	let { piece, nameInHeader, display, selectedAlt = $bindable(null) }: Props = $props();
 
 	let config = useLibraryConfig();
 
 	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(() => {

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

@@ -7,8 +7,9 @@ interface Props {
         image: ArtPiece | NonNullable<ArtPiece['alts']>[number],
         onloaded: () => void
     ]>;
+    selectedAlt?: number | null;
 }
-declare const ImageView: import("svelte").Component<Props, {}, "">;
+declare const ImageView: import("svelte").Component<Props, {}, "selectedAlt">;
 type ImageView = ReturnType<typeof ImageView>;
 export default ImageView;
 //# sourceMappingURL=ImageView.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageView.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/ModalGallery/ImageView.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CACf;QAAC,KAAK,EAAE,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;QAAE,QAAQ,EAAE,MAAM,IAAI;KAAC,CAC/E,CAAC;CACF;AA6CF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ImageView.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/ModalGallery/ImageView.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CACf;QAAC,KAAK,EAAE,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;QAAE,QAAQ,EAAE,MAAM,IAAI;KAAC,CAC/E,CAAC;IACF,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AA2CF,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phosart/common",
-  "version": "0.4.55",
+  "version": "0.4.57",
   "files": [
     "dist",
     "!dist/**/*.test.*",

package/src/lib/Image.svelte

@@ -15,6 +15,7 @@
 		loading?: boolean;
 		transformSrc?: (src: string) => string;
 		nsfw?: boolean;
+		lqipFit?: 'cover' | 'contain';
 	}
 
 	let {
@@ -26,7 +27,8 @@
 		controls = false,
 		nolqip = false,
 		loading = $bindable(true),
-		transformSrc: userTransformSrc
+		transformSrc: userTransformSrc,
+		lqipFit = 'contain'
 	}: Props = $props();
 
 	const config = useLibraryConfig();
@@ -43,7 +45,9 @@
 	let src = $derived(highRes ? onlyHighRes(picture) : no4K(picture));
 
 	let background = $derived(
-		!nolqip && src.lqip && showBackground ? `url(${src.lqip.src}) no-repeat center/contain` : 'none'
+		!nolqip && src.lqip && showBackground
+			? `url(${src.lqip.src}) no-repeat center/${lqipFit}`
+			: 'none'
 	);
 
 	$effect(() => {

package/src/lib/ModalGallery/ImageSection.svelte

@@ -27,19 +27,23 @@
 		parseInt(getComputedStyle(document.documentElement).getPropertyValue('--info-height') ?? '100')
 	);
 
+	let altWidth: number = $state(0);
 	let containerWidth: number = $state(0);
 	let containerHeight: number = $state(0);
 	let containerHeightLessInfo = $derived(Math.max(0, containerHeight - infoHeight));
+	let containerWidthLessAlt = $derived(containerWidth - altWidth);
 	let isComic = $derived(piece.alts_display === 'comic_panels');
 	let bounded: HTMLDivElement | null = $state(null);
+	let selectedAlt: number | null = $state(null);
 
 	function scale(image: Picture) {
 		const scaleByHeight =
 			!isComic &&
-			containerWidth / containerHeightLessInfo > image.full.fallback.w / image.full.fallback.h;
+			containerWidthLessAlt / containerHeightLessInfo >
+				image.full.fallback.w / image.full.fallback.h;
 		const scalingFactor: number = scaleByHeight
 			? containerHeightLessInfo / image.full.fallback.h
-			: containerWidth / image.full.fallback.w;
+			: containerWidthLessAlt / image.full.fallback.w;
 
 		return scalingFactor;
 	}
@@ -148,35 +152,101 @@
 			bind:this={bounded}
 		>
 			<div class="flex flex-col">
-				<div
-					class="bounded-div"
-					onkeypress={(e) => {
-						e.stopPropagation();
-						scrollDown();
-					}}
-					onclick={(e) => {
-						e.stopPropagation();
-					}}
-					role="button"
-					tabindex={-1}
-					style="width: {w}px; height: {h}px;{isComic ? ' border-radius: 12px 12px 0 0;' : ''}"
-				>
-					<ImageView {piece} {nameInHeader}>
-						{#snippet display(image, onloaded)}
-							<div class="image-container">
-								<Image
-									video={image.video?.full}
-									controls
-									picture={image.image.full}
-									alt={image.alt}
-									nsfw={image.nsfw}
-									{onloaded}
-								/>
-							</div>
-						{/snippet}
-					</ImageView>
+				<div class="flex">
+					<div
+						class="bounded-div"
+						onkeypress={(e) => {
+							e.stopPropagation();
+							scrollDown();
+						}}
+						onclick={(e) => {
+							e.stopPropagation();
+						}}
+						role="button"
+						tabindex={-1}
+						style="
+						z-index: 2; width: {w}px; height: {h}px;{isComic
+							? ' border-radius: 12px 12px 0 0;'
+							: piece.alts && piece.alts.length > 0
+								? ' border-radius: 12px 0 0 12px;'
+								: ''}"
+					>
+						<ImageView bind:selectedAlt {piece} {nameInHeader}>
+							{#snippet display(image, onloaded)}
+								<div class="image-container">
+									<Image
+										video={image.video?.full}
+										controls
+										picture={image.image.full}
+										alt={image.alt}
+										nsfw={image.nsfw}
+										{onloaded}
+									/>
+								</div>
+							{/snippet}
+						</ImageView>
+					</div>
+					{#if piece.alts && piece.alts.length > 0}
+						<div
+							bind:clientWidth={altWidth}
+							style="background-color: transparent; width:75px; position: relative"
+						>
+							{#each piece.alts as alt, i ('alt-' + JSON.stringify(alt))}
+								{@const isOriginal = i === selectedAlt}
+								{@const selPiece = isOriginal ? piece : alt}
+								{@const top = (i * h) / piece.alts.length}
+								{@const WRatio = 75 / selPiece.image.full.fallback.w}
+								{@const myH = selPiece.image.full.fallback.h * WRatio}
+
+								<div>
+									<button
+										onclick={(e) => {
+											e.stopPropagation();
+											selectedAlt = isOriginal ? null : i;
+										}}
+										tabindex={-1}
+										class="altcarry"
+										style="top: {top}px; width:75px; height: {h /
+											piece.alts.length}px; overflow:hidden; position: absolute; z-index: 1;"
+									>
+										<div
+											style="width: 75px; height: {Math.max(
+												myH,
+												h / piece.alts.length
+											)}px; min-height: {myH}px;  position:absolute; top:0;right:0;"
+										>
+											<div class="image-container objr" style="top: 0; object-fit: cover">
+												<Image
+													video={selPiece.video?.full}
+													controls
+													picture={selPiece.image.full}
+													alt={selPiece.alt}
+													loading={false}
+													nolqip
+												/>
+											</div>
+										</div>
+									</button>
+									<div
+										class="alt-tooltip"
+										style="z-index: 3; height: 2rem; text-overflow: elipsis; top: calc({top}px + 1rem);  color: white; padding: 0.5rem; position: absolute; left: -9rem; width: 8rem;  display: flex; justify-content: end; align-items: center;"
+									>
+										<div
+											style="background-color: #0009; border-radius: 0.25rem; padding: 0 0.25rem"
+										>
+											{#if isOriginal}
+												Back to Original Piece
+											{:else}
+												Alt: {alt.name}
+											{/if}
+										</div>
+									</div>
+								</div>
+							{/each}
+						</div>
+					{/if}
 				</div>
-				{#if isComic && piece.alts}
+				{#if isComic && piece.alts && piece.alts.length > 0}
 					{#each piece.alts as alt, i (JSON.stringify(alt))}
 						<div
 							class="bounded-div"
@@ -287,4 +357,30 @@
 		left: 0;
 		right: 0;
 	}
+
+	.objr :global(img) {
+		object-position: right center;
+		object-fit: cover;
+	}
+
+	.altcarry {
+		right: 1rem;
+		transition:
+			right 0.2s ease-in-out,
+			clip-path 0.2s ease-in-out;
+		clip-path: inset(0 0 0 16px);
+	}
+	.altcarry:hover {
+		right: 0rem;
+		clip-path: inset(0 0 0 0);
+	}
+
+	.altcarry:hover ~ .alt-tooltip {
+		opacity: 1;
+	}
+	.alt-tooltip {
+		opacity: 0;
+		user-select: none;
+		transition: opacity 0.2s ease-in-out;
+	}
 </style>

package/src/lib/ModalGallery/ImageView.svelte

@@ -14,17 +14,16 @@
 		display: Snippet<
 			[image: ArtPiece | NonNullable<ArtPiece['alts']>[number], onloaded: () => void]
 		>;
+		selectedAlt?: number | null;
 	}
 
-	let { piece, nameInHeader, display }: Props = $props();
+	let { piece, nameInHeader, display, selectedAlt = $bindable(null) }: Props = $props();
 
 	let config = useLibraryConfig();
 
 	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(() => {