Merge pull request #15331 from AUTOMATIC1111/extra-networks-buttons

Fix extra networks buttons when filename contains an apostrophe

html/extra-networks-copy-path-button.html

@@ -1,5 +1,5 @@
 <div class="copy-path-button card-button"
     title="Copy path to clipboard"
-    onclick='extraNetworksCopyCardPath(event, {filename})'
+    onclick="extraNetworksCopyCardPath(event)"
-    data-clipboard-text={filename}>
+    data-clipboard-text="{filename}">
 </div>

html/extra-networks-edit-item-button.html

@@ -1,4 +1,4 @@
 <div class="edit-button card-button"
     title="Edit metadata"
-    onclick="extraNetworksEditUserMetadata(event, '{tabname}', '{extra_networks_tabname}', '{name}')">
+    onclick="extraNetworksEditUserMetadata(event, '{tabname}', '{extra_networks_tabname}')">
 </div>

html/extra-networks-metadata-button.html

@@ -1,4 +1,4 @@
 <div class="metadata-button card-button"
     title="Show internal metadata"
-    onclick="extraNetworksRequestMetadata(event, '{extra_networks_tabname}', '{name}')">
+    onclick="extraNetworksRequestMetadata(event, '{extra_networks_tabname}')">
 </div>

javascript/extraNetworks.js

@@ -605,16 +605,18 @@ function requestGet(url, data, handler, errorHandler) {
     xhr.send(js);
 }
 
-function extraNetworksCopyCardPath(event, path) {
+function extraNetworksCopyCardPath(event) {
-    navigator.clipboard.writeText(path);
+    navigator.clipboard.writeText(event.target.getAttribute("data-clipboard-text"));
     event.stopPropagation();
 }
 
-function extraNetworksRequestMetadata(event, extraPage, cardName) {
+function extraNetworksRequestMetadata(event, extraPage) {
     var showError = function() {
         extraNetworksShowMetadata("there was an error getting metadata");
     };
 
+    var cardName = event.target.parentElement.parentElement.getAttribute("data-name");
+
     requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
         if (data && data.metadata) {
             extraNetworksShowMetadata(data.metadata);
@@ -628,7 +630,7 @@ function extraNetworksRequestMetadata(event, extraPage, cardName) {
 
 var extraPageUserMetadataEditors = {};
 
-function extraNetworksEditUserMetadata(event, tabname, extraPage, cardName) {
+function extraNetworksEditUserMetadata(event, tabname, extraPage) {
     var id = tabname + '_' + extraPage + '_edit_user_metadata';
 
     var editor = extraPageUserMetadataEditors[id];
@@ -640,6 +642,7 @@ function extraNetworksEditUserMetadata(event, tabname, extraPage, cardName) {
         extraPageUserMetadataEditors[id] = editor;
     }
 
+    var cardName = event.target.parentElement.parentElement.getAttribute("data-name");
     editor.nameTextarea.value = cardName;
     updateInput(editor.nameTextarea);
 

modules/ui_extra_networks.py

@@ -239,21 +239,19 @@ class ExtraNetworksPage:
             )
             onclick = html.escape(onclick)
 
-        btn_copy_path = self.btn_copy_path_tpl.format(**{"filename": quote_js(item["filename"])})
+        btn_copy_path = self.btn_copy_path_tpl.format(**{"filename": item["filename"]})
         btn_metadata = ""
         metadata = item.get("metadata")
         if metadata:
             btn_metadata = self.btn_metadata_tpl.format(
                 **{
                     "extra_networks_tabname": self.extra_networks_tabname,
-                    "name": html.escape(item["name"]),
                 }
             )
         btn_edit_item = self.btn_edit_item_tpl.format(
             **{
                 "tabname": tabname,
                 "extra_networks_tabname": self.extra_networks_tabname,
-                "name": html.escape(item["name"]),
             }
         )