Rewrite accordion widget in vanilla Javascript

3 files changed, 185 insertions, 0 deletions

diff --git a/assets/js/core/bootstrap.js b/assets/js/core/bootstrap.js
new file mode 100644
index 00000000..3af086f1
--- /dev/null
+++ b/assets/js/core/bootstrap.js
@@ -0,0 +1,5 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+    KB.render();
+    KB.listen();
+});
diff --git a/assets/js/core/dom.js b/assets/js/core/dom.js
new file mode 100644
index 00000000..821a1d2f
--- /dev/null
+++ b/assets/js/core/dom.js
@@ -0,0 +1,120 @@
+
+KB.dom = function (tag) {
+
+    function DomManipulation(tag) {
+        var element = typeof tag === 'string' ? document.createElement(tag) : tag;
+
+        this.attr = function (attribute, value) {
+            if (value !== null) {
+                element.setAttribute(attribute, value);
+            }
+            return this;
+        };
+
+        this.hide = function () {
+            element.style.display = 'none';
+            return this;
+        };
+
+        this.show = function () {
+            element.style.display = 'block';
+            return this;
+        };
+
+        this.toggle = function () {
+            if (element.style.display === 'none') {
+                this.show();
+            } else{
+                this.hide();
+            }
+
+            return this;
+        };
+
+        this.click = function (callback) {
+            element.onclick = function (e) {
+                e.preventDefault();
+                callback();
+            };
+            return this;
+        };
+
+        this.add = function (node) {
+            element.appendChild(node);
+            return this;
+        };
+
+        this.html = function (html) {
+            element.innerHTML = html;
+            return this;
+        };
+
+        this.text = function (text) {
+            element.appendChild(document.createTextNode(text));
+            return this;
+        };
+
+        this.addClass = function (className) {
+            element.classList.add(className);
+            return this;
+        };
+
+        this.removeClass = function (className) {
+            element.classList.remove(className);
+            return this;
+        };
+
+        this.toggleClass = function (className) {
+            element.classList.toggle(className);
+            return this;
+        };
+
+        this.hasClass = function (className) {
+            return element.classList.contains(className);
+        };
+
+        this.parent = function (selector) {
+            for (; element && element !== document; element = element.parentNode) {
+                if (element.matches(selector)) {
+                    return element;
+                }
+            }
+
+            return null;
+        };
+
+        this.child = function (selector) {
+            return element.querySelector(selector);
+        };
+
+        this.for = function (tag, list) {
+            for (var i = 0; i < list.length; i++) {
+                var dict = list[i];
+
+                if (typeof dict !== 'object') {
+                    element.appendChild(KB.dom(tag).text(dict).build());
+                } else {
+                    var node = KB.dom(tag);
+
+                    for (var attribute in dict) {
+                        if (dict.hasOwnProperty(attribute) && attribute in this && typeof this[attribute] === 'function') {
+                            node[attribute](dict[attribute]);
+                        } else {
+                            node.attr(attribute, dict[attribute]);
+                        }
+                    }
+
+                    element.appendChild(node.build());
+                }
+            }
+
+            return this;
+        };
+
+        this.build = function () {
+            return element;
+        };
+    }
+
+    return new DomManipulation(tag);
+};
diff --git a/assets/js/core/kb.js b/assets/js/core/kb.js
new file mode 100644
index 00000000..ea0dc494
--- /dev/null
+++ b/assets/js/core/kb.js
@@ -0,0 +1,60 @@
+'use strict';
+
+var KB = {
+    components: {},
+    utils: {},
+    clickEvents: {}
+};
+
+KB.onClick = function (selector, callback) {
+    this.clickEvents[selector] = callback;
+};
+
+KB.listen = function () {
+    var self = this;
+
+    function onClick(e) {
+        for (var selector in self.clickEvents) {
+            if (self.clickEvents.hasOwnProperty(selector) && e.target.matches(selector)) {
+                e.preventDefault();
+                self.clickEvents[selector](e);
+            }
+        }
+    }
+
+    document.addEventListener('click', onClick, false);
+};
+
+KB.component = function (name, object) {
+    this.components[name] = object;
+};
+
+KB.render = function () {
+    for (var name in this.components) {
+        var elementList = document.querySelectorAll('.js-' + name);
+
+        for (var i = 0; i < elementList.length; i++) {
+            if (this.components.hasOwnProperty(name)) {
+                var object = this.components[name];
+                var component = new object(elementList[i], JSON.parse(elementList[i].dataset.params));
+
+                component.render();
+                elementList[i].className = elementList[i].className + '-rendered';
+            }
+        }
+    }
+};
+
+KB.utils.formatDuration = function (d) {
+    if (d >= 86400) {
+        return Math.round(d/86400) + "d";
+    }
+    else if (d >= 3600) {
+        return Math.round(d/3600) + "h";
+    }
+    else if (d >= 60) {
+        return Math.round(d/60) + "m";
+    }
+
+    return d + "s";
+};