hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-29 12:30:11 +00:00
Code Issues Projects Releases Wiki Activity

more organisation, add tooltips

Browse Source
This commit is contained in:
Harvey Tindall 2020-12-28 19:56:11 +00:00
parent b0ff1ddfd2
commit 0e2c005e05
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
10 changed files with 140 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -24,6 +24,4 @@ version.go
notes notes
docs/* docs/*
!docs/go.mod !docs/go.mod
js/
main.js*
modal.js*

12
admin.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="light-theme"> <html lang="en" class="light-theme">
<head> <head>
<link rel="stylesheet" type="text/css" href="base.css"> <link rel="stylesheet" type="text/css" href="css/base.css">
<title>jfa-no</title> <title>jfa-no</title>
</head> </head>
<body class="max-w-full overflow-x-hidden section"> <body class="max-w-full overflow-x-hidden section">
@ -348,7 +348,13 @@
</div> </div>
</div> </div>
<div class="setting"> <div class="setting">
<label class="label" for="settings-input">Input <span class="badge ~critical">*</span></label> <label class="label" for="settings-input">
Input <span class="badge ~critical">*</span>
<div class="tooltip">
<i class="icon ri-information-line"></i>
<span class="content sm">An example tooltip.</span>
</div>
</label>
<input type="text" class="input ~neutral !normal mt-half" placeholder="Value"> <input type="text" class="input ~neutral !normal mt-half" placeholder="Value">
</div> </div>
<div class="setting"> <div class="setting">
@ -363,6 +369,6 @@
</div> </div>
</div> </div>
</div> </div>
<script src="js/main.js" type="module"></script> <script src="js/admin.js" type="module"></script>
</body> </body>
</html> </html>

5
base.css → css/base.css
View File

@ -1,7 +1,8 @@
@import "node_modules/a17t/dist/a17t.css"; @import "../node_modules/a17t/dist/a17t.css";
@import "node_modules/remixicon/fonts/remixicon.css"; @import "../node_modules/remixicon/fonts/remixicon.css";
@import "modal.css"; @import "modal.css";
@import "dark.css"; @import "dark.css";
@import "tooltip.css";
:root { :root {
--border-width-default: 2px; --border-width-default: 2px;

0
dark.css → css/dark.css
View File

0
modal.css → css/modal.css
View File

28
css/tooltip.css Normal file
View File

@ -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;
}

2
form.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="light-theme"> <html lang="en" class="light-theme">
<head> <head>
<link rel="stylesheet" type="text/css" href="base.css"> <link rel="stylesheet" type="text/css" href="css/base.css">
<title>create an account - jfa-no</title> <title>create an account - jfa-no</title>
</head> </head>
<body class="max-w-full overflow-x-hidden section"> <body class="max-w-full overflow-x-hidden section">

11
ts/main.ts → ts/admin.ts
View File

@ -1,13 +1,7 @@
import { toggleTheme, loadTheme } from "./modules/theme.js";
import { Modal } from "./modules/modal.js"; import { Modal } from "./modules/modal.js";
function toggleTheme() { loadTheme();
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'); }
(document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme; (document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme;
const whichAnimationEvent = () => { const whichAnimationEvent = () => {
@ -77,6 +71,7 @@ const checkEmailEnabled = function (check: HTMLInputElement, mode = 2) {
check.parentElement.classList.add('~neutral'); check.parentElement.classList.add('~neutral');
} }
}; };
let invEmailEnabled = document.getElementById('inv-email-enabled') as HTMLInputElement; let invEmailEnabled = document.getElementById('inv-email-enabled') as HTMLInputElement;
invEmailEnabled.onchange = () => { checkEmailEnabled(invEmailEnabled, 2); }; invEmailEnabled.onchange = () => { checkEmailEnabled(invEmailEnabled, 2); };

83
ts/modules/common.ts Normal file
View File

@ -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));
}

12
ts/modules/theme.js Normal file
View File

@ -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');
}
}