mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2026-02-01 21:32:01 -08:00
migrate to use event delegation for items instead of inline onclick events.
This commit is contained in:
Sj-Si
parent
15c36b907e
commit
6f2daafff1
10 changed files with 255 additions and 208 deletions
|
|
@ -1,5 +1,2 @@
|
|||
<div class="copy-path-button card-button"
|
||||
title="Copy path to clipboard"
|
||||
onclick="extraNetworksBtnCopyPathOnClick(event)"
|
||||
data-clipboard-text="{clipboard_text}">
|
||||
</div>
|
||||
<div class="copy-path-button card-button" title="Copy path to clipboard" data-clipboard-text="{clipboard_text}">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,2 @@
|
|||
<button
|
||||
class='lg secondary gradio-button custom-button extra-network-dirs-view-button {extra_class}'
|
||||
title="{title}"
|
||||
onclick='extraNetworksBtnDirsViewItemOnClick(event, "{tabname_full}")'
|
||||
data-path="{path}"
|
||||
>{label}</button>
|
||||
<button class='lg secondary gradio-button custom-button extra-network-dirs-view-button {extra_class}' title="{title}"
|
||||
data-path="{path}">{label}</button>
|
||||
|
|
|
|||
|
|
@ -1,4 +1 @@
|
|||
<div class="edit-button card-button"
|
||||
title="Edit metadata"
|
||||
onclick="extraNetworksBtnEditMetadataOnClick(event, '{tabname}_{extra_networks_tabname}', '{name}')">
|
||||
</div>
|
||||
<div class="edit-button card-button" title="Edit metadata"></div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1 @@
|
|||
<div class="metadata-button card-button"
|
||||
title="Show internal metadata"
|
||||
onclick="extraNetworksBtnShowMetadataOnClick(event, '{extra_networks_tabname}', '{name}')">
|
||||
</div>
|
||||
<div class="metadata-button card-button" title="Show internal metadata"></div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="card" style="{style}" onclick="{onclick}" {data_attributes}>
|
||||
{background_image}
|
||||
<div class="card" style="{style}" {data_attributes}>
|
||||
{background_image}
|
||||
{button_row}
|
||||
<div class="actions">
|
||||
<span class="name">{name}</span>
|
||||
<span class="description">{description}</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<span class="name">{name}</span>
|
||||
<span class="description">{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane' data-tabname-full="{tabname}_{extra_networks_tabname}">
|
||||
<div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane' data-tabname="{tabname}"
|
||||
data-extra-networks-tabname="{extra_networks_tabname}" data-tabname-full="{tabname}_{extra_networks_tabname}">
|
||||
<div class="extra-network-controls hidden" data-tabname-full="{tabname}_{extra_networks_tabname}">
|
||||
<div class="extra-network-control--search">
|
||||
<svg class="extra-network-control--search-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -7,8 +8,7 @@
|
|||
<line x1="9.75" y1="9.75" x2="13" y2="13" />
|
||||
</svg>
|
||||
<input class="extra-network-control--search-text" type="text" placeholder="Search">
|
||||
<button role="button" class="extra-network-control extra-network-control--search-clear"
|
||||
onclick="extraNetworksControlSearchClearOnClick(event, '{tabname}_{extra_networks_tabname}');">
|
||||
<button role="button" class="extra-network-control extra-network-control--search-clear">
|
||||
<svg class="extra-network-control--search-clear-icon" viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
|
||||
<path fill="none" stroke="currentColor" d="M 5 5 L 11 11 M 5 11 L 11 5" />
|
||||
|
|
@ -19,11 +19,8 @@
|
|||
<div class="extra-network-controls--container">
|
||||
<div class="extra-network-controls--header">Sort Mode</div>
|
||||
<div class="extra-network-controls--buttons">
|
||||
<button class="extra-network-control extra-network-control--sort-mode"
|
||||
title="Sort by path"
|
||||
onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
|
||||
data-sort-mode="path"
|
||||
{btn_sort_mode_path_data_attributes}>
|
||||
<button class="extra-network-control extra-network-control--sort-mode" title="Sort by path"
|
||||
data-sort-mode="path" {btn_sort_mode_path_data_attributes}>
|
||||
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="1">
|
||||
|
|
@ -33,22 +30,16 @@
|
|||
<line x1="9" y1="10" x2="10.5" y2="11.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="extra-network-control extra-network-control--sort-mode"
|
||||
title="Sort by name"
|
||||
onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
|
||||
data-sort-mode="name"
|
||||
{btn_sort_mode_name_data_attributes}>
|
||||
<button class="extra-network-control extra-network-control--sort-mode" title="Sort by name"
|
||||
data-sort-mode="name" {btn_sort_mode_name_data_attributes}>
|
||||
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke-width="1" d="M 2 12 L 6 3 L 10 12 M 3.5 9 L 8.5 9" />
|
||||
<path stroke-width="1" d="M 8 3 L 15 3 M 9.5 6 L 15 6 M 11 9 L 15 9 M 12.5 12 L 15 12">
|
||||
</svg>
|
||||
</button>
|
||||
<button class="extra-network-control extra-network-control--sort-mode"
|
||||
title="Sort by date created"
|
||||
onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
|
||||
data-sort-mode="date_created"
|
||||
{btn_sort_mode_date_created_data_attributes}>
|
||||
<button class="extra-network-control extra-network-control--sort-mode" title="Sort by date created"
|
||||
data-sort-mode="date_created" {btn_sort_mode_date_created_data_attributes}>
|
||||
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
|
||||
<rect x="1" y="2" width="14" height="12" rx="2" fill="none" />
|
||||
|
|
@ -60,11 +51,8 @@
|
|||
<line x1="12" y1="1" x2="12" y2="3" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="extra-network-control extra-network-control--sort-mode"
|
||||
title="Sort by date modified"
|
||||
onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
|
||||
data-sort-mode="date_modified"
|
||||
{btn_sort_mode_date_modified_data_attributes}>
|
||||
<button class="extra-network-control extra-network-control--sort-mode" title="Sort by date modified"
|
||||
data-sort-mode="date_modified" {btn_sort_mode_date_modified_data_attributes}>
|
||||
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" stroke="currentColor" stroke-width="1">
|
||||
<g stroke-linecap="round" stroke-linejoin="round">
|
||||
|
|
@ -84,9 +72,7 @@
|
|||
<div class="extra-network-controls--container">
|
||||
<div class="extra-network-controls--header">Sort Order</div>
|
||||
<div class="extra-network-controls--buttons">
|
||||
<button class="extra-network-control extra-network-control--sort-dir"
|
||||
title="Sort {data_sort_dir}"
|
||||
onclick="extraNetworksControlSortDirOnClick(event, '{tabname}_{extra_networks_tabname}');"
|
||||
<button class="extra-network-control extra-network-control--sort-dir" title="Sort {data_sort_dir}"
|
||||
data-sort-dir="{data_sort_dir}">
|
||||
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
|
|
@ -99,9 +85,7 @@
|
|||
<div class="extra-network-controls--container">
|
||||
<div class="extra-network-controls--header">View Mode</div>
|
||||
<div class="extra-network-controls--buttons">
|
||||
<button class="extra-network-control extra-network-control--dirs-view"
|
||||
title="Enable Directory View"
|
||||
onclick="extraNetworksControlDirsViewOnClick(event, '{tabname}_{extra_networks_tabname}');"
|
||||
<button class="extra-network-control extra-network-control--dirs-view" title="Enable Directory View"
|
||||
{btn_dirs_view_data_attributes}>
|
||||
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor" stroke="none">
|
||||
|
|
@ -110,9 +94,7 @@
|
|||
<rect x="12" y="6" width="4" height="4" rx="1" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="extra-network-control extra-network-control--tree-view"
|
||||
title="Enable Tree View"
|
||||
onclick="extraNetworksControlTreeViewOnClick(event, '{tabname}_{extra_networks_tabname}');"
|
||||
<button class="extra-network-control extra-network-control--tree-view" title="Enable Tree View"
|
||||
{btn_tree_view_data_attributes}>
|
||||
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor" stroke="none">
|
||||
|
|
@ -128,8 +110,7 @@
|
|||
<div class="extra-network-controls--container">
|
||||
<div class="extra-network-controls--header">Refresh</div>
|
||||
<div class="extra-network-controls--buttons">
|
||||
<button class="extra-network-control extra-network-control--refresh" title="Refresh tab"
|
||||
onclick="extraNetworksControlRefreshOnClick(event, '{tabname}_{extra_networks_tabname}');">
|
||||
<button class="extra-network-control extra-network-control--refresh" title="Refresh tab">
|
||||
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
<button
|
||||
class="tree-list-item tree-list-item--{btn_type}"
|
||||
onclick="extraNetworksTreeOnClick(event, '{tabname}_{extra_networks_tabname}');{onclick_extra}"
|
||||
title={btn_title}
|
||||
{data_attributes}>
|
||||
<button class="tree-list-item tree-list-item--{btn_type}" title={btn_title} {data_attributes}>
|
||||
<span data-filterable-item-text hidden>{search_terms}</span>
|
||||
<span class='tree-list-item-action tree-list-item-action--leading'>{action_list_item_action_leading}</span>
|
||||
<span class="tree-list-item-visual tree-list-item-visual--leading">{action_list_item_visual_leading}</span>
|
||||
<span class="tree-list-item-label tree-list-item-label--truncate">{action_list_item_label}</span>
|
||||
<span class="tree-list-item-visual tree-list-item-visual--trailing">{action_list_item_visual_trailing}</span>
|
||||
<span class="tree-list-item-action tree-list-item-action--trailing">{action_list_item_action_trailing}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -859,85 +859,83 @@ async function extraNetworksTabSelected(tabname_full, show_prompt, show_neg_prom
|
|||
}
|
||||
}
|
||||
|
||||
function extraNetworksBtnDirsViewItemOnClick(event, tabname_full) {
|
||||
function extraNetworksBtnDirsViewItemOnClick(event) {
|
||||
/** Handles `onclick` events for buttons in the directory view. */
|
||||
const tab = extra_networks_tabs[tabname_full];
|
||||
const btn = event.target.closest(".extra-network-dirs-view-button");
|
||||
const pane = btn.closest(".extra-network-pane");
|
||||
const tab = extra_networks_tabs[pane.dataset.tabnameFull];
|
||||
|
||||
if ("selected" in event.target.dataset) {
|
||||
tab.setDirectoryButtons(event.target, false);
|
||||
if ("selected" in btn.dataset) {
|
||||
tab.setDirectoryButtons(btn, false);
|
||||
} else {
|
||||
tab.setDirectoryButtons(event.target, true);
|
||||
tab.setDirectoryButtons(btn, true);
|
||||
}
|
||||
}
|
||||
|
||||
function extraNetworksControlSearchClearOnClick(event) {
|
||||
/** Dispatches custom event when the `clear` button in a search input is clicked. */
|
||||
const btn = event.target.closest(".extra-network-control--search-clear");
|
||||
const controls = btn.closest(".extra-network-controls");
|
||||
extra_networks_tabs[controls.dataset.tabnameFull].updateSearch("");
|
||||
}
|
||||
|
||||
function extraNetworksControlSortModeOnClick(event) {
|
||||
/** Handles `onclick` events for Sort Mode buttons. */
|
||||
const btn = event.target.closest(".extra-network-control--sort-mode");
|
||||
// No operation if button is already selected.
|
||||
if ("selected" in btn.dataset) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function extraNetworksControlSearchClearOnClick(event, tabname_full) {
|
||||
/** Dispatches custom event when the `clear` button in a search input is clicked. */
|
||||
const txt_search_elem = extra_networks_tabs[tabname_full].txt_search_elem;
|
||||
txt_search_elem.value = "";
|
||||
txt_search_elem.dispatchEvent(
|
||||
new CustomEvent(
|
||||
"extra-network-control--search-clear",
|
||||
{bubbles: true, detail: {tabname_full: tabname_full}},
|
||||
)
|
||||
);
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function extraNetworksControlSortModeOnClick(event, tabname_full) {
|
||||
/** Handles `onclick` events for Sort Mode buttons. */
|
||||
const tab = extra_networks_tabs[tabname_full];
|
||||
const controls = btn.closest(".extra-network-controls");
|
||||
const tab = extra_networks_tabs[controls.dataset.tabnameFull];
|
||||
tab.controls_elem.querySelectorAll(".extra-network-control--sort-mode").forEach(elem => {
|
||||
delete elem.dataset.selected;
|
||||
});
|
||||
|
||||
event.currentTarget.dataset.selected = "";
|
||||
btn.dataset.selected = "";
|
||||
|
||||
const sort_mode_str = event.currentTarget.dataset.sortMode.toLowerCase();
|
||||
const sort_mode_str = btn.dataset.sortMode.toLowerCase();
|
||||
|
||||
tab.setSortMode(sort_mode_str);
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function extraNetworksControlSortDirOnClick(event, tabname_full) {
|
||||
function extraNetworksControlSortDirOnClick(event) {
|
||||
/** Handles `onclick` events for the Sort Direction button.
|
||||
*
|
||||
* Modifies the data attributes of the Sort Direction button to cycle between
|
||||
* ascending and descending sort directions.
|
||||
*/
|
||||
const tab = extra_networks_tabs[tabname_full];
|
||||
const btn = event.target.closest(".extra-network-control--sort-dir");
|
||||
const controls = btn.closest(".extra-network-controls");
|
||||
const tab = extra_networks_tabs[controls.dataset.tabnameFull];
|
||||
|
||||
const curr_sort_dir_str = event.currentTarget.dataset.sortDir.toLowerCase();
|
||||
const curr_sort_dir_str = btn.dataset.sortDir.toLowerCase();
|
||||
if (!["ascending", "descending"].includes(curr_sort_dir_str)) {
|
||||
console.error(`Invalid sort_dir_str: ${curr_sort_dir_str}`);
|
||||
return;
|
||||
}
|
||||
|
||||
let sort_dir_str = curr_sort_dir_str === "ascending" ? "descending" : "ascending";
|
||||
event.currentTarget.dataset.sortDir = sort_dir_str;
|
||||
event.currentTarget.setAttribute("title", `Sort ${sort_dir_str}`);
|
||||
btn.dataset.sortDir = sort_dir_str;
|
||||
btn.setAttribute("title", `Sort ${sort_dir_str}`);
|
||||
|
||||
tab.setSortDir(sort_dir_str);
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function extraNetworksControlTreeViewOnClick(event, tabname_full) {
|
||||
function extraNetworksControlTreeViewOnClick(event) {
|
||||
/** Handles `onclick` events for the Tree View button.
|
||||
*
|
||||
* Toggles the tree view in the extra networks pane.
|
||||
*/
|
||||
const show = !("selected" in event.currentTarget.dataset);
|
||||
const tab = extra_networks_tabs[tabname_full];
|
||||
if ("selected" in event.currentTarget.dataset) {
|
||||
delete event.currentTarget.dataset.selected;
|
||||
const btn = event.target.closest(".extra-network-control--tree-view");
|
||||
const controls = btn.closest(".extra-network-controls");
|
||||
const tab = extra_networks_tabs[controls.dataset.tabnameFull];
|
||||
const show = !("selected" in btn.dataset);
|
||||
if ("selected" in btn.dataset) {
|
||||
delete btn.dataset.selected;
|
||||
} else {
|
||||
event.currentTarget.dataset.selected = "";
|
||||
btn.dataset.selected = "";
|
||||
}
|
||||
|
||||
if (!show) {
|
||||
|
|
@ -960,21 +958,21 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) {
|
|||
resize_handle_row.classList.toggle("resize-handle-hidden", !show);
|
||||
|
||||
tab.setDirectoryButtons();
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function extraNetworksControlDirsViewOnClick(event, tabname_full) {
|
||||
function extraNetworksControlDirsViewOnClick(event) {
|
||||
/** Handles `onclick` events for the Dirs View button.
|
||||
*
|
||||
* Toggles the directory view in the extra networks pane.
|
||||
*/
|
||||
const tab = extra_networks_tabs[tabname_full];
|
||||
const show = !("selected" in event.currentTarget.dataset);
|
||||
const btn = event.target.closest(".extra-network-control--dirs-view");
|
||||
const controls = btn.closest(".extra-network-controls");
|
||||
const tab = extra_networks_tabs[controls.dataset.tabnameFull];
|
||||
const show = !("selected" in btn.dataset);
|
||||
if (show) {
|
||||
event.currentTarget.dataset.selected = "";
|
||||
btn.dataset.selected = "";
|
||||
} else {
|
||||
delete event.currentTarget.dataset.selected;
|
||||
delete btn.dataset.selected;
|
||||
}
|
||||
|
||||
if (!show) {
|
||||
|
|
@ -991,11 +989,9 @@ function extraNetworksControlDirsViewOnClick(event, tabname_full) {
|
|||
).classList.toggle("hidden", !show);
|
||||
|
||||
tab.setDirectoryButtons();
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function extraNetworksControlRefreshOnClick(event, tabname_full) {
|
||||
function extraNetworksControlRefreshOnClick(event) {
|
||||
/** Handles `onclick` events for the Refresh Page button.
|
||||
*
|
||||
* In order to actually call the python functions in `ui_extra_networks.py`
|
||||
|
|
@ -1003,81 +999,155 @@ function extraNetworksControlRefreshOnClick(event, tabname_full) {
|
|||
* event handler that refreshes the page. So what this function here does
|
||||
* is it manually raises a `click` event on that button.
|
||||
*/
|
||||
event.stopPropagation();
|
||||
|
||||
clearTimeout(extra_networks_refresh_internal_debounce_timer);
|
||||
extra_networks_refresh_internal_debounce_timer = setTimeout(async() => {
|
||||
const tab = extra_networks_tabs[tabname_full];
|
||||
const btn = event.target.closest(".extra-network-control--refresh");
|
||||
const controls = btn.closest(".extra-network-controls");
|
||||
const tab = extra_networks_tabs[controls.dataset.tabnameFull];
|
||||
// We want to reset tab lists on refresh click so that the viewing area
|
||||
// shows that it is loading new data.
|
||||
tab.tree_list.clear();
|
||||
tab.cards_list.clear();
|
||||
// Fire an event for this button click.
|
||||
gradioApp().getElementById(`${tabname_full}_extra_refresh_internal`).dispatchEvent(new Event("click"));
|
||||
gradioApp().getElementById(
|
||||
`${controls.dataset.tabnameFull}_extra_refresh_internal`
|
||||
).dispatchEvent(new Event("click"));
|
||||
}, EXTRA_NETWORKS_REFRESH_INTERNAL_DEBOUNCE_TIMEOUT_MS);
|
||||
}
|
||||
|
||||
function extraNetworksCardOnClick(event, tabname_full) {
|
||||
const elem = event.currentTarget;
|
||||
const tab = extra_networks_tabs[tabname_full];
|
||||
if ("negPrompt" in elem.dataset) {
|
||||
extraNetworksUpdatePrompt(tab.txt_prompt_elem, elem.dataset.prompt);
|
||||
extraNetworksUpdatePrompt(tab.txt_neg_prompt_elem, elem.dataset.negPrompt);
|
||||
} else if ("allowNeg" in elem.dataset) {
|
||||
extraNetworksUpdatePrompt(tab.active_prompt_elem, elem.dataset.prompt);
|
||||
function extraNetworksSelectModel(tab, opts = {prompt, neg_prompt, allow_neg, checkpoint_name}) {
|
||||
if (opts.checkpoint_name) {
|
||||
selectCheckpoint(opts.checkpoint_name);
|
||||
} else if (opts.neg_prompt) {
|
||||
extraNetworksUpdatePrompt(tab.txt_prompt_elem, opts.prompt);
|
||||
extraNetworksUpdatePrompt(tab.txt_neg_prompt_elem, opts.neg_prompt);
|
||||
} else if (opts.allow_neg) {
|
||||
extraNetworksUpdatePrompt(tab.active_prompt_elem, opts.prompt);
|
||||
} else {
|
||||
extraNetworksUpdatePrompt(tab.txt_prompt_elem, elem.dataset.prompt);
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function extraNetworksTreeFileOnClick(event, btn, tabname_full) {
|
||||
return;
|
||||
}
|
||||
|
||||
async function extraNetworksTreeDirectoryOnClick(event, btn, tabname_full) {
|
||||
const div_id = btn.dataset.divId;
|
||||
const tab = extra_networks_tabs[tabname_full];
|
||||
|
||||
if (event.target.matches(".tree-list-item-action--leading .tree-list-item-action-chevron")) {
|
||||
await tab.tree_list.onRowExpandClick(div_id, btn);
|
||||
tab.setDirectoryButtons();
|
||||
} else if (event.target.matches(".tree-list-item-action--trailing .tree-list-item-action-expand")) {
|
||||
await tab.tree_list.onExpandAllClick(div_id);
|
||||
tab.setDirectoryButtons();
|
||||
} else if (event.target.matches(".tree-list-item-action--trailing .tree-list-item-action-collapse")) {
|
||||
await tab.tree_list.onCollapseAllClick(div_id);
|
||||
tab.setDirectoryButtons();
|
||||
} else {
|
||||
// No action items were clicked. Select the row.
|
||||
await tab.tree_list.onRowSelected(div_id, btn);
|
||||
tab.setDirectoryButtons(btn);
|
||||
extraNetworksUpdatePrompt(tab.txt_prompt_elem, opts.prompt);
|
||||
}
|
||||
}
|
||||
|
||||
function extraNetworksTreeOnClick(event, tabname_full) {
|
||||
const btn = event.target.closest(".tree-list-item");
|
||||
if (!isElementLogError(btn)) {
|
||||
function extraNetworksCardOnClick(event) {
|
||||
// Do not select the card if its child button-row is the target of the event.
|
||||
if (event.target.closest(".button-row")) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (btn.dataset.treeEntryType === "file") {
|
||||
extraNetworksTreeFileOnClick(event, btn, tabname_full);
|
||||
} else {
|
||||
extraNetworksTreeDirectoryOnClick(event, btn, tabname_full);
|
||||
const btn = event.target.closest(".card");
|
||||
const pane = btn.closest(".extra-network-pane");
|
||||
const tab = extra_networks_tabs[pane.dataset.tabnameFull];
|
||||
|
||||
let checkpoint_name;
|
||||
if ("isCheckpoint" in btn.dataset) {
|
||||
checkpoint_name = btn.dataset.name;
|
||||
}
|
||||
extraNetworksSelectModel(tab, {
|
||||
prompt: btn.dataset.prompt,
|
||||
neg_prompt: btn.dataset.negPrompt,
|
||||
allow_neg: btn.dataset.allowNeg,
|
||||
checkpoint_name: checkpoint_name,
|
||||
});
|
||||
}
|
||||
|
||||
function extraNetworksTreeFileOnClick(event) {
|
||||
// Do not select the row if its child button-row is the target of the event.
|
||||
if (event.target.closest(".tree-list-item-action")) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
const btn = event.target.closest(".tree-list-item");
|
||||
const pane = btn.closest(".extra-network-pane");
|
||||
const tab = extra_networks_tabs[pane.dataset.tabnameFull];
|
||||
|
||||
|
||||
let checkpoint_name;
|
||||
if ("isCheckpoint" in btn.dataset) {
|
||||
checkpoint_name = btn.dataset.name;
|
||||
}
|
||||
extraNetworksSelectModel(tab, {
|
||||
prompt: btn.dataset.prompt,
|
||||
neg_prompt: btn.dataset.negPrompt,
|
||||
allow_neg: btn.dataset.allowNeg,
|
||||
checkpoint_name: checkpoint_name,
|
||||
});
|
||||
}
|
||||
|
||||
function extraNetworksBtnShowMetadataOnClick(event, extra_networks_tabname, card_name) {
|
||||
extraNetworksFetchMetadata(extra_networks_tabname, card_name);
|
||||
event.stopPropagation();
|
||||
async function extraNetworksTreeDirectoryOnClick(event) {
|
||||
// Do not select the row if its child button-row is the target of the event.
|
||||
if (event.target.closest(".tree-list-item-action")) {
|
||||
return;
|
||||
}
|
||||
const btn = event.target.closest(".tree-list-item");
|
||||
const pane = btn.closest(".extra-network-pane");
|
||||
const div_id = btn.dataset.divId;
|
||||
const tab = extra_networks_tabs[pane.dataset.tabnameFull];
|
||||
|
||||
await tab.tree_list.onRowSelected(div_id, btn);
|
||||
tab.setDirectoryButtons(btn);
|
||||
}
|
||||
|
||||
function extraNetworksBtnEditMetadataOnClick(event, tabname_full, card_name) {
|
||||
const id = `${tabname_full}_edit_user_metadata`;
|
||||
async function extraNetworksBtnTreeViewChevronOnClick(event) {
|
||||
// stopPropagation so we don't also trigger event on parent since this btn is nested.
|
||||
event.stopPropagation();
|
||||
const btn = event.target.closest(".tree-list-item-action-chevron");
|
||||
const row = event.target.closest(".tree-list-item");
|
||||
const pane = btn.closest(".extra-network-pane");
|
||||
const div_id = row.dataset.divId;
|
||||
const tab = extra_networks_tabs[pane.dataset.tabnameFull];
|
||||
|
||||
await tab.tree_list.onRowExpandClick(div_id, btn);
|
||||
tab.setDirectoryButtons();
|
||||
}
|
||||
|
||||
async function extraNetworksBtnTreeViewExpandOnClick(event) {
|
||||
// stopPropagation so we don't also trigger event on parent since this btn is nested.
|
||||
event.stopPropagation();
|
||||
const btn = event.target.closest(".tree-list-item-action-expand");
|
||||
const row = event.target.closest(".tree-list-item");
|
||||
const pane = btn.closest(".extra-network-pane");
|
||||
const div_id = row.dataset.divId;
|
||||
const tab = extra_networks_tabs[pane.dataset.tabnameFull];
|
||||
|
||||
await tab.tree_list.onExpandAllClick(div_id);
|
||||
tab.setDirectoryButtons();
|
||||
}
|
||||
|
||||
async function extraNetworksBtnTreeViewCollapseOnClick(event) {
|
||||
// stopPropagation so we don't also trigger event on parent since this btn is nested.
|
||||
event.stopPropagation();
|
||||
const btn = event.target.closest(".tree-list-item-action-collapse");
|
||||
const row = event.target.closest(".tree-list-item");
|
||||
const pane = btn.closest(".extra-network-pane");
|
||||
const div_id = row.dataset.divId;
|
||||
const tab = extra_networks_tabs[pane.dataset.tabnameFull];
|
||||
|
||||
await tab.tree_list.onCollapseAllClick(div_id);
|
||||
tab.setDirectoryButtons();
|
||||
}
|
||||
|
||||
function extraNetworksBtnShowMetadataOnClick(event) {
|
||||
// stopPropagation so we don't also trigger event on parent since this btn is nested.
|
||||
event.stopPropagation();
|
||||
const btn = event.target.closest(".metadata-button");
|
||||
const pane = btn.closest(".extra-network-pane");
|
||||
let parent = btn.closest(".card");
|
||||
if (!parent) {
|
||||
parent = btn.closest(".tree-list-item");
|
||||
}
|
||||
extraNetworksFetchMetadata(pane.dataset.extraNetworksTabname, parent.dataset.name);
|
||||
}
|
||||
|
||||
function extraNetworksBtnEditMetadataOnClick(event) {
|
||||
// stopPropagation so we don't also trigger event on parent since this btn is nested.
|
||||
event.stopPropagation();
|
||||
const btn = event.target.closest(".edit-button");
|
||||
const pane = btn.closest(".extra-network-pane");
|
||||
let parent = btn.closest(".card");
|
||||
if (!parent) {
|
||||
parent = btn.closest(".tree-list-item");
|
||||
}
|
||||
const id = `${pane.dataset.tabnameFull}_edit_user_metadata`;
|
||||
let editor = extraPageUserMetadataEditors[id];
|
||||
if (isNullOrUndefined(editor)) {
|
||||
editor = {};
|
||||
|
|
@ -1087,19 +1157,19 @@ function extraNetworksBtnEditMetadataOnClick(event, tabname_full, card_name) {
|
|||
extraPageUserMetadataEditors[id] = editor;
|
||||
}
|
||||
|
||||
editor.nameTextarea.value = card_name;
|
||||
editor.nameTextarea.value = parent.dataset.name;
|
||||
updateInput(editor.nameTextarea);
|
||||
|
||||
editor.button.click();
|
||||
|
||||
popup(editor.page);
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function extraNetworksBtnCopyPathOnClick(event) {
|
||||
copyToClipboard(event.target.dataset.clipboardText);
|
||||
// stopPropagation so we don't also trigger event on parent since this btn is nested.
|
||||
event.stopPropagation();
|
||||
const btn = event.target.closest(".copy-path-button");
|
||||
copyToClipboard(btn.dataset.clipboardText);
|
||||
}
|
||||
|
||||
// ==== MAIN SETUP ====
|
||||
|
|
@ -1120,12 +1190,6 @@ function extraNetworksSetupEventDelegators() {
|
|||
extra_networks_tabs[pane.dataset.tabnameFull].autoSetTreeWidth();
|
||||
});
|
||||
|
||||
// Update search filter whenever the search input's clear button is pressed.
|
||||
window.addEventListener("extra-network-control--search-clear", event => {
|
||||
event.stopPropagation();
|
||||
extra_networks_tabs[event.detail.tabname_full].applyFilter();
|
||||
});
|
||||
|
||||
// Debounce search text input. This way we only search after user is done typing.
|
||||
const search_input_debounce = _debounce(tabname_full => {
|
||||
extra_networks_tabs[tabname_full].applyFilter();
|
||||
|
|
@ -1147,6 +1211,33 @@ function extraNetworksSetupEventDelegators() {
|
|||
closePopup();
|
||||
}
|
||||
});
|
||||
|
||||
const click_event_map = {
|
||||
".tree-list-item--dir": extraNetworksTreeDirectoryOnClick,
|
||||
".tree-list-item--file": extraNetworksTreeFileOnClick,
|
||||
".card": extraNetworksCardOnClick,
|
||||
".extra-network-dirs-view-button": extraNetworksBtnDirsViewItemOnClick,
|
||||
".copy-path-button": extraNetworksBtnCopyPathOnClick,
|
||||
".edit-button": extraNetworksBtnEditMetadataOnClick,
|
||||
".metadata-button": extraNetworksBtnShowMetadataOnClick,
|
||||
".tree-list-item-action-chevron": extraNetworksBtnTreeViewChevronOnClick,
|
||||
".tree-list-item-action-expand": extraNetworksBtnTreeViewExpandOnClick,
|
||||
".tree-list-item-action-collapse": extraNetworksBtnTreeViewCollapseOnClick,
|
||||
".extra-network-control--search-clear": extraNetworksControlSearchClearOnClick,
|
||||
".extra-network-control--sort-mode": extraNetworksControlSortModeOnClick,
|
||||
".extra-network-control--sort-dir": extraNetworksControlSortDirOnClick,
|
||||
".extra-network-control--dirs-view": extraNetworksControlDirsViewOnClick,
|
||||
".extra-network-control--tree-view": extraNetworksControlTreeViewOnClick,
|
||||
".extra-network-control--refresh": extraNetworksControlRefreshOnClick,
|
||||
};
|
||||
|
||||
window.addEventListener("click", event => {
|
||||
for (const [selector, handler] of Object.entries(click_event_map)) {
|
||||
if (event.target.closest(selector)) {
|
||||
handler(event);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function extraNetworksSetupTab(tabname) {
|
||||
|
|
|
|||
|
|
@ -285,7 +285,6 @@ class ExtraNetworksPage:
|
|||
data_attributes: Optional[dict] = None,
|
||||
dir_is_empty: bool = False,
|
||||
item: Optional[dict] = None,
|
||||
onclick_extra: Optional[str] = None,
|
||||
) -> str:
|
||||
"""Generates HTML for a single row of the Tree View
|
||||
|
||||
|
|
@ -305,8 +304,6 @@ class ExtraNetworksPage:
|
|||
Whether the directory is empty. Only useful if btn_type=="dir".
|
||||
item:
|
||||
Dictionary containing item data such as filename, hash, etc.
|
||||
onclick_extra:
|
||||
Additional javascript code to add to the row's `onclick` attribute.
|
||||
"""
|
||||
if btn_type not in ["file", "dir"]:
|
||||
raise ValueError("Invalid button type:", btn_type)
|
||||
|
|
@ -355,7 +352,6 @@ class ExtraNetworksPage:
|
|||
"btn_type": btn_type,
|
||||
"btn_title": btn_title,
|
||||
"tabname": tabname,
|
||||
"onclick_extra": onclick_extra if onclick_extra else "",
|
||||
"extra_networks_tabname": self.extra_networks_tabname,
|
||||
"action_list_item_action_leading": action_list_item_action_leading,
|
||||
"action_list_item_visual_leading": action_list_item_visual_leading,
|
||||
|
|
@ -423,10 +419,6 @@ class ExtraNetworksPage:
|
|||
if preview:
|
||||
background_image = f'<img src="{preview}" class="preview" loading="lazy">'
|
||||
|
||||
onclick = item.get("onclick", None)
|
||||
if onclick is None:
|
||||
onclick = html.escape(f"extraNetworksCardOnClick(event, '{tabname}_{self.extra_networks_tabname}');")
|
||||
|
||||
button_row = self.get_button_row(tabname, item)
|
||||
|
||||
filename = os.path.normpath(item.get("filename", ""))
|
||||
|
|
@ -465,6 +457,9 @@ class ExtraNetworksPage:
|
|||
"data-allow-neg": self.allow_negative_prompt,
|
||||
}
|
||||
|
||||
if self.__class__.__name__ == "ExtraNetworksPageCheckpoints":
|
||||
data_attributes["data-is-checkpoint"] = True
|
||||
|
||||
data_attributes_str = ""
|
||||
for k, v in data_attributes.items():
|
||||
if isinstance(v, (bool,)):
|
||||
|
|
@ -476,7 +471,6 @@ class ExtraNetworksPage:
|
|||
|
||||
return self.card_tpl.format(
|
||||
style=style,
|
||||
onclick=onclick,
|
||||
data_attributes=data_attributes_str,
|
||||
background_image=background_image,
|
||||
button_row=button_row,
|
||||
|
|
@ -635,30 +629,29 @@ class ExtraNetworksPage:
|
|||
# Don't add file if files are disabled in the options.
|
||||
continue
|
||||
|
||||
onclick = node.item.get("onclick", None)
|
||||
if onclick is None:
|
||||
onclick = html.escape(f"extraNetworksCardOnClick(event, '{tabname}_{self.extra_networks_tabname}');")
|
||||
|
||||
item_name = node.item.get("name", "").strip()
|
||||
data_path = os.path.normpath(node.item.get("filename", "").strip())
|
||||
data_attributes = {
|
||||
"data-div-id": f'"{node.id}"',
|
||||
"data-parent-id": f'"{parent_id}"',
|
||||
"data-tree-entry-type": "file",
|
||||
"data-name": f'"{item_name}"',
|
||||
"data-depth": node.depth,
|
||||
"data-path": f'"{data_path}"',
|
||||
"data-hash": node.item.get("shorthash", None),
|
||||
"data-prompt": node.item.get("prompt", "").strip(),
|
||||
"data-neg-prompt": node.item.get("negative_prompt", "").strip(),
|
||||
"data-allow-neg": self.allow_negative_prompt,
|
||||
}
|
||||
if self.__class__.__name__ == "ExtraNetworksPageCheckpoints":
|
||||
data_attributes["data-is-checkpoint"] = True
|
||||
|
||||
tree_item.html = self.build_tree_html_row(
|
||||
tabname=tabname,
|
||||
label=html.escape(item_name),
|
||||
btn_type="file",
|
||||
data_attributes={
|
||||
"data-div-id": f'"{node.id}"',
|
||||
"data-parent-id": f'"{parent_id}"',
|
||||
"data-tree-entry-type": "file",
|
||||
"data-name": f'"{item_name}"',
|
||||
"data-depth": node.depth,
|
||||
"data-path": f'"{data_path}"',
|
||||
"data-hash": node.item.get("shorthash", None),
|
||||
"data-prompt": node.item.get("prompt", "").strip(),
|
||||
"data-neg-prompt": node.item.get("negative_prompt", "").strip(),
|
||||
"data-allow-neg": self.allow_negative_prompt,
|
||||
},
|
||||
data_attributes=data_attributes,
|
||||
item=node.item,
|
||||
onclick_extra=onclick,
|
||||
)
|
||||
self.tree[node.id] = tree_item
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ class ExtraNetworksPageCheckpoints(ui_extra_networks.ExtraNetworksPage):
|
|||
"preview": self.find_preview(path),
|
||||
"description": self.find_description(path),
|
||||
"search_terms": search_terms,
|
||||
"onclick": html.escape(f"return selectCheckpoint({ui_extra_networks.quote_js(name)})"),
|
||||
"local_preview": f"{path}.{shared.opts.samples_format}",
|
||||
"metadata": checkpoint.metadata,
|
||||
"sort_keys": {'default': index, **self.get_sort_keys(checkpoint.filename)},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue