From 1261a863e40f411f45d19a6abde86f3f3827a47e Mon Sep 17 00:00:00 2001 From: Zach Parks Date: Tue, 25 Jun 2024 19:50:48 -0500 Subject: [PATCH] JS modifications --- WebHostLib/options.py | 5 +- WebHostLib/static/assets/options/player.js | 28 +++++++++- WebHostLib/static/assets/options/shared.js | 54 +++++++++++-------- .../templates/playerOptions/macros.html | 4 +- 4 files changed, 64 insertions(+), 27 deletions(-) diff --git a/WebHostLib/options.py b/WebHostLib/options.py index a2643a660c6f..3347a1d2cae2 100644 --- a/WebHostLib/options.py +++ b/WebHostLib/options.py @@ -159,7 +159,8 @@ def weighted_options_old(): @app.route("/games//weighted-options") @cache.cached(unless=lambda: app.debug) def weighted_options(game: str): - return render_options_page("weightedOptions/weightedOptions.html", game, is_complex=True) + return "under rework -Phar" + # return render_options_page("weightedOptions/weightedOptions.html", game, is_complex=True) @app.route("/games//generate-weighted-yaml", methods=["POST"]) @@ -225,6 +226,8 @@ def player_options(game: str): # YAML generator for player-options @app.route("/games//generate-yaml", methods=["POST"]) def generate_yaml(game: str): + return "under rework -Phar" + if request.method == "POST": options = {} intent_generate = False diff --git a/WebHostLib/static/assets/options/player.js b/WebHostLib/static/assets/options/player.js index 7b5e7c8a43c2..89cc0ecaf868 100644 --- a/WebHostLib/static/assets/options/player.js +++ b/WebHostLib/static/assets/options/player.js @@ -213,12 +213,36 @@ const fetchOptions = async () => { presets = data.presets; console.log(data); + // Setup lists and dicts. for (const element of document.querySelectorAll("[data-keys-type=list], [data-keys-type=dict]")) { const option = element.id.substring(0, element.id.indexOf("-container")); const type = element.getAttribute("data-keys-type"); - options[option].loaded = 0; + /** @type {HTMLInputElement} */ + const search = document.getElementById(`${option}-search`); + options[option].loaded = { + observer: null, + max: 0, + keys: options[option]["valid_keys"], + }; + + search.addEventListener("input", (event) => { + let keys = []; + if (event.target.value.trim() === "") { + keys = options[option]["valid_keys"]; + } else { + for (const value of options[option]["valid_keys"]) { + if (value.toLowerCase().includes(event.target.value.toLowerCase())) { + keys.push(value); + } + } + } + + options[option].loaded.max = 0; + options[option].loaded.keys = keys; + updateObserver(option, element, type); + }); - createListObserver(element, type); + updateObserver(option, element, type); } // const presetSelect = document.getElementById('game-options-preset'); diff --git a/WebHostLib/static/assets/options/shared.js b/WebHostLib/static/assets/options/shared.js index e2af39eeb029..91c77445056b 100644 --- a/WebHostLib/static/assets/options/shared.js +++ b/WebHostLib/static/assets/options/shared.js @@ -3,19 +3,31 @@ * @param element {HTMLElement} * @param type {'list' | 'dict'} */ -function createListObserver(element, type) { +function updateObserver(option, element, type) { if (type !== 'list' && type !== 'dict') { console.error(`Invalid container type: ${type}`); return; } - const option = element.id.substring(0, element.id.indexOf("-container")); - const observer = new IntersectionObserver((entries) => { + // Ignore preloaded fields. + if (element.getAttribute("data-preloaded")) { + return; + } + + if (options[option].loaded.observer) { + const eol = document.getElementById(`${option}-eol`); + if (eol) { + options[option].loaded.observer.unobserve(eol); + } + } + + options[option].loaded.observer = new IntersectionObserver((entries) => { + console.log(`Calling observer`, option); if (entries[0].intersectionRatio <= 0) { return; } - observer.unobserve(document.getElementById(`${option}-eol`)); + options[option].loaded.observer.unobserve(document.getElementById(`${option}-eol`)); if (type === 'list') { loadListItems(option, element, 50); } else { @@ -24,19 +36,19 @@ function createListObserver(element, type) { const eol = document.getElementById(`${option}-eol`); if (eol) { - observer.observe(eol); + options[option].loaded.observer.observe(eol); } }); element.innerHTML = `
 
`; - observer.observe(document.getElementById(`${option}-eol`)); + options[option].loaded.observer.observe(document.getElementById(`${option}-eol`)); } function loadListItems(option, element, number) { /** @type {number} */ - const loaded = options[option]["loaded"]; + const loaded = options[option].loaded.max; /** @type {number} */ - const length = options[option]["valid_keys"].length; + const length = options[option].loaded.keys.length; // All items are already loaded, return. if (loaded >= length) { @@ -49,11 +61,10 @@ function loadListItems(option, element, number) { } const max = Math.min(loaded + 50, length); - /** @type {string[]} */ - const keys = options[option]["valid_keys"].slice(loaded, max); + const keys = options[option].loaded.keys.slice(loaded, max); - options[option]["loaded"] = max; + options[option].loaded.max = max; let html = ""; for (const value of keys) { html += ` @@ -71,18 +82,18 @@ function loadListItems(option, element, number) { } // End of list target. Don't create if we are at the end of our list. - if (options[option]["loaded"] < length) { + if (options[option].loaded.max < length) { html += `
 
`; } element.innerHTML += html; } -function loadDictItems(option, container, number) { +function loadDictItems(option, element, number) { /** @type {number} */ - const loaded = options[option]["loaded"]; + const loaded = options[option].loaded.max; /** @type {number} */ - const length = options[option]["valid_keys"].length; + const length = options[option].loaded.keys.length; // All items are already loaded, return. if (loaded >= length) { @@ -90,16 +101,15 @@ function loadDictItems(option, container, number) { } // Remove the "load-more" element. - if (container.children.length !== 0) { - container.children[container.children.length - 1].remove(); + if (element.children.length !== 0) { + element.children[element.children.length - 1].remove(); } const max = Math.min(loaded + 50, length); - /** @type {string[]} */ - const keys = options[option]["valid_keys"].slice(loaded, max); + const keys = options[option].loaded.keys.slice(loaded, max); - options[option]["loaded"] = max; + options[option].loaded.max = max; let html = ""; for (const value of keys) { html += ` @@ -116,9 +126,9 @@ function loadDictItems(option, container, number) { } // End of list target. Don't create if we are at the end of our list. - if (options[option]["loaded"] < length) { + if (options[option].loaded.max < length) { html += `
 
`; } - container.innerHTML += html; + element.innerHTML += html; } diff --git a/WebHostLib/templates/playerOptions/macros.html b/WebHostLib/templates/playerOptions/macros.html index 05010ec79819..eeea35672fa5 100644 --- a/WebHostLib/templates/playerOptions/macros.html +++ b/WebHostLib/templates/playerOptions/macros.html @@ -357,8 +357,8 @@ {% macro NoJSFullLoadDisclaimer() %} {% endmacro %}