diff --git a/.gitignore b/.gitignore index 369c849..d7fb509 100644 --- a/.gitignore +++ b/.gitignore @@ -24,6 +24,4 @@ version.go notes docs/* !docs/go.mod - -main.js* -modal.js* +js/ diff --git a/admin.html b/admin.html index 0d2128b..351e581 100644 --- a/admin.html +++ b/admin.html @@ -1,7 +1,7 @@ - + jfa-no @@ -348,7 +348,13 @@
- +
@@ -363,6 +369,6 @@
- + diff --git a/base.css b/css/base.css similarity index 97% rename from base.css rename to css/base.css index 25e4563..227b7e4 100644 --- a/base.css +++ b/css/base.css @@ -1,7 +1,8 @@ -@import "node_modules/a17t/dist/a17t.css"; -@import "node_modules/remixicon/fonts/remixicon.css"; +@import "../node_modules/a17t/dist/a17t.css"; +@import "../node_modules/remixicon/fonts/remixicon.css"; @import "modal.css"; @import "dark.css"; +@import "tooltip.css"; :root { --border-width-default: 2px; diff --git a/dark.css b/css/dark.css similarity index 100% rename from dark.css rename to css/dark.css diff --git a/modal.css b/css/modal.css similarity index 100% rename from modal.css rename to css/modal.css diff --git a/css/tooltip.css b/css/tooltip.css new file mode 100644 index 0000000..e398c5c --- /dev/null +++ b/css/tooltip.css @@ -0,0 +1,28 @@ +.tooltip { + position: relative; + display: inline-block; +} + +.tooltip .content { + visibility: hidden; + max-width: 10rem; + min-width: 6rem; + background-color: rgba(0, 0, 0, 0.6); + color: #fff; + padding: 0.5rem; + border-radius: 6px; + overflow-wrap: break-word; + text-align: center; + + position: absolute; + z-index: 1; + left: 120%; +} + +.tooltip .content.sm { + font-size: 0.8rem; +} + +.tooltip:hover .content { + visibility: visible; +} diff --git a/form.html b/form.html index 4fae877..8d0a0b5 100644 --- a/form.html +++ b/form.html @@ -1,7 +1,7 @@ - + create an account - jfa-no diff --git a/ts/main.ts b/ts/admin.ts similarity index 95% rename from ts/main.ts rename to ts/admin.ts index 8dbf8b5..57bd20f 100644 --- a/ts/main.ts +++ b/ts/admin.ts @@ -1,13 +1,7 @@ +import { toggleTheme, loadTheme } from "./modules/theme.js"; import { Modal } from "./modules/modal.js"; -function toggleTheme() { - document.documentElement.classList.toggle('dark-theme'); - document.documentElement.classList.toggle('light-theme'); - localStorage.setItem('theme', document.documentElement.classList.contains('dark-theme') ? "dark" : "light"); -} - -if (localStorage.getItem('theme') == "dark") { document.documentElement.classList.add('dark-theme'); document.documentElement.classList.remove('light-theme'); } - +loadTheme(); (document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme; const whichAnimationEvent = () => { @@ -77,6 +71,7 @@ const checkEmailEnabled = function (check: HTMLInputElement, mode = 2) { check.parentElement.classList.add('~neutral'); } }; + let invEmailEnabled = document.getElementById('inv-email-enabled') as HTMLInputElement; invEmailEnabled.onchange = () => { checkEmailEnabled(invEmailEnabled, 2); }; diff --git a/ts/modules/common.ts b/ts/modules/common.ts new file mode 100644 index 0000000..39ba0d2 --- /dev/null +++ b/ts/modules/common.ts @@ -0,0 +1,83 @@ +declare var window: Window; + +export function createEl(html: string): HTMLElement { + let div = document.createElement('div') as HTMLDivElement; + div.innerHTML = html; + return div.firstElementChild as HTMLElement; +} + +export function serializeForm(id: string): Object { + const form = document.getElementById(id) as HTMLFormElement; + let formData = {}; + for (let i = 0; i < form.elements.length; i++) { + const el = form.elements[i]; + if ((el as HTMLInputElement).type == "submit") { + continue; + } + let name = (el as HTMLInputElement).name; + if (!name) { + name = el.id; + } + switch ((el as HTMLInputElement).type) { + case "checkbox": + formData[name] = (el as HTMLInputElement).checked; + break; + case "text": + case "password": + case "email": + case "number": + formData[name] = (el as HTMLInputElement).value; + break; + case "select-one": + case "select": + let val: string = (el as HTMLSelectElement).value.toString(); + if (!isNaN(val as any)) { + formData[name] = +val; + } else { + formData[name] = val; + } + break; + } + } + return formData; +} + +export const rmAttr = (el: HTMLElement, attr: string): void => { + if (el.classList.contains(attr)) { + el.classList.remove(attr); + } +}; + +export const addAttr = (el: HTMLElement, attr: string): void => el.classList.add(attr); + +export const _get = (url: string, data: Object, onreadystatechange: () => void): void => { + let req = new XMLHttpRequest(); + req.open("GET", window.URLBase + url, true); + req.responseType = 'json'; + req.setRequestHeader("Authorization", "Bearer " + window.token); + req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); + req.onreadystatechange = onreadystatechange; + req.send(JSON.stringify(data)); +}; + +export const _post = (url: string, data: Object, onreadystatechange: () => void, response?: boolean): void => { + let req = new XMLHttpRequest(); + req.open("POST", window.URLBase + url, true); + if (response) { + req.responseType = 'json'; + } + req.setRequestHeader("Authorization", "Bearer " + window.token); + req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); + req.onreadystatechange = onreadystatechange; + req.send(JSON.stringify(data)); +}; + +export function _delete(url: string, data: Object, onreadystatechange: () => void): void { + let req = new XMLHttpRequest(); + req.open("DELETE", window.URLBase + url, true); + req.setRequestHeader("Authorization", "Bearer " + window.token); + req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); + req.onreadystatechange = onreadystatechange; + req.send(JSON.stringify(data)); +} + diff --git a/ts/modules/theme.js b/ts/modules/theme.js new file mode 100644 index 0000000..9b9075d --- /dev/null +++ b/ts/modules/theme.js @@ -0,0 +1,12 @@ +export function toggleTheme() { + document.documentElement.classList.toggle('dark-theme'); + document.documentElement.classList.toggle('light-theme'); + localStorage.setItem('theme', document.documentElement.classList.contains('dark-theme') ? "dark" : "light"); +} + +export function loadTheme() { + if (localStorage.getItem('theme') == "dark") { + document.documentElement.classList.add('dark-theme'); + document.documentElement.classList.remove('light-theme'); + } +}