From 22aedffd7427b757215e9473a3fc684c6c4bbd4a Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sun, 4 Jun 2023 11:41:30 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/8383 --- app/src/assets/scss/business/_config.scss | 3 +- app/src/config/image.ts | 169 +++++++++++++--------- 2 files changed, 103 insertions(+), 69 deletions(-) diff --git a/app/src/assets/scss/business/_config.scss b/app/src/assets/scss/business/_config.scss index ae5f7ccf2..8ff481c9a 100644 --- a/app/src/assets/scss/business/_config.scss +++ b/app/src/assets/scss/business/_config.scss @@ -148,8 +148,9 @@ flex-direction: column; height: 100%; box-sizing: border-box; + position: relative; - #assetsList { + &__list { overflow: auto; flex: 1; } diff --git a/app/src/config/image.ts b/app/src/config/image.ts index 76521e4a3..a0fa02719 100644 --- a/app/src/config/image.ts +++ b/app/src/config/image.ts @@ -11,72 +11,106 @@ import {renderAssetsPreview} from "../asset/renderAssets"; export const image = { element: undefined as Element, genHTML: () => { - return ` -
- -
-
+ return `
+
+
+
+ ${window.siyuan.languages.clearUnused} +
+
+
+
+ ${window.siyuan.languages.missingAssets} +
+
+
+
+
+
+ +
+
    +
    • +
+
+
+
+
+
    +
    • +
+
+
+
`; }, bindEvent: () => { - const assetsListElement = image.element.querySelector("#assetsList"); - image.element.querySelector("#removeAll").addEventListener("click", () => { - confirmDialog(window.siyuan.languages.clearUnused, - `${window.siyuan.languages.clearAll}`, - () => { - fetchPost("/api/asset/removeUnusedAssets", {}, response => { - getAllModels().asset.forEach(item => { - if (response.data.paths.includes(item.path)) { - item.parent.parent.removeTab(item.parent.id); - } - }); - assetsListElement.innerHTML = `
  • ${window.siyuan.languages.emptyContent}
    • `; - image.element.querySelector(".config-assets__preview").innerHTML = ""; - }); - }); - }); - - assetsListElement.addEventListener("click", (event) => { + const assetsListElement = image.element.querySelector(".config-assets__list"); + image.element.addEventListener("click", (event) => { let target = event.target as HTMLElement; - while (target && !target.isEqualNode(assetsListElement)) { - if (target.classList.contains("b3-tooltips")) { - const pathString = target.parentElement.getAttribute("data-path"); - const type = target.getAttribute("data-type"); - if (type === "open") { - /// #if !BROWSER - openBy(pathString, "folder"); - /// #endif - } else if (type === "clear") { - confirmDialog(window.siyuan.languages.clearUnused, - `${window.siyuan.languages.delete} ${pathPosix().basename(pathString)}`, - () => { - fetchPost("/api/asset/removeUnusedAsset", { - path: pathString, - }, response => { - getAllModels().asset.forEach(item => { - if (response.data.path === item.path) { - item.parent.parent.removeTab(item.parent.id); - } - }); - const liElement = target.parentElement; - if (liElement.parentElement.querySelectorAll("li").length === 1) { - liElement.parentElement.innerHTML = `
  • ${window.siyuan.languages.emptyContent}
    • `; - } else { - liElement.remove(); - } - image.element.querySelector(".config-assets__preview").innerHTML = ""; - }); + while (target && !target.isEqualNode(image.element)) { + const type = target.getAttribute("data-type"); + if (target.id === "removeAll") { + confirmDialog(window.siyuan.languages.clearUnused, `${window.siyuan.languages.clearAll}`, () => { + fetchPost("/api/asset/removeUnusedAssets", {}, response => { + getAllModels().asset.forEach(item => { + if (response.data.paths.includes(item.path)) { + item.parent.close(); + } }); - } + assetsListElement.innerHTML = `
  • ${window.siyuan.languages.emptyContent}
    • `; + image.element.querySelector(".config-assets__preview").innerHTML = ""; + }); + }); + } else if (target.classList.contains("item") && !target.classList.contains("item--focus")) { + image.element.querySelector(".layout-tab-bar .item--focus").classList.remove("item--focus"); + target.classList.add("item--focus"); + image.element.querySelectorAll(".config-assets").forEach(item => { + if (type === item.getAttribute("data-type")) { + item.classList.remove("fn__none"); + if (!item.getAttribute("data-init")) { + fetchPost("/api/asset/getMissingAssets", {}, response => { + image._renderList(response.data.missingAssets, item.querySelector(".config-assets__list"), false); + }); + item.setAttribute("data-init", "true"); + } + } else { + item.classList.add("fn__none"); + } + }); + event.preventDefault(); + event.stopPropagation(); + break; + } else if (type === "open") { + /// #if !BROWSER + openBy(target.parentElement.getAttribute("data-path"), "folder"); + /// #endif + } else if (type === "clear") { + const pathString = target.parentElement.getAttribute("data-path"); + confirmDialog(window.siyuan.languages.clearUnused, `${window.siyuan.languages.delete} ${pathPosix().basename(pathString)}`, () => { + fetchPost("/api/asset/removeUnusedAsset", { + path: pathString, + }, response => { + getAllModels().asset.forEach(item => { + if (response.data.path === item.path) { + item.parent.parent.removeTab(item.parent.id); + } + }); + const liElement = target.parentElement; + if (liElement.parentElement.querySelectorAll("li").length === 1) { + liElement.parentElement.innerHTML = `
  • ${window.siyuan.languages.emptyContent}
    • `; + } else { + liElement.remove(); + } + image.element.querySelector(".config-assets__preview").innerHTML = ""; + }); + }); event.preventDefault(); event.stopPropagation(); break; @@ -94,13 +128,13 @@ export const image = { } }); fetchPost("/api/asset/getUnusedAssets", {}, response => { - image.onUnusedassets(response.data); + image._renderList(response.data.unusedAssets, assetsListElement); }); }, - onUnusedassets: (data: { unusedAssets: string[] }) => { + _renderList: (data: string[], element: Element, action = true) => { let html = ""; let boxOpenHTML = ""; - if (!isBrowser()) { + if (!isBrowser() && action) { boxOpenHTML = ` `; @@ -108,16 +142,15 @@ export const image = { const boxClearHTML = ` `; - data.unusedAssets.forEach((item) => { + data.forEach((item) => { const idx = item.indexOf("assets/"); const dataPath = item.substr(idx); html += `
  • ${escapeHtml(item)} ${boxOpenHTML} - ${boxClearHTML} + ${action ? boxClearHTML : ""}
    • `; }); - image.element.querySelector("#assetsList").innerHTML = html || `
  • ${window.siyuan.languages.emptyContent}
    • `; - image.element.querySelector(".config-assets__preview").innerHTML = ""; + element.innerHTML = html || `
  • ${window.siyuan.languages.emptyContent}
    • `; } };