andrey/album
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Improve UX for tag form.

Browse Source
This commit is contained in:
Rasmus Kaj 2017-11-06 18:20:45 +01:00
parent 94a5654386
commit 1198ea4708
1 changed files with 64 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
admin.js
View File

@ -3,26 +3,26 @@ function rpadmin() {
var details = document.querySelector('.details');
function rotate(event) {
var imgid = details.dataset.imgid;
var angle = event.target.dataset.angle;
var imgid = details.dataset.imgid;
var angle = event.target.dataset.angle;
var r = new XMLHttpRequest();
document.body.classList.add('busy');
r.open('POST', '/adm/rotate');
r.onload = function() {
if (r.status === 200) {
// Yay!
document.location.reload(true);
// Yay!
document.location.reload(true);
} else {
alert("Rotating failed: " + r.status);
alert("Rotating failed: " + r.status);
}
document.body.classList.remove('busy');
}
r.onerror = function() {
alert("Rotating failed.");
alert("Rotating failed.");
document.body.classList.remove('busy');
}
r.ontimeout = function() {
alert("Rotating timed out");
alert("Rotating timed out");
document.body.classList.remove('busy');
}
r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
@ -32,46 +32,47 @@ function rpadmin() {
var list;
function tag_form(event) {
event.target.disabled = true;
var imgid = details.dataset.imgid;
var f = document.createElement("form");
f.action = "/adm/tag";
f.method = "post";
var i = document.createElement("input");
i.type="hidden";
i.name="image";
i.value = imgid;
f.appendChild(i);
i = document.createElement("input");
i.type = "text";
event.target.disabled = true;
var imgid = details.dataset.imgid;
var f = document.createElement("form");
f.action = "/adm/tag";
f.method = "post";
var i = document.createElement("input");
i.type="hidden";
i.name="image";
i.value = imgid;
f.appendChild(i);
i = document.createElement("input");
i.type = "text";
i.autocomplete="off";
i.tabindex="1";
i.name = "tag";
i.addEventListener('keyup', do_complete);
f.appendChild(i);
list = document.createElement("div");
list.className = "completions";
f.appendChild(list);
i.name = "tag";
i.addEventListener('keyup', do_complete);
f.appendChild(i);
list = document.createElement("div");
list.className = "completions";
f.appendChild(list);
f.addEventListener('keypress', e => {
let t = e.target;
switch(e.code) {
case 'ArrowUp':
(t.parentNode == list && t.previousSibling || list.querySelector('a:last-child')).focus();
break;
(t.parentNode == list && t.previousSibling || list.querySelector('a:last-child')).focus();
break;
case 'ArrowDown':
(t.parentNode == list && t.nextSibling || list.querySelector('a:first-child')).focus();
break;
(t.parentNode == list && t.nextSibling || list.querySelector('a:first-child')).focus();
break;
case 'Escape':
i.focus();
break;
list.innerHTML = '';
i.focus();
break;
default:
return true;
return true;
};
e.preventDefault();
e.stopPropagation();
return false;
});
meta.appendChild(f);
meta.appendChild(f);
i.focus();
}
@ -80,7 +81,7 @@ function rpadmin() {
if (c == 'ArrowUp' || c == 'ArrowDown' || c == 'Escape' || c == 'Enter') {
return true;
}
let v = e.target.value;
let i = e.target, v = i.value;
if (v.length > 0) {
let r = new XMLHttpRequest();
r.onload = function() {
@ -90,9 +91,14 @@ function rpadmin() {
let a = document.createElement('a');
a.innerHTML = x;
a.tabIndex = 2;
a.onclick = function() {
e.target.value = x;
a.href = "#";
a.onclick = function(e) {
i.value = x;
list.innerHTML = '';
i.focus();
e.preventDefault();
e.stopPropagation();
return true;
}
list.appendChild(a)
})
@ -109,27 +115,28 @@ function rpadmin() {
var meta = details.querySelector('.meta');
if (meta) {
p = document.createElement("p");
r = document.createElement("button");
r.onclick = rotate;
r.innerHTML = "\u27f2";
r.dataset.angle = "-90";
r.title = "Rotate left";
p.appendChild(r);
p.appendChild(document.createTextNode(" "));
r = document.createElement("button");
r.onclick = rotate;
r.innerHTML = "\u27f3";
r.dataset.angle = "90";
r.title = "Rotate right";
p.appendChild(r);
p = document.createElement("p");
r = document.createElement("button");
r.onclick = rotate;
r.innerHTML = "\u27f2";
r.dataset.angle = "-90";
r.title = "Rotate left";
p.appendChild(r);
p.appendChild(document.createTextNode(" "));
r = document.createElement("button");
r.onclick = rotate;
r.innerHTML = "\u27f3";
r.dataset.angle = "90";
r.title = "Rotate right";
p.appendChild(r);
p.appendChild(document.createTextNode(" "));
r = document.createElement("button");
r.onclick = tag_form;
r.innerHTML = "🏷";
r.title = "Tag photo";
p.appendChild(r);
meta.appendChild(p);
p.appendChild(document.createTextNode(" "));
r = document.createElement("button");
r.onclick = tag_form;
r.innerHTML = "🏷";
r.title = "Tag photo";
r.accessKey = "T";
p.appendChild(r);
meta.appendChild(p);
}
}