From 7b7f0f7184dc17bb847b5fc577528c3a7a083323 Mon Sep 17 00:00:00 2001
From: ezsh <ezsh.junk@gmail.com>
Date: Thu, 6 Jun 2019 23:52:51 +0200
Subject: [PATCH] Add boolean switch class to RA options
---
src/003-assets/CSS/RAoptions.css | 48 ++++++++++++++++++
src/js/rulesAssistantOptions.js | 87 +++++++++++++++++++++++++-------
2 files changed, 117 insertions(+), 18 deletions(-)
create mode 100644 src/003-assets/CSS/RAoptions.css
diff --git a/src/003-assets/CSS/RAoptions.css b/src/003-assets/CSS/RAoptions.css
new file mode 100644
index 00000000000..b09c1b289e9
--- /dev/null
+++ b/src/003-assets/CSS/RAoptions.css
@@ -0,0 +1,48 @@
+.ra-onoffswitch {
+ display: inline-block;
+ position: relative; width: 4em;
+ vertical-align: middle;
+ -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+.ra-onoffswitch-checkbox {
+ display: none;
+}
+.ra-onoffswitch-label {
+ display: block; overflow: hidden; cursor: pointer;
+ border: 2px solid #999999; border-radius: 2px;
+}
+.ra-onoffswitch-inner {
+ display: block; width: 200%; margin-left: -100%;
+ transition: margin 0.3s ease-in 0s;
+}
+.ra-onoffswitch-inner:before, .ra-onoffswitch-inner:after {
+ display: block; float: left; width: 50%; height: 3.5ex; padding: 0; line-height: 3.5ex;
+ font-size: x-small; color: white; font-family: FreeSans, sans-serif; font-weight: bold;
+ box-sizing: border-box;
+}
+.ra-onoffswitch-inner:before {
+ content: "ON";
+ padding-left: 7px;
+ background-color: #111111; color: #FFFFFF;
+}
+.ra-onoffswitch-inner:after {
+ content: "OFF";
+ padding-right: 7px;
+ background-color: #111111; color: #D9D9D9;
+ text-align: right;
+}
+.ra-onoffswitch-switch {
+ display: block; width: 1.5em; margin: 1px;
+ background: #8A8A8A;
+ position: absolute; top: 0; bottom: 0;
+ right: 2.1em;
+ border: 2px solid #414141; border-radius: 2px;
+ transition: all 0.3s ease-in 0s;
+}
+.ra-onoffswitch-checkbox:checked + .ra-onoffswitch-label .ra-onoffswitch-inner {
+ margin-left: 0;
+}
+.ra-onoffswitch-checkbox:checked + .ra-onoffswitch-label .ra-onoffswitch-switch {
+ right: 0px;
+ background-color: #2D80E0;
+}
diff --git a/src/js/rulesAssistantOptions.js b/src/js/rulesAssistantOptions.js
index 16871bd1809..5d5751b8bf2 100644
--- a/src/js/rulesAssistantOptions.js
+++ b/src/js/rulesAssistantOptions.js
@@ -414,6 +414,69 @@ window.rulesAssistantOptions = (function() {
}
}
+ class BooleanSwitch extends Element {
+ /**
+ * @param {string} prefix
+ * @param {Array} values values for "false" and "true"
+ */
+ constructor(prefix, values = [false, true]) {
+ super(prefix);
+
+ /** @private */
+ this.values_ = {
+ false: values[0],
+ true: values[1]
+ };
+ }
+
+ render(prefix) {
+ const elem = document.createElement("div");
+ const label = document.createElement("span");
+ label.innerHTML = `${prefix}: `;
+ let switchContainer = document.createElement("div");
+ switchContainer.className = "ra-onoffswitch";
+ this.checkBox_ = document.createElement("input");
+ this.checkBox_.type = "checkbox";
+ this.checkBox_.className = "ra-onoffswitch-checkbox";
+ this.checkBox_.id = `ra-option-${prefix}`;
+ let switchLabel = document.createElement("label");
+ switchLabel.className = "ra-onoffswitch-label";
+ switchLabel.htmlFor = this.checkBox_.id;
+ let innerSpan = document.createElement("span");
+ innerSpan.className = "ra-onoffswitch-inner";
+ let switchSpan = document.createElement("span");
+ switchSpan.className = "ra-onoffswitch-switch";
+ switchLabel.appendChild(innerSpan);
+ switchLabel.appendChild(switchSpan);
+ elem.appendChild(label);
+ switchContainer.appendChild(this.checkBox_);
+ switchContainer.appendChild(switchLabel);
+ elem.appendChild(switchContainer);
+ elem.classList.add("rajs-list");
+
+ this.checkBox_.onchange = () => { this.inputEdited();}
+ return elem;
+ }
+
+ getData() {
+ return this.values_[this.checkBox_.checked];
+ }
+
+ setValue(what) {
+ this.checkBox_.checked = this.values_[true] === what;
+ }
+
+ inputEdited() {
+ this.propagateChange();
+ }
+
+ propagateChange() {
+ if (this.onchange instanceof Function) {
+ this.onchange(this.getData());
+ }
+ }
+ }
+
class NumberRange extends EditorWithShortcuts {
/**
* @param {string} prefix
@@ -1752,37 +1815,25 @@ window.rulesAssistantOptions = (function() {
}
}
- class AutosurgerySwitch extends List {
+ class AutosurgerySwitch extends BooleanSwitch {
constructor() {
- const pairs = [
- ["on", 1],
- ["off", 0],
- ];
- super("Assistant-applied implants (Autosurgery global switch)", pairs, false, false, true);
+ super("Assistant-applied implants (Autosurgery global switch)", [0, 1]);
this.setValue(current_rule.set.autoSurgery);
this.onchange = (value) => current_rule.set.autoSurgery = value;
}
}
- class IntensiveGrowthSwitch extends List {
+ class IntensiveGrowthSwitch extends BooleanSwitch {
constructor() {
- const pairs = [
- ["no", 0],
- ["yes", 1],
- ];
- super("Use intensive growth drugs for healthy slaves", pairs, false, false, true);
+ super("Use intensive growth drugs for healthy slaves", [0, 1]);
this.setValue(current_rule.set.growth.intensity);
this.onchange = (value) => current_rule.set.growth.intensity = value;
}
}
- class HyperGrowthSwitch extends List {
+ class HyperGrowthSwitch extends BooleanSwitch {
constructor() {
- const pairs = [
- ["no", 0],
- ["yes", 1],
- ];
- super("Use hyper growth drugs", pairs, false, false, true);
+ super("Use hyper growth drugs", [0, 1]);
this.setValue(current_rule.set.hyper_drugs);
this.onchange = (value) => current_rule.set.hyper_drugs = value;
}
--
GitLab