diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html index 89898ed30..097edcb86 100644 --- a/html/extra-networks-card.html +++ b/html/extra-networks-card.html @@ -3,6 +3,6 @@ {button_row}
{name} - {description} + {description}
diff --git a/html/extra-networks-model-details.html b/html/extra-networks-model-details.html index 6a097279c..c73ef825c 100644 --- a/html/extra-networks-model-details.html +++ b/html/extra-networks-model-details.html @@ -1,6 +1,6 @@
-

{name}

+

{name}

-

{description}

+

{description}

Model Metadata

- +
{metadata_table}
{model_specific} diff --git a/javascript/clusterize.js b/javascript/clusterize.js index 689516fb5..820bd721f 100644 --- a/javascript/clusterize.js +++ b/javascript/clusterize.js @@ -466,6 +466,10 @@ class Clusterize { } else { content_elem.innerHTML = data; } + + // Parse items flagged as containing Shadow DOM entries. + convertElementShadowDOM(content_elem, "[data-parse-as-shadow-dom]"); + return content_elem.innerHTML; } diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index de127cb2d..ddf8630b8 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -18,6 +18,7 @@ waitForBool, copyToClipboard, resizeGridSetup, + convertElementShadowDOM, */ /*eslint no-undef: "error"*/ @@ -313,6 +314,11 @@ class ExtraNetworksTab { (data) => { if (data && data.html) { this.card_list.updateHtml(elem, data.html); + // If this model's detail is displayed, update it. + const desc_elem = this.container_elem.querySelector(".model-info--name"); + if (isElement(desc_elem) && desc_elem.textContent === elem.dataset.name) { + this.showDetsView(elem); + } } }, ); @@ -927,7 +933,10 @@ class ExtraNetworksTab { div_dets.innerHTML = "Error parsing model details."; return; } + div_dets.innerHTML = response.html; + + convertElementShadowDOM(div_dets, "[data-parse-as-shadow-dom]"); }; _clear_details(); diff --git a/javascript/extraNetworksClusterize.js b/javascript/extraNetworksClusterize.js index f3907eba5..3ee02152e 100644 --- a/javascript/extraNetworksClusterize.js +++ b/javascript/extraNetworksClusterize.js @@ -12,6 +12,7 @@ isElementLogError, keyExistsLogError, htmlStringToElement, + convertElementShadowDOM, */ /*eslint no-undef: "error"*/ @@ -260,6 +261,7 @@ class ExtraNetworksClusterize extends Clusterize { return; } const parsed_html = htmlStringToElement(new_html); + convertElementShadowDOM(parsed_html, "[data-parse-as-shadow-dom]"); // replace the element in DOM with our new element elem.replaceWith(parsed_html); diff --git a/javascript/utils.js b/javascript/utils.js index cf499420d..5d3f1487e 100644 --- a/javascript/utils.js +++ b/javascript/utils.js @@ -615,6 +615,38 @@ function htmlStringToFragment(s) { return document.createRange().createContextualFragment(s); } +function convertInnerHtmlToShadowDOM(elem) { + /** Inplace conversion of innerHTML of an element into a Shadow DOM. + * + * If the innerHTML is not valid HTML then the innerHTML is left unchanged. + */ + const parsed_str = new DOMParser().parseFromString(elem.innerHTML, "text/html").documentElement.textContent; + const parsed_elem = htmlStringToElement(parsed_str); + if (!isNullOrUndefined(parsed_elem)) { + elem.innerHTML = ""; + const shadow = elem.attachShadow({mode: "open"}); + shadow.appendChild(parsed_elem); + } +} + +function convertElementShadowDOM(elem, selector) { + /** Inplace conversion of Shadow DOM of all children matching the passed selector. + * + * `selector` defaults to [data-parse-as-shadow-dom] if not a valid string. + * + * NOTE: Nested Shadow DOMs are untested but will likely not work. + */ + if (!isString(selector)) { + selector = "[data-parse-as-shadow-dom]"; + } + + let children = Array.from(elem.querySelectorAll(selector)); + children = children.filter(x => x.innerHTML !== ""); + for (const child of children) { + convertInnerHtmlToShadowDOM(child); + } +} + function toggleCss(key, css, enable) { var style = document.getElementById(key); if (enable && !style) { diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 2e548ec59..55527ba94 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -442,8 +442,10 @@ class ExtraNetworksPage: if shared.opts.extra_networks_card_show_desc: description = item.get("description", "") or "" + description_data_attributes = "" if not shared.opts.extra_networks_card_description_is_html: description = html.escape(description) + description_data_attributes = "data-parse-as-shadow-dom" data_name = item.get("name", "").strip() data_path = os.path.normpath(item.get("filename", "").strip()) @@ -475,6 +477,7 @@ class ExtraNetworksPage: background_image=background_image, button_row=button_row, name=html.escape(item["name"].strip()), + description_data_attributes=description_data_attributes, description=description, ) @@ -1055,13 +1058,16 @@ class ExtraNetworksPage: if not description: description = "" + description_data_attributes = "" if not shared.opts.extra_networks_card_description_is_html: description = html.escape(description) + description_data_attributes = "data-parse-as-shadow-dom" model_specific = self.get_model_detail_extra_html(model_name) return self.model_details_tpl.format( name=model_name, + description_data_attributes=description_data_attributes, description=description, metadata_table=tbl_metadata, model_specific=model_specific,