diff options
Diffstat (limited to 'assets/js/core')
-rw-r--r-- | assets/js/core/bootstrap.js | 5 | ||||
-rw-r--r-- | assets/js/core/dom.js | 120 | ||||
-rw-r--r-- | assets/js/core/kb.js | 60 |
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"; +}; |