refactor(frontend): reuse shared DOM synchronization

This commit is contained in:
Dariusz L
2026-08-04 20:17:41 +02:00
parent 9fb0357e59
commit d2c4d513db
3 changed files with 11 additions and 46 deletions
+2 -14
View File
@@ -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) {
+7 -20
View File
@@ -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);
});
},