|
|
|
|
@ -19,6 +19,8 @@ class Input {
|
|
|
|
|
private _el: HTMLInputElement;
|
|
|
|
|
get value(): string { return ""+this._el.value; }
|
|
|
|
|
set value(v: string) { this._el.value = v; }
|
|
|
|
|
// Nothing depends on input, but we add an empty broadcast function so we can just loop over all settings to fix dependents on start.
|
|
|
|
|
broadcast = () => {}
|
|
|
|
|
constructor(el: HTMLElement, placeholder?: any, value?: any, depends?: string, dependsTrue?: boolean, section?: string) {
|
|
|
|
|
this._el = el as HTMLInputElement;
|
|
|
|
|
if (placeholder) { this._el.placeholder = placeholder; }
|
|
|
|
|
@ -41,13 +43,21 @@ class Checkbox {
|
|
|
|
|
private _el: HTMLInputElement;
|
|
|
|
|
get value(): string { return this._el.checked ? "true" : "false"; }
|
|
|
|
|
set value(v: string) { this._el.checked = (v == "true") ? true : false; }
|
|
|
|
|
|
|
|
|
|
private _section: string;
|
|
|
|
|
private _setting: string;
|
|
|
|
|
broadcast = () => {
|
|
|
|
|
if (this._section && this._setting) {
|
|
|
|
|
const ev = new CustomEvent(`settings-${this._section}-${this._setting}`, { "detail": this._el.checked })
|
|
|
|
|
document.dispatchEvent(ev);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
constructor(el: HTMLElement, depends?: string, dependsTrue?: boolean, section?: string, setting?: string) {
|
|
|
|
|
this._el = el as HTMLInputElement;
|
|
|
|
|
if (section && setting) {
|
|
|
|
|
this._el.onchange = () => {
|
|
|
|
|
const ev = new CustomEvent(`settings-${section}-${setting}`, { "detail": this._el.checked })
|
|
|
|
|
document.dispatchEvent(ev);
|
|
|
|
|
};
|
|
|
|
|
this._section = section;
|
|
|
|
|
this._setting = setting;
|
|
|
|
|
this._el.onchange = this.broadcast;
|
|
|
|
|
}
|
|
|
|
|
if (depends) {
|
|
|
|
|
document.addEventListener(`settings-${section}-${depends}`, (event: boolEvent) => {
|
|
|
|
|
@ -71,15 +81,22 @@ class BoolRadios {
|
|
|
|
|
this._els[0].checked = bool;
|
|
|
|
|
this._els[1].checked = !bool;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private _section: string;
|
|
|
|
|
private _setting: string;
|
|
|
|
|
broadcast = () => {
|
|
|
|
|
if (this._section && this._setting) {
|
|
|
|
|
const ev = new CustomEvent(`settings-${this._section}-${this._setting}`, { "detail": this._els[0].checked })
|
|
|
|
|
document.dispatchEvent(ev);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
constructor(name: string, depends?: string, dependsTrue?: boolean, section?: string, setting?: string) {
|
|
|
|
|
this._els = document.getElementsByName(name) as NodeListOf<HTMLInputElement>;
|
|
|
|
|
if (section && setting) {
|
|
|
|
|
const onchange = () => {
|
|
|
|
|
const ev = new CustomEvent(`settings-${section}-${setting}`, { "detail": this._els[0].checked })
|
|
|
|
|
document.dispatchEvent(ev);
|
|
|
|
|
};
|
|
|
|
|
this._els[0].onchange = onchange;
|
|
|
|
|
this._els[1].onchange = onchange;
|
|
|
|
|
this._section = section;
|
|
|
|
|
this._setting = setting;
|
|
|
|
|
this._els[0].onchange = this.broadcast;
|
|
|
|
|
this._els[1].onchange = this.broadcast;
|
|
|
|
|
}
|
|
|
|
|
if (depends) {
|
|
|
|
|
document.addEventListener(`settings-${section}-${depends}`, (event: boolEvent) => {
|
|
|
|
|
@ -103,25 +120,25 @@ class BoolRadios {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class Radios {
|
|
|
|
|
private _el: HTMLInputElement;
|
|
|
|
|
get value(): string { return this._el.value; }
|
|
|
|
|
set value(v: string) { this._el.value = v; }
|
|
|
|
|
constructor(name: string, depends?: string, dependsTrue?: boolean, section?: string) {
|
|
|
|
|
this._el = document.getElementsByName(name)[0] as HTMLInputElement;
|
|
|
|
|
if (depends) {
|
|
|
|
|
document.addEventListener(`settings-${section}-${depends}`, (event: boolEvent) => {
|
|
|
|
|
let el = this._el as HTMLElement;
|
|
|
|
|
if (el.parentElement.tagName == "LABEL") { el = el.parentElement; }
|
|
|
|
|
if (event.detail !== dependsTrue) {
|
|
|
|
|
el.classList.add("unfocused");
|
|
|
|
|
} else {
|
|
|
|
|
el.classList.remove("unfocused");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// class Radios {
|
|
|
|
|
// private _el: HTMLInputElement;
|
|
|
|
|
// get value(): string { return this._el.value; }
|
|
|
|
|
// set value(v: string) { this._el.value = v; }
|
|
|
|
|
// constructor(name: string, depends?: string, dependsTrue?: boolean, section?: string) {
|
|
|
|
|
// this._el = document.getElementsByName(name)[0] as HTMLInputElement;
|
|
|
|
|
// if (depends) {
|
|
|
|
|
// document.addEventListener(`settings-${section}-${depends}`, (event: boolEvent) => {
|
|
|
|
|
// let el = this._el as HTMLElement;
|
|
|
|
|
// if (el.parentElement.tagName == "LABEL") { el = el.parentElement; }
|
|
|
|
|
// if (event.detail !== dependsTrue) {
|
|
|
|
|
// el.classList.add("unfocused");
|
|
|
|
|
// } else {
|
|
|
|
|
// el.classList.remove("unfocused");
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
class Select {
|
|
|
|
|
private _el: HTMLSelectElement;
|
|
|
|
|
@ -136,13 +153,21 @@ class Select {
|
|
|
|
|
set onchange(f: () => void) {
|
|
|
|
|
this._el.addEventListener("change", f);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private _section: string;
|
|
|
|
|
private _setting: string;
|
|
|
|
|
broadcast = () => {
|
|
|
|
|
if (this._section && this._setting) {
|
|
|
|
|
const ev = new CustomEvent(`settings-${this._section}-${this._setting}`, { "detail": this.value ? true : false })
|
|
|
|
|
document.dispatchEvent(ev);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
constructor(el: HTMLElement, depends?: string, dependsTrue?: boolean, section?: string, setting?: string) {
|
|
|
|
|
this._el = el as HTMLSelectElement;
|
|
|
|
|
if (section && setting) {
|
|
|
|
|
this._el.addEventListener("change", () => {
|
|
|
|
|
const ev = new CustomEvent(`settings-${section}-${setting}`, { "detail": this.value ? true : false })
|
|
|
|
|
document.dispatchEvent(ev);
|
|
|
|
|
});
|
|
|
|
|
this._section = section;
|
|
|
|
|
this._setting = setting;
|
|
|
|
|
this._el.addEventListener("change", this.broadcast);
|
|
|
|
|
}
|
|
|
|
|
if (depends) {
|
|
|
|
|
document.addEventListener(`settings-${section}-${depends}`, (event: boolEvent) => {
|
|
|
|
|
@ -246,7 +271,7 @@ const settings = {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const relatedToEmail = Array.from(document.getElementsByClassName("related-to-email"));
|
|
|
|
|
settings["email"]["method"].onchange = () => {
|
|
|
|
|
const emailMethodChange = () => {
|
|
|
|
|
const val = settings["email"]["method"].value;
|
|
|
|
|
const smtp = document.getElementById("email-smtp");
|
|
|
|
|
const mailgun = document.getElementById("email-mailgun");
|
|
|
|
|
@ -254,21 +279,99 @@ settings["email"]["method"].onchange = () => {
|
|
|
|
|
smtp.classList.remove("unfocused");
|
|
|
|
|
mailgun.classList.add("unfocused");
|
|
|
|
|
for (let el of relatedToEmail) {
|
|
|
|
|
el.classList.remove("unfocused");
|
|
|
|
|
el.classList.remove("hidden");
|
|
|
|
|
}
|
|
|
|
|
} else if (val == "mailgun") {
|
|
|
|
|
mailgun.classList.remove("unfocused");
|
|
|
|
|
smtp.classList.add("unfocused");
|
|
|
|
|
for (let el of relatedToEmail) {
|
|
|
|
|
el.classList.remove("unfocused");
|
|
|
|
|
el.classList.remove("hidden");
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
mailgun.classList.add("unfocused");
|
|
|
|
|
smtp.classList.add("unfocused");
|
|
|
|
|
for (let el of relatedToEmail) {
|
|
|
|
|
el.classList.add("unfocused");
|
|
|
|
|
el.classList.add("hidden");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
settings["email"]["method"].onchange = emailMethodChange;
|
|
|
|
|
emailMethodChange();
|
|
|
|
|
|
|
|
|
|
(window as any).settings = settings;
|
|
|
|
|
|
|
|
|
|
for (let section in settings) {
|
|
|
|
|
for (let setting in settings[section]) {
|
|
|
|
|
settings[section][setting].broadcast();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const pageNames: string[][] = [];
|
|
|
|
|
|
|
|
|
|
window.history.replaceState("welcome", "Setup - jfa-go");
|
|
|
|
|
|
|
|
|
|
const changePage = (title: string, pageTitle: string) => {
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
|
const lang = urlParams.get("lang");
|
|
|
|
|
let page = "/#" + title;
|
|
|
|
|
if (lang) { page += "?lang=" + lang; }
|
|
|
|
|
window.history.pushState(title || "welcome", pageTitle, page);
|
|
|
|
|
};
|
|
|
|
|
const cards = Array.from(document.getElementById("page-container").getElementsByClassName("card")) as Array<HTMLDivElement>;
|
|
|
|
|
(window as any).cards = cards;
|
|
|
|
|
window.onpopstate = (event: PopStateEvent) => {
|
|
|
|
|
if (event.state === "welcome") {
|
|
|
|
|
cards[0].classList.remove("unfocused");
|
|
|
|
|
for (let i = 1; i < cards.length; i++) { cards[i].classList.add("unfocused"); }
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < cards.length; i++) {
|
|
|
|
|
if (event.state === pageNames[i][0]) {
|
|
|
|
|
cards[i].classList.remove("unfocused");
|
|
|
|
|
} else {
|
|
|
|
|
cards[i].classList.add("unfocused");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
(() => {
|
|
|
|
|
for (let i = 0; i < cards.length; i++) {
|
|
|
|
|
const card = cards[i];
|
|
|
|
|
const back = card.getElementsByClassName("back")[0] as HTMLSpanElement;
|
|
|
|
|
const next = card.getElementsByClassName("next")[0] as HTMLSpanElement;
|
|
|
|
|
console.log(cards[i]);
|
|
|
|
|
const titleEl = cards[i].querySelector("span.heading") as HTMLElement;
|
|
|
|
|
let title = titleEl.textContent.replace("/", "_").replace(" ", "-");
|
|
|
|
|
if (titleEl.classList.contains("welcome")) {
|
|
|
|
|
title = "";
|
|
|
|
|
}
|
|
|
|
|
let pageTitle = titleEl.textContent + " - jfa-go";
|
|
|
|
|
pageNames.push([title, pageTitle]);
|
|
|
|
|
if (back) { back.addEventListener("click", () => {
|
|
|
|
|
let found = false;
|
|
|
|
|
for (let ind = cards.length - 1; ind >= 0; ind--) {
|
|
|
|
|
cards[ind].classList.add("unfocused");
|
|
|
|
|
if (ind < i && !(cards[ind].classList.contains("hidden")) && !found) {
|
|
|
|
|
cards[ind].classList.remove("unfocused");
|
|
|
|
|
changePage(pageNames[ind][0], pageNames[ind][1]);
|
|
|
|
|
found = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
|
}); }
|
|
|
|
|
if (next) { next.addEventListener("click", () => {
|
|
|
|
|
let found = false;
|
|
|
|
|
for (let ind = 0; ind < cards.length; ind++) {
|
|
|
|
|
cards[ind].classList.add("unfocused");
|
|
|
|
|
if (ind > i && !(cards[ind].classList.contains("hidden")) && !found) {
|
|
|
|
|
cards[ind].classList.remove("unfocused");
|
|
|
|
|
changePage(pageNames[ind][0], pageNames[ind][1]);
|
|
|
|
|
found = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
|
}); }
|
|
|
|
|
}
|
|
|
|
|
})()
|
|
|
|
|
|
|
|
|
|
loadLangSelector("setup");
|
|
|
|
|
|
Harvey Tindall
4 years ago