From 4fb8dc2c33fa75b96e749678792a6033d7e76adf Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@gmail.com>
Date: Tue, 12 May 2020 16:11:16 +0200
Subject: [PATCH] update to fit updated code style
---
src/gui/options.js | 527 +++++++++++++++++++++++----------------------
1 file changed, 265 insertions(+), 262 deletions(-)
diff --git a/src/gui/options.js b/src/gui/options.js
index f0cce854943..01035bf3f33 100644
--- a/src/gui/options.js
+++ b/src/gui/options.js
@@ -1,303 +1,306 @@
App.UI.OptionsGroup = (function() {
+ /**
+ * @typedef value
+ * @property {*} value
+ * @property {string} [name]
+ * @property {string} mode
+ * @property {number} [compareValue]
+ * @property {string} [descAppend] can be SC markup
+ * @property {boolean} [on]
+ * @property {boolean} [off]
+ * @property {boolean} [neutral]
+ * @property {Function} [callback]
+ */
+
+ const Option = class {
/**
- * @typedef value
- * @property {*} value
- * @property {string} [name]
- * @property {string} mode
- * @property {number} [compareValue]
- * @property {string} [descAppend] can be SC markup
- * @property {boolean} [on]
- * @property {boolean} [off]
- * @property {boolean} [neutral]
- * @property {Function} [callback]
+ * @param {string} description can be SC markup
+ * @param {string} property
+ * @param {object} [object=V]
*/
-
- const Option = class {
+ constructor(description, property, object = V) {
+ this.description = description;
+ this.property = property;
+ this.object = object;
/**
- * @param {string} description can be SC markup
- * @param {string} property
- * @param {object} [object=V]
+ * @type {Array<value>}
*/
- constructor(description, property, object = V) {
- this.description = description;
- this.property = property;
- this.object = object;
- /**
- * @type {Array<value>}
- */
- this.valuePairs = [];
- }
+ this.valuePairs = [];
+ }
- /**
- * @param {*} name
- * @param {*} [value=name]
- * @param {Function} [callback]
- * @returns {Option}
- */
- addValue(name, value = name, callback = undefined) {
- this.valuePairs.push({name: name, value: value, mode: "=", callback: callback});
- return this;
- }
+ /**
+ * @param {*} name
+ * @param {*} [value=name]
+ * @param {Function} [callback]
+ * @returns {Option}
+ */
+ addValue(name, value = name, callback = undefined) {
+ this.valuePairs.push({
+ name: name, value: value, mode: "=", callback: callback
+ });
+ return this;
+ }
- /**
- * @param {Array<*|Array>} values
- * @returns {Option}
- */
- addValueList(values) {
- for (const value of values) {
- if (Array.isArray(value)) {
- this.addValue(value[0], value[1]);
- } else {
- this.addValue(value);
- }
+ /**
+ * @param {Array<*|Array>} values
+ * @returns {Option}
+ */
+ addValueList(values) {
+ for (const value of values) {
+ if (Array.isArray(value)) {
+ this.addValue(value[0], value[1]);
+ } else {
+ this.addValue(value);
}
- return this;
}
+ return this;
+ }
- /**
- * @param {*} value
- * @param {number} compareValue
- * @param {string} mode on of: "<", "<=", ">", ">="
- * @param {string} [name=value]
- */
- addRange(value, compareValue, mode, name = value) {
- this.valuePairs.push({
- name: name, value: value, mode: mode, compareValue: compareValue
- });
- return this;
- }
+ /**
+ * @param {*} value
+ * @param {number} compareValue
+ * @param {string} mode on of: "<", "<=", ">", ">="
+ * @param {string} [name=value]
+ */
+ addRange(value, compareValue, mode, name = value) {
+ this.valuePairs.push({
+ name: name, value: value, mode: mode, compareValue: compareValue
+ });
+ return this;
+ }
- /**
- * @param {string} [unit]
- * @returns {Option}
- */
- showTextBox(unit) {
- this.textbox = true;
- if (unit) {
- this.unit = unit;
- }
- return this;
+ /**
+ * @param {string} [unit]
+ * @returns {Option}
+ */
+ showTextBox(unit) {
+ this.textbox = true;
+ if (unit) {
+ this.unit = unit;
}
+ return this;
+ }
- /**
- * @param {string} comment can be SC markup
- * @returns {Option}
- */
- addComment(comment) {
- this.comment = comment;
- return this;
- }
+ /**
+ * @param {string} comment can be SC markup
+ * @returns {Option}
+ */
+ addComment(comment) {
+ this.comment = comment;
+ return this;
+ }
- /**
- * Adds a button that executes the callback when clicked AND reloads the passage
- *
- * @param {string} name
- * @param {Function} callback
- * @param {string} passage
- */
- customButton(name, callback, passage) {
- this.valuePairs.push({
- name: name, value: passage, callback: callback, mode: "custom"
- });
- return this;
- }
+ /**
+ * Adds a button that executes the callback when clicked AND reloads the passage
+ *
+ * @param {string} name
+ * @param {Function} callback
+ * @param {string} passage
+ */
+ customButton(name, callback, passage) {
+ this.valuePairs.push({
+ name: name, value: passage, callback: callback, mode: "custom"
+ });
+ return this;
+ }
- /**
- * @param {string} element can be SC markup
- * @returns {Option}
- */
- addCustomElement(element) {
- this.valuePairs.push({value: element, mode: "plain"});
- return this;
- }
+ /**
+ * @param {string} element can be SC markup
+ * @returns {Option}
+ */
+ addCustomElement(element) {
+ this.valuePairs.push({
+ value: element, mode: "plain"
+ });
+ return this;
+ }
- /* modify last added option */
+ /* modify last added option */
- /**
- * Added to the description if last added value is selected.
- * example use: addValue(...).customDescription(...).addValue(...).customDescription(...)
- * @param {string} description can be SC markup
- */
- customDescription(description) {
- this.valuePairs.last().descAppend = description;
- return this;
- }
+ /**
+ * Added to the description if last added value is selected.
+ * example use: addValue(...).customDescription(...).addValue(...).customDescription(...)
+ * @param {string} description can be SC markup
+ */
+ customDescription(description) {
+ this.valuePairs.last().descAppend = description;
+ return this;
+ }
- /**
- * @param {Function} callback gets executed on every button click. Selected value is given as argument.
- */
- addCallback(callback) {
- this.valuePairs.last().callback = callback;
- return this;
- }
+ /**
+ * @param {Function} callback gets executed on every button click. Selected value is given as argument.
+ */
+ addCallback(callback) {
+ this.valuePairs.last().callback = callback;
+ return this;
+ }
- /**
- * Mark option as on to style differently.
- * @returns {Option}
- */
- on() {
- this.valuePairs.last().on = true;
- return this;
- }
+ /**
+ * Mark option as on to style differently.
+ * @returns {Option}
+ */
+ on() {
+ this.valuePairs.last().on = true;
+ return this;
+ }
- /**
- * Mark option as off to style differently.
- * @returns {Option}
- */
- off() {
- this.valuePairs.last().off = true;
- return this;
- }
+ /**
+ * Mark option as off to style differently.
+ * @returns {Option}
+ */
+ off() {
+ this.valuePairs.last().off = true;
+ return this;
+ }
+
+ /**
+ * Mark option as neutral to style differently.
+ * @returns {Option}
+ */
+ neutral() {
+ this.valuePairs.last().neutral = true;
+ return this;
+ }
+ };
+ return class {
+ constructor() {
/**
- * Mark option as neutral to style differently.
- * @returns {Option}
+ * @type {Array<Option>}
*/
- neutral() {
- this.valuePairs.last().neutral = true;
- return this;
- }
- };
+ this.options = [];
+ }
- return class {
- constructor() {
- /**
- * @type {Array<Option>}
- */
- this.options = [];
- }
+ /**
+ * @returns {App.UI.OptionsGroup}
+ */
+ enableDoubleColumn() {
+ this.doubleColumn = true;
+ return this;
+ }
- /**
- * @returns {App.UI.OptionsGroup}
- */
- enableDoubleColumn() {
- this.doubleColumn = true;
- return this;
- }
+ addOption(name, property, object = V) {
+ const option = new Option(name, property, object);
+ this.options.push(option);
+ return option;
+ }
- addOption(name, property, object = V) {
- const option = new Option(name, property, object);
- this.options.push(option);
- return option;
+ render() {
+ const container = document.createElement("div");
+ container.className = "options-group";
+ if (this.doubleColumn) {
+ container.classList.add("double");
}
+ for (/** @type {Option} */ const option of this.options) {
+ /* left side */
+ const desc = document.createElement("div");
+ desc.className = "description";
+ $(desc).wiki(option.description);
+ container.append(desc);
- render() {
- const container = document.createElement("div");
- container.className = "options-group";
- if (this.doubleColumn) {
- container.classList.add("double");
- }
- for (/** @type {Option} */ const option of this.options) {
- /* left side */
- const desc = document.createElement("div");
- desc.className = "description";
- $(desc).wiki(option.description);
- container.append(desc);
-
- /* right side */
- const currentValue = option.object[option.property];
- let anySelected = false;
+ /* right side */
+ const currentValue = option.object[option.property];
+ let anySelected = false;
- const buttonGroup = document.createElement("div");
- buttonGroup.classList.add("button-group");
- for (const value of option.valuePairs) {
- if (value.mode === "plain") {
- /* insert custom SC markup and go to next element */
- $(buttonGroup).wiki(value.value);
- continue;
- }
- const button = document.createElement("button");
- button.append(value.name);
- if (value.on) {
- button.classList.add("on");
- } else if (value.off) {
- button.classList.add("off");
- } else if (value.neutral) {
- button.classList.add("neutral");
+ const buttonGroup = document.createElement("div");
+ buttonGroup.classList.add("button-group");
+ for (const value of option.valuePairs) {
+ if (value.mode === "plain") {
+ /* insert custom SC markup and go to next element */
+ $(buttonGroup).wiki(value.value);
+ continue;
+ }
+ const button = document.createElement("button");
+ button.append(value.name);
+ if (value.on) {
+ button.classList.add("on");
+ } else if (value.off) {
+ button.classList.add("off");
+ } else if (value.neutral) {
+ button.classList.add("neutral");
+ }
+ if (value.mode === "custom") {
+ button.onclick = () => {
+ value.callback();
+ if (value.value) {
+ Engine.play(value.value);
+ } else {
+ reload();
+ }
+ };
+ } else {
+ if (value.mode === "=" && currentValue === value.value) {
+ button.classList.add("selected", "disabled");
+ anySelected = true;
+ if (value.descAppend !== undefined) {
+ desc.append(" ");
+ $(desc).wiki(value.descAppend);
+ }
+ } else if (!anySelected && inRange(value.mode, value.compareValue, currentValue)) {
+ button.classList.add("selected");
+ // disable the button if clicking it won't change the variable value
+ if (currentValue === value.value) {
+ button.classList.add("disabled");
+ }
+ anySelected = true;
+ if (value.descAppend !== undefined) {
+ desc.append(" ");
+ $(desc).wiki(value.descAppend);
+ }
}
- if (value.mode === "custom") {
- button.onclick = () => {
+ button.onclick = () => {
+ option.object[option.property] = value.value;
+ if (value.callback) {
value.callback();
- if (value.value) {
- Engine.play(value.value);
- } else {
- reload();
- }
- };
- } else {
- if (value.mode === "=" && currentValue === value.value) {
- button.classList.add("selected", "disabled");
- anySelected = true;
- if (value.descAppend !== undefined) {
- desc.append(" ");
- $(desc).wiki(value.descAppend);
- }
- } else if (!anySelected && inRange(value.mode, value.compareValue, currentValue)) {
- button.classList.add("selected");
- // disable the button if clicking it won't change the variable value
- if (currentValue === value.value) {
- button.classList.add("disabled");
- }
- anySelected = true;
- if (value.descAppend !== undefined) {
- desc.append(" ");
- $(desc).wiki(value.descAppend);
- }
}
- button.onclick = () => {
- option.object[option.property] = value.value;
- if (value.callback) {
- value.callback();
- }
- reload();
- };
- }
- buttonGroup.append(button);
- }
- if (option.textbox) {
- const isNumber = typeof currentValue === "number";
- const textbox = App.UI.DOM.makeTextBox(currentValue, input => {
- option.object[option.property] = input;
reload();
- }, isNumber);
- if (isNumber) {
- textbox.classList.add("number");
- }
- buttonGroup.append(textbox);
- if (option.unit) {
- buttonGroup.append(" ", option.unit);
- }
+ };
+ }
+ buttonGroup.append(button);
+ }
+ if (option.textbox) {
+ const isNumber = typeof currentValue === "number";
+ const textbox = App.UI.DOM.makeTextBox(currentValue, input => {
+ option.object[option.property] = input;
+ reload();
+ }, isNumber);
+ if (isNumber) {
+ textbox.classList.add("number");
}
- if (option.comment) {
- const comment = document.createElement("span");
- comment.classList.add("comment");
- $(comment).wiki(option.comment);
- buttonGroup.append(comment);
+ buttonGroup.append(textbox);
+ if (option.unit) {
+ buttonGroup.append(" ", option.unit);
}
- container.append(buttonGroup);
}
+ if (option.comment) {
+ const comment = document.createElement("span");
+ comment.classList.add("comment");
+ $(comment).wiki(option.comment);
+ buttonGroup.append(comment);
+ }
+ container.append(buttonGroup);
+ }
- return container;
+ return container;
- function reload() {
- const position = window.pageYOffset;
- Engine.play(passage());
- window.scrollTo(0, position);
- }
+ function reload() {
+ const position = window.pageYOffset;
+ Engine.play(passage());
+ window.scrollTo(0, position);
+ }
- function inRange(mode, compareValue, value) {
- if (mode === "<") {
- return value < compareValue;
- } else if (mode === "<=") {
- return value <= compareValue;
- } else if (mode === ">") {
- return value > compareValue;
- } else if (mode === ">=") {
- return value >= compareValue;
- }
- return false;
+ function inRange(mode, compareValue, value) {
+ if (mode === "<") {
+ return value < compareValue;
+ } else if (mode === "<=") {
+ return value <= compareValue;
+ } else if (mode === ">") {
+ return value > compareValue;
+ } else if (mode === ">=") {
+ return value >= compareValue;
}
+ return false;
}
- };
- }
-)();
+ }
+ };
+})();
--
GitLab