Added semi-functional administration pages
This commit is contained in:
@@ -2,7 +2,19 @@
|
||||
var pens = {};
|
||||
|
||||
Array.prototype.forEach.call(document.querySelectorAll('.textarea'), function(editor) {
|
||||
startEditing(editor);
|
||||
var event= editor.dataset.editOn;
|
||||
if (event == 'load') {
|
||||
startEditing(editor);
|
||||
} else {
|
||||
editor.addEventListener(event, function() {
|
||||
if (editor.getAttribute('contenteditable') !== 'true') {
|
||||
startEditing(editor);
|
||||
// for content editable, we need to refocus to show the caret
|
||||
editor.blur();
|
||||
editor.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function startEditing(editor) {
|
||||
@@ -27,6 +39,7 @@
|
||||
'insertimage': 'Image'
|
||||
}
|
||||
});
|
||||
return pens[name];
|
||||
}
|
||||
|
||||
Array.prototype.forEach.call(document.querySelectorAll('form'), function(form) {
|
||||
@@ -45,7 +58,9 @@
|
||||
form.appendChild(textarea);
|
||||
}
|
||||
textarea.value = editor.innerHTML;
|
||||
pens[name].destroy();
|
||||
if (pens[name]) {
|
||||
pens[name].destroy();
|
||||
}
|
||||
});
|
||||
}, false);
|
||||
Array.prototype.forEach.call(form.querySelectorAll('button'), function(button) {
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
(function() {
|
||||
function closeOnTop() {
|
||||
document.documentElement.removeAttribute('data-ontop');
|
||||
document.getElementById('guest_id').value = '';
|
||||
var target = document.querySelector('.on-top-target');
|
||||
target.removeAttribute('style');
|
||||
document.querySelector('body').removeAttribute('style');
|
||||
forEachElement('.on-top-control', function(control) {
|
||||
control.classList.remove('on-top-control');
|
||||
});
|
||||
}
|
||||
forEachElement('#guests .guest', function(guest) {
|
||||
var button = guest.querySelector('.set-host');
|
||||
button.addEventListener('click', function(event) {
|
||||
var target = document.querySelector('.on-top-target');
|
||||
var body = document.querySelector('body');
|
||||
// maintain our current height
|
||||
body.setAttribute('style', 'height: ' + body.clientHeight + 'px');
|
||||
document.documentElement.setAttribute('data-ontop', 'set-host');
|
||||
guest.classList.add('on-top-control');
|
||||
target.setAttribute('style', 'bottom: ' + guest.clientHeight + 'px');
|
||||
document.getElementById('guest_id').value = guest.dataset.id;
|
||||
});
|
||||
});
|
||||
forEachElement('#hosts .host', function(host) {
|
||||
initHost(host);
|
||||
});
|
||||
|
||||
function initHost(host) {
|
||||
forEachElement('.place-guest', function(button) {
|
||||
button.addEventListener('click', function(event) {
|
||||
var guest_id = document.getElementById('guest_id').value;
|
||||
if (guest_id) {
|
||||
var guest = document.getElementById('guest-' + guest_id);
|
||||
var form = document.getElementById('hosts');
|
||||
var data = new FormData(form);
|
||||
|
||||
host.classList.add('requesting');
|
||||
if (guest.dataset.affectedHosts) {
|
||||
data.append('affected-hosts', guest.dataset.affectedHosts);
|
||||
forEach(guest.dataset.affectedHosts.split(','), function(host_id) {
|
||||
h = document.getElementById('host-' + host_id);
|
||||
if (h) {
|
||||
h.classList.add('requesting');
|
||||
}
|
||||
});
|
||||
}
|
||||
data.append('button', button.value);
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
if (request.status == 200) {
|
||||
var response = JSON.parse(request.responseText);
|
||||
for (var host_id in response.hosts) {
|
||||
host_element = document.getElementById('host-' + host_id);
|
||||
widget = response.hosts[host_id];
|
||||
host_element.className = widget.class;
|
||||
host_element.querySelector('.guests').innerHTML = widget.html;
|
||||
initHost(host_element);
|
||||
host_element.classList.remove('requesting');
|
||||
}
|
||||
for (var guest_id in response.affected_hosts) {
|
||||
guest_element = document.getElementById('guest-' + guest_id);
|
||||
if (guest_element) {
|
||||
guest_element.setAttribute('data-affected-hosts', response.affected_hosts[guest_id].join(','));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
request.open('POST', form.getAttribute('action'), true);
|
||||
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
|
||||
request.send(data);
|
||||
}
|
||||
});
|
||||
}, host);
|
||||
}
|
||||
forEachElement('.on-top-close', function(button) {
|
||||
button.addEventListener('click', closeOnTop);
|
||||
});
|
||||
})();
|
||||
@@ -12,7 +12,10 @@
|
||||
);
|
||||
return false;
|
||||
};
|
||||
Array.prototype.forEach.call(document.querySelectorAll('.number-field,.email-field,.text-field'), function(field) {
|
||||
window.forEach = function(a, f) { Array.prototype.forEach.call(a, f) };
|
||||
window.forEachElement = function(s, f, p) { forEach((p || document).querySelectorAll(s), f) };
|
||||
|
||||
forEachElement('.number-field,.email-field,.text-field', function(field) {
|
||||
var input = field.querySelector('input');
|
||||
var positionLabel = function(input) {
|
||||
field.classList[input.value ? 'remove' : 'add']('empty');
|
||||
@@ -29,53 +32,74 @@
|
||||
field.classList.add('focused');
|
||||
});
|
||||
});
|
||||
var body = document.querySelector('body');
|
||||
var primaryContent = document.getElementById('primary-content');
|
||||
|
||||
var overlay = document.getElementById('content-overlay');
|
||||
primaryContent.addEventListener('keydown', function(event) {
|
||||
if (body.classList.contains('has-overlay')) {
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
document.addEventListener('focus', function(event) {
|
||||
if (overlay.querySelector('.dlg.open') && !overlay.querySelector('.dlg.open :focus')) {
|
||||
overlay.querySelector('.dlg.open').focus();
|
||||
}
|
||||
}, true);
|
||||
function openDlg(dlg, link) {
|
||||
body.setAttribute('style', 'width: ' + body.clientWidth + 'px');
|
||||
dlg.querySelector('.message').innerHTML = decodeURI(link.dataset.confirmation);
|
||||
dlg.querySelector('.confirm').setAttribute('href', link.getAttribute('href'));
|
||||
primaryContent.setAttribute('aria-hidden', 'true');
|
||||
document.getElementById('overlay').onclick =
|
||||
dlg.querySelector('.delete').onclick = function() { closeDlg(dlg); };
|
||||
body.classList.add('has-overlay');
|
||||
dlg.removeAttribute('aria-hidden');
|
||||
dlg.setAttribute('role', 'alertdialog');
|
||||
dlg.setAttribute('tabindex', '0');
|
||||
dlg.focus();
|
||||
setTimeout(function() { dlg.classList.add('open'); }, 100);
|
||||
}
|
||||
function closeDlg(dlg) {
|
||||
setTimeout(function() {
|
||||
body.classList.remove('has-overlay');
|
||||
body.removeAttribute('style');
|
||||
}, 250);
|
||||
primaryContent.removeAttribute('aria-hidden');
|
||||
dlg.setAttribute('aria-hidden', 'true');
|
||||
dlg.removeAttribute('tabindex');
|
||||
dlg.classList.remove('open');
|
||||
dlg.removeAttribute('role');
|
||||
}
|
||||
var confirmationDlg = document.getElementById('confirmation-dlg');
|
||||
Array.prototype.forEach.call(document.querySelectorAll('a[data-confirmation]'), function(link) {
|
||||
link.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
openDlg(confirmationDlg, link);
|
||||
return false;
|
||||
if (overlay) {
|
||||
var body = document.querySelector('body');
|
||||
var primaryContent = document.getElementById('primary-content');
|
||||
primaryContent.addEventListener('keydown', function(event) {
|
||||
if (body.classList.contains('has-overlay')) {
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
document.addEventListener('focus', function(event) {
|
||||
if (overlay.querySelector('.dlg.open') && !overlay.querySelector('.dlg.open :focus')) {
|
||||
overlay.querySelector('.dlg.open').focus();
|
||||
}
|
||||
}, true);
|
||||
function openDlg(dlg, link) {
|
||||
body.setAttribute('style', 'width: ' + body.clientWidth + 'px');
|
||||
dlg.querySelector('.message').innerHTML = decodeURI(link.dataset.confirmation);
|
||||
dlg.querySelector('.confirm').addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
if (link.tagName == 'BUTTON') {
|
||||
var form = link.parentElement
|
||||
while (form && form.tagName != 'FORM') {
|
||||
var form = form.parentElement
|
||||
}
|
||||
if (form) {
|
||||
var input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = 'button';
|
||||
input.value = link.value;
|
||||
form.appendChild(input);
|
||||
form.submit();
|
||||
}
|
||||
} else {
|
||||
window.location.href = link.getAttribute('href');
|
||||
}
|
||||
});
|
||||
primaryContent.setAttribute('aria-hidden', 'true');
|
||||
document.getElementById('overlay').onclick =
|
||||
dlg.querySelector('.delete').onclick = function() { closeDlg(dlg); };
|
||||
body.classList.add('has-overlay');
|
||||
dlg.removeAttribute('aria-hidden');
|
||||
dlg.setAttribute('role', 'alertdialog');
|
||||
dlg.setAttribute('tabindex', '0');
|
||||
dlg.focus();
|
||||
setTimeout(function() { dlg.classList.add('open'); }, 100);
|
||||
}
|
||||
function closeDlg(dlg) {
|
||||
setTimeout(function() {
|
||||
body.classList.remove('has-overlay');
|
||||
body.removeAttribute('style');
|
||||
}, 250);
|
||||
primaryContent.removeAttribute('aria-hidden');
|
||||
dlg.setAttribute('aria-hidden', 'true');
|
||||
dlg.removeAttribute('tabindex');
|
||||
dlg.classList.remove('open');
|
||||
dlg.removeAttribute('role');
|
||||
}
|
||||
var confirmationDlg = document.getElementById('confirmation-dlg');
|
||||
forEachElement('[data-confirmation]', function(link) {
|
||||
link.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
openDlg(confirmationDlg, link);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var errorField = document.querySelector('.input-field.has-error input, .input-field.has-error textarea');
|
||||
if (errorField) {
|
||||
@@ -85,9 +109,8 @@
|
||||
var htmlNode = document.documentElement;
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (htmlNode.dataset.input != 'kb' &&
|
||||
!["input", "textarea", "select", "option"].includes(event.target.nodeName.toLowerCase()) &&
|
||||
!event.target.attributes.contenteditable) {
|
||||
console.log()
|
||||
((!["input", "textarea", "select", "option"].includes(event.target.nodeName.toLowerCase()) &&
|
||||
!event.target.attributes.contenteditable) || event.key == "Tab")) {
|
||||
htmlNode.setAttribute('data-input', 'kb');
|
||||
}
|
||||
});
|
||||
@@ -97,7 +120,7 @@
|
||||
htmlNode.setAttribute('data-input', 'mouse');
|
||||
}
|
||||
});
|
||||
Array.prototype.forEach.call(document.querySelectorAll('form.js-xhr'), function(form) {
|
||||
forEachElement('form.js-xhr', function(form) {
|
||||
if (form.addEventListener) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
Reference in New Issue
Block a user