1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
function dataBind(el, dataObject) {
function boolValue(prop) {
return prop.charAt(0) === '!' ? !dataObject[prop.substr(1)] : dataObject[prop];
}
if (typeof el === 'string') {
el = document.querySelector(el)
}
for (let tag of el.querySelectorAll('[data-bind]')) {
let prop = tag.getAttribute('data-bind');
if (tag.tagName.toLowerCase() === 'input') {
if (tag.getAttribute('type').toLowerCase() === 'radio') {
tag.checked = dataObject[prop] === tag.getAttribute('value');
} else if (tag.getAttribute('type').toLowerCase() === 'checkbox') {
tag.checked = dataObject[prop];
} else {
tag.value = dataObject[prop];
}
} else if (tag.tagName.toLowerCase() === 'select') {
for (let opt of tag.querySelectorAll('option')) {
if (opt.getAttribute('value') === dataObject[prop]) {
opt.setAttribute('selected', 'selected');
} else {
opt.removeAttribute('selected');
}
}
} else if (Array.isArray(dataObject[prop])) {
//Array of values, check any checkboxes in child elements
for (let checkbox of tag.querySelectorAll('input[type="checkbox"')) {
checkbox.checked = dataObject[prop].includes(checkbox.getAttribute('value'));
}
} else {
tag.textContent = dataObject[prop];
}
}
for (let tag of el.querySelectorAll('[data-show]')) {
let shouldShow = boolValue(tag.getAttribute('data-show'));
tag.style.display = shouldShow ? '' : 'none';
}
for (let tag of el.querySelectorAll('[data-disabled]')) {
let isDisabled = boolValue(tag.getAttribute('data-disabled'));
if (isDisabled) {
tag.classList.add('disabled');
tag.setAttribute('disabled', 'disabled');
} else {
tag.classList.remove('disabled');
tag.removeAttribute('disabled');
}
}
for (let tag of el.querySelectorAll('[data-class]')) {
let [className, prop] = tag.getAttribute('data-class').split(':');
let shouldHaveClass = boolValue(prop);
if (shouldHaveClass) {
tag.classList.add(className);
} else {
tag.classList.remove(className);
}
}
}
function show(id) {
let el = document.querySelector(id);
el.style.display = 'block';
}
function hide(id) {
let el = document.querySelector(id);
el.style.display = 'none';
}
function el(query) {
return document.querySelector(query);
}
function showForm(selector, dataObject) {
dataBind(selector, dataObject);
el('#blur-wrapper').classList.add('blur');
show('#cover');
show(selector);
}
function move(arr, from, to) {
arr.splice(to, 0, arr.splice(from, 1)[0]);
}
function hideForm(selector) {
hide('#cover');
hide(selector);
el('#blur-wrapper').classList.remove('blur');
}
// Shows a message bar above the list of redirects.
function showMessage(message, success) {
let messageBox = document.getElementById('message-box');
dataBind('#message-box', {message});
if (success) {
messageBox.className = 'visible success';
} else {
messageBox.className = 'visible error';
}
let timer = 20;
//Remove the message in 20 seconds if it hasn't been changed...
setTimeout(function() {
if (el('#message').textContent === message) {
messageBox.className = ''; //Removing .visible removes the box...
}
}, timer * 1000);
}
function hideMessage() {
el('#message-box').className = '';
}
|
