Skip to content

Commit

Permalink
JS modifications
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThePhar
ThePhar committed Jun 26, 2024
1 parent 24fbd56 commit 1261a86
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 27 deletions.
5 changes: 4 additions & 1 deletion WebHostLib/options.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,8 @@ def weighted_options_old():
@app.route("/games/<string:game>/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/<string:game>/generate-weighted-yaml", methods=["POST"])
Expand Down Expand Up @@ -225,6 +226,8 @@ def player_options(game: str):
# YAML generator for player-options
@app.route("/games/<string:game>/generate-yaml", methods=["POST"])
def generate_yaml(game: str):
return "under rework -Phar"

if request.method == "POST":
options = {}
intent_generate = False
Expand Down
28 changes: 26 additions & 2 deletions WebHostLib/static/assets/options/player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
54 changes: 32 additions & 22 deletions WebHostLib/static/assets/options/shared.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 = `<div id="${option}-eol">&nbsp;</div>`;
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) {
Expand All @@ -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 += `
Expand All @@ -71,35 +82,34 @@ 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 += `<div id="${option}-eol">&nbsp;</div>`;
}

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) {
return;
}

// 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 += `
Expand All @@ -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 += `<div id="${option}-eol">&nbsp;</div>`;
}

container.innerHTML += html;
element.innerHTML += html;
}
4 changes: 2 additions & 2 deletions WebHostLib/templates/playerOptions/macros.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,8 +357,8 @@
{% macro NoJSFullLoadDisclaimer() %}
<noscript>
<div class="js-disclaimer">
This list contains a large amount of possible values that cannot be loaded without causing performance
issues in some browsers. If you wish to load it anyway, please click <a href="?preload-all=True">here</a>.
This list contains a large amount of items that can cause performance issues for some browsers. If you wish
to load it anyway, please click <a href="?preload-all=True">here</a>.
</div>
</noscript>
{% endmacro %}

0 comments on commit 1261a86

Please sign in to comment.