diff --git a/app/src/asset/renderAssets.ts b/app/src/asset/renderAssets.ts new file mode 100644 index 000000000..bb8988625 --- /dev/null +++ b/app/src/asset/renderAssets.ts @@ -0,0 +1,15 @@ +import {Constants} from "../constants"; +import {pathPosix} from "../util/pathName"; + +export const renderAssetsPreview = (pathString: string) => { + const type = pathPosix().extname(pathString).toLowerCase() + if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) { + return ``; + } else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) { + return ``; + } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) { + return ``; + } else { + return ""; + } +} diff --git a/app/src/config/image.ts b/app/src/config/image.ts index e39379932..8b9b9862b 100644 --- a/app/src/config/image.ts +++ b/app/src/config/image.ts @@ -1,12 +1,12 @@ import {escapeHtml} from "../util/escape"; import {confirmDialog} from "../dialog/confirmDialog"; -import {Constants} from "../constants"; import {pathPosix} from "../util/pathName"; import {isBrowser} from "../util/functions"; import {hasClosestByClassName} from "../protyle/util/hasClosest"; import {fetchPost} from "../util/fetch"; import {getAllModels} from "../layout/getAll"; import {openBy} from "../editor/util"; +import {renderAssetsPreview} from "../asset/renderAssets"; export const image = { element: undefined as Element, @@ -90,18 +90,8 @@ export const image = { const liElement = hasClosestByClassName(event.target as Element, "b3-list-item"); if (liElement && liElement.getAttribute("data-path") !== assetsListElement.nextElementSibling.getAttribute("data-path")) { const item = liElement.getAttribute("data-path"); - const type = item.substr(item.lastIndexOf(".")).toLowerCase(); - const pathString = item; assetsListElement.nextElementSibling.setAttribute("data-path", item); - if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) { - assetsListElement.nextElementSibling.innerHTML = ``; - } else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) { - assetsListElement.nextElementSibling.innerHTML = ``; - } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) { - assetsListElement.nextElementSibling.innerHTML = ``; - } else { - assetsListElement.nextElementSibling.innerHTML = ""; - } + assetsListElement.nextElementSibling.innerHTML = renderAssetsPreview(item); } }); fetchPost("/api/asset/getUnusedAssets", {}, response => { diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index e147b1bb8..29722e9a6 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -40,6 +40,7 @@ import {unicode2Emoji} from "../../emoji"; import {escapeHtml} from "../../util/escape"; import {hideElements} from "../ui/hideElements"; import {linkMenu} from "../../menus/protyle"; +import {renderAssetsPreview} from "../../asset/renderAssets"; export class Toolbar { public element: HTMLElement; @@ -1152,21 +1153,38 @@ export class Toolbar { }, (response) => { let html = ""; response.data.forEach((item: { hName: string, path: string }, index: number) => { - html += `${item.hName}`; + html += `
${item.hName}
`; }); this.subElement.style.width = ""; this.subElement.style.padding = ""; - this.subElement.innerHTML = `
-
${html}
+ this.subElement.innerHTML = `
+
+ +
${html}
+
+
`; - + const listElement = this.subElement.querySelector(".b3-list"); + listElement.addEventListener("mouseover", (event) => { + const target = event.target as HTMLElement; + const hoverItemElement = hasClosestByClassName(target, "b3-list-item"); + if (!hoverItemElement) { + return; + } + previewElement.innerHTML = renderAssetsPreview(hoverItemElement.getAttribute("data-value")) + }) + const previewElement = this.subElement.firstElementChild.lastElementChild + previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value")); const inputElement = this.subElement.querySelector("input"); inputElement.addEventListener("keydown", (event: KeyboardEvent) => { event.stopPropagation(); if (event.isComposing) { return; } - upDownHint(this.subElement.lastElementChild.lastElementChild as HTMLElement, event); + const currentElement = upDownHint(listElement, event); + if (currentElement) { + previewElement.innerHTML = renderAssetsPreview(currentElement.getAttribute("data-value")) + } if (event.key === "Enter") { hintRenderAssets(this.subElement.querySelector(".b3-list-item--focus").getAttribute("data-value"), protyle); // 空行处插入 mp3 会多一个空的 mp3 块 @@ -1185,16 +1203,17 @@ export class Toolbar { response.data.forEach((item: { path: string, hName: string }, index: number) => { searchHTML += `
${item.hName}
`; }); - this.subElement.firstElementChild.lastElementChild.innerHTML = searchHTML; + listElement.innerHTML = searchHTML; + previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value")); }); }); this.subElement.lastElementChild.addEventListener("click", (event) => { const target = event.target as HTMLElement; - const listElement = hasClosestByClassName(target, "b3-list-item"); - if (!listElement) { + const listItemElement = hasClosestByClassName(target, "b3-list-item"); + if (!listItemElement) { return; } - hintRenderAssets(listElement.getAttribute("data-value"), protyle); + hintRenderAssets(listItemElement.getAttribute("data-value"), protyle); }); const rangePosition = getSelectionPosition(nodeElement, range); this.subElement.classList.remove("fn__none"); diff --git a/app/src/util/history.ts b/app/src/util/history.ts index 825cf21c1..817217a7b 100644 --- a/app/src/util/history.ts +++ b/app/src/util/history.ts @@ -7,6 +7,7 @@ import {unicode2Emoji} from "../emoji"; import {escapeHtml} from "./escape"; import {isMobile} from "./functions"; import {hasClosestByClassName} from "../protyle/util/hasClosest"; +import {renderAssetsPreview} from "../asset/renderAssets"; const renderDoc = (notebook: INotebook, element: HTMLElement) => { if (!notebook || !notebook.id) { @@ -87,16 +88,7 @@ const renderAssets = (element: HTMLElement) => { logsHTML += ""; if (index === 0) { - const type = item.items[0].title.substr(item.items[0].title.lastIndexOf(".")).toLowerCase(); - if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) { - element.lastElementChild.innerHTML = ``; - } else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) { - element.lastElementChild.innerHTML = ``; - } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) { - element.lastElementChild.innerHTML = ``; - } else { - element.lastElementChild.innerHTML = item.items[0].path; - } + element.lastElementChild.innerHTML = renderAssetsPreview(item.items[0].path); } } }); @@ -394,16 +386,7 @@ export const openHistory = () => { } else if (target.classList.contains("b3-list-item") && (type === "assets" || type === "doc")) { const dataPath = target.getAttribute("data-path"); if (type === "assets") { - const type = dataPath.substr(dataPath.lastIndexOf(".")).toLowerCase(); - if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) { - firstPanelElement.nextElementSibling.lastElementChild.innerHTML = ``; - } else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) { - firstPanelElement.nextElementSibling.lastElementChild.innerHTML = ``; - } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) { - firstPanelElement.nextElementSibling.lastElementChild.innerHTML = ``; - } else { - firstPanelElement.nextElementSibling.lastElementChild.innerHTML = dataPath; - } + firstPanelElement.nextElementSibling.lastElementChild.innerHTML = renderAssetsPreview(dataPath); } else if (type === "doc") { fetchPost("/api/history/getDocHistoryContent", { historyPath: dataPath diff --git a/app/src/util/upDownHint.ts b/app/src/util/upDownHint.ts index 46363312b..f29b97b26 100644 --- a/app/src/util/upDownHint.ts +++ b/app/src/util/upDownHint.ts @@ -19,6 +19,7 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent) => { listElement.scrollTop > currentHintElement.offsetTop) { listElement.scrollTop = currentHintElement.offsetTop - listElement.clientHeight + currentHintElement.clientHeight; } + return currentHintElement; } else if (event.key === "ArrowUp") { event.preventDefault(); event.stopPropagation(); @@ -38,5 +39,6 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent) => { listElement.scrollTop > currentHintElement.offsetTop - currentHintElement.clientHeight * 2) { listElement.scrollTop = currentHintElement.offsetTop - currentHintElement.clientHeight * 2; } + return currentHintElement; } };