Basic frontend
I'm sorry for the big commit - Added yarte templating engine - Wrote frontend: all HTML except file input area, basic CSS (themes soon), JS. No client-side encryption yet. And no working API. - Simple but handy build system in Makefile (requires pacman -S entr / apt install entr)
This commit is contained in:
parent
4b6b3f7da4
commit
96376f2fba
12 changed files with 805 additions and 11 deletions
29
static/script.js
Normal file
29
static/script.js
Normal file
|
@ -0,0 +1,29 @@
|
|||
addEventListener('DOMContentLoaded', () => {
|
||||
// show password while user holds button
|
||||
const showPswdBtns = document.getElementsByClassName('show-pswd')
|
||||
for (let el of showPswdBtns) {
|
||||
const inp = document.getElementById(el.dataset.input)
|
||||
el.addEventListener('mousedown', () => inp.type = 'text')
|
||||
el.addEventListener('mouseup', () => inp.type = 'password')
|
||||
}
|
||||
|
||||
// add file input by cloning #file-tmpl-js (see index.hbs)
|
||||
const filesContainer = document.querySelector('#tab-file>.form-main')
|
||||
const fileTemplate = document.querySelector('#file-tmpl-js>div')
|
||||
document.getElementById('add-file').addEventListener('click', () => {
|
||||
filesContainer.append(fileTemplate.cloneNode(true))
|
||||
})
|
||||
|
||||
// make tabs usable from keyboard:
|
||||
// when focused on label, space or enter triggers
|
||||
// click on hidden input[type=radio]
|
||||
const tabLabels = document.querySelectorAll('header>label')
|
||||
for (let el of tabLabels) {
|
||||
const inp = document.getElementById(el.htmlFor)
|
||||
el.addEventListener('keyup', (ev) => {
|
||||
if (ev.key == " " || ev.key == "Enter") {
|
||||
inp.click()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
Loading…
Add table
Add a link
Reference in a new issue