diff --git a/app/src/config/bazaar.ts b/app/src/config/bazaar.ts index c29a3116a..90bee285e 100644 --- a/app/src/config/bazaar.ts +++ b/app/src/config/bazaar.ts @@ -128,23 +128,31 @@ export const bazaar = {
`; }, - getHTML(item: IBazaarItem, bazaarType: TBazaarType) { + _genCardHTML(item: IBazaarItem, bazaarType: TBazaarType) { let hide = false; - let type = ""; + let themeMode = ""; if (bazaarType === "themes") { const themeValue = (bazaar.element.querySelector("#bazaarSelect") as HTMLSelectElement).value; if ((themeValue === "0" && item.modes.includes("dark")) || themeValue === "1" && item.modes.includes("light")) { hide = true; } - type = item.modes.toString(); + themeMode = item.modes.toString(); } let showSwitch = false; if (["icons", "themes"].includes(bazaarType)) { showSwitch = true; } - - return `
+ const dataObj = { + bazaarType, + themeMode: themeMode, + updated: item.updated, + name: item.name, + repoURL: item.repoURL, + repoHash: item.repoHash, + downloaded: false, + } + return `
${item.name} @@ -154,7 +162,7 @@ export const bazaar = { ${item.downloads}
-
+
@@ -186,12 +194,21 @@ export const bazaar = { showSwitch = true; } response.data.packages.forEach((item: IBazaarItem) => { - html += `
+ const dataObj = { + bazaarType, + themeMode: item.modes?.toString(), + updated: item.updated, + name: item.name, + repoURL: item.repoURL, + repoHash: item.repoHash, + downloaded: true + } + html += `
${item.name}
-
+
@@ -211,23 +228,22 @@ export const bazaar = {
`; }); - bazaar.data.downloaded = response.data.packages; + bazaar._data.downloaded = response.data.packages; bazaar.element.querySelector("#configBazaarDownloaded").innerHTML = html ? `
${html}
` : `
  • ${window.siyuan.languages.emptyContent}
`; }); }, - data: { + _data: { themes: [] as IBazaarItem[], templates: [] as IBazaarItem[], icons: [] as IBazaarItem[], widgets: [] as IBazaarItem[], downloaded: [] as IBazaarItem[], }, - renderReadme(cardElement: HTMLElement, bazaarType: TBazaarType) { - const isDownloaded = cardElement.getAttribute("data-downloaded") === "true"; - const repoURL = cardElement.querySelector(".b3-card__actions").getAttribute("data-url"); + _renderReadme(cardElement: HTMLElement, bazaarType: TBazaarType) { + const dataObj = JSON.parse(cardElement.getAttribute("data-obj")); let data: IBazaarItem; - (isDownloaded ? bazaar.data.downloaded : bazaar.data[bazaarType]).find((item: IBazaarItem) => { - if (item.repoURL === repoURL) { + (dataObj.downloaded ? bazaar._data.downloaded : bazaar._data[bazaarType]).find((item: IBazaarItem) => { + if (item.repoURL === dataObj.repoURL) { data = item; return true; } @@ -247,7 +263,15 @@ export const bazaar = { } else if (bazaarType === "templates") { navTitle = window.siyuan.languages.template; } - readmeElement.innerHTML = `
+ const dataObj1 = { + bazaarType, + themeMode: data.modes?.toString(), + name: data.name, + repoURL: data.repoURL, + repoHash: data.repoHash, + downloaded: true + } + readmeElement.innerHTML = `
${navTitle}
@@ -261,17 +285,20 @@ export const bazaar = {
${window.siyuan.languages.currentVer}
v${data.version}
-
${isDownloaded ? window.siyuan.languages.installDate : window.siyuan.languages.releaseDate}
${isDownloaded ? data.hInstallDate : data.hUpdated}
+
${dataObj.downloaded ? window.siyuan.languages.installDate : window.siyuan.languages.releaseDate}
${dataObj.downloaded ? data.hInstallDate : data.hUpdated}
-
${isDownloaded ? window.siyuan.languages.installSize : window.siyuan.languages.pkgSize}
${isDownloaded ? data.hInstallSize : data.hSize}
+
${dataObj.downloaded ? window.siyuan.languages.installSize : window.siyuan.languages.pkgSize}
${dataObj.downloaded ? data.hInstallSize : data.hSize}
-
- + +
-
-
-
+ + +
+
+
+
Repo @@ -299,7 +326,7 @@ export const bazaar = {
`; - if (isDownloaded) { + if (dataObj.downloaded) { const mdElement = readmeElement.querySelector(".item__readme"); mdElement.innerHTML = data.readme; highlightRender(mdElement); @@ -317,8 +344,8 @@ export const bazaar = { }, bindEvent() { fetchPost("/api/bazaar/getBazaarTheme", {}, response => { - bazaar.onBazaar(response, "themes", false); - bazaar.data.themes = response.data.packages; + bazaar._onBazaar(response, "themes", false); + bazaar._data.themes = response.data.packages; }); bazaar.element.addEventListener("click", (event) => { let target = event.target as HTMLElement; @@ -326,11 +353,12 @@ export const bazaar = { const type = target.getAttribute("data-type"); if (type === "open") { /// #if !BROWSER - const dirName = target.parentElement.parentElement.getAttribute("data-bazaar"); + const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj")); + const dirName = dataObj.bazaarType; if (dirName === "icons" || dirName === "themes") { - shell.openPath(path.join(window.siyuan.config.system.confDir, "appearance", dirName, target.parentElement.getAttribute("data-name"))); + shell.openPath(path.join(window.siyuan.config.system.confDir, "appearance", dirName, dataObj.name)); } else { - shell.openPath(path.join(window.siyuan.config.system.dataDir, dirName, target.parentElement.getAttribute("data-name"))); + shell.openPath(path.join(window.siyuan.config.system.dataDir, dirName, dataObj.name)); } /// #endif event.preventDefault(); @@ -357,7 +385,8 @@ export const bazaar = { break; } else if (type === "install") { if (!target.classList.contains("b3-button--progress")) { - const bazaarType = target.getAttribute("data-bazaar") as TBazaarType; + const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj")); + const bazaarType = dataObj.bazaarType as TBazaarType; let url = "/api/bazaar/installBazaarTemplate"; if (bazaarType === "themes") { url = "/api/bazaar/installBazaarTheme"; @@ -367,74 +396,69 @@ export const bazaar = { url = "/api/bazaar/installBazaarWidget"; } fetchPost(url, { - repoURL: target.getAttribute("data-url"), - packageName: target.getAttribute("data-name"), - repoHash: target.getAttribute("data-hash"), - mode: target.parentElement.getAttribute("data-type") === "dark" ? 1 : 0, + repoURL: dataObj.repoURL, + packageName: dataObj.name, + repoHash: dataObj.repoHash, + mode: dataObj.themeMode === "dark" ? 1 : 0, }, response => { if (window.siyuan.config.appearance.themeJS && bazaarType === "themes") { exportLayout(true); return; } - bazaar.onBazaar(response, bazaarType, ["themes", "icons"].includes(bazaarType)); + bazaar._genMyHTML(bazaarType); + bazaar._onBazaar(response, bazaarType, ["themes", "icons"].includes(bazaarType)); }); } event.preventDefault(); event.stopPropagation(); break; } else if (type === "install-t") { - confirmDialog(window.siyuan.languages.update, window.siyuan.languages.exportTplTip, () => { - const cardElement = hasClosestByClassName(target, "b3-card"); - let bazaarType: TBazaarType = "themes"; - if (cardElement) { - bazaarType = cardElement.getAttribute("data-bazaar") as TBazaarType; - } - let url = "/api/bazaar/installBazaarTemplate"; - if (bazaarType === "themes") { - url = "/api/bazaar/installBazaarTheme"; - } else if (bazaarType === "icons") { - url = "/api/bazaar/installBazaarIcon"; - } else if (bazaarType === "widgets") { - url = "/api/bazaar/installBazaarWidget"; - } - target.parentElement.insertAdjacentHTML("afterend", ''); - const name = target.parentElement.getAttribute("data-name"); - fetchPost(url, { - repoURL: target.parentElement.getAttribute("data-url"), - packageName: name, - repoHash: target.parentElement.getAttribute("data-hash"), - mode: target.parentElement.parentElement.getAttribute("data-type") === "dark" ? 1 : 0, - update: true, - }, response => { - // 更新主题后不需要对该主题进行切换 https://github.com/siyuan-note/siyuan/issues/4966 - if (cardElement && cardElement.getAttribute("data-downloaded") === "true") { + if (!target.classList.contains("b3-button--progress")) { + confirmDialog(window.siyuan.languages.update, window.siyuan.languages.exportTplTip, () => { + const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj")) + const bazaarType: TBazaarType = dataObj.bazaarType; + let url = "/api/bazaar/installBazaarTemplate"; + if (bazaarType === "themes") { + url = "/api/bazaar/installBazaarTheme"; + } else if (bazaarType === "icons") { + url = "/api/bazaar/installBazaarIcon"; + } else if (bazaarType === "widgets") { + url = "/api/bazaar/installBazaarWidget"; + } + if (!target.classList.contains("b3-button")) { + target.parentElement.insertAdjacentHTML("afterend", ''); + } + fetchPost(url, { + repoURL: dataObj.repoURL, + packageName: dataObj.name, + repoHash: dataObj.repoHash, + mode: dataObj.themeMode === "dark" ? 1 : 0, + update: true, + }, response => { + // 更新主题后不需要对该主题进行切换 https://github.com/siyuan-note/siyuan/issues/4966 this._genMyHTML(bazaarType); - } else { - bazaar.onBazaar(response, bazaarType, ["icons"].includes(bazaarType)); - } - // https://github.com/siyuan-note/siyuan/issues/5411 - if (bazaarType === "themes" && ( - (window.siyuan.config.appearance.mode === 0 && window.siyuan.config.appearance.themeLight === name) || - (window.siyuan.config.appearance.mode === 1 && window.siyuan.config.appearance.themeDark === name) - )) { - if (window.siyuan.config.appearance.themeJS) { - exportLayout(true); - } else { - const linkElement = (document.getElementById("themeDefaultStyle") as HTMLLinkElement); - linkElement.href = linkElement.href + "1"; + bazaar._onBazaar(response, bazaarType, ["icons"].includes(bazaarType)); + // https://github.com/siyuan-note/siyuan/issues/5411 + if (bazaarType === "themes" && ( + (window.siyuan.config.appearance.mode === 0 && window.siyuan.config.appearance.themeLight === dataObj.name) || + (window.siyuan.config.appearance.mode === 1 && window.siyuan.config.appearance.themeDark === dataObj.name) + )) { + if (window.siyuan.config.appearance.themeJS) { + exportLayout(true); + } else { + const linkElement = (document.getElementById("themeDefaultStyle") as HTMLLinkElement); + linkElement.href = linkElement.href + "1"; + } } - } + }); }); - }); + } event.preventDefault(); event.stopPropagation(); break; } else if (type === "uninstall") { - const cardElement = hasClosestByClassName(target, "b3-card"); - let bazaarType: TBazaarType = "themes"; - if (cardElement) { - bazaarType = cardElement.getAttribute("data-bazaar") as TBazaarType; - } + const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj")) + const bazaarType: TBazaarType = dataObj.bazaarType; let url = "/api/bazaar/uninstallBazaarTemplate"; if (bazaarType === "themes") { url = "/api/bazaar/uninstallBazaarTheme"; @@ -444,7 +468,7 @@ export const bazaar = { url = "/api/bazaar/uninstallBazaarWidget"; } - const packageName = target.parentElement.getAttribute("data-name"); + const packageName = dataObj.name; if (window.siyuan.config.appearance.themeDark === packageName || window.siyuan.config.appearance.themeLight === packageName || window.siyuan.config.appearance.icon === packageName) { @@ -453,70 +477,47 @@ export const bazaar = { fetchPost(url, { packageName }, response => { - if (cardElement && cardElement.getAttribute("data-downloaded") === "true") { - this._genMyHTML(bazaarType); - } else { - bazaar.onBazaar(response, bazaarType, ["themes", "icons"].includes(bazaarType)); - } + this._genMyHTML(bazaarType); + bazaar._onBazaar(response, bazaarType, ["themes", "icons"].includes(bazaarType)); }); } event.preventDefault(); event.stopPropagation(); break; } else if (type === "switch") { - const packageName = target.parentElement.getAttribute("data-name"); - const cardElement = hasClosestByClassName(target, "b3-card"); - let bazaarType: TBazaarType = "themes"; - let mode: number; - if (cardElement) { - bazaarType = cardElement.getAttribute("data-bazaar") as TBazaarType; - mode = cardElement.getAttribute("data-type") === "dark" ? 1 : 0; - } - + const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj")) + const bazaarType: TBazaarType = dataObj.bazaarType; + const packageName = dataObj.name; + const mode = dataObj.themeMode === "dark" ? 1 : 0; if (bazaarType === "icons") { - fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, { + fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, { icon: packageName, - }), response => { - bazaar.element.querySelectorAll(`.b3-card__actions[data-name="${window.siyuan.config.appearance.icon}"]`).forEach(item => { - item.parentElement.classList.remove("b3-card--current"); - const switchElement = item.querySelector('[data-type="switch"]'); - switchElement.classList.remove("fn__none"); - switchElement.previousElementSibling.classList.remove("fn__none"); + }), (appearanceResponse) => { + this._genMyHTML(bazaarType); + fetchPost("/api/bazaar/getBazaarIcon", {}, response => { + response.data.appearance = appearanceResponse.data + bazaar._onBazaar(response, "icons", true); + bazaar._data.icons = response.data.packages; }); - bazaar.element.querySelectorAll(`.b3-card__actions[data-name="${packageName}"]`).forEach(item => { - item.parentElement.classList.add("b3-card--current"); - const switchElement = item.querySelector('[data-type="switch"]'); - switchElement.classList.add("fn__none"); - switchElement.previousElementSibling.classList.add("fn__none"); - }); - appearance.onSetappearance(response.data); }); } else if (bazaarType === "themes") { - fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, { + fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, { mode, modeOS: false, themeDark: mode === 1 ? packageName : window.siyuan.config.appearance.themeDark, themeLight: mode === 0 ? packageName : window.siyuan.config.appearance.themeLight, - }), response => { + }), (appearanceResponse) => { if ((mode !== window.siyuan.config.appearance.mode || (mode === 1 && window.siyuan.config.appearance.themeDark !== packageName) || (mode === 0 && window.siyuan.config.appearance.themeLight !== packageName)) && window.siyuan.config.appearance.themeJS) { exportLayout(true); } else { - const oldTheme = window.siyuan.config.appearance.mode === 1 ? window.siyuan.config.appearance.themeDark : window.siyuan.config.appearance.themeLight; - bazaar.element.querySelectorAll(`.b3-card__actions[data-name="${oldTheme}"]`).forEach(item => { - item.parentElement.classList.remove("b3-card--current"); - const switchElement = item.querySelector('[data-type="switch"]'); - switchElement.classList.remove("fn__none"); - switchElement.previousElementSibling.classList.remove("fn__none"); - }); - appearance.onSetappearance(response.data); - bazaar.element.querySelectorAll(`.b3-card__actions[data-name="${packageName}"]`).forEach(item => { - item.parentElement.classList.add("b3-card--current"); - const switchElement = item.querySelector('[data-type="switch"]'); - switchElement.classList.add("fn__none"); - switchElement.previousElementSibling.classList.add("fn__none"); + this._genMyHTML("themes"); + fetchPost("/api/bazaar/getBazaarTheme", {}, response => { + response.data.appearance = appearanceResponse.data + bazaar._onBazaar(response, "themes", true); + bazaar._data.themes = response.data.packages; }); } }); @@ -525,7 +526,7 @@ export const bazaar = { event.stopPropagation(); break; } else if (target.classList.contains("b3-card")) { - bazaar.renderReadme(target, target.getAttribute("data-bazaar") as TBazaarType); + bazaar._renderReadme(target, (JSON.parse(target.getAttribute("data-obj")).bazaarType) as TBazaarType); event.preventDefault(); event.stopPropagation(); break; @@ -540,18 +541,18 @@ export const bazaar = { if (!item.getAttribute("data-init")) { if (type === "template") { fetchPost("/api/bazaar/getBazaarTemplate", {}, response => { - bazaar.onBazaar(response, "templates", false); - bazaar.data.templates = response.data.packages; + bazaar._onBazaar(response, "templates", false); + bazaar._data.templates = response.data.packages; }); } else if (type === "icon") { fetchPost("/api/bazaar/getBazaarIcon", {}, response => { - bazaar.onBazaar(response, "icons", false); - bazaar.data.icons = response.data.packages; + bazaar._onBazaar(response, "icons", false); + bazaar._data.icons = response.data.packages; }); } else if (type === "widget") { fetchPost("/api/bazaar/getBazaarWidget", {}, response => { - bazaar.onBazaar(response, "widgets", false); - bazaar.data.widgets = response.data.packages; + bazaar._onBazaar(response, "widgets", false); + bazaar._data.widgets = response.data.packages; }); } else if (type === "downloaded") { this._genMyHTML("themes"); @@ -633,7 +634,7 @@ export const bazaar = { }); }); }, - onBazaar(response: IWebSocketData, bazaarType: TBazaarType, reload: boolean) { + _onBazaar(response: IWebSocketData, bazaarType: TBazaarType, reload: boolean) { let id = "#configBazaarTemplate"; if (bazaarType === "themes") { id = "#configBazaarTheme"; @@ -651,9 +652,9 @@ export const bazaar = { } let html = ""; response.data.packages.forEach((item: IBazaarItem) => { - html += this.getHTML(item, bazaarType); + html += this._genCardHTML(item, bazaarType); }); - bazaar.data[bazaarType] = response.data.packages; + bazaar._data[bazaarType] = response.data.packages; element.innerHTML = `
${html}
`; const localSort = window.siyuan.storage[Constants.LOCAL_BAZAAR]; diff --git a/app/src/dialog/processSystem.ts b/app/src/dialog/processSystem.ts index ac569965c..443189017 100644 --- a/app/src/dialog/processSystem.ts +++ b/app/src/dialog/processSystem.ts @@ -248,7 +248,7 @@ export const progressLoading = (data: IWebSocketData) => { } }; -export const progressBackgroundTask = (tasks:{action:string}[]) => { +export const progressBackgroundTask = (tasks: { action: string }[]) => { const backgroundTaskElement = document.querySelector(".status__backgroundtask"); if (!backgroundTaskElement) { return; @@ -324,19 +324,22 @@ export const downloadProgress = (data: { id: string, percent: number }) => { if (!bazzarElement) { return; } - const btnElement = bazzarElement.querySelector(`[data-url="${data.id}"]`) as HTMLElement; + const btnElement = bazzarElement.querySelector('[data-type="install"]') as HTMLElement; if (btnElement) { if (data.percent >= 1) { btnElement.parentElement.classList.add("fn__none"); + btnElement.parentElement.nextElementSibling.classList.add("fn__none"); } else { btnElement.classList.add("b3-button--progress"); + btnElement.parentElement.nextElementSibling.firstElementChild.classList.add("b3-button--progress"); btnElement.innerHTML = ``; + btnElement.parentElement.nextElementSibling.firstElementChild.innerHTML = ``; } } }; export const processSync = (data?: IWebSocketData) => { - const iconElement = document.querySelector(isMobile()?"#menuSyncNow" : "#barSync"); + const iconElement = document.querySelector(isMobile() ? "#menuSyncNow" : "#barSync"); if (!iconElement) { return; }