refactor(frontend): reuse shared DOM synchronization
This commit is contained in:
@@ -2,6 +2,7 @@ import { app } from "../../../../../scripts/app.js";
|
||||
import { $el } from "../../../../../scripts/ui.js";
|
||||
import { getSvgIcon } from "../../utils/icon_utils.js";
|
||||
import { startSplitterDrag } from "../utils/splitter_drag.js";
|
||||
import { syncElementAttributes } from "../utils/dom_patch_utils.js";
|
||||
const FOOTER_VERSION_REFRESH_INTERVAL_MS = 6 * 60 * 60 * 1000;
|
||||
const FOOTER_VERSION_FAILURE_REFRESH_INTERVAL_MS = 5 * 60 * 1000;
|
||||
|
||||
@@ -1047,19 +1048,6 @@ export const queueMethods = {
|
||||
},
|
||||
|
||||
patchDownloadsPanelElement(currentElement, nextElement) {
|
||||
const syncAttributes = (current, next) => {
|
||||
const nextAttributeNames = new Set(Array.from(next.attributes || [], attribute => attribute.name));
|
||||
for (const attribute of Array.from(next.attributes || [])) {
|
||||
if (current.getAttribute(attribute.name) !== attribute.value) {
|
||||
current.setAttribute(attribute.name, attribute.value);
|
||||
}
|
||||
}
|
||||
for (const attribute of Array.from(current.attributes || [])) {
|
||||
if (!nextAttributeNames.has(attribute.name)) {
|
||||
current.removeAttribute(attribute.name);
|
||||
}
|
||||
}
|
||||
};
|
||||
const getNodeKey = (node) => {
|
||||
if (node?.nodeType !== 1) return '';
|
||||
if (!node.classList?.contains('mr-download-queue-item')) return '';
|
||||
@@ -1085,7 +1073,7 @@ export const queueMethods = {
|
||||
return current;
|
||||
}
|
||||
|
||||
syncAttributes(current, next);
|
||||
syncElementAttributes(current, next);
|
||||
patchChildren(current, next);
|
||||
return current;
|
||||
};
|
||||
|
||||
@@ -4,6 +4,7 @@ import { getModelCardUrl, parseHuggingFaceFileUrl } from "../utils/url_utils.js"
|
||||
import { getCivitaiModelUrl } from "../globals.js";
|
||||
import { normalizeSha256 } from "../utils/hash_utils.js";
|
||||
import { normalizePathIdentity } from "../utils/html_utils.js";
|
||||
import { syncElementAttributes } from "../utils/dom_patch_utils.js";
|
||||
const log = createModuleLogger('resolve_download_methods');
|
||||
|
||||
export const resolveDownloadMethods = {
|
||||
@@ -3268,18 +3269,7 @@ export const resolveDownloadMethods = {
|
||||
},
|
||||
|
||||
syncSearchElementAttributes(current, next) {
|
||||
if (!current || !next) return;
|
||||
|
||||
for (const attribute of Array.from(current.attributes || [])) {
|
||||
if (!next.hasAttribute(attribute.name)) {
|
||||
current.removeAttribute(attribute.name);
|
||||
}
|
||||
}
|
||||
for (const attribute of Array.from(next.attributes || [])) {
|
||||
if (current.getAttribute(attribute.name) !== attribute.value) {
|
||||
current.setAttribute(attribute.name, attribute.value);
|
||||
}
|
||||
}
|
||||
return syncElementAttributes(current, next);
|
||||
},
|
||||
|
||||
patchSearchProgressActions(currentItem, nextItem) {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { api } from "../../../../../scripts/api.js";
|
||||
import { escapeHtml, escapeJsString, getFilenameFromPath, pollBackgroundTask } from "./html_utils.js";
|
||||
import { syncElementAttributes, setTextIfChanged } from "./dom_patch_utils.js";
|
||||
|
||||
export const renderFormatMethods = {
|
||||
escapeHtml,
|
||||
@@ -237,16 +238,6 @@ export const renderFormatMethods = {
|
||||
return;
|
||||
}
|
||||
|
||||
const syncAttributes = (current, next) => {
|
||||
for (const attribute of Array.from(current.attributes || [])) {
|
||||
if (!next.hasAttribute(attribute.name)) current.removeAttribute(attribute.name);
|
||||
}
|
||||
for (const attribute of Array.from(next.attributes || [])) {
|
||||
if (current.getAttribute(attribute.name) !== attribute.value) {
|
||||
current.setAttribute(attribute.name, attribute.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
const currentInfo = Array.from(currentRoot.querySelectorAll('.mr-download-info'));
|
||||
const nextInfo = Array.from(nextRoot.querySelectorAll('.mr-download-info'));
|
||||
const currentProgressBar = currentRoot.querySelector('.mr-progress-bar');
|
||||
@@ -265,22 +256,18 @@ export const renderFormatMethods = {
|
||||
|| currentProgressText.length !== nextProgressText.length
|
||||
) {
|
||||
currentRoot.innerHTML = nextRoot.innerHTML;
|
||||
syncAttributes(currentRoot, nextRoot);
|
||||
syncElementAttributes(currentRoot, nextRoot);
|
||||
return;
|
||||
}
|
||||
|
||||
syncAttributes(currentRoot, nextRoot);
|
||||
syncElementAttributes(currentRoot, nextRoot);
|
||||
currentInfo.forEach((element, index) => {
|
||||
if (element.textContent !== nextInfo[index].textContent) {
|
||||
element.textContent = nextInfo[index].textContent;
|
||||
}
|
||||
setTextIfChanged(element, nextInfo[index].textContent);
|
||||
});
|
||||
syncAttributes(currentProgressBar, nextProgressBar);
|
||||
syncAttributes(currentProgressFill, nextProgressFill);
|
||||
syncElementAttributes(currentProgressBar, nextProgressBar);
|
||||
syncElementAttributes(currentProgressFill, nextProgressFill);
|
||||
currentProgressText.forEach((element, index) => {
|
||||
if (element.textContent !== nextProgressText[index].textContent) {
|
||||
element.textContent = nextProgressText[index].textContent;
|
||||
}
|
||||
setTextIfChanged(element, nextProgressText[index].textContent);
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user