aboutsummaryrefslogtreecommitdiff
path: root/js/util.js
diff options
context:
space:
mode:
authorEinar Egilsson <einar@einaregilsson.com>2019-12-11 13:17:42 +0000
committerEinar Egilsson <einar@einaregilsson.com>2019-12-11 13:17:42 +0000
commitb53d093463e94096f16f0fd7656fc88d642faa3d (patch)
treeef8b1a0b8f07c2ab965a805421e1564622ac814f /js/util.js
parentcdb8d5e3d5af6dc2d4d630481c4385734ecc6a1d (diff)
Completely removed angular.js
Diffstat (limited to 'js/util.js')
-rw-r--r--js/util.js111
1 files changed, 111 insertions, 0 deletions
diff --git a/js/util.js b/js/util.js
new file mode 100644
index 0000000..d8ad0db
--- /dev/null
+++ b/js/util.js
@@ -0,0 +1,111 @@
+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 {
+ 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.innerHTML = 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 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').innerHTML === message) {
+ messageBox.className = ''; //Removing .visible removes the box...
+ }
+ }, timer * 1000);
+}
+
+function hideMessage() {
+ el('#message-box').className = '';
+} \ No newline at end of file