From c7f5aa2e2bd5cbc093d1face96c9b8e06b3fae6c Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Wed, 27 Jan 2021 00:51:19 +0000 Subject: [PATCH] split into pages, hide email pages when disabled, add history navigation --- html/setup2.html | 35 ++++++---- ts/setup.ts | 177 +++++++++++++++++++++++++++++++++++++---------- 2 files changed, 162 insertions(+), 50 deletions(-) diff --git a/html/setup2.html b/html/setup2.html index 5f1aee2..3d04ab8 100644 --- a/html/setup2.html +++ b/html/setup2.html @@ -16,23 +16,23 @@ -
+
- {{ .lang.StartPage.welcome }} + {{ .lang.StartPage.welcome }}

{{ .lang.StartPage.pressStart }}

-
+
{{ .lang.Language.title }}

-
+
{{ .lang.Login.title }}

{{ .lang.Login.description }}

@@ -95,7 +95,7 @@ {{ .lang.Strings.next }}
-
+
{{ .lang.JellyfinEmby.title }}

{{ .lang.JellyfinEmby.description }}

-
+
{{ .lang.Email.title }}

@@ -181,6 +181,7 @@
+

SMTP

-
+
{{ .lang.Notifications.title }}

{{ .lang.Notifications.description }}

+
-
+
{{ .lang.InviteEmails.title }}

{{ .lang.InviteEmails.description }}

-
+
{{ .lang.PasswordResets.title }}

{{ .lang.PasswordResets.description }}

-
+
{{ .lang.PasswordValidation.title }}

{{ .lang.PasswordValidation.description }}

-
+
{{ .lang.HelpMessages.title }}

{{ .lang.HelpMessages.description }}

-
+
{{ .lang.EndPage.finished }}
@@ -356,6 +364,7 @@

{{ .lang.EndPage.restartMessage }}

+ {{ .lang.Strings.back }} {{ .lang.Strings.submit }}
diff --git a/ts/setup.ts b/ts/setup.ts index cdc8cf7..f417a34 100644 --- a/ts/setup.ts +++ b/ts/setup.ts @@ -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; 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; +(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");