mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Remove image zoom
This commit is contained in:
parent
8cdc3c695d
commit
adad2473ce
@ -4,5 +4,4 @@
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
z-index: 22;
|
z-index: 22;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,5 @@
|
|||||||
import { Component, JSX, onCleanup, onMount } from "solid-js";
|
import { Component, JSX } from "solid-js";
|
||||||
import styles from "./NoteImage.module.scss";
|
import styles from "./NoteImage.module.scss";
|
||||||
import mediumZoom from "medium-zoom";
|
|
||||||
import type { Zoom } from 'medium-zoom';
|
|
||||||
// @ts-ignore Bad types in nostr-tools
|
// @ts-ignore Bad types in nostr-tools
|
||||||
import { generatePrivateKey } from "nostr-tools";
|
import { generatePrivateKey } from "nostr-tools";
|
||||||
|
|
||||||
@ -12,46 +10,8 @@ const NoteImage: Component<{
|
|||||||
}> = (props) => {
|
}> = (props) => {
|
||||||
const imgId = generatePrivateKey();
|
const imgId = generatePrivateKey();
|
||||||
|
|
||||||
const imgRef = () => {
|
|
||||||
return document.getElementById(imgId)
|
|
||||||
};
|
|
||||||
|
|
||||||
let zoomRef: Zoom | undefined;
|
|
||||||
|
|
||||||
const klass = () => `${styles.noteImage} ${props.isDev ? 'redBorder' : ''}`;
|
const klass = () => `${styles.noteImage} ${props.isDev ? 'redBorder' : ''}`;
|
||||||
|
|
||||||
const doZoom = (e: MouseEvent) => {
|
|
||||||
if (!e.target || (e.target as HTMLImageElement).id !== imgId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
zoomRef?.open();
|
|
||||||
};
|
|
||||||
|
|
||||||
const getZoom = () => {
|
|
||||||
const iRef = imgRef();
|
|
||||||
if (zoomRef || !iRef) {
|
|
||||||
return zoomRef;
|
|
||||||
}
|
|
||||||
|
|
||||||
zoomRef = mediumZoom(iRef, {
|
|
||||||
background: "var(--background-site)",
|
|
||||||
});
|
|
||||||
|
|
||||||
zoomRef.attach(iRef);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
getZoom();
|
|
||||||
document.addEventListener('click', doZoom)
|
|
||||||
});
|
|
||||||
|
|
||||||
onCleanup(() => {
|
|
||||||
const iRef = imgRef();
|
|
||||||
iRef && zoomRef && zoomRef.detach(iRef);
|
|
||||||
document.removeEventListener('click', doZoom)
|
|
||||||
});
|
|
||||||
|
|
||||||
return <img id={imgId} src={props.src} class={klass()} onerror={props.onError} />;
|
return <img id={imgId} src={props.src} class={klass()} onerror={props.onError} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user