updated settings class and user can now remove pfp
This commit is contained in:
MathMan05
parent
39f7a3701a
commit
e11cd2e0c1
10 changed files with 537 additions and 72 deletions
|
|
@ -4,6 +4,7 @@ class Buttons {
|
|||
buttons;
|
||||
buttonList;
|
||||
warndiv;
|
||||
value;
|
||||
constructor(name) {
|
||||
this.buttons = [];
|
||||
this.name = name;
|
||||
|
|
@ -61,6 +62,7 @@ class Buttons {
|
|||
this.warndiv = html;
|
||||
this.buttonList.append(html);
|
||||
}
|
||||
watchForChange() { }
|
||||
save() { }
|
||||
submit() {
|
||||
}
|
||||
|
|
@ -69,11 +71,11 @@ class TextInput {
|
|||
label;
|
||||
owner;
|
||||
onSubmit;
|
||||
textContent;
|
||||
value;
|
||||
input;
|
||||
constructor(label, onSubmit, owner, { initText = "" } = {}) {
|
||||
this.label = label;
|
||||
this.textContent = initText;
|
||||
this.value = initText;
|
||||
this.owner = owner;
|
||||
this.onSubmit = onSubmit;
|
||||
}
|
||||
|
|
@ -83,7 +85,7 @@ class TextInput {
|
|||
span.textContent = this.label;
|
||||
div.append(span);
|
||||
const input = document.createElement("input");
|
||||
input.value = this.textContent;
|
||||
input.value = this.value;
|
||||
input.type = "text";
|
||||
input.oninput = this.onChange.bind(this);
|
||||
this.input = new WeakRef(input);
|
||||
|
|
@ -96,7 +98,7 @@ class TextInput {
|
|||
if (input) {
|
||||
const value = input.value;
|
||||
this.onchange(value);
|
||||
this.textContent = value;
|
||||
this.value = value;
|
||||
}
|
||||
}
|
||||
onchange = _ => { };
|
||||
|
|
@ -104,7 +106,49 @@ class TextInput {
|
|||
this.onchange = func;
|
||||
}
|
||||
submit() {
|
||||
this.onSubmit(this.textContent);
|
||||
this.onSubmit(this.value);
|
||||
}
|
||||
}
|
||||
class CheckboxInput {
|
||||
label;
|
||||
owner;
|
||||
onSubmit;
|
||||
value;
|
||||
input;
|
||||
constructor(label, onSubmit, owner, { initState = false } = {}) {
|
||||
this.label = label;
|
||||
this.value = initState;
|
||||
this.owner = owner;
|
||||
this.onSubmit = onSubmit;
|
||||
}
|
||||
generateHTML() {
|
||||
const div = document.createElement("div");
|
||||
const span = document.createElement("span");
|
||||
span.textContent = this.label;
|
||||
div.append(span);
|
||||
const input = document.createElement("input");
|
||||
input.type = "checkbox";
|
||||
input.checked = this.value;
|
||||
input.oninput = this.onChange.bind(this);
|
||||
this.input = new WeakRef(input);
|
||||
div.append(input);
|
||||
return div;
|
||||
}
|
||||
onChange(ev) {
|
||||
this.owner.changed();
|
||||
const input = this.input.deref();
|
||||
if (input) {
|
||||
const value = input.checked;
|
||||
this.onchange(value);
|
||||
this.value = value;
|
||||
}
|
||||
}
|
||||
onchange = _ => { };
|
||||
watchForChange(func) {
|
||||
this.onchange = func;
|
||||
}
|
||||
submit() {
|
||||
this.onSubmit(this.value);
|
||||
}
|
||||
}
|
||||
class ButtonInput {
|
||||
|
|
@ -112,6 +156,7 @@ class ButtonInput {
|
|||
owner;
|
||||
onClick;
|
||||
textContent;
|
||||
value;
|
||||
constructor(label, textContent, onClick, owner, {} = {}) {
|
||||
this.label = label;
|
||||
this.owner = owner;
|
||||
|
|
@ -141,6 +186,7 @@ class ColorInput {
|
|||
onSubmit;
|
||||
colorContent;
|
||||
input;
|
||||
value;
|
||||
constructor(label, onSubmit, owner, { initColor = "" } = {}) {
|
||||
this.label = label;
|
||||
this.colorContent = initColor;
|
||||
|
|
@ -165,6 +211,7 @@ class ColorInput {
|
|||
const input = this.input.deref();
|
||||
if (input) {
|
||||
const value = input.value;
|
||||
this.value = value;
|
||||
this.onchange(value);
|
||||
this.colorContent = value;
|
||||
}
|
||||
|
|
@ -184,6 +231,9 @@ class SelectInput {
|
|||
options;
|
||||
index;
|
||||
select;
|
||||
get value() {
|
||||
return this.index;
|
||||
}
|
||||
constructor(label, onSubmit, options, owner, { defaultIndex = 0 } = {}) {
|
||||
this.label = label;
|
||||
this.index = defaultIndex;
|
||||
|
|
@ -229,11 +279,11 @@ class MDInput {
|
|||
label;
|
||||
owner;
|
||||
onSubmit;
|
||||
textContent;
|
||||
value;
|
||||
input;
|
||||
constructor(label, onSubmit, owner, { initText = "" } = {}) {
|
||||
this.label = label;
|
||||
this.textContent = initText;
|
||||
this.value = initText;
|
||||
this.owner = owner;
|
||||
this.onSubmit = onSubmit;
|
||||
}
|
||||
|
|
@ -244,7 +294,7 @@ class MDInput {
|
|||
div.append(span);
|
||||
div.append(document.createElement("br"));
|
||||
const input = document.createElement("textarea");
|
||||
input.value = this.textContent;
|
||||
input.value = this.value;
|
||||
input.oninput = this.onChange.bind(this);
|
||||
this.input = new WeakRef(input);
|
||||
div.append(input);
|
||||
|
|
@ -256,7 +306,7 @@ class MDInput {
|
|||
if (input) {
|
||||
const value = input.value;
|
||||
this.onchange(value);
|
||||
this.textContent = value;
|
||||
this.value = value;
|
||||
}
|
||||
}
|
||||
onchange = _ => { };
|
||||
|
|
@ -264,7 +314,7 @@ class MDInput {
|
|||
this.onchange = func;
|
||||
}
|
||||
submit() {
|
||||
this.onSubmit(this.textContent);
|
||||
this.onSubmit(this.value);
|
||||
}
|
||||
}
|
||||
class FileInput {
|
||||
|
|
@ -272,10 +322,13 @@ class FileInput {
|
|||
owner;
|
||||
onSubmit;
|
||||
input;
|
||||
constructor(label, onSubmit, owner, {} = {}) {
|
||||
value;
|
||||
clear;
|
||||
constructor(label, onSubmit, owner, { clear = false } = {}) {
|
||||
this.label = label;
|
||||
this.owner = owner;
|
||||
this.onSubmit = onSubmit;
|
||||
this.clear = clear;
|
||||
}
|
||||
generateHTML() {
|
||||
const div = document.createElement("div");
|
||||
|
|
@ -287,12 +340,26 @@ class FileInput {
|
|||
input.oninput = this.onChange.bind(this);
|
||||
this.input = new WeakRef(input);
|
||||
div.append(input);
|
||||
if (this.clear) {
|
||||
const button = document.createElement("button");
|
||||
button.textContent = "Clear";
|
||||
button.onclick = _ => {
|
||||
if (this.onchange) {
|
||||
this.onchange(null);
|
||||
}
|
||||
;
|
||||
this.value = null;
|
||||
this.owner.changed();
|
||||
};
|
||||
div.append(button);
|
||||
}
|
||||
return div;
|
||||
}
|
||||
onChange(ev) {
|
||||
this.owner.changed();
|
||||
const input = this.input.deref();
|
||||
if (this.onchange && input) {
|
||||
this.value = input.files;
|
||||
this.onchange(input.files);
|
||||
}
|
||||
}
|
||||
|
|
@ -310,6 +377,7 @@ class FileInput {
|
|||
class HtmlArea {
|
||||
submit;
|
||||
html;
|
||||
value;
|
||||
constructor(html, submit) {
|
||||
this.submit = submit;
|
||||
this.html = html;
|
||||
|
|
@ -322,6 +390,8 @@ class HtmlArea {
|
|||
return this.html;
|
||||
}
|
||||
}
|
||||
watchForChange() { }
|
||||
;
|
||||
}
|
||||
class Options {
|
||||
name;
|
||||
|
|
@ -329,12 +399,15 @@ class Options {
|
|||
options;
|
||||
owner;
|
||||
ltr;
|
||||
value;
|
||||
constructor(name, owner, { ltr = false } = {}) {
|
||||
this.name = name;
|
||||
this.options = [];
|
||||
this.owner = owner;
|
||||
this.ltr = ltr;
|
||||
}
|
||||
watchForChange() { }
|
||||
;
|
||||
addOptions(name, { ltr = false } = {}) {
|
||||
const options = new Options(name, this, { ltr });
|
||||
this.options.push(options);
|
||||
|
|
@ -345,8 +418,8 @@ class Options {
|
|||
this.options.push(select);
|
||||
return select;
|
||||
}
|
||||
addFileInput(label, onSubmit, {} = {}) {
|
||||
const FI = new FileInput(label, onSubmit, this, {});
|
||||
addFileInput(label, onSubmit, { clear = false } = {}) {
|
||||
const FI = new FileInput(label, onSubmit, this, { clear });
|
||||
this.options.push(FI);
|
||||
return FI;
|
||||
}
|
||||
|
|
@ -375,6 +448,12 @@ class Options {
|
|||
this.options.push(button);
|
||||
return button;
|
||||
}
|
||||
addCheckboxInput(label, onSubmit, { initState = false } = {}) {
|
||||
const box = new CheckboxInput(label, onSubmit, this, { initState });
|
||||
this.options.push(box);
|
||||
return box;
|
||||
}
|
||||
html = new WeakMap();
|
||||
generateHTML() {
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("titlediv");
|
||||
|
|
@ -387,13 +466,20 @@ class Options {
|
|||
const container = document.createElement("div");
|
||||
container.classList.add(this.ltr ? "flexltr" : "flexttb", "flexspace");
|
||||
for (const thing of this.options) {
|
||||
container.append(thing.generateHTML());
|
||||
const div = document.createElement("div");
|
||||
if (!(thing instanceof Options)) {
|
||||
div.classList.add("optionElement");
|
||||
}
|
||||
const html = thing.generateHTML();
|
||||
div.append(html);
|
||||
this.html.set(thing, new WeakRef(div));
|
||||
container.append(div);
|
||||
}
|
||||
div.append(container);
|
||||
return div;
|
||||
}
|
||||
changed() {
|
||||
if (this.owner instanceof Options) {
|
||||
if (this.owner instanceof Options || this.owner instanceof Form) {
|
||||
this.owner.changed();
|
||||
return;
|
||||
}
|
||||
|
|
@ -424,6 +510,143 @@ class Options {
|
|||
}
|
||||
}
|
||||
}
|
||||
class Form {
|
||||
name;
|
||||
options;
|
||||
owner;
|
||||
ltr;
|
||||
names;
|
||||
required = new WeakSet();
|
||||
submitText;
|
||||
fetchURL;
|
||||
headers;
|
||||
method;
|
||||
value;
|
||||
constructor(name, owner, onSubmit, { ltr = false, submitText = "Submit", fetchURL = "", headers = {}, method = "POST" } = {}) {
|
||||
this.name = name;
|
||||
this.method = method;
|
||||
this.submitText = submitText;
|
||||
this.options = new Options("", this, { ltr });
|
||||
this.owner = owner;
|
||||
this.fetchURL = fetchURL;
|
||||
this.headers = headers;
|
||||
this.ltr = ltr;
|
||||
this.onSubmit = onSubmit;
|
||||
}
|
||||
addSelect(label, formName, selections, { defaultIndex = 0, required = false } = {}) {
|
||||
const select = this.options.addSelect(label, _ => { }, selections, { defaultIndex });
|
||||
this.names.set(formName, select);
|
||||
if (required) {
|
||||
this.required.add(select);
|
||||
}
|
||||
return;
|
||||
}
|
||||
addFileInput(label, formName, { required = false } = {}) {
|
||||
const FI = this.options.addFileInput(label, _ => { }, {});
|
||||
this.names.set(formName, FI);
|
||||
if (required) {
|
||||
this.required.add(FI);
|
||||
}
|
||||
return;
|
||||
}
|
||||
addTextInput(label, formName, { initText = "", required = false } = {}) {
|
||||
const textInput = this.options.addTextInput(label, _ => { }, { initText });
|
||||
this.names.set(formName, textInput);
|
||||
if (required) {
|
||||
this.required.add(textInput);
|
||||
}
|
||||
return;
|
||||
}
|
||||
addColorInput(label, formName, { initColor = "", required = false } = {}) {
|
||||
const colorInput = this.options.addColorInput(label, _ => { }, { initColor });
|
||||
this.names.set(formName, colorInput);
|
||||
if (required) {
|
||||
this.required.add(colorInput);
|
||||
}
|
||||
return;
|
||||
}
|
||||
addMDInput(label, formName, { initText = "", required = false } = {}) {
|
||||
const mdInput = this.options.addMDInput(label, _ => { }, { initText });
|
||||
this.names.set(formName, mdInput);
|
||||
if (required) {
|
||||
this.required.add(mdInput);
|
||||
}
|
||||
return;
|
||||
}
|
||||
addCheckboxInput(label, formName, { initState = false, required = false } = {}) {
|
||||
const box = this.options.addCheckboxInput(label, _ => { }, { initState });
|
||||
this.names.set(formName, box);
|
||||
if (required) {
|
||||
this.required.add(box);
|
||||
}
|
||||
return;
|
||||
}
|
||||
generateHTML() {
|
||||
const div = document.createElement("div");
|
||||
div.append(this.options.generateHTML());
|
||||
const button = document.createElement("button");
|
||||
button.onclick = _ => {
|
||||
this.submit();
|
||||
};
|
||||
button.textContent = this.submitText;
|
||||
div.append(button);
|
||||
return div;
|
||||
}
|
||||
onSubmit;
|
||||
watchForChange(func) {
|
||||
this.onSubmit = func;
|
||||
}
|
||||
;
|
||||
changed() {
|
||||
}
|
||||
submit() {
|
||||
const build = {};
|
||||
for (const thing of this.names.keys()) {
|
||||
const input = this.names.get(thing);
|
||||
build[thing] = input.value;
|
||||
}
|
||||
if (this.fetchURL === "") {
|
||||
fetch(this.fetchURL, {
|
||||
method: this.method,
|
||||
body: JSON.stringify(build)
|
||||
}).then(_ => _.json()).then(json => {
|
||||
if (json.errors) {
|
||||
this.errors(json.errors);
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.onSubmit(build);
|
||||
}
|
||||
console.warn("needs to be implemented");
|
||||
}
|
||||
errors(errors) {
|
||||
for (const error of errors) {
|
||||
const elm = this.names.get(error);
|
||||
if (elm) {
|
||||
const ref = this.options.html.get(elm);
|
||||
if (ref && ref.deref()) {
|
||||
const html = ref.deref();
|
||||
this.makeError(html, error._errors[0].message);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
makeError(e, message) {
|
||||
let element = e.getElementsByClassName("suberror")[0];
|
||||
if (!element) {
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("suberror", "suberrora");
|
||||
e.append(div);
|
||||
element = div;
|
||||
}
|
||||
else {
|
||||
element.classList.remove("suberror");
|
||||
setTimeout(_ => { element.classList.add("suberror"); }, 100);
|
||||
}
|
||||
element.textContent = message;
|
||||
}
|
||||
}
|
||||
class Settings extends Buttons {
|
||||
static Buttons = Buttons;
|
||||
static Options = Options;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue