143 lines
4.5 KiB
JavaScript
143 lines
4.5 KiB
JavaScript
// Admin functionality for rphotos
|
|
function rpadmin() {
|
|
var details = document.querySelector('.details');
|
|
|
|
function rotate(event) {
|
|
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);
|
|
} else {
|
|
alert("Rotating failed: " + r.status);
|
|
}
|
|
document.body.classList.remove('busy');
|
|
}
|
|
r.onerror = function() {
|
|
alert("Rotating failed.");
|
|
document.body.classList.remove('busy');
|
|
}
|
|
r.ontimeout = function() {
|
|
alert("Rotating timed out");
|
|
document.body.classList.remove('busy');
|
|
}
|
|
r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
r.send("angle=" + angle + "&image=" + imgid)
|
|
}
|
|
|
|
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";
|
|
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);
|
|
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;
|
|
case 'ArrowDown':
|
|
(t.parentNode == list && t.nextSibling || list.querySelector('a:first-child')).focus();
|
|
break;
|
|
case 'Escape':
|
|
list.innerHTML = '';
|
|
i.focus();
|
|
break;
|
|
default:
|
|
return true;
|
|
};
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
return false;
|
|
});
|
|
meta.appendChild(f);
|
|
i.focus();
|
|
}
|
|
|
|
function do_complete(e) {
|
|
let c = e.code;
|
|
if (c == 'ArrowUp' || c == 'ArrowDown' || c == 'Escape' || c == 'Enter') {
|
|
return true;
|
|
}
|
|
let i = e.target, v = i.value;
|
|
if (v.length > 0) {
|
|
let r = new XMLHttpRequest();
|
|
r.onload = function() {
|
|
let t = JSON.parse(this.responseText);
|
|
list.innerHTML = '';
|
|
t.map(x => {
|
|
let a = document.createElement('a');
|
|
a.innerHTML = x;
|
|
a.tabIndex = 2;
|
|
a.href = "#";
|
|
a.onclick = function(e) {
|
|
i.value = x;
|
|
list.innerHTML = '';
|
|
i.focus();
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
return true;
|
|
}
|
|
list.appendChild(a)
|
|
})
|
|
};
|
|
r.open('GET', document.location.origin + '/ac?q=' + encodeURIComponent(v));
|
|
r.send(null);
|
|
} else {
|
|
list.innerHTML = '';
|
|
}
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
return false;
|
|
}
|
|
|
|
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.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);
|
|
}
|
|
}
|