mirrors/stable-diffusion-webui
1
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2026-02-01 21:32:01 -08:00
Code Issues Projects Releases Packages Wiki Activity

update to use new clusterize class

Browse source
This commit is contained in:
Sj-Si 2024-04-09 07:19:07 -04:00
parent 806bbff5a5
commit ec80d57e8b
6 changed files with 1636 additions and 2037 deletions
Download patch file Download diff file Expand all files Collapse all files

296
javascript/clusterize.js
View file

@ -17,10 +17,32 @@ class Clusterize {
content_elem = null;
scroll_id = null;
content_id = null;
#options = {};
default_sort_mode_str = "";
default_sort_dir_str = "ascending";
default_filter_str = "";
sort_mode_str = this.default_sort_mode_str;
sort_dir_str = this.default_sort_dir_str;
filter_str = this.default_filter_str;
options = {
rows_in_block: 50,
cols_in_block: 1,
blocks_in_cluster: 5,
tag: null,
show_no_data_row: true,
no_data_class: "clusterize-no-data",
no_data_text: "No data",
keep_parity: true,
callbacks: {
initData: this.initDataDefault,
fetchData: this.fetchDataDefault,
sortData: this.sortDataDefault,
filterData: this.filterDataDefault,
},
};
#is_mac = null;
#ie = null;
#n_rows = null;
#max_items = null;
#max_rows = null;
#cache = {};
#scroll_top = 0;
#last_cluster = false;
@ -30,59 +52,46 @@ class Clusterize {
#element_observer = null;
#element_observer_timer = null;
#pointer_events_set = false;
#sort_mode = "";
#sort_dir = "";
constructor(args) {
const defaults = {
rows_in_block: 50,
blocks_in_cluster: 4,
tag: null,
show_no_data_row: true,
no_data_class: 'clusterize-no-data',
no_data_text: 'No data',
keep_parity: true,
callbacks: {}
};
for (const option of Object.keys(this.options)) {
if (keyExists(args, option)) {
this.options[option] = args[option];
}
}
const options = [
'rows_in_block',
'blocks_in_cluster',
'show_no_data_row',
'no_data_class',
'no_data_text',
'keep_parity',
'tag',
'callbacks',
];
if (!isNullOrUndefined(this.options.callbacks.initData)) {
this.options.callbacks.initData = this.initDataDefault;
}
if (!isNullOrUndefined(this.options.callbacks.fetchData)) {
this.options.callbacks.fetchData = this.fetchDataDefault;
}
if (!isNullOrUndefined(this.options.callbacks.sortData)) {
this.options.callbacks.sortData = this.sortDataDefault;
}
if (!isNullOrUndefined(this.options.callbacks.filterData)) {
this.options.callbacks.filterData = this.filterDataDefault;
}
// detect ie9 and lower
// https://gist.github.com/padolsey/527683#comment-786682
this.#ie = (function () {
for (var v = 3,
el = document.createElement('b'),
el = document.createElement("b"),
all = el.all || [];
el.innerHTML = '<!--[if gt IE ' + (++v) + ']><i><![endif]-->',
el.innerHTML = `<!--[if gt IE ${++v}]><i><![endif]-->`,
all[0];
) { }
return v > 4 ? v : document.documentMode;
}())
this.#is_mac = navigator.platform.toLowerCase().indexOf('mac') + 1;
for (let i = 0, option; option = options[i]; i++) {
this.#options[option] = !isNullOrUndefined(args[option]) ? args[option] : defaults[option];
}
this.#is_mac = navigator.platform.toLowerCase().indexOf("mac") + 1;
this.scroll_elem = args["scrollId"] ? document.getElementById(args["scrollId"]) : args["scrollElem"];
if (!isElement(this.scroll_elem)) {
throw new Error("Error! Could not find scroll element");
}
isElementThrowError(this.scroll_elem);
this.scroll_id = this.scroll_elem.id;
this.content_elem = args["contentId"] ? document.getElementById(args["contentId"]) : args["contentElem"];
if (!isElement(this.content_elem)) {
throw new Error("Error! Could not find content element");
}
isElementThrowError(this.content_elem);
this.content_id = this.content_elem.id;
if (!this.content_elem.hasAttribute("tabindex")) {
@ -91,20 +100,7 @@ class Clusterize {
this.#scroll_top = this.scroll_elem.scrollTop;
if (!isNumber(args.n_rows)) {
throw new Error("Invalid argument. n_rows expected number, got:", typeof args.n_rows);
}
this.#n_rows = args.n_rows;
if (!this.#options.callbacks.fetchData) {
this.#options.callbacks.fetchData = this.#fetchDataDefault;
}
if (!this.#options.callbacks.sortData) {
this.#options.callbacks.sortData = this.#sortDataDefault;
}
if (!this.#options.callbacks.filterData) {
this.#options.callbacks.filterData = this.#filterDataDefault;
}
this.#max_items = args.max_items;
}
// ==== PUBLIC FUNCTIONS ====
@ -117,23 +113,27 @@ class Clusterize {
this.#setupResizeObservers();
}
clear() {
this.#html(this.#generateEmptyRow().join(""));
}
destroy() {
this.#teardownEvent("scroll", this.scroll_elem, this.#onScroll);
this.#teardownElementObservers();
this.#teardownResizeObservers();
this.#html(this.#generateEmptyRow().join(""));
this.clear();
}
refresh(force) {
async refresh(force) {
if (this.#getRowsHeight() || force) {
this.update()
await this.update()
}
}
async update() {
this.#scroll_top = this.scroll_elem.scrollTop;
// fixes #39
if (this.#n_rows * this.#options.item_height < this.#scroll_top) {
if (this.#max_rows * this.options.item_height < this.#scroll_top) {
this.scroll_elem.scrollTop = 0;
this.#last_cluster = 0;
}
@ -143,119 +143,166 @@ class Clusterize {
}
getRowsAmount() {
return this.#n_rows;
return this.#max_rows;
}
getScrollProgress() {
return this.#options.scroll_top / (this.#n_rows * this.#options.item_height) * 100 || 0;
return this.options.scroll_top / (this.#max_rows * this.options.item_height) * 100 || 0;
}
async filterData(filter) {
async setMaxItems(max_items) {
if (max_items === this.#max_items) {
// No change. do nothing.
return;
}
// If the number of items changed, we need to update the cluster.
this.#max_items = max_items;
await this.refresh(true);
// Apply sort to the updated data.
await this.sortData(this.sort_mode_str, this.sort_dir_str);
}
async filterData(filter_str) {
if (this.filter_str === filter_str) {
return;
}
this.filter_str = isNullOrUndefined(filter_str) ? this.default_filter_str : filter_str;
// Filter is applied to entire dataset.
const n_rows = await this.#options.callbacks.filterData(filter);
// If the number of rows changed after filter, we need to update the cluster.
if (n_rows !== this.#n_rows) {
this.#n_rows = n_rows;
const max_items = await this.options.callbacks.filterData(this.filter_str);
// If the number of items changed after filter, we need to update the cluster.
if (max_items !== this.#max_items) {
this.#max_items = max_items;
this.refresh(true);
}
// Apply sort to the new filtered data.
await this.sortData(this.#sort_mode, this.#sort_dir);
await this.sortData(this.sort_mode_str, this.sort_dir_str);
}
async sortData(mode, dir) {
async sortData(sort_mode_str, sort_dir_str) {
if (this.sort_mode_str === sort_mode_str && this.sort_dir_str === sort_dir_str) {
return;
}
this.sort_mode_str = isNullOrUndefined(sort_mode_str) ? this.default_sort_mode_str : sort_mode_str;
this.sort_dir_str = isNullOrUndefined(sort_dir_str) ? this.default_sort_dir_str : sort_dir_str;
// Sort is applied to the filtered data.
// update instance sort settings to the passed values.
this.#sort_mode = mode;
this.#sort_dir = dir;
await this.#options.callbacks.sortData(this.#sort_mode, this.#sort_dir === "descending");
await this.options.callbacks.sortData(this.sort_mode_str, this.sort_dir_str === "descending");
await this.#insertToDOM();
}
// ==== PRIVATE FUNCTIONS ====
initDataDefault() {
return Promise.resolve({});
}
#fetchDataDefault() {
fetchDataDefault() {
return Promise.resolve([]);
}
#sortDataDefault() {
return Promise.resolve([]);
sortDataDefault() {
return Promise.resolve();
}
#filterDataDefault() {
return Promise.resolve([]);
filterDataDefault() {
return Promise.resolve(0);
}
#exploreEnvironment(rows, cache) {
this.#options.content_tag = this.content_elem.tagName.toLowerCase();
this.options.content_tag = this.content_elem.tagName.toLowerCase();
if (!rows.length) {
return;
}
if (this.#ie && this.#ie <= 9 && !this.#options.tag) {
this.#options.tag = rows[0].match(/<([^>\s/]*)/)[1].toLowerCase();
if (this.#ie && this.#ie <= 9 && !this.options.tag) {
this.options.tag = rows[0].match(/<([^>\s/]*)/)[1].toLowerCase();
}
if (this.content_elem.children.length <= 1) {
cache.data = this.#html(rows[0] + rows[0] + rows[0]);
}
if (!this.#options.tag) {
this.#options.tag = this.content_elem.children[0].tagName.toLowerCase();
if (!this.options.tag) {
this.options.tag = this.content_elem.children[0].tagName.toLowerCase();
}
this.#getRowsHeight();
}
#getRowsHeight() {
const prev_item_height = this.#options.item_height;
const prev_rows_in_block = this.#options.rows_in_block;
const prev_item_height = this.options.item_height;
const prev_item_width = this.options.item_width;
const prev_rows_in_block = this.options.rows_in_block;
const prev_cols_in_block = this.options.cols_in_block;
this.#options.cluster_height = 0;
if (!this.#n_rows) {
this.options.cluster_height = 0;
this.options.cluster_width = 0;
if (!this.#max_items) {
return;
}
const nodes = this.content_elem.children;
const nodes = this.content_elem.querySelectorAll(":not(.clusterize-row)");
if (!nodes.length) {
return;
}
const node = nodes[Math.floor(nodes.length / 2)];
this.#options.item_height = node.offsetHeight;
const node_dims = getComputedDims(node);
this.options.item_height = node_dims.height;
this.options.item_width = node_dims.width;
// consider table's browser spacing
if (this.#options.tag === "tr" && getStyle("borderCollapse", this.content_elem) !== "collapse") {
this.#options.item_height += parseInt(getStyle("borderSpacing", this.content_elem), 10) || 0;
if (this.options.tag === "tr" && getStyle("borderCollapse", this.content_elem) !== "collapse") {
const spacing = parseInt(getStyle("borderSpacing", this.content_elem), 10) || 0;
this.options.item_height += spacing;
this.options.item_width += spacing;
}
// consider margins and margins collapsing
if (this.#options.tag !== "tr") {
if (this.options.tag !== "tr") {
const margin_top = parseInt(getStyle("marginTop", node), 10) || 0;
const margin_right = parseInt(getStyle("marginRight", node), 10) || 0;
const margin_bottom = parseInt(getStyle("marginBottom", node), 10) || 0;
this.#options.item_height += Math.max(margin_top, margin_bottom);
const margin_left = parseInt(getStyle("marginLeft", node), 10) || 0;
this.options.item_height += Math.max(margin_top, margin_bottom);
this.options.item_width += Math.max(margin_left, margin_right);
}
// Update rows in block to match the number of elements that can fit in the scroll element view.
this.#options.rows_in_block = parseInt(this.scroll_elem.clientHeight / this.#options.item_height);
this.options.rows_in_block = calcRowsPerCol(this.scroll_elem, node);
this.options.cols_in_block = calcColsPerRow(this.content_elem, node);
this.#options.block_height = this.#options.item_height * this.#options.rows_in_block;
this.#options.rows_in_cluster = this.#options.blocks_in_cluster * this.#options.rows_in_block;
this.#options.cluster_height = this.#options.blocks_in_cluster * this.#options.block_height;
return prev_item_height !== this.#options.item_height || prev_rows_in_block !== this.#options.rows_in_block;
this.options.block_height = this.options.item_height * this.options.rows_in_block;
this.options.block_width = this.options.item_width * this.options.cols_in_block;
this.options.rows_in_cluster = this.options.blocks_in_cluster * this.options.rows_in_block;
this.options.cluster_height = this.options.blocks_in_cluster * this.options.block_height;
this.options.cluster_width = this.options.block_width;
this.#max_rows = parseInt(this.#max_items / this.options.cols_in_block, 10);
return (
prev_item_height !== this.options.item_height ||
prev_item_width !== this.options.item_width ||
prev_rows_in_block !== this.options.rows_in_block ||
prev_cols_in_block !== this.options.cols_in_block
);
}
#getClusterNum() {
this.#options.scroll_top = this.scroll_elem.scrollTop;
const cluster_divider = this.#options.cluster_height - this.#options.block_height;
const current_cluster = Math.floor(this.#options.scroll_top / cluster_divider);
const max_cluster = Math.floor((this.#n_rows * this.#options.item_height) / cluster_divider);
this.options.scroll_top = this.scroll_elem.scrollTop;
const cluster_divider = this.options.cluster_height - this.options.block_height;
const current_cluster = Math.floor(this.options.scroll_top / cluster_divider);
const max_cluster = Math.floor((this.#max_rows * this.options.item_height) / cluster_divider);
return Math.min(current_cluster, max_cluster);
}
#generateEmptyRow() {
if (!this.#options.tag || !this.#options.show_no_data_row) {
if (!this.options.tag || !this.options.show_no_data_row) {
return [];
}
const empty_row = document.createElement(this.#options.tag);
const no_data_content = document.createTextNode(this.#options.no_data_text);
empty_row.className = this.#options.no_data_class;
if (this.#options.tag === "tr") {
const empty_row = document.createElement(this.options.tag);
const no_data_content = document.createTextNode(this.options.no_data_text);
empty_row.className = this.options.no_data_class;
if (this.options.tag === "tr") {
const td = document.createElement("td");
// fixes #53
td.colSpan = 100;
@ -268,13 +315,15 @@ class Clusterize {
}
async #generate() {
const items_start = Math.max((this.#options.rows_in_cluster - this.#options.rows_in_block) * this.#getClusterNum(), 0);
const items_end = items_start + this.#options.rows_in_cluster;
const top_offset = Math.max(items_start * this.#options.item_height, 0);
const bottom_offset = Math.max((this.#n_rows - items_end) * this.#options.item_height, 0);
const rows_above = top_offset < 1 ? items_start + 1 : items_start;
const rows_start = Math.max(0, (this.options.rows_in_cluster - this.options.rows_in_block) * this.#getClusterNum());
const rows_end = rows_start + this.options.rows_in_cluster;
const top_offset = Math.max(0, rows_start * this.options.item_height);
const bottom_offset = Math.max(0, (this.#max_rows - rows_end) * this.options.item_height);
const rows_above = top_offset < 1 ? rows_start + 1 : rows_start;
const this_cluster_rows = await this.#options.callbacks.fetchData(items_start, items_end);
const idx_start = Math.max(0, rows_start * this.options.cols_in_block);
const idx_end = rows_end * this.options.cols_in_block;
const this_cluster_rows = await this.options.callbacks.fetchData(idx_start, idx_end);
return {
top_offset: top_offset,
bottom_offset: bottom_offset,
@ -284,13 +333,18 @@ class Clusterize {
}
async #insertToDOM() {
if (!this.#options.cluster_height) {
const rows = await this.#options.callbacks.fetchData(0, 1);
if (!this.options.cluster_height || !this.options.cluster_width) {
const rows = await this.options.callbacks.fetchData(0, 1);
this.#exploreEnvironment(rows, this.#cache);
}
const data = await this.#generate();
const this_cluster_rows = data.rows.join("");
let this_cluster_rows = [];
for (let i = 0; i < data.rows.length; i += this.options.cols_in_block) {
const new_row = data.rows.slice(i, i + this.options.cols_in_block).join("");
this_cluster_rows.push(`<div class="clusterize-row">${new_row}</div>`);
}
this_cluster_rows = this_cluster_rows.join("");
const this_cluster_content_changed = this.#checkChanges("data", this_cluster_rows, this.#cache);
const top_offset_changed = this.#checkChanges("top", data.top_offset, this.#cache);
const only_bottom_offset_changed = this.#checkChanges("bottom", data.bottom_offset, this.#cache);
@ -298,16 +352,16 @@ class Clusterize {
if (this_cluster_content_changed || top_offset_changed) {
if (data.top_offset) {
this.#options.keep_parity && layout.push(this.#renderExtraTag("keep-parity"));
this.options.keep_parity && layout.push(this.#renderExtraTag("keep-parity"));
layout.push(this.#renderExtraTag("top-space", data.top_offset));
}
layout.push(this_cluster_rows);
data.bottom_offset && layout.push(this.#renderExtraTag("bottom-space", data.bottom_offset));
this.#options.callbacks.clusterWillChange && this.#options.callbacks.clusterWillChange();
this.options.callbacks.clusterWillChange && this.options.callbacks.clusterWillChange();
this.#html(layout.join(""));
this.#options.content_tag === "ol" && this.content_elem.setAttribute("start", data.rows_above);
this.options.content_tag === "ol" && this.content_elem.setAttribute("start", data.rows_above);
this.content_elem.style["counter-increment"] = `clusterize-counter ${data.rows_above - 1}`;
this.#options.callbacks.clusterChanged && this.#options.callbacks.clusterChanged();
this.options.callbacks.clusterChanged && this.options.callbacks.clusterChanged();
} else if (only_bottom_offset_changed) {
this.content_elem.lastChild.style.height = `${data.bottom_offset}px`;
}
@ -315,7 +369,7 @@ class Clusterize {
#html(data) {
const content_elem = this.content_elem;
if (this.#ie && this.#ie <= 9 && this.#options.tag === "tr") {
if (this.#ie && this.#ie <= 9 && this.options.tag === "tr") {
const div = document.createElement("div");
let last;
div.innerHTML = `<table><tbody>${data}</tbody></table>`;
@ -332,7 +386,7 @@ class Clusterize {
}
#renderExtraTag(class_name, height) {
const tag = document.createElement(this.#options.tag);
const tag = document.createElement(this.options.tag);
const clusterize_prefix = "clusterize-";
tag.className = [
`${clusterize_prefix}extra-row`,
@ -374,8 +428,8 @@ class Clusterize {
if (this.#last_cluster !== (this.#last_cluster = this.#getClusterNum())) {
await this.#insertToDOM();
}
if (this.#options.callbacks.scrollingProgress) {
this.#options.callbacks.scrollingProgress(this.getScrollingProgress());
if (this.options.callbacks.scrollingProgress) {
this.options.callbacks.scrollingProgress(this.getScrollProgress());
}
}

1299
javascript/extraNetworks.js
View file

File diff suppressed because it is too large Load diff

337
javascript/extraNetworksClusterize.js Normal file
View file

@ -0,0 +1,337 @@
class NotImplementedError extends Error {
constructor(...params) {
super(...params);
if (Error.captureStackTrace) {
Error.captureStackTrace(this, NotImplementedError);
}
this.name = "NotImplementedError";
}
}
class ExtraNetworksClusterize extends Clusterize {
data_obj = {};
data_obj_keys_sorted = [];
sort_reverse = false;
default_sort_fn = this.sortByDivId;
sort_fn = this.default_sort_fn;
tabname = "";
extra_networks_tabname = "";
// Override base class defaults
default_sort_mode_str = "divId";
default_sort_dir_str = "ascending";
default_filter_str = "";
sort_mode_str = this.default_sort_mode_str;
sort_dir_str = this.default_sort_dir_str;
filter_str = this.default_filter_str;
constructor(...args) {
super(...args);
// finish initialization
this.tabname = getValueThrowError(...args, "tabname");
this.extra_networks_tabname = getValueThrowError(...args, "extra_networks_tabname");
}
sortByDivId() {
/** Sort data_obj keys (div_id) as numbers. */
this.data_obj_keys_sorted = Object.keys(this.data_obj).sort(INT_COLLATOR.compare);
}
clear() {
this.data_obj = {};
this.data_obj_keys_sorted = [];
super.clear();
}
async initDataDefault() {
/**Fetches the initial data.
*
* This data should be minimal and only contain div IDs and other necessary
* information such as sort keys and terms for filtering.
*/
throw new NotImplementedError();
}
async fetchDataDefault(idx_start, idx_end) {
throw new NotImplementedError();
}
async sortDataDefault(sort_mode_str, sort_dir_str) {
this.sort_mode_str = sort_mode_str;
this.sort_dir_str = sort_dir_str;
this.sort_reverse = sort_dir_str === "descending";
this.data_obj_keys_sorted = this.sort_fn(this.data_obj);
if (this.sort_reverse) {
this.data_obj_keys_sorted = this.data_obj_keys_sorted.reverse();
}
}
async filterDataDefault(filter_str) {
throw new NotImplementedError();
}
}
class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
selected_div_id = null;
constructor(args) {
args.no_data_text = "Directory is empty.";
super(args);
}
clear() {
this.selected_div_id = null;
super.clear();
}
getBoxShadow(depth) {
/** Generates style for a multi-level box shadow for vertical indentation lines.
* This is used to indicate the depth of a directory/file within a directory tree.
*/
let res = "";
var style = getComputedStyle(document.body);
let bg = style.getPropertyValue("--body-background-fill");
let fg = style.getPropertyValue("--border-color-primary");
let text_size = style.getPropertyValue("--button-large-text-size");
for (let i = 1; i <= depth; i++) {
res += `calc((${i} * ${text_size}) - (${text_size} * 0.6)) 0 0 ${bg} inset,`;
res += `calc((${i} * ${text_size}) - (${text_size} * 0.4)) 0 0 ${fg} inset`;
res += (i + 1 > depth) ? "" : ", ";
}
return res;
}
#setVisibility(div_id, visible) {
/** Recursively sets the visibility of a div_id and its children. */
for (const child_id of this.data_obj[div_id].children) {
this.data_obj[child_id].visible = visible;
if (visible) {
if (this.data_obj[div_id].expanded) {
this.#setVisibility(child_id, visible);
}
} else {
if (this.selected_div_id === child_id) {
this.selected_div_id = null;
}
this.#setVisibility(child_id, visible);
}
}
}
onRowSelected(div_id, elem, override) {
/** Selects a row and deselects all others. */
if (!isElementLogError(elem)) {
return;
}
if (!keyExistsLogError(this.data_obj, div_id)) {
return;
}
override = override === true;
if (!isNullOrUndefined(this.selected_div_id) && div_id !== this.selected_div_id) {
// deselect current selection if exists on page
const prev_elem = this.content_elem.querySelector(`div[data-div-id="${this.selected_div_id}"]`);
if (isElement(prev_elem)) {
delete prev_elem.dataset.selected;
}
}
elem.toggleAttribute("data-selected");
this.selected_div_id = "selected" in elem.dataset ? div_id : null;
}
async onRowExpandClick(div_id, elem) {
/** Expands or collapses a row to show/hide children. */
if (!keyExistsLogError(this.data_obj, div_id)){
return;
}
// Toggle state
this.data_obj[div_id].expanded = !this.data_obj[div_id].expanded;
const visible = this.data_obj[div_id].expanded;
for (const child_id of this.data_obj[div_id].children) {
this.#setVisibility(child_id, visible)
}
this.#setVisibility()
await this.setMaxItems(Object.values(this.data_obj).filter(v => v.visible).length);
}
async initDataDefault() {
/*Expects an object like the following:
{
parent: null or div_id,
children: array of div_id's,
visible: bool,
expanded: bool,
}
*/
console.log("BLAH:", this.options.callbacks.initData);
this.data_obj = await this.options.callbacks.initData(this.constructor.name);
}
async fetchDataDefault(idx_start, idx_end) {
const n_items = idx_end - idx_start;
const div_ids = [];
for (const div_id of this.data_obj_keys_sorted.slice(idx_start)) {
if (this.data_obj[div_id].visible) {
div_ids.push(div_id);
}
if (div_ids.length >= n_items) {
break;
}
}
const data = await this.options.callbacks.fetchData(
this.constructor.name,
this.extra_networks_tabname,
div_ids,
);
// we have to calculate the box shadows here since the element is on the page
// at this point and we can get its computed styles.
const style = getComputedStyle(document.body);
const text_size = style.getPropertyValue("--button-large-text-size");
const res = [];
for (const [div_id, item] of Object.entries(data)) {
const parsed_html = htmlStringToElement(item);
const depth = Number(parsed_html.dataset.depth);
parsed_html.style.paddingLeft = `calc(${depth} * ${text_size})`;
parsed_html.style.boxShadow = this.getBoxShadow(depth);
if (this.data_obj[div_id].expanded) {
parsed_html.dataset.expanded = "";
}
if (div_id === this.selected_div_id) {
parsed_html.dataset.selected = "";
}
res.push(parsed_html.outerHTML);
}
return rows;
}
async sortDataDefault(sort_mode, sort_dir) {
throw new NotImplementedError();
}
async filterDataDefault(filter_str) {
// just return the number of visible objects in our data.
return Object.values(this.data_obj).filter(v => v.visible).length;
}
}
class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
constructor(args) {
args.no_data_text = "No files matching filter.";
super(args);
}
sortByName(data) {
return Object.keys(data).sort((a, b) => {
return STR_COLLATOR.compare(data[a].sort_name, data[b].sort_name);
});
}
sortByPath(data) {
return Object.keys(data).sort((a, b) => {
return STR_COLLATOR.compare(data[a].sort_path, data[b].sort_path);
});
}
sortByDateCreated(data) {
return Object.keys(data).sort((a, b) => {
return INT_COLLATOR.compare(data[a].sort_date_created, data[b].sort_date_created);
});
}
sortByDateModified(data) {
return Object.keys(data).sort((a, b) => {
return INT_COLLATOR.compare(data[a].sort_date_modified, data[b].sort_date_modified);
});
}
async initDataDefault() {
/*Expects an object like the following:
{
search_keys: array of strings,
sort_<mode>: string, (for various sort modes)
}
*/
console.log("HERE:", this.options.callbacks);
this.data_obj = await this.options.callbacks.initData(this.constructor.name);
}
async fetchDataDefault(idx_start, idx_end) {
const n_items = idx_end - idx_start;
const div_ids = [];
for (const div_id of this.data_obj_keys_sorted.slice(idx_start)) {
if (this.data_obj[div_id].visible) {
div_ids.push(div_id);
}
if (div_ids.length >= n_items) {
break;
}
}
const data = await this.options.callbacks.fetchData(
this.constructor.name,
this.extra_networks_tabname,
div_ids,
);
return Object.values(data);
}
async sortDataDefault(sort_mode_str, sort_dir_str) {
switch (sort_mode_str) {
case "name":
this.sort_fn = this.sortByName;
break;
case "path":
this.sort_fn = this.sortByPath;
break;
case "created":
this.sort_fn = this.sortByDateCreated;
break;
case "modified":
this.sort_fn = this.sortByDateModified;
break;
default:
this.sort_fn = this.default_sort_fn;
break;
}
await super.sortDataDefault(sort_mode_str, sort_dir_str)
}
async filterDataDefault(filter_str) {
/** Filters data by a string and returns number of items after filter. */
if (isString(filter_str)) {
this.filter_str = filter_str.toLowerCase();
} else if (isNullOrUndefined(this.filter_str)) {
this.filter_str = this.default_filter_str;
}
let n_visible = 0;
for (const [div_id, v] of Object.entries(this.data_obj)) {
let visible = v.search_terms.indexOf(this.filter_str) != -1;
if (v.search_only && this.filter_str.length < 4) {
visible = false;
}
this.data_obj[div_id].visible = visible;
if (visible) {
n_visible++;
}
}
return n_visible;
}
}

942
javascript/extraNetworksClusterizeList.js
View file

@ -1,942 +0,0 @@
// Prevent eslint errors on functions defined in other files.
/*global
isString,
isStringLogError,
isNull,
isUndefined,
isNullOrUndefined,
isNullOrUndefinedLogError,
isElement,
isElementLogError,
isFunction,
isFunctionLogError,
getElementByIdLogError,
querySelectorLogError,
waitForElement,
Clusterize
*/
/*eslint no-undef: "error"*/
const JSON_UPDATE_DEBOUNCE_TIME_MS = 250;
const RESIZE_DEBOUNCE_TIME_MS = 250;
// Collators used for sorting.
const INT_COLLATOR = new Intl.Collator([], {numeric: true});
const STR_COLLATOR = new Intl.Collator("en", {numeric: true, sensitivity: "base"});
class InvalidCompressedJsonDataError extends Error {
constructor(message, options) {
super(message, options);
}
}
async function decompress(base64string) {
/** Decompresses a base64 encoded ZLIB compressed string. */
try {
if (isNullOrUndefined(base64string) || base64string === "") {
throw new Error("invalid base64 string");
}
const ds = new DecompressionStream("deflate");
const writer = ds.writable.getWriter();
const bytes = Uint8Array.from(atob(base64string), c => c.charCodeAt(0));
writer.write(bytes);
writer.close();
const arrayBuffer = await new Response(ds.readable).arrayBuffer();
return await JSON.parse(new TextDecoder().decode(arrayBuffer));
} catch (error) {
throw new InvalidCompressedJsonDataError(error);
}
}
class ExtraNetworksClusterize {
/** Base class for a clusterize list. Cannot be used directly. */
constructor(
{
tabname,
extra_networks_tabname,
scroll_id,
content_id,
data_request_callback,
rows_in_block = 10,
blocks_in_cluster = 4,
show_no_data_row = true,
callbacks = {},
} = {
rows_in_block: 10,
blocks_in_cluster: 4,
show_no_data_row: true,
callbacks: {},
}
) {
// Do not continue if any of the required parameters are invalid.
if (!isStringLogError(tabname)) {
return;
}
if (!isStringLogError(extra_networks_tabname)) {
return;
}
if (!isStringLogError(scroll_id)) {
return;
}
if (!isStringLogError(content_id)) {
return;
}
if (!isFunctionLogError(data_request_callback)) {
return;
}
this.tabname = tabname;
this.extra_networks_tabname = extra_networks_tabname;
this.scroll_id = scroll_id;
this.content_id = content_id;
this.data_request_callback = data_request_callback;
this.rows_in_block = rows_in_block;
this.blocks_in_cluster = blocks_in_cluster;
this.show_no_data_row = show_no_data_row;
this.callbacks = callbacks;
this.clusterize = null;
this.scroll_elem = null;
this.content_elem = null;
this.element_observer = null;
this.resize_observer = null;
this.resize_observer_timer = null;
// Used to control logic. Many functions immediately return when disabled.
this.enabled = false;
// Stores the current encoded string so we can compare against future versions.
this.encoded_str = "";
this.no_data_text = "No results.";
this.no_data_class = "clusterize-no-data";
this.n_rows = this.rows_in_block;
this.n_cols = 1;
this.data_obj = {};
this.data_obj_keys_sorted = [];
this.sort_fn = this.sortByDivId;
this.sort_reverse = false;
}
reset() {
/** Destroy clusterize instance and set all instance variables to defaults. */
this.destroy();
this.teardownElementObservers();
this.teardownResizeObservers();
this.clusterize = null;
this.scroll_elem = null;
this.content_elem = null;
this.enabled = false;
this.encoded_str = "";
this.n_rows = this.rows_in_block;
this.n_cols = 1;
this.data_obj = {};
this.data_obj_keys_sorted = [];
this.sort_fn = this.sortByDivId;
this.sort_reverse = false;
}
async setup() {
return new Promise(resolve => {
// Setup our event handlers only after our elements exist in DOM.
Promise.all([
waitForElement(`#${this.scroll_id}`).then((elem) => this.scroll_elem = elem),
waitForElement(`#${this.content_id}`).then((elem) => this.content_elem = elem),
]).then(() => {
this.setupElementObservers();
this.setupResizeObservers();
return this.fetchData();
}).then(encoded_str => {
if (isNullOrUndefined(encoded_str)) {
// no new data to load. break from chain.
return resolve();
}
return this.parseJson(encoded_str);
}).then(json => {
if (isNullOrUndefined(json)) {
return resolve();
}
this.clear();
this.updateJson(json);
}).then(() => {
this.sortData();
}).then(() => {
// since calculateDims manually adds an element from our data_obj,
// we don't need clusterize initialzied to calculate dims.
this.calculateDims();
this.applyFilter();
this.rebuild(this.getFilteredRows());
return resolve();
}).catch(error => {
console.error("setup:: error in promise:", error);
return resolve();
});
});
}
async load() {
return new Promise(resolve => {
if (isNullOrUndefined(this.clusterize)) {
// This occurs whenever we click on a tab before initialization and setup
// have fully completed for this instance.
return resolve(this.setup());
}
if (this.calculateDims()) {
// Since dimensions updated, we need to apply the filter and rebuild.
this.applyFilter();
this.rebuild(this.getFilteredRows());
} else {
this.refresh(true);
}
return resolve();
});
}
async fetchData() {
let encoded_str = await this.data_request_callback(
this.tabname,
this.extra_networks_tabname,
this.constructor.name,
);
if (this.encoded_str === encoded_str) {
// no change to the data since last call. ignore.
return null;
}
this.encoded_str = encoded_str;
return this.encoded_str;
}
async parseJson(encoded_str) { /** promise */
/** Parses a base64 encoded and gzipped JSON string and sets up a clusterize instance. */
return new Promise((resolve, reject) => {
Promise.resolve(encoded_str)
.then(v => decompress(v))
.then(v => resolve(v))
.catch(error => {
return reject(error);
});
});
}
calculateDims() {
let res = false;
// Cannot calculate dims if not enabled since our elements won't be visible.
if (!this.enabled) {
return res;
}
// Cannot do anything if we have no data.
if (this.data_obj_keys_sorted.length <= 0) {
return res;
}
// Repair before anything else so we can actually get dimensions.
this.repair();
// Add an element to the container manually so we can calculate dims.
const child = htmlStringToElement(this.data_obj[this.data_obj_keys_sorted[0]].html);
this.content_elem.prepend(child);
let n_cols = calcColsPerRow(this.content_elem, child);
let n_rows = calcRowsPerCol(this.scroll_elem, child);
n_cols = (isNaN(n_cols) || n_cols <= 0) ? 1 : n_cols;
n_rows = (isNaN(n_rows) || n_rows <= 0) ? 1 : n_rows;
n_rows += 2;
if (n_cols != this.n_cols || n_rows != this.n_rows) {
// Sizes have changed. Update the instance values.
this.n_cols = n_cols;
this.n_rows = n_rows;
this.rows_in_block = this.n_rows;
res = true;
}
// Remove the temporary element from DOM.
child.remove();
return res;
}
sortData() {
/** Sorts the rows using the instance's `sort_fn`.
*
* It is expected that a subclass will override this function to update the
* instance's `sort_fn` then call `super.sortData()` to apply the sorting.
*/
this.sort_fn();
if (this.sort_reverse) {
this.data_obj_keys_sorted = this.data_obj_keys_sorted.reverse();
}
}
applyFilter() {
/** Should be overridden by child class. */
this.sortData();
if (!isNullOrUndefined(this.clusterize)) {
this.update(this.getFilteredRows());
}
//this.rebuild(this.getFilteredRows());
}
getFilteredRows() {
let rows = [];
let active_keys = this.data_obj_keys_sorted.filter(k => this.data_obj[k].active);
for (let i = 0; i < active_keys.length; i += this.n_cols) {
rows.push(
active_keys.slice(i, i + this.n_cols)
.map(k => this.data_obj[k].html)
.join("")
);
}
return rows;
}
rebuild(rows) {
if (!isNullOrUndefined(this.clusterize)) {
this.clusterize.destroy(true);
this.clusterize = null;
}
if (isNullOrUndefined(rows) || !Array.isArray(rows)) {
rows = [];
}
this.clusterize = new Clusterize(
{
rows: rows,
scrollId: this.scroll_id,
contentId: this.content_id,
rows_in_block: this.rows_in_block,
tag: "div",
blocks_in_cluster: this.blocks_in_cluster,
show_no_data_row: this.show_no_data_row,
no_data_text: this.no_data_text,
no_data_class: this.no_data_class,
callbacks: this.callbacks,
}
);
}
enable(enabled) {
/** Enables or disables this instance. */
// All values other than `true` for `enabled` result in this.enabled=false.
this.enabled = !(enabled !== true);
}
updateJson(json) { /** promise */
console.error("Base class method called. Must be overridden by subclass.");
return new Promise(resolve => {
return resolve();
});
}
sortByDivId() {
/** Sort data_obj keys (div_id) as numbers. */
this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => INT_COLLATOR.compare(a, b));
}
updateDivContent(div_id, content) {
/** Updates an element's html in the dataset.
*
* NOTE: This function only updates the dataset. Calling function must call
* rebuild() to apply these changes to the view. Adding this call to this
* function would be very slow in the case where many divs need their content
* updated at the same time.
*/
if (!(div_id in this.data_obj)) {
console.error("div_id not in data_obj:", div_id);
} else if (isElement(content)) {
this.data_obj[div_id].html = content.outerHTML;
return true;
} else if (isString(content)) {
this.data_obj[div_id].html = content;
return true;
} else {
console.error("Invalid content:", div_id, content);
}
return false;
}
getMaxRowWidth() {
console.error("getMaxRowWidth:: Not implemented in base class. Must be overridden.");
return;
}
repair() {
/** Fixes element association in DOM. Returns whether a fix was performed. */
if (!this.enabled) {
return false;
}
if (!isElement(this.scroll_elem) || !isElement(this.content_elem)) {
return false;
}
// If association for elements is broken, replace them with instance version.
if (!this.scroll_elem.isConnected || !this.content_elem.isConnected) {
gradioApp().getElementById(this.scroll_id).replaceWith(this.scroll_elem);
// Fix resize observers since they are bound to each element individually.
if (!isNullOrUndefined(this.resize_observer)) {
this.resize_observer.disconnect();
this.resize_observer.observe(this.scroll_elem);
this.resize_observer.observe(this.content_elem);
}
// Make sure to refresh forcefully after updating the dom.
this.refresh(true);
return true;
}
return false;
}
onResize(elem_id) {
/** Callback whenever one of our visible elements is resized. */
if (!this.enabled) {
return;
}
this.refresh(true);
if (this.calculateDims()) {
this.rebuild(this.getFilteredRows());
}
}
onElementDetached(elem_id) {
/** Callback whenever one of our elements has become detached from the DOM. */
switch (elem_id) {
case this.scroll_id:
this.repair();
break;
case this.content_id:
this.repair();
break;
default:
break;
}
}
setupElementObservers() {
/** Listens for changes to the data, scroll, and content elements.
*
* During testing, the scroll/content elements would frequently get removed from
* the DOM. Our clusterize instance stores a reference to these elements
* which breaks whenever these elements are removed from the DOM. To fix this,
* we need to check for these changes and re-attach our stores elements by
* replacing the ones in the DOM with the ones in our clusterize instance.
*
* We also use an observer to detect whenever the data element gets a new set
* of JSON data so that we can update our dataset.
*/
this.element_observer = new MutationObserver((mutations) => {
// don't waste time if this object isn't enabled.
if (!this.enabled) {
return;
}
let scroll_elem = gradioApp().getElementById(this.scroll_id);
if (scroll_elem && scroll_elem !== this.scroll_elem) {
this.onElementDetached(scroll_elem.id);
}
let content_elem = gradioApp().getElementById(this.content_id);
if (content_elem && content_elem !== this.content_elem) {
this.onElementDetached(content_elem.id);
}
});
this.element_observer.observe(gradioApp(), {subtree: true, childList: true, attributes: true});
}
teardownElementObservers() {
if (!isNullOrUndefined(this.element_observer)) {
this.element_observer.takeRecords();
this.element_observer.disconnect();
}
this.element_observer = null;
}
setupResizeObservers() {
/** Handles any updates to the size of both the Scroll and Content elements. */
this.resize_observer = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.target.id === this.scroll_id || entry.target.id === this.content_id) {
// debounce the event
clearTimeout(this.resize_observer_timer);
this.resize_observer_timer = setTimeout(() => this.onResize(entry.id), RESIZE_DEBOUNCE_TIME_MS);
}
}
});
this.resize_observer.observe(this.scroll_elem);
this.resize_observer.observe(this.content_elem);
}
teardownResizeObservers() {
if (!isNullOrUndefined(this.resize_observer)) {
this.resize_observer.disconnect();
}
if (!isNullOrUndefined(this.resize_observer_timer)) {
clearTimeout(this.resize_observer_timer);
this.resize_observer_timer = null;
}
this.resize_observer = null;
this.resize_observer_timer = null;
}
/* ==== Clusterize.Js FUNCTION WRAPPERS ==== */
update(rows) {
/** Updates the clusterize rows. */
if (isNullOrUndefined(rows) || !Array.isArray(rows)) {
rows = this.getFilteredRows();
}
this.clusterize.update(rows);
}
clear() {
/** Clears the clusterize list and this instance's data. */
if (!isNullOrUndefined(this.clusterize)) {
this.clusterize.clear();
this.data_obj = {};
this.data_obj_keys_sorted = [];
if (isElement(this.content_elem)) {
this.content_elem.innerHTML = "<div class='clusterize-no-data'>Loading...</div>";
}
}
}
refresh(force) {
/** Refreshes the clusterize instance so that it can recalculate its dims.
* `force` [boolean]: If true, tells clusterize to refresh regardless of whether
* its dimensions have changed.
*/
if (isNullOrUndefined(this.clusterize)) {
return;
}
// Only allow boolean variables. default to false.
if (force !== true) {
force = false;
}
this.clusterize.refresh(force);
}
rowCount() {
/** Gets the total (not only visible) row count in the clusterize instance. */
return this.clusterize.getRowsAmount();
}
destroy() {
/** Destroys a clusterize instance and removes its rows from the page. */
// Passing `true` prevents clusterize from dumping every row in its dataset
// to the DOM. This kills performance so we never want to do this.
if (!isNullOrUndefined(this.clusterize)) {
this.clusterize.destroy(true);
this.clusterize = null;
}
this.data_obj = {};
this.data_obj_keys_sorted = [];
if (isElement(this.content_elem)) {
this.content_elem.innerHTML = "<div class='clusterize-no-data'>Loading...</div>";
}
}
}
class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
/** Subclass used to display a directories/files in the Tree View. */
constructor(...args) {
super(...args);
this.no_data_text = "No directories/files";
this.selected_div_id = null;
}
reset() {
this.selected_div_id = null;
super.reset();
}
getBoxShadow(depth) {
/** Generates style for a multi-level box shadow for vertical indentation lines.
* This is used to indicate the depth of a directory/file within a directory tree.
*/
let res = "";
var style = getComputedStyle(document.body);
let bg = style.getPropertyValue("--body-background-fill");
let fg = style.getPropertyValue("--border-color-primary");
let text_size = style.getPropertyValue("--button-large-text-size");
for (let i = 1; i <= depth; i++) {
res += `calc((${i} * ${text_size}) - (${text_size} * 0.6)) 0 0 ${bg} inset,`;
res += `calc((${i} * ${text_size}) - (${text_size} * 0.4)) 0 0 ${fg} inset`;
res += (i + 1 > depth) ? "" : ", ";
}
return res;
}
updateJson(json) {
/** Processes JSON object and adds each entry to our data object. */
return new Promise(resolve => {
var style = getComputedStyle(document.body);
let text_size = style.getPropertyValue("--button-large-text-size");
for (const [k, v] of Object.entries(json)) {
let div_id = k;
let parsed_html = htmlStringToElement(v);
// parent_id = -1 if item is at root level
let parent_id = "parentId" in parsed_html.dataset ? parsed_html.dataset.parentId : -1;
let expanded = "expanded" in parsed_html.dataset;
let selected = "selected" in parsed_html.dataset;
let depth = Number(parsed_html.dataset.depth);
parsed_html.style.paddingLeft = `calc(${depth} * ${text_size})`;
parsed_html.style.boxShadow = this.getBoxShadow(depth);
// Add the updated html to the data object.
this.data_obj[div_id] = {
html: parsed_html.outerHTML,
active: parent_id === -1, // always show root
expanded: expanded || (parent_id === -1), // always expand root
selected: selected,
parent: parent_id,
children: [], // populated later
};
// maybe not necessary.
parsed_html = null;
}
// Build list of children for each element in dataset.
for (const [k, v] of Object.entries(this.data_obj)) {
if (v.parent === -1) {
continue;
} else if (!(v.parent in this.data_obj)) {
console.error("parent not in data:", v.parent);
} else {
this.data_obj[v.parent].children.push(k);
}
}
// Handle expanding of rows on initial load
for (const [k, v] of Object.entries(this.data_obj)) {
if (v.parent === -1) {
// Always show root level.
this.data_obj[k].active = true;
} else if (this.data_obj[v.parent].expanded && this.data_obj[v.parent].active) {
// Parent is both active and expanded. show child
this.data_obj[k].active = true;
} else {
this.data_obj[k].active = false;
}
}
return resolve();
});
}
removeChildRows(div_id) {
/** Removes rows from the list that are children of the passed div.
* The rows aren't removed from the data object, just set to active=false
* so they aren't displayed.
*/
for (const child_id of this.data_obj[div_id].children) {
this.data_obj[child_id].active = false;
if (this.data_obj[child_id].selected) {
// deselect the child only if it is selected.
let elem = htmlStringToElement(this.data_obj[child_id].html);
delete elem.dataset.selected;
this.data_obj[child_id].selected = false;
this.updateDivContent(child_id, elem);
}
this.removeChildRows(child_id);
}
}
addChildRows(div_id) {
/** Adds rows to the list that are children of the passed div.
* The rows aren't added to the data object, just set to active=true
* so they are displayed.
*/
for (const child_id of this.data_obj[div_id].children) {
this.data_obj[child_id].active = true;
if (this.data_obj[child_id].expanded) {
this.addChildRows(child_id);
}
}
}
onRowExpandClick(div_id, elem) {
/** Toggles expand/collapse of a row's children. */
if ("expanded" in elem.dataset) {
this.data_obj[div_id].expanded = false;
delete elem.dataset.expanded;
this.removeChildRows(div_id);
} else {
this.data_obj[div_id].expanded = true;
elem.dataset.expanded = "";
this.addChildRows(div_id);
}
this.updateDivContent(div_id, elem);
if (this.calculateDims()) {
this.rebuild(this.getFilteredRows());
} else {
this.update(this.getFilteredRows());
}
}
_setRowSelectedState(div_id, elem, new_state) {
if (new_state) {
elem.dataset.selected = "";
} else {
delete elem.dataset.selected;
}
this.data_obj[div_id].selected = new_state;
this.updateDivContent(div_id, elem);
}
onRowSelected(div_id, elem, override) {
/** Selects a row and deselects all others. */
if (!isElementLogError(elem)) {
return;
}
if (!(div_id in this.data_obj)) {
console.error("div_id not in dataset:", div_id);
return;
}
if (!isNullOrUndefined(override)) {
override = (override === true);
}
if (!isNullOrUndefined(this.selected_div_id) && div_id !== this.selected_div_id) {
// deselect the current selected row
let prev_elem = htmlStringToElement(this.data_obj[this.selected_div_id].html);
this._setRowSelectedState(this.selected_div_id, prev_elem, false);
// select the new row
this._setRowSelectedState(div_id, elem, true);
this.selected_div_id = div_id;
} else {
// toggle the passed row's selected state.
if (this.data_obj[div_id].selected) {
this._setRowSelectedState(div_id, elem, false);
this.selected_div_id = null;
} else {
this._setRowSelectedState(div_id, elem, true);
this.selected_div_id = div_id;
}
}
this.update(this.getFilteredRows());
}
getMaxRowWidth() {
/** Calculates the width of the widest row in the list. */
if (!this.enabled) {
// Inactive list is not displayed on screen. Can't calculate size.
return false;
}
if (this.rowCount() === 0) {
// If there is no data then just skip.
return false;
}
let max_width = 0;
for (let i = 0; i < this.content_elem.children.length; i += this.n_cols) {
let row_width = 0;
for (let j = 0; j < this.n_cols; j++) {
const child = this.content_elem.children[i + j];
const child_style = window.getComputedStyle(child, null);
const prev_style = child.style.cssText;
const n_cols = child_style.getPropertyValue("grid-template-columns").split(" ").length;
child.style.gridTemplateColumns = `repeat(${n_cols}, max-content)`;
row_width += child.scrollWidth;
// Restore previous style.
child.style.cssText = prev_style;
}
max_width = Math.max(max_width, row_width);
}
if (max_width <= 0) {
return;
}
// Adds the scroll element's border and the scrollbar's width to the result.
// If scrollbar isn't visible, then only the element border is added.
max_width += this.scroll_elem.offsetWidth - this.scroll_elem.clientWidth;
return max_width;
}
}
class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
/** Subclass used to display cards in the Cards View. */
constructor(...args) {
super(...args);
this.no_data_text = "No files matching filter.";
this.default_sort_mode_str = "path";
this.default_sort_dir_str = "ascending";
this.default_filter_str = "";
this.sort_mode_str = this.default_sort_mode_str;
this.sort_dir_str = this.default_sort_dir_str;
this.filter_str = this.default_filter_str;
}
reset() {
this.sort_mode_str = this.default_sort_mode_str;
this.sort_dir_str = this.default_sort_dir_str;
this.filter_str = this.default_filter_str;
super.reset();
}
updateJson(json) {
/** Processes JSON object and adds each entry to our data object. */
return new Promise(resolve => {
this.data_obj = {};
for (const [i, [k, v]] of Object.entries(Object.entries(json))) {
let div_id = k;
let parsed_html = htmlStringToElement(v);
let search_only = isElement(parsed_html.querySelector(".search_only"));
let search_terms_elem = parsed_html.querySelector(".search_terms");
let search_terms = "";
if (isElement(search_terms_elem)) {
search_terms = Array.prototype.map.call(
parsed_html.querySelectorAll(".search_terms"),
(elem) => {
return elem.textContent.toLowerCase();
}
).join(" ");
}
// Add the updated html to the data object.
this.data_obj[div_id] = {
active: true,
html: v,
sort_name: parsed_html.dataset.sortName,
sort_path: parsed_html.dataset.sortPath,
sort_created: parsed_html.dataset.sortCreated,
sort_modified: parsed_html.dataset.sortModified,
search_only: search_only,
search_terms: search_terms,
};
// maybe not necessary
parsed_html = null;
}
return resolve();
});
}
sortByName() {
this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => {
return STR_COLLATOR.compare(
this.data_obj[a].sort_name,
this.data_obj[b].sort_name,
);
});
}
sortByPath() {
this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => {
return STR_COLLATOR.compare(
this.data_obj[a].sort_path,
this.data_obj[b].sort_path,
);
});
}
sortByCreated() {
this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => {
return INT_COLLATOR.compare(
this.data_obj[a].sort_created,
this.data_obj[b].sort_created,
);
});
}
sortByModified() {
this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => {
return INT_COLLATOR.compare(
this.data_obj[a].sort_modified,
this.data_obj[b].sort_modified,
);
});
}
setSortMode(sort_mode_str) {
this.sort_mode_str = sort_mode_str;
}
setSortDir(sort_dir_str) {
this.sort_dir_str = sort_dir_str;
}
sortData() {
this.sort_reverse = this.sort_dir_str === "descending";
switch (this.sort_mode_str) {
case "name":
this.sort_fn = this.sortByName;
break;
case "path":
this.sort_fn = this.sortByPath;
break;
case "created":
this.sort_fn = this.sortByCreated;
break;
case "modified":
this.sort_fn = this.sortByModified;
break;
default:
this.sort_fn = this.sortByDivId;
break;
}
super.sortData();
}
applyFilter(filter_str) {
/** Filters our data object by setting each member's `active` attribute then sorts the result. */
if (!isNullOrUndefined(filter_str)) {
this.filter_str = filter_str.toLowerCase();
} else if (isNullOrUndefined(this.filter_str)) {
this.filter_str = this.default_filter_str;
}
for (const [k, v] of Object.entries(this.data_obj)) {
let visible = v.search_terms.indexOf(this.filter_str) != -1;
if (v.search_only && this.filter_str.length < 4) {
visible = false;
}
this.data_obj[k].active = visible;
}
super.applyFilter();
}
getMaxRowWidth() {
/** Calculates the width of the widest pseudo-row in the list. */
if (!this.enabled) {
// Inactive list is not displayed on screen. Can't calculate size.
return false;
}
if (this.rowCount() === 0) {
// If there is no data then just skip.
return false;
}
let max_width = 0;
for (let i = 0; i < this.content_elem.children.length; i += this.n_cols) {
let row_width = 0;
for (let j = 0; j < this.n_cols; j++) {
row_width += getComputedDims(this.content_elem.children[i + j]).width;
}
max_width = Math.max(max_width, row_width);
}
if (max_width <= 0) {
return;
}
// Add the container's padding to the result.
max_width += getComputedPaddingDims(this.content_elem).width;
// Add the scrollbar's width to the result. Will add 0 if scrollbar isnt present.
max_width += this.scroll_elem.offsetWidth - this.scroll_elem.clientWidth;
return max_width;
}
}

158
javascript/utils.js
View file

@ -5,29 +5,29 @@ const isNumberLogError = x => {
if (isNumber(x)) {
return true;
}
console.error("expected number, got:", typeof x);
console.error(`expected number, got: ${typeof x}`);
return false;
}
};
const isNumberThrowError = x => {
if (isNumber(x)) {
return;
}
throw new Error("expected number, got:", typeof x);
}
throw new Error(`expected number, got: ${typeof x}`);
};
const isString = x => typeof x === "string" || x instanceof String;
const isStringLogError = x => {
if (isString(x)) {
return true;
}
console.error("expected string, got:", typeof x);
console.error(`expected string, got: ${typeof x}`);
return false;
};
const isStringThrowError = x => {
if (isString(x)) {
return;
}
throw new Error("expected string, got:", typeof x);
throw new Error(`expected string, got: ${typeof x}`);
};
const isNull = x => x === null;
@ -53,14 +53,14 @@ const isElementLogError = x => {
if (isElement(x)) {
return true;
}
console.error("expected element type, got:", typeof x);
console.error(`expected element type, got: ${typeof x}`);
return false;
};
const isElementThrowError = x => {
if (isElement(x)) {
return;
}
throw new Error("expected element type, got:", typeof x);
throw new Error(`expected element type, got: ${typeof x}`);
};
const isFunction = x => typeof x === "function";
@ -68,14 +68,62 @@ const isFunctionLogError = x => {
if (isFunction(x)) {
return true;
}
console.error("expected function type, got:", typeof x);
console.error(`expected function type, got: ${typeof x}`);
return false;
};
const isFunctionThrowError = x => {
if (isFunction(x)) {
return;
}
throw new Error("expected function type, got:", typeof x);
throw new Error(`expected function type, got: ${typeof x}`);
};
const isObject = x => typeof x === "object" && !Array.isArray(x);
const isObjectLogError = x => {
if (isObject(x)) {
return true;
}
console.error(`expected object type, got: ${typeof x}`);
return false;
};
const isObjectThrowError = x => {
if (isObject(x)) {
return;
}
throw new Error(`expected object type, got: ${typeof x}`);
};
const keyExists = (obj, k) => isObject(obj) && isString(k) && k in obj;
const keyExistsLogError = (obj, k) => {
if (keyExists(obj, k)) {
return true;
}
console.error(`key does not exist in object: ${k}`);
return false;
};
const keyExistsThrowError = (obj, k) => {
if (keyExists(obj, k)) {
return;
}
throw new Error(`key does not exist in object: ${k}`)
};
const getValue = (obj, k) => {
/** Returns value of object for given key if it exists, otherwise returns null. */
if (keyExists(obj, k)) {
return obj[k];
}
return null;
};
const getValueLogError = (obj, k) => {
if (keyExistsLogError(obj, k)) {
return obj[k];
}
return null;
};
const getValueThrowError = (obj, k) => {
keyExistsThrowError(obj, k);
return obj[k];
};
const getElementByIdLogError = selector => {
@ -156,17 +204,17 @@ const getComputedDims = elem => {
};
};
const calcColsPerRow = function(parent, child) {
const calcColsPerRow = function (parent, child) {
/** Calculates the number of columns of children that can fit in a parent's visible width. */
const parent_inner_width = parent.offsetWidth - getComputedPaddingDims(parent).width;
return parseInt(parent_inner_width / getComputedDims(child).width);
return parseInt(parent_inner_width / getComputedDims(child).width, 10);
};
const calcRowsPerCol = function(parent, child) {
const calcRowsPerCol = function (parent, child) {
/** Calculates the number of rows of children that can fit in a parent's visible height. */
const parent_inner_height = parent.offsetHeight - getComputedPaddingDims(parent).height;
return parseInt(parent_inner_height / getComputedDims(child).height);
return parseInt(parent_inner_height / getComputedDims(child).height, 10);
};
/** Functions for asynchronous operations. */
@ -271,7 +319,7 @@ const waitForValueInObject = o => {
* Resolves when obj[k] == v
*/
return new Promise(resolve => {
waitForKeyInObject({k: o.k, obj: o.obj}).then(() => {
waitForKeyInObject({ k: o.k, obj: o.obj }).then(() => {
(function _waitForValueInObject() {
if (o.k in o.obj && o.obj[o.k] == o.v) {
@ -283,17 +331,93 @@ const waitForValueInObject = o => {
});
};
/** Requests */
const requestGet = (url, data, handler, errorHandler) => {
var xhr = new XMLHttpRequest();
var args = Object.keys(data).map(function (k) {
return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
}).join('&');
xhr.open("GET", url + "?" + args, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
var js = JSON.parse(xhr.responseText);
handler(js);
} catch (error) {
console.error(error);
errorHandler();
}
} else {
errorHandler();
}
}
};
var js = JSON.stringify(data);
xhr.send(js);
};
const requestGetPromise = (url, data) => {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
let args = Object.keys(data).map(k => {
return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
}).join("&");
xhr.open("GET", url + "?" + args, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
resolve(xhr.responseText);
} catch (error) {
reject(error);
}
} else {
reject({ status: this.status, statusText: xhr.statusText });
}
}
};
xhr.send(JSON.stringify(data));
});
};
/** Misc helper functions. */
const clamp = (x, min, max) => Math.max(min, Math.min(x, max));
const getStyle = (prop, elem) => {
return window.getComputedStyle ? window.getComputedStyle(elem)[prop] : elem.currentStyle[prop];
}
};
const htmlStringToElement = function(str) {
const htmlStringToElement = function (str) {
/** Converts an HTML string into an Element type. */
let parser = new DOMParser();
let tmp = parser.parseFromString(str, "text/html");
return tmp.body.firstElementChild;
};
const toggleCss = (key, css, enable) => {
var style = document.getElementById(key);
if (enable && !style) {
style = document.createElement('style');
style.id = key;
style.type = 'text/css';
document.head.appendChild(style);
}
if (style && !enable) {
document.head.removeChild(style);
}
if (style) {
style.innerHTML == '';
style.appendChild(document.createTextNode(css));
}
};
const copyToClipboard = s => {
/** Copies the passed string to the clipboard. */
isStringThrowError(s);
navigator.clipboard.writeText(s);
};