diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts
index 7b370f587..2455503b7 100644
--- a/app/src/protyle/header/Background.ts
+++ b/app/src/protyle/header/Background.ts
@@ -14,7 +14,7 @@ import {getEventName} from "../util/compatibility";
import {Dialog} from "../../dialog";
import {Constants} from "../../constants";
import {assetMenu} from "../../menus/protyle";
-import {previewImage} from "../preview/image";
+import {previewImages} from "../preview/image";
import {Menu} from "../../plugin/Menu";
import {escapeHtml} from "../../util/escape";
@@ -217,7 +217,7 @@ export class Background {
if (target.tagName === "IMG" && target.parentElement.classList.contains("protyle-background__img")) {
const imgSrc = target.getAttribute("src");
if (event.detail > 1 && !imgSrc.startsWith("data:image/png;base64")) {
- previewImage(imgSrc);
+ previewImages([imgSrc]);
event.preventDefault();
event.stopPropagation();
}
diff --git a/app/src/protyle/preview/image.ts b/app/src/protyle/preview/image.ts
index 7f15f5147..57639d22d 100644
--- a/app/src/protyle/preview/image.ts
+++ b/app/src/protyle/preview/image.ts
@@ -2,11 +2,22 @@ import {Constants} from "../../constants";
import {addScript} from "../util/addScript";
import {fetchPost} from "../../util/fetch";
-export const previewImage = (src: string) => {
+export const previewImages = (srcList: string[], currentSrc?: string) => {
addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.11.7`, "protyleViewerScript").then(() => {
const imagesElement = document.createElement("ul");
- imagesElement.innerHTML = `
`;
+ let html = "";
+ let initialViewIndex = -1;
+ srcList.forEach((item: string, index: number) => {
+ if (item) {
+ html += `
`;
+ if (currentSrc && initialViewIndex === -1 && (currentSrc.endsWith(encodeURI(item)) || currentSrc.endsWith(item))) {
+ initialViewIndex = index;
+ }
+ }
+ });
+ imagesElement.innerHTML = html;
window.siyuan.viewer = new Viewer(imagesElement, {
+ initialViewIndex: currentSrc ? initialViewIndex : 0,
title: [1, (image: HTMLImageElement, imageData: IObject) => {
let name = image.alt;
if (!name) {
@@ -41,111 +52,17 @@ export const previewImage = (src: string) => {
});
};
-export const previewDocImage = (src: string, id: string) => {
- addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.11.7`, "protyleViewerScript").then(() => {
- fetchPost("/api/asset/getDocImageAssets", {id}, (response) => {
- const imagesElement = document.createElement("ul");
- let html = "";
- let initialViewIndex = -1;
- response.data.forEach((item: string, index: number) => {
- if (item) {
- html += `
`;
- if (initialViewIndex === -1 && (src.endsWith(encodeURI(item)) || src.endsWith(item))) {
- initialViewIndex = index;
- }
- }
- });
- imagesElement.innerHTML = html;
- window.siyuan.viewer = new Viewer(imagesElement, {
- title: [1, (image: HTMLImageElement, imageData: IObject) => {
- let name = image.alt;
- if (!name) {
- name = image.src.substring(image.src.lastIndexOf("/") + 1);
- }
- name = name.substring(0, name.lastIndexOf(".")).replace(/-\d{14}-\w{7}$/, "");
- return `${name} [${imageData.naturalWidth} × ${imageData.naturalHeight}]`;
- }],
- button: false,
- initialViewIndex,
- transition: false,
- hidden: function () {
- window.siyuan.viewer.destroy();
- },
- toolbar: {
- zoomIn: true,
- zoomOut: true,
- oneToOne: true,
- reset: true,
- prev: true,
- play: true,
- next: true,
- rotateLeft: true,
- rotateRight: true,
- flipHorizontal: true,
- flipVertical: true,
- close: function () {
- window.siyuan.viewer.destroy();
- },
- },
- });
- window.siyuan.viewer.show();
- });
+export const previewDocImage = (currentSrc: string, id: string) => {
+ fetchPost("/api/asset/getDocImageAssets", {id}, (response) => {
+ previewImages(response.data, currentSrc);
});
};
-export const previewAttrViewImages = (src: string, avID: string,viewID: string,query?:string,pageSize?: number) => {
- addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.11.7`, "protyleViewerScript").then(() => {
- fetchPost("/api/av/getCurrentAttrViewImages", {
- id: avID,
- query: query,
- pageSize: pageSize,
- viewID: viewID
- }, (response) => {
- const imagesElement = document.createElement("ul");
- let html = "";
- let initialViewIndex = -1;
- response.data.forEach((item: string, index: number) => {
- if (item) {
- html += `
`;
- if (initialViewIndex === -1 && (src.endsWith(encodeURI(item)) || src.endsWith(item))) {
- initialViewIndex = index;
- }
- }
- });
- imagesElement.innerHTML = html;
- window.siyuan.viewer = new Viewer(imagesElement, {
- title: [1, (image: HTMLImageElement, imageData: IObject) => {
- let name = image.alt;
- if (!name) {
- name = image.src.substring(image.src.lastIndexOf("/") + 1);
- }
- name = name.substring(0, name.lastIndexOf(".")).replace(/-\d{14}-\w{7}$/, "");
- return `${name} [${imageData.naturalWidth} × ${imageData.naturalHeight}]`;
- }],
- button: false,
- initialViewIndex,
- transition: false,
- hidden: function () {
- window.siyuan.viewer.destroy();
- },
- toolbar: {
- zoomIn: true,
- zoomOut: true,
- oneToOne: true,
- reset: true,
- prev: true,
- play: true,
- next: true,
- rotateLeft: true,
- rotateRight: true,
- flipHorizontal: true,
- flipVertical: true,
- close: function () {
- window.siyuan.viewer.destroy();
- },
- },
- });
- window.siyuan.viewer.show();
- });
+export const previewAttrViewImages = (currentSrc: string, avID: string, viewID: string) => {
+ fetchPost("/api/av/getCurrentAttrViewImages", {
+ id: avID,
+ viewID: viewID
+ }, (response) => {
+ previewImages(response.data, currentSrc);
});
};
diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
index 08e553ddc..0bb72c03a 100644
--- a/app/src/protyle/render/av/action.ts
+++ b/app/src/protyle/render/av/action.ts
@@ -68,8 +68,6 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
(imgElement as HTMLImageElement).src,
blockElement.getAttribute("data-av-id"),
blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
- (blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
- parseInt(blockElement.dataset.pageSize) || undefined
);
event.preventDefault();
event.stopPropagation();
diff --git a/app/src/protyle/render/av/asset.ts b/app/src/protyle/render/av/asset.ts
index 95b97869a..6df51c3cd 100644
--- a/app/src/protyle/render/av/asset.ts
+++ b/app/src/protyle/render/av/asset.ts
@@ -341,10 +341,9 @@ export const editAssetItem = (options: {
previewAttrViewImages(
linkAddress,
options.blockElement.getAttribute("data-av-id"),
- options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
- (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
- parseInt(options.blockElement.getAttribute("data-page-size")) || undefined
- )}
+ options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW)
+ );
+ }
});
}
if (openSubMenu.length > 0) {
diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts
index 50dead316..0512eddad 100644
--- a/app/src/protyle/render/av/blockAttr.ts
+++ b/app/src/protyle/render/av/blockAttr.ts
@@ -10,7 +10,7 @@ import {openMenuPanel} from "./openMenuPanel";
import {uploadFiles} from "../../upload";
import {openLink} from "../../../editor/openLink";
import {dragUpload, editAssetItem} from "./asset";
-import {previewImage} from "../../preview/image";
+import {previewImages} from "../../preview/image";
/// #if !BROWSER
import {webUtils} from "electron";
/// #endif
@@ -477,7 +477,7 @@ const openEdit = (protyle: IProtyle, element: HTMLElement, event: MouseEvent) =>
});
} else {
if (target.tagName === "IMG") {
- previewImage(target.getAttribute("src"));
+ previewImages([target.getAttribute("src")]);
} else {
openLink(protyle, target.dataset.url, event, event.ctrlKey || event.metaKey);
}
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index 8d9ab2d66..ad2bf02de 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -1259,22 +1259,13 @@ export const openMenuPanel = (options: {
)) {
openAsset(options.protyle.app, assetLink.trim(), parseInt(getSearch("page", assetLink)), "right");
} else if (Constants.SIYUAN_ASSETS_IMAGE.includes(suffix)) {
- previewAttrViewImages(assetLink,avID,
- options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
- (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
- parseInt(options.blockElement.getAttribute("data-page-size")) || undefined
- )
-
+ previewAttrViewImages(assetLink, avID, options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW));
} else {
window.open(assetLink);
}
/// #else
if (Constants.SIYUAN_ASSETS_IMAGE.includes(suffix)) {
- previewAttrViewImages(assetLink,avID,
- options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
- (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
- parseInt(options.blockElement.getAttribute("data-page-size")) || undefined
- )
+ previewAttrViewImages(assetLink, avID, options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW));
} else {
window.open(assetLink);
}