mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2024-06-07 21:20:49 +00:00
refactor CardsView to CardView to match Dirs and Tree view lengths. Got sick of it being 1 letter longer.
This commit is contained in:
Sj-Si
parent
14442b8ad3
commit
5a2fca8ca5
@ -105,7 +105,7 @@
|
||||
d="M 5 5 V 14 H 8 M 5 8 H 8" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="extra-network-control extra-network-control--cards-view" title="Enable Card View"
|
||||
<button class="extra-network-control extra-network-control--card-view" title="Enable Card View"
|
||||
{btn_card_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">
|
||||
@ -146,16 +146,16 @@
|
||||
class='extra-network-tree-content clusterize-content'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra-network-content resize-handle-col" style="{cards_view_style}">
|
||||
<div id='{tabname}_{extra_networks_tabname}_cards_list_loading_splash'
|
||||
class='extra-network-cards extra-network-list-splash'>{cards_list_loading_splash_content}</div>
|
||||
<div id='{tabname}_{extra_networks_tabname}_cards_list_no_data_splash'
|
||||
class='extra-network-cards extra-network-list-splash hidden'>{cards_list_no_data_splash_content}
|
||||
<div class="extra-network-content resize-handle-col" style="{card_view_style}">
|
||||
<div id='{tabname}_{extra_networks_tabname}_card_list_loading_splash'
|
||||
class='extra-network-cards extra-network-list-splash'>{card_list_loading_splash_content}</div>
|
||||
<div id='{tabname}_{extra_networks_tabname}_card_list_no_data_splash'
|
||||
class='extra-network-cards extra-network-list-splash hidden'>{card_list_no_data_splash_content}
|
||||
</div>
|
||||
<div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area'
|
||||
<div id='{tabname}_{extra_networks_tabname}_card_list_scroll_area'
|
||||
class='extra-network-cards styled-scrollbar clusterize-scroll'>
|
||||
<div id='{tabname}_{extra_networks_tabname}_cards_list_content_area'
|
||||
class='extra-network-cards-content clusterize-content'></div>
|
||||
<div id='{tabname}_{extra_networks_tabname}_card_list_content_area'
|
||||
class='extra-network-card-content clusterize-content'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
/*global
|
||||
selectCheckpoint,
|
||||
ExtraNetworksClusterizeTreeList,
|
||||
ExtraNetworksClusterizeCardsList,
|
||||
ExtraNetworksClusterizeCardList,
|
||||
waitForElement,
|
||||
isString,
|
||||
isElement,
|
||||
@ -89,7 +89,7 @@ class ExtraNetworksTab {
|
||||
extra_networks_tabname;
|
||||
tabname_full; // {tabname}_{extra_networks_tabname}
|
||||
tree_list;
|
||||
cards_list;
|
||||
card_list;
|
||||
container_elem;
|
||||
controls_elem;
|
||||
txt_search_elem;
|
||||
@ -109,8 +109,8 @@ class ExtraNetworksTab {
|
||||
refresh_in_progress = false;
|
||||
dirs_view_en = false;
|
||||
tree_view_en = false;
|
||||
cards_view_en = false;
|
||||
cards_list_splash_state = null;
|
||||
card_view_en = false;
|
||||
card_list_splash_state = null;
|
||||
tree_list_splash_state = null;
|
||||
directory_filters = {};
|
||||
list_button_states = {};
|
||||
@ -132,11 +132,11 @@ class ExtraNetworksTab {
|
||||
waitForElement(`#${this.tabname}_neg_prompt_row`).then(elem => this.neg_prompt_row_elem = elem),
|
||||
waitForElement(`#${this.tabname_full}_tree_list_scroll_area`),
|
||||
waitForElement(`#${this.tabname_full}_tree_list_content_area`),
|
||||
waitForElement(`#${this.tabname_full}_cards_list_scroll_area`),
|
||||
waitForElement(`#${this.tabname_full}_cards_list_content_area`),
|
||||
waitForElement(`#${this.tabname_full}_card_list_scroll_area`),
|
||||
waitForElement(`#${this.tabname_full}_card_list_content_area`),
|
||||
]);
|
||||
|
||||
this.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
|
||||
this.updateSplashState({card_list_state: "loading", tree_list_state: "loading"});
|
||||
|
||||
this.txt_search_elem = this.controls_elem.querySelector(".extra-network-control--search-text");
|
||||
this.dirs_view_en = "selected" in this.controls_elem.querySelector(
|
||||
@ -145,8 +145,8 @@ class ExtraNetworksTab {
|
||||
this.tree_view_en = "selected" in this.controls_elem.querySelector(
|
||||
".extra-network-control--tree-view"
|
||||
).dataset;
|
||||
this.cards_view_en = "selected" in this.controls_elem.querySelector(
|
||||
".extra-network-control--cards-view"
|
||||
this.card_view_en = "selected" in this.controls_elem.querySelector(
|
||||
".extra-network-control--card-view"
|
||||
).dataset;
|
||||
|
||||
// determine whether compact prompt mode is enabled.
|
||||
@ -166,28 +166,28 @@ class ExtraNetworksTab {
|
||||
"Please refresh tab.<br>" +
|
||||
`${error_btn.outerHTML}</div>`;
|
||||
|
||||
await Promise.all([this.setupTreeList(), this.setupCardsList()]);
|
||||
await Promise.all([this.setupTreeList(), this.setupCardList()]);
|
||||
|
||||
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 btn_cards_view = this.controls_elem.querySelector(".extra-network-control--cards-view");
|
||||
const btn_card_view = this.controls_elem.querySelector(".extra-network-control--card-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");
|
||||
const div_cards = this.cards_list.scroll_elem.closest(".resize-handle-col");
|
||||
const div_card = this.card_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;
|
||||
this.cards_view_en = "selected" in btn_cards_view.dataset;
|
||||
this.card_view_en = "selected" in btn_card_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);
|
||||
div_cards.classList.toggle("hidden", !this.cards_view_en);
|
||||
div_card.classList.toggle("hidden", !this.card_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", !this.tree_view_en || !this.cards_view_en);
|
||||
resize_handle_row.classList.toggle("resize-handle-hidden", !this.tree_view_en || !this.card_view_en);
|
||||
|
||||
const sort_mode_elem = this.controls_elem.querySelector(".extra-network-control--sort-mode[data-selected]");
|
||||
isElementThrowError(sort_mode_elem);
|
||||
@ -211,9 +211,9 @@ class ExtraNetworksTab {
|
||||
destroy() {
|
||||
this.unload();
|
||||
this.tree_list.destroy();
|
||||
this.cards_list.destroy();
|
||||
this.card_list.destroy();
|
||||
this.tree_list = null;
|
||||
this.cards_list = null;
|
||||
this.card_list = null;
|
||||
this.container_elem = null;
|
||||
this.controls_elem = null;
|
||||
this.txt_search_elem = null;
|
||||
@ -227,7 +227,7 @@ class ExtraNetworksTab {
|
||||
this.refresh_in_progress = false;
|
||||
this.tree_view_en = false;
|
||||
this.dirs_view_en = false;
|
||||
this.cards_view_en = false;
|
||||
this.card_view_en = false;
|
||||
this.directory_filters = {};
|
||||
this.list_button_states = {};
|
||||
}
|
||||
@ -261,39 +261,39 @@ class ExtraNetworksTab {
|
||||
await this.tree_list.setup();
|
||||
}
|
||||
|
||||
async setupCardsList() {
|
||||
if (this.cards_list instanceof ExtraNetworksClusterizeCardsList) {
|
||||
this.cards_list.destroy();
|
||||
async setupCardList() {
|
||||
if (this.card_list instanceof ExtraNetworksClusterizeCardList) {
|
||||
this.card_list.destroy();
|
||||
}
|
||||
this.cards_list = new ExtraNetworksClusterizeCardsList({
|
||||
this.card_list = new ExtraNetworksClusterizeCardList({
|
||||
tabname: this.tabname,
|
||||
extra_networks_tabname: this.extra_networks_tabname,
|
||||
scrollId: `${this.tabname_full}_cards_list_scroll_area`,
|
||||
contentId: `${this.tabname_full}_cards_list_content_area`,
|
||||
scrollId: `${this.tabname_full}_card_list_scroll_area`,
|
||||
contentId: `${this.tabname_full}_card_list_content_area`,
|
||||
tag: "div",
|
||||
no_data_html: "No data matching filter.",
|
||||
error_html: this.clusterize_error_html,
|
||||
callbacks: {
|
||||
initData: this.onInitCardsData.bind(this),
|
||||
fetchData: this.onFetchCardsData.bind(this),
|
||||
initData: this.onInitCardData.bind(this),
|
||||
fetchData: this.onFetchCardData.bind(this),
|
||||
},
|
||||
});
|
||||
await this.cards_list.setup();
|
||||
await this.card_list.setup();
|
||||
}
|
||||
|
||||
setSortMode(sort_mode_str) {
|
||||
this.sort_mode_str = sort_mode_str;
|
||||
this.cards_list.setSortMode(this.sort_mode_str);
|
||||
this.card_list.setSortMode(this.sort_mode_str);
|
||||
}
|
||||
|
||||
setSortDir(sort_dir_str) {
|
||||
this.sort_dir_str = sort_dir_str;
|
||||
this.cards_list.setSortDir(this.sort_dir_str);
|
||||
this.card_list.setSortDir(this.sort_dir_str);
|
||||
}
|
||||
|
||||
setFilterStr(filter_str) {
|
||||
this.filter_str = filter_str;
|
||||
this.cards_list.setFilterStr(this.filter_str);
|
||||
this.card_list.setFilterStr(this.filter_str);
|
||||
}
|
||||
|
||||
movePrompt(show_prompt = true, show_neg_prompt = true) {
|
||||
@ -324,7 +324,7 @@ class ExtraNetworksTab {
|
||||
},
|
||||
(data) => {
|
||||
if (data && data.html) {
|
||||
this.cards_list.updateHtml(elem, data.html);
|
||||
this.card_list.updateHtml(elem, data.html);
|
||||
}
|
||||
},
|
||||
);
|
||||
@ -338,7 +338,7 @@ class ExtraNetworksTab {
|
||||
this.controls_elem.classList.add("hidden");
|
||||
}
|
||||
|
||||
updateSplashState({cards_list_state, tree_list_state} = {}) {
|
||||
updateSplashState({card_list_state, tree_list_state} = {}) {
|
||||
const _handle_state = (state_str, loading_elem, no_data_elem) => {
|
||||
switch (state_str) {
|
||||
case "loading":
|
||||
@ -361,11 +361,11 @@ class ExtraNetworksTab {
|
||||
let loading_elem;
|
||||
let no_data_elem;
|
||||
|
||||
if (isString(cards_list_state)) {
|
||||
this.cards_list_splash_state = cards_list_state;
|
||||
loading_elem = document.getElementById(`${this.tabname_full}_cards_list_loading_splash`);
|
||||
no_data_elem = document.getElementById(`${this.tabname_full}_cards_list_no_data_splash`);
|
||||
_handle_state(cards_list_state, loading_elem, no_data_elem);
|
||||
if (isString(card_list_state)) {
|
||||
this.card_list_splash_state = card_list_state;
|
||||
loading_elem = document.getElementById(`${this.tabname_full}_card_list_loading_splash`);
|
||||
no_data_elem = document.getElementById(`${this.tabname_full}_card_list_no_data_splash`);
|
||||
_handle_state(card_list_state, loading_elem, no_data_elem);
|
||||
}
|
||||
|
||||
if (isString(tree_list_state)) {
|
||||
@ -377,13 +377,13 @@ class ExtraNetworksTab {
|
||||
}
|
||||
|
||||
async #refresh() {
|
||||
this.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
|
||||
this.updateSplashState({card_list_state: "loading", tree_list_state: "loading"});
|
||||
|
||||
try {
|
||||
await this.waitForServerPageReady();
|
||||
} catch (error) {
|
||||
console.error(`refresh error: ${error.message}`);
|
||||
this.updateSplashState({cards_list_state: "no_data", tree_list_state: "no_data"});
|
||||
this.updateSplashState({card_list_state: "no_data", tree_list_state: "no_data"});
|
||||
return;
|
||||
}
|
||||
const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
|
||||
@ -392,29 +392,29 @@ class ExtraNetworksTab {
|
||||
// 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");
|
||||
const div_cards = this.cards_list.scroll_elem.closest(".resize-handle-col");
|
||||
const div_card = this.card_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;
|
||||
this.cards_view_en = "selected" in btn_tree_view.dataset;
|
||||
this.card_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);
|
||||
div_cards.classList.toggle("hidden", !this.cards_view_en);
|
||||
div_card.classList.toggle("hidden", !this.card_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"));
|
||||
if (this.tree_view_en && !this.cards_view_en) {
|
||||
if (this.tree_view_en && !this.card_view_en) {
|
||||
this.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
|
||||
} else {
|
||||
this.tree_list.scroll_elem.parentElement.style.flexGrow = null;
|
||||
}
|
||||
|
||||
await Promise.all([this.setupTreeList(), this.setupCardsList()]);
|
||||
await Promise.all([this.setupTreeList(), this.setupCardList()]);
|
||||
this.tree_list.enable(this.tree_view_en);
|
||||
this.cards_list.enable(this.cards_view_en);
|
||||
await Promise.all([this.tree_list.load(true), this.cards_list.load(true)]);
|
||||
this.card_list.enable(this.card_view_en);
|
||||
await Promise.all([this.tree_list.load(true), this.card_list.load(true)]);
|
||||
|
||||
// apply the previous sort/filter options
|
||||
await this.applyListButtonStates();
|
||||
@ -436,32 +436,32 @@ class ExtraNetworksTab {
|
||||
async load(show_prompt, show_neg_prompt) {
|
||||
this.movePrompt(show_prompt, show_neg_prompt);
|
||||
this.updateSplashState({
|
||||
cards_list_state: this.cards_list_splash_state,
|
||||
card_list_state: this.card_list_splash_state,
|
||||
tree_list_state: this.tree_list_splash_state,
|
||||
});
|
||||
this.showControls();
|
||||
this.tree_list.enable(this.tree_view_en);
|
||||
this.cards_list.enable(this.cards_view_en);
|
||||
await Promise.all([this.tree_list.load(), this.cards_list.load()]);
|
||||
this.card_list.enable(this.card_view_en);
|
||||
await Promise.all([this.tree_list.load(), this.card_list.load()]);
|
||||
}
|
||||
|
||||
unload() {
|
||||
this.movePrompt(false, false);
|
||||
this.hideControls();
|
||||
this.tree_list.enable(false);
|
||||
this.cards_list.enable(false);
|
||||
this.card_list.enable(false);
|
||||
}
|
||||
|
||||
addDirectoryFilter(div_id, filter_str, recurse) {
|
||||
filter_str = isString(filter_str) ? filter_str : "";
|
||||
recurse = recurse === true || recurse === false ? recurse : false;
|
||||
if (this.cards_list.addDirectoryFilter(div_id, filter_str, recurse)) {
|
||||
if (this.card_list.addDirectoryFilter(div_id, filter_str, recurse)) {
|
||||
this.directory_filters[div_id] = {filter_str: filter_str, recurse: recurse};
|
||||
}
|
||||
}
|
||||
|
||||
removeDirectoryFilter(div_id) {
|
||||
this.cards_list.removeDirectoryFilter(div_id);
|
||||
this.card_list.removeDirectoryFilter(div_id);
|
||||
delete this.directory_filters[div_id];
|
||||
}
|
||||
|
||||
@ -474,7 +474,7 @@ class ExtraNetworksTab {
|
||||
excluded_div_ids = [];
|
||||
}
|
||||
|
||||
this.cards_list.clearDirectoryFilters({excluded_div_ids: excluded_div_ids});
|
||||
this.card_list.clearDirectoryFilters({excluded_div_ids: excluded_div_ids});
|
||||
for (const div_id of Object.keys(this.directory_filters)) {
|
||||
if (excluded_div_ids.includes(div_id)) {
|
||||
continue;
|
||||
@ -484,11 +484,11 @@ class ExtraNetworksTab {
|
||||
}
|
||||
|
||||
setDirectoryFilters() {
|
||||
this.cards_list.setDirectoryFilters(this.directory_filters);
|
||||
this.card_list.setDirectoryFilters(this.directory_filters);
|
||||
}
|
||||
|
||||
applyDirectoryFilters() {
|
||||
this.cards_list.filterData();
|
||||
this.card_list.filterData();
|
||||
}
|
||||
|
||||
applyFilter(filter_str) {
|
||||
@ -529,13 +529,13 @@ class ExtraNetworksTab {
|
||||
return await fetchWithRetryAndBackoff(url, payload, opts);
|
||||
}
|
||||
|
||||
async onInitCardsData() {
|
||||
this.updateSplashState({cards_list_state: "loading"});
|
||||
async onInitCardData() {
|
||||
this.updateSplashState({card_list_state: "loading"});
|
||||
try {
|
||||
await this.waitForServerPageReady();
|
||||
} catch (error) {
|
||||
console.error(`onInitCardsData error: ${error.message}`);
|
||||
this.updateSplashState({cards_list_state: "no_data"});
|
||||
console.error(`onInitCardData error: ${error.message}`);
|
||||
this.updateSplashState({card_list_state: "no_data"});
|
||||
return {};
|
||||
}
|
||||
|
||||
@ -551,21 +551,21 @@ class ExtraNetworksTab {
|
||||
});
|
||||
});
|
||||
|
||||
const url = "./sd_extra_networks/init-cards-data";
|
||||
const url = "./sd_extra_networks/init-card-data";
|
||||
const payload = {tabname: this.tabname, extra_networks_tabname: this.extra_networks_tabname};
|
||||
const timeout_ms = EXTRA_NETWORKS_INIT_DATA_TIMEOUT_MS;
|
||||
const opts = {timeout_ms: timeout_ms, response_handler: response_handler};
|
||||
try {
|
||||
const response = await fetchWithRetryAndBackoff(url, payload, opts);
|
||||
if (Object.keys(response.data).length === 0) {
|
||||
this.updateSplashState({cards_list_state: "no_data"});
|
||||
this.updateSplashState({card_list_state: "no_data"});
|
||||
} else {
|
||||
this.updateSplashState({cards_list_state: "show"});
|
||||
this.updateSplashState({card_list_state: "show"});
|
||||
}
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error(`onInitCardsData error: ${error.message}`);
|
||||
this.updateSplashState({cards_list_state: "no_data"});
|
||||
console.error(`onInitCardData error: ${error.message}`);
|
||||
this.updateSplashState({card_list_state: "no_data"});
|
||||
return {};
|
||||
}
|
||||
}
|
||||
@ -611,8 +611,8 @@ class ExtraNetworksTab {
|
||||
}
|
||||
}
|
||||
|
||||
async onFetchCardsData(div_ids) {
|
||||
const url = "./sd_extra_networks/fetch-cards-data";
|
||||
async onFetchCardData(div_ids) {
|
||||
const url = "./sd_extra_networks/fetch-card-data";
|
||||
const payload = {extra_networks_tabname: this.extra_networks_tabname, div_ids: div_ids};
|
||||
const timeout_ms = EXTRA_NETWORKS_FETCH_DATA_TIMEOUT_MS;
|
||||
const opts = {timeout_ms: timeout_ms};
|
||||
@ -622,14 +622,14 @@ class ExtraNetworksTab {
|
||||
console.warn(`Failed to fetch multiple div_ids: ${response.missing_div_ids}`);
|
||||
}
|
||||
if (Object.keys(response.data).length === 0) {
|
||||
this.updateSplashState({cards_list_state: "no_data"});
|
||||
this.updateSplashState({card_list_state: "no_data"});
|
||||
} else {
|
||||
this.updateSplashState({cards_list_state: "show"});
|
||||
this.updateSplashState({card_list_state: "show"});
|
||||
}
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error(`onFetchCardsData error: ${error.message}`);
|
||||
this.updateSplashState({cards_list_state: "no_data"});
|
||||
console.error(`onFetchCardData error: ${error.message}`);
|
||||
this.updateSplashState({card_list_state: "no_data"});
|
||||
return {};
|
||||
}
|
||||
}
|
||||
@ -1027,7 +1027,7 @@ function extraNetworksShowMetadata(text) {
|
||||
|
||||
function extraNetworksRefreshSingleCard(tabname, extra_networks_tabname, name) {
|
||||
const tab = extra_networks_tabs[`${tabname}_${extra_networks_tabname}`];
|
||||
const elem = tab.cards_list.content_elem.querySelector(`.card[data-name="${name}"]`);
|
||||
const elem = tab.card_list.content_elem.querySelector(`.card[data-name="${name}"]`);
|
||||
isElementThrowError(elem);
|
||||
tab.refreshSingleCard(elem);
|
||||
}
|
||||
@ -1154,9 +1154,9 @@ async function extraNetworksControlTreeViewOnClick(event) {
|
||||
// this is only recently supported in firefox. So for now we just add a class
|
||||
// to the resize-handle-row instead.
|
||||
const resize_handle_row = tab.tree_list.scroll_elem.closest(".resize-handle-row");
|
||||
resize_handle_row.classList.toggle("resize-handle-hidden", !tab.cards_view_en || !tab.tree_view_en);
|
||||
resize_handle_row.classList.toggle("resize-handle-hidden", !tab.card_view_en || !tab.tree_view_en);
|
||||
|
||||
if (tab.tree_view_en && !tab.cards_view_en) {
|
||||
if (tab.tree_view_en && !tab.card_view_en) {
|
||||
tab.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
|
||||
} else {
|
||||
tab.tree_list.scroll_elem.parentElement.style.flexGrow = null;
|
||||
@ -1190,28 +1190,28 @@ function extraNetworksControlDirsViewOnClick(event) {
|
||||
tab.applyListButtonStates();
|
||||
}
|
||||
|
||||
async function extraNetworksControlCardsViewOnClick(event) {
|
||||
async function extraNetworksControlCardViewOnClick(event) {
|
||||
/** Handles `onclick` events for the Card View button.
|
||||
*
|
||||
* Toggles the card view in the extra networks pane.
|
||||
*/
|
||||
const btn = event.target.closest(".extra-network-control--cards-view");
|
||||
const btn = event.target.closest(".extra-network-control--card-view");
|
||||
const controls = btn.closest(".extra-network-controls");
|
||||
const tab = extra_networks_tabs[controls.dataset.tabnameFull];
|
||||
btn.toggleAttribute("data-selected");
|
||||
tab.cards_view_en = "selected" in btn.dataset;
|
||||
tab.card_view_en = "selected" in btn.dataset;
|
||||
|
||||
tab.cards_list.scroll_elem.parentElement.classList.toggle("hidden", !tab.cards_view_en);
|
||||
tab.cards_list.enable(tab.cards_view_en);
|
||||
tab.card_list.scroll_elem.parentElement.classList.toggle("hidden", !tab.card_view_en);
|
||||
tab.card_list.enable(tab.card_view_en);
|
||||
|
||||
// Apply the resize-handle-hidden class to the resize-handle-row.
|
||||
// NOTE: This can be simplified using only css with the ":has" selector however
|
||||
// this is only recently supported in firefox. So for now we just add a class
|
||||
// to the resize-handle-row instead.
|
||||
const resize_handle_row = tab.cards_list.scroll_elem.closest(".resize-handle-row");
|
||||
resize_handle_row.classList.toggle("resize-handle-hidden", !tab.cards_view_en || !tab.tree_view_en);
|
||||
const resize_handle_row = tab.card_list.scroll_elem.closest(".resize-handle-row");
|
||||
resize_handle_row.classList.toggle("resize-handle-hidden", !tab.card_view_en || !tab.tree_view_en);
|
||||
|
||||
if (tab.tree_view_en && !tab.cards_view_en) {
|
||||
if (tab.tree_view_en && !tab.card_view_en) {
|
||||
tab.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
|
||||
} else {
|
||||
tab.tree_list.scroll_elem.parentElement.style.flexGrow = null;
|
||||
@ -1220,8 +1220,8 @@ async function extraNetworksControlCardsViewOnClick(event) {
|
||||
// If the tree list hasn't loaded yet, we need to force it to load.
|
||||
// This can happen if tree view is disabled by default or before refresh.
|
||||
// Then after refresh, enabling the tree view will require a load.
|
||||
if (tab.cards_view_en && !tab.cards_list.initial_load) {
|
||||
await tab.cards_list.load();
|
||||
if (tab.card_view_en && !tab.card_list.initial_load) {
|
||||
await tab.card_list.load();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1250,11 +1250,11 @@ function extraNetworksControlRefreshOnClick(event) {
|
||||
return;
|
||||
}
|
||||
|
||||
tab.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
|
||||
tab.updateSplashState({card_list_state: "loading", tree_list_state: "loading"});
|
||||
// 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();
|
||||
tab.card_list.clear();
|
||||
// Fire an event for this button click.
|
||||
gradioApp().getElementById(
|
||||
`${tabname_full}_extra_refresh_internal`
|
||||
@ -1541,7 +1541,7 @@ function extraNetworksSetupEventDelegators() {
|
||||
".extra-network-control--sort-dir": extraNetworksControlSortDirOnClick,
|
||||
".extra-network-control--dirs-view": extraNetworksControlDirsViewOnClick,
|
||||
".extra-network-control--tree-view": extraNetworksControlTreeViewOnClick,
|
||||
".extra-network-control--cards-view": extraNetworksControlCardsViewOnClick,
|
||||
".extra-network-control--card-view": extraNetworksControlCardViewOnClick,
|
||||
".extra-network-control--refresh": extraNetworksControlRefreshOnClick,
|
||||
};
|
||||
|
||||
|
||||
@ -526,7 +526,7 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
|
||||
}
|
||||
}
|
||||
|
||||
class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
|
||||
class ExtraNetworksClusterizeCardList extends ExtraNetworksClusterize {
|
||||
constructor(args) {
|
||||
super({...args});
|
||||
}
|
||||
|
||||
@ -365,7 +365,7 @@ class ExtraNetworksPage:
|
||||
return res
|
||||
|
||||
def get_button_row(self, tabname: str, item: dict) -> str:
|
||||
"""Generates a row of buttons for use in Tree/Cards View items."""
|
||||
"""Generates a row of buttons for use in Tree/Card View items."""
|
||||
metadata = item.get("metadata", None)
|
||||
name = item.get("name", "")
|
||||
filename = os.path.normpath(item.get("filename", ""))
|
||||
@ -474,8 +474,8 @@ class ExtraNetworksPage:
|
||||
description=description,
|
||||
)
|
||||
|
||||
def generate_cards_view_data(self, tabname: str) -> dict:
|
||||
"""Generates the datasets and HTML used to display the Cards View.
|
||||
def generate_card_view_data(self, tabname: str) -> dict:
|
||||
"""Generates the datasets and HTML used to display the Card View.
|
||||
|
||||
Returns:
|
||||
A dictionary containing necessary info for the client.
|
||||
@ -809,9 +809,9 @@ class ExtraNetworksPage:
|
||||
self.tree_roots[abspath] = DirectoryTreeNode(os.path.dirname(abspath), abspath, None)
|
||||
self.tree_roots[abspath].build(tree_items)
|
||||
|
||||
cards_list_loading_splash_content = "Loading..."
|
||||
card_list_loading_splash_content = "Loading..."
|
||||
no_cards_html_dirs = "".join([f"<li>{x}</li>" for x in self.allowed_directories_for_previews()])
|
||||
cards_list_no_data_splash_content = (
|
||||
card_list_no_data_splash_content = (
|
||||
"<div class='nocards'>"
|
||||
"<h1>Nothing here. Add some content to the following directories:</h1>"
|
||||
f"<ul>{no_cards_html_dirs}</ul>"
|
||||
@ -855,10 +855,10 @@ class ExtraNetworksPage:
|
||||
"btn_tree_view_data_attributes": "data-selected" if tree_view_en else "",
|
||||
"btn_card_view_data_attributes": "data-selected" if card_view_en else "",
|
||||
"tree_view_style": f"flex-basis: {shared.opts.extra_networks_tree_view_default_width}px;",
|
||||
"cards_view_style": "flex-grow: 1;",
|
||||
"card_view_style": "flex-grow: 1;",
|
||||
"dirs_html": dirs_html,
|
||||
"cards_list_loading_splash_content": cards_list_loading_splash_content,
|
||||
"cards_list_no_data_splash_content": cards_list_no_data_splash_content,
|
||||
"card_list_loading_splash_content": card_list_loading_splash_content,
|
||||
"card_list_no_data_splash_content": card_list_no_data_splash_content,
|
||||
"tree_list_loading_splash_content": tree_list_loading_splash_content,
|
||||
"tree_list_no_data_splash_content": tree_list_no_data_splash_content,
|
||||
}
|
||||
@ -1017,8 +1017,8 @@ def init_tree_data(tabname: str = "", extra_networks_tabname: str = "") -> JSONR
|
||||
return JSONResponse({"data": data, "ready": data is not None})
|
||||
|
||||
|
||||
def init_cards_data(tabname: str = "", extra_networks_tabname: str = "") -> JSONResponse:
|
||||
"""Generates the initial Cards View data and returns a simplified dataset.
|
||||
def init_card_data(tabname: str = "", extra_networks_tabname: str = "") -> JSONResponse:
|
||||
"""Generates the initial Card View data and returns a simplified dataset.
|
||||
|
||||
The data returned does not contain any HTML strings.
|
||||
|
||||
@ -1028,7 +1028,7 @@ def init_cards_data(tabname: str = "", extra_networks_tabname: str = "") -> JSON
|
||||
"""
|
||||
page = get_page_by_name(extra_networks_tabname)
|
||||
|
||||
data = page.generate_cards_view_data(tabname)
|
||||
data = page.generate_card_view_data(tabname)
|
||||
|
||||
return JSONResponse({"data": data, "ready": data is not None})
|
||||
|
||||
@ -1059,11 +1059,11 @@ def fetch_tree_data(
|
||||
return JSONResponse({"data": res, "missing_div_ids": missed})
|
||||
|
||||
|
||||
def fetch_cards_data(
|
||||
def fetch_card_data(
|
||||
extra_networks_tabname: str = "",
|
||||
div_ids: str = "",
|
||||
) -> JSONResponse:
|
||||
"""Retrieves Cards View HTML strings for the specified `div_ids`.
|
||||
"""Retrieves Card View HTML strings for the specified `div_ids`.
|
||||
|
||||
Args:
|
||||
div_ids: A string with div_ids in CSV format.
|
||||
@ -1159,9 +1159,9 @@ def add_pages_to_demo(app):
|
||||
app.add_api_route("/sd_extra_networks/metadata", get_metadata, methods=["GET"])
|
||||
app.add_api_route("/sd_extra_networks/get-single-card", get_single_card, methods=["GET"])
|
||||
app.add_api_route("/sd_extra_networks/init-tree-data", init_tree_data, methods=["GET"])
|
||||
app.add_api_route("/sd_extra_networks/init-cards-data", init_cards_data, methods=["GET"])
|
||||
app.add_api_route("/sd_extra_networks/init-card-data", init_card_data, methods=["GET"])
|
||||
app.add_api_route("/sd_extra_networks/fetch-tree-data", fetch_tree_data, methods=["GET"])
|
||||
app.add_api_route("/sd_extra_networks/fetch-cards-data", fetch_cards_data, methods=["GET"])
|
||||
app.add_api_route("/sd_extra_networks/fetch-card-data", fetch_card_data, methods=["GET"])
|
||||
app.add_api_route("/sd_extra_networks/page-is-ready", page_is_ready, methods=["GET"])
|
||||
app.add_api_route("/sd_extra_networks/clear-page-data", clear_page_data, methods=["GET"])
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user