blue/fantasy
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

ui elements to create form for settings, clear button

Browse source
This commit is contained in:
Blue 2018-11-20 14:42:02 +03:00
parent ab27e48160
commit 007ed34ed7
8 changed files with 366 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

37
ui/editors/form.js Normal file
View file

@ -0,0 +1,37 @@
import UI from "../ui.js";
class Form extends UI {
constructor(width, height) {
super(document.createElement("div"), width, height);
this.element.classList.add("form");
this._lines = [];
this._linesById = Object.create(null);
}
addLine(id, label, editor) {
let line = document.create("div");
let labelCell = document.create("div");
let editorCell = document.create("div");
labelCell.innerText = label;
editorCell.appendChild(editor.element);
line.appendChild(labelCell);
line.appendChild(editorCell);
let obj = {
id: id,
label: label,
editor: editor,
visible: true,
line: line
};
this._lines.push(obj);
this._linesById[id] = obj;
this.element.appendChild(line);
}
}
export default Form;

106
ui/editors/numericBox.js Normal file
View file

@ -0,0 +1,106 @@
import UI from "../ui.js";
class NumericBox extends UI {
constructor(width, height) {
super(document.createElement("div"), width, height);
this._valid = false;
this._value = true;
this._createInput();
this._bindEvents();
}
destructor() {
this._input.removeEventListener("keyPress", this._boundKeyPress);
this._input.removeEventListener("input", this._boundInput);
delete this._boundKeyPress;
delete this._boundInput;
delete this._input;
super.destructor();
}
get value() {
if (this._valid) {
return this._value;
} else {
throw new Error("An attempt to get value of invalid NumericBox");
}
}
setValue(value) {
let val = parseFloat(value);
this._value = val;
this._input.value = val.toString();
this._valid = true;
}
_bindEvents() {
this._boundInput = this._onInput.bind(this);
this._boundKeyPress = this._onKeyPress.bind(this);
this._input.addEventListener("keyPress", this._boundKeyPress);
this._input.addEventListener("input", this._boundInput);
}
_createInput() {
this._input = document.createElement("div");
this._input.classList.add("numericBox");
this.element.appendChild(this._input);
}
_onInput(e) {
let oldVal = this._value;
let newVal = this._input.value;
if (newVal === "" || newVal === "-" || newVal === ".") {
if (newVal === ".") {
this.setValue(0);
this._input.value += '.';
} else {
this._input.value = newVal;
this._value = null;
this._valid = false;
}
} else if (!newVal.match(/^\-?[0-9]+(\.[0-9]*)?$/)) {
if (oldVal === null) {
this._input.value = "";
this._valid = false;
this._value = null;
} else {
this.setValue(oldVal);
}
} else {
let dotIndex = newVal.indexOf('.');
if (newVal[newVal.length-1] === '.') {
this.setValue(parseFloat(newVal));
this._input.value += '.';
} else if (dotIndex > 0 && newVal[newVal.length-1] === "0") {
this.setValue(parseFloat(newVal));
this._input.value = newVal;
} else {
this.setValue(parseFloat(newVal));
}
}
}
_onKeyPress(e) {
switch (e.charCode) {
case 45: // "-"
case 1102:
case 46: // "."
case 48: //zero
case 49: //other digits
case 50:
case 51:
case 52:
case 53:
case 54:
case 55:
case 56:
case 57:
break;
default:
e.preventDefault();
break;
}
}
}
export default NumericBox;

89
ui/editors/switchBox.js Normal file
View file

@ -0,0 +1,89 @@
import UI from "../ui.js";
class SwitchBox extends UI {
constructor(value, width, height) {
super(document.createElement("div"), width, height);
this._initialized = true;
this._boundClick = this._onClick.bind(this);
this.element.addEventListener("click", this._boundClick, false);
this._createInput();
this._setSize();
this.setValue(value);
}
destructor() {
this.element.removeEventListener("click", this._boundClick);
delete this._boundClick;
delete this._input;
delete this._movable;
delete this._circle;
super.destructor();
}
setSize(width, height) {
super.setSize(width, height);
if (this._initialized) {
this._setSize();
}
}
setValue(val) {
if (this._value !== val) {
this._value = value;
if (this._value) {
this._input.style.backgroundColor = "#00b6ff";
this._movable.style.right = 0 + "px";
} else {
this._input.style.backgroundColor = "#b8b8b8";
this._movable.style.right = (this._iWidth - this._iHeight) + "px";
}
}
}
_createInput() {
this._input = document.createElement("div");
this._input.classList.add("switchBox");
this._movable = document.createElement("div");
this._movable.classList.add("mover");
this._circle = document.createElement("div");
this._circle.classList.add("circle");
this._movable.appendChild(this._circle);
this._input.appendChild(this._movable);
this.element.appendChild(this._input);
}
_onClick() {
this.setValue(!this._value);
}
_setSize() {
let dh = this._width / 2.5;
dh = Math.min(dh, this._height);
let dw = dh * 2.5;
this._iWidth = dw;
this._iHeight = dh;
let circleDiameter = Math.round(dh * 0.80);
this._input.style.width = dw + "px";
this._input.style.height = dh + "px";
this._input.style.borderRadius = dh + "px";
let shift = (this._height - dh) / 2;
this.element.style.paddingTop = shift + "px";
this.element.style.paddingBottom = shift + "px";
this._movable.style.right = (dw - dh) + "px";
shift = (dh - circleDiameter) / 2;
this._circle.style.width = circleDiameter + "px";
this._circle.style.height = circleDiameter + "px";
this._circle.style.right = shift + "px";
this._circle.style.top = shift + "px";
}
}
export default SwitchBox;