usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-22 01:07:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: view all images of a memo (#393)

Browse Source 
* feat: view all images of a memo

* fix: function arguments

* refactor: unified image preview

* refactor: image preview for resource dialog

Co-authored-by: XQ <qiaobingxue1998@163.com>
This commit is contained in:
Zhou Yunliang 2022-11-02 20:00:28 +08:00 committed by GitHub
parent bebcabc292
commit 91a61e058a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 47 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/Image.tsx
View File

@ -1,4 +1,4 @@
import showPreviewImageCarouselDialog from "./PreviewImageCarouselDialog";
import showPreviewImageDialog from "./PreviewImageDialog";
import "../less/image.less";
interface Props {
@ -11,7 +11,7 @@ const Image: React.FC<Props> = (props: Props) => {
const { className, imgUrls, index } = props;
const handleImageClick = () => {
showPreviewImageCarouselDialog(imgUrls, index);
showPreviewImageDialog(imgUrls, index);
};
return (

12
web/src/components/Memo.tsx
View File

@ -161,9 +161,15 @@ const Memo: React.FC<Props> = (props: Props) => {
}
}
} else if (targetEl.tagName === "IMG") {
const imgUrl = targetEl.getAttribute("src");
if (imgUrl) {
showPreviewImageDialog(imgUrl);
const currImgUrl = targetEl.getAttribute("src");
if (currImgUrl) {
// use regex to get all image urls from memo content
const imageUrls = memo.content.match(/!\[.*?\]\((.*?)\)/g)?.map((item) => item.match(/\((.*?)\)/)?.[1] ?? "") ?? [];
showPreviewImageDialog(
imageUrls,
imageUrls.findIndex((item) => item === currImgUrl)
);
}
}
};

76
web/src/components/PreviewImageCarouselDialog.tsx
View File

@ -1,76 +0,0 @@
import * as utils from "../helpers/utils";
import Icon from "./Icon";
import { generateDialog } from "./Dialog";
import "../less/preview-image-carousel-dialog.less";
interface Props extends DialogProps {
imgUrls: string[];
index: number;
}
const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, index }: Props) => {
const handleCloseBtnClick = () => {
destroy();
};
const handleDownloadBtnClick = () => {
const a = document.createElement("a");
a.href = imgUrls[index];
a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
a.click();
};
const handleImgContainerClick = () => {
destroy();
};
const handlePrevBtnClick = () => {
destroy();
if (index > 0) {
showPreviewImageCarouselDialog(imgUrls, index - 1);
} else {
showPreviewImageCarouselDialog(imgUrls, imgUrls.length - 1);
}
};
const handleNextBtnClick = () => {
destroy();
if (index < imgUrls.length - 1) {
showPreviewImageCarouselDialog(imgUrls, index + 1);
} else {
showPreviewImageCarouselDialog(imgUrls, 0);
}
};
return (
<>
<div className="btns-container">
<button className="btn" onClick={handleCloseBtnClick}>
<Icon.X className="icon-img" />
</button>
<button className="btn" onClick={handleDownloadBtnClick}>
<Icon.Download className="icon-img" />
</button>
<button className="btn" onClick={handlePrevBtnClick}>
<Icon.ArrowLeft className="icon-img" />
</button>
<button className="btn" onClick={handleNextBtnClick}>
<Icon.ArrowRight className="icon-img" />
</button>
</div>
<div className="img-container" onClick={handleImgContainerClick}>
<img onClick={(e) => e.stopPropagation()} src={imgUrls[index]} />
</div>
</>
);
};
export default function showPreviewImageCarouselDialog(imgUrls: string[], index: number): void {
generateDialog(
{
className: "preview-image-carousel-dialog",
},
PreviewImageDialog,
{ imgUrls, index }
);
}

35
web/src/components/PreviewImageDialog.tsx
View File

@ -1,26 +1,42 @@
import { useState } from "react";
import * as utils from "../helpers/utils";
import Icon from "./Icon";
import { generateDialog } from "./Dialog";
import "../less/preview-image-dialog.less";
interface Props extends DialogProps {
imgUrl: string;
imgUrls: string[];
initialIndex: number;
}
const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }: Props) => {
const [currentIndex, setCurrentIndex] = useState(initialIndex);
const handleCloseBtnClick = () => {
destroy();
};
const handleDownloadBtnClick = () => {
const a = document.createElement("a");
a.href = imgUrl;
a.href = imgUrls[currentIndex];
a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
a.click();
};
const handleImgContainerClick = () => {
destroy();
const handleImgContainerClick = (event: React.MouseEvent) => {
if (event.clientX < window.innerWidth / 2) {
if (currentIndex > 0) {
setCurrentIndex(currentIndex - 1);
} else {
destroy();
}
} else {
if (currentIndex < imgUrls.length - 1) {
setCurrentIndex(currentIndex + 1);
} else {
destroy();
}
}
};
return (
@ -34,18 +50,21 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
</button>
</div>
<div className="img-container" onClick={handleImgContainerClick}>
<img onClick={(e) => e.stopPropagation()} src={imgUrl} />
<img onClick={(e) => e.stopPropagation()} src={imgUrls[currentIndex]} />
</div>
</>
);
};
export default function showPreviewImageDialog(imgUrl: string): void {
export default function showPreviewImageDialog(imgUrls: string[] | string, initialIndex?: number): void {
generateDialog(
{
className: "preview-image-dialog",
},
PreviewImageDialog,
{ imgUrl }
{
imgUrls: Array.isArray(imgUrls) ? imgUrls : [imgUrls],
initialIndex: initialIndex || 0,
}
);
}

11
web/src/components/ResourcesDialog.tsx
View File

@ -83,10 +83,17 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
inputEl.click();
};
const getResouceUrl = useCallback((resource: Resource) => {
return `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
}, []);
const handlePreviewBtnClick = (resource: Resource) => {
const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
const resourceUrl = getResouceUrl(resource);
if (resource.type.startsWith("image")) {
showPreviewImageDialog(resourceUrl);
showPreviewImageDialog(
resources.filter((r) => r.type.startsWith("image")).map((r) => getResouceUrl(r)),
resources.findIndex((r) => r.id === resource.id)
);
} else {
window.open(resourceUrl);
}

34
web/src/less/preview-image-carousel-dialog.less
View File

@ -1,34 +0,0 @@
@import "./mixin.less";
.preview-image-carousel-dialog {
@apply p-0;
z-index: 101;
background-color: rgba(0, 0, 0, 0.6);
> .dialog-container {
@apply flex flex-col justify-center items-center relative w-full h-full p-0;
background-color: unset;
> .btns-container {
@apply fixed top-8 right-8 flex flex-col justify-start items-center;
> .btn {
@apply mb-3 last:mb-0 w-8 h-8 p-1 cursor-pointer rounded opacity-90 bg-gray-300 z-10 shadow-md hover:opacity-70;
> .icon-img {
@apply w-6 h-auto;
}
}
}
> .img-container {
@apply w-full h-full p-4 flex flex-col justify-center items-center;
background-color: unset;
.hide-scroll-bar();
> img {
@apply h-auto w-auto max-w-full max-h-full shadow;
}
}
}
}