Fix windows filtering bug

This commit is contained in:
Sj-Si 2024-05-02 13:27:03 -04:00
parent f07fbc03ff
commit 06a4e5950c
3 changed files with 26 additions and 9 deletions

View file

@ -121,11 +121,11 @@
</div>
</div>
<div class="extra-network-content--container">
<div class="extra-network-content extra-network-content--dirs-view styled-scrollbar {dirs_view_hidden_cls}">
<div class="extra-network-content extra-network-content--dirs-view styled-scrollbar">
{dirs_html}
</div>
<div class="extra-network-content extra-network-content--cards resize-handle-row">
<div class="extra-network-content resize-handle-col {tree_view_hidden_cls}" style="{tree_view_style}">
<div class="extra-network-content resize-handle-col" style="{tree_view_style}">
<div id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
class='extra-network-tree styled-scrollbar clusterize-scroll'>
<div id='{tabname}_{extra_networks_tabname}_tree_list_content_area'

View file

@ -151,6 +151,23 @@ class ExtraNetworksTab {
await Promise.all([this.setupTreeList(), this.setupCardsList()]);
const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
const btn_tree_view = this.controls_elem.querySelector(".extra-network-control--tree-view");
const div_dirs = this.container_elem.querySelector(".extra-network-content--dirs-view");
// We actually want to select the tree view's column in the resize-handle-row.
// This is what we actually show/hide, not the inner elements.
const div_tree = this.tree_list.scroll_elem.closest(".resize-handle-col");
this.dirs_view_en = "selected" in btn_dirs_view.dataset;
this.tree_view_en = "selected" in btn_tree_view.dataset;
// Remove "hidden" class if button is enabled, otherwise add it.
div_dirs.classList.toggle("hidden", !this.dirs_view_en);
div_tree.classList.toggle("hidden", !this.tree_view_en);
// Apply the current resize handle classes.
const resize_handle_row = this.tree_list.scroll_elem.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", div_tree.classList.contains("hidden"));
const sort_mode_elem = this.controls_elem.querySelector(".extra-network-control--sort-mode[data-selected]");
isElementThrowError(sort_mode_elem);
const sort_dir_elem = this.controls_elem.querySelector(".extra-network-control--sort-dir");
@ -320,8 +337,6 @@ class ExtraNetworksTab {
div_dirs.classList.toggle("hidden", !this.dirs_view_en);
div_tree.classList.toggle("hidden", !this.tree_view_en);
// Apply the current resize handle classes.
const resize_handle_row = this.tree_list.scroll_elem.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", div_tree.classList.contains("hidden"));
@ -628,8 +643,10 @@ class ExtraNetworksTab {
}
const source_is_tree = source_elem.classList.contains("tree-list-item");
const data_path = String.raw`${source_elem.dataset.path.replaceAll("\\", "\\\\")}`;
const other_selector = source_is_tree ? ".extra-network-dirs-view-button" : ".tree-list-item";
// NOTE: We only use this escaped path in selectors since html handles these chars
// different from JS. We don't need to escape the path for any internal operations.
const data_path = String.raw`${source_elem.dataset.path.replaceAll("\\", "\\\\")}`;
const other_elem = document.querySelector(`${other_selector}[data-path="${data_path}"]`);
if (!_exists(other_elem)) {
// Can't reflect attributes since no matching element exists.
@ -641,8 +658,9 @@ class ExtraNetworksTab {
} else {
await this.tree_list.onRowSelected();
}
// Don't use escaped path here since this is pure javascript beyond this point.
this.applyDirectoryFilter(
"selected" in source_elem.dataset ? data_path : null,
"selected" in source_elem.dataset ? source_elem.dataset.path : null,
"recurse" in source_elem.dataset,
);
return;
@ -662,8 +680,9 @@ class ExtraNetworksTab {
await this.tree_list.onRowSelected(source_is_tree ? source_elem : other_elem);
const div_id = source_is_tree ? source_elem.dataset.divId : other_elem.dataset.divId;
_set_recursion_depth(div_id, data_recurse);
// Don't use escaped path here since this is pure javascript beyond this point.
this.applyDirectoryFilter(
"selected" in source_elem.dataset ? data_path : null,
"selected" in source_elem.dataset ? source_elem.dataset.path : null,
"recurse" in source_elem.dataset,
);
}

View file

@ -791,8 +791,6 @@ class ExtraNetworksPage:
"btn_sort_mode_date_modified_data_attributes": "data-selected" if sort_mode == "date_modified" else "",
"btn_dirs_view_data_attributes": "data-selected" if dirs_view_en else "",
"btn_tree_view_data_attributes": "data-selected" if tree_view_en else "",
"dirs_view_hidden_cls": "" if dirs_view_en else "hidden",
"tree_view_hidden_cls": "" if tree_view_en else "hidden",
"tree_view_style": f"flex-basis: {shared.opts.extra_networks_tree_view_default_width}px;",
"cards_view_style": "flex-grow: 1;",
"dirs_html": dirs_html,