mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Add read image zoom
This commit is contained in:
parent
26d8885b9c
commit
622dad8ecc
@ -29,6 +29,8 @@ import { parseBolt11 } from "../utils";
|
|||||||
import { NoteReactionsState } from "../components/Note/Note";
|
import { NoteReactionsState } from "../components/Note/Note";
|
||||||
import NoteFooter from "../components/Note/NoteFooter/NoteFooter";
|
import NoteFooter from "../components/Note/NoteFooter/NoteFooter";
|
||||||
import { getArticleThread, getThread } from "../lib/feed";
|
import { getArticleThread, getThread } from "../lib/feed";
|
||||||
|
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
||||||
|
import NoteImage from "../components/NoteImage/NoteImage";
|
||||||
|
|
||||||
export type LongFormData = {
|
export type LongFormData = {
|
||||||
title: string,
|
title: string,
|
||||||
@ -281,6 +283,21 @@ const Longform: Component< { naddr: string } > = (props) => {
|
|||||||
quoteCount: 0,
|
quoteCount: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const lightbox = new PhotoSwipeLightbox({
|
||||||
|
gallery: `#read_${naddr()}`,
|
||||||
|
children: `a.hero_image_${naddr()}`,
|
||||||
|
showHideAnimationType: 'zoom',
|
||||||
|
initialZoomLevel: 'fit',
|
||||||
|
secondaryZoomLevel: 2,
|
||||||
|
maxZoomLevel: 3,
|
||||||
|
pswpModule: () => import('photoswipe')
|
||||||
|
});
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
lightbox.init();
|
||||||
|
});
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
if (!pubkey()) {
|
if (!pubkey()) {
|
||||||
return;
|
return;
|
||||||
@ -467,7 +484,7 @@ const Longform: Component< { naddr: string } > = (props) => {
|
|||||||
{shortDate(note.published)}
|
{shortDate(note.published)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class={styles.longform}>
|
<div id={`read_${naddr()}`} class={styles.longform}>
|
||||||
<Show
|
<Show
|
||||||
when={note.content.length > 0}
|
when={note.content.length > 0}
|
||||||
fallback={<Loader />}
|
fallback={<Loader />}
|
||||||
@ -476,7 +493,11 @@ const Longform: Component< { naddr: string } > = (props) => {
|
|||||||
{note.title}
|
{note.title}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img class={styles.image} src={note.image} />
|
<NoteImage
|
||||||
|
class={`${styles.image} hero_image_${naddr()}`}
|
||||||
|
src={note.image}
|
||||||
|
width={640}
|
||||||
|
/>
|
||||||
|
|
||||||
<div class={styles.summary}>
|
<div class={styles.summary}>
|
||||||
<div class={styles.border}></div>
|
<div class={styles.border}></div>
|
||||||
|
Loading…
Reference in New Issue
Block a user