Rewrite task move position component and remove Vuejs

assets/js/core/base.js

@@ -0,0 +1,70 @@
+var KB = {
+    components: {},
+    utils: {},
+    html: {},
+    http: {},
+    listeners: {
+        clicks: {},
+        internals: {}
+    }
+};
+
+KB.on = function (eventType, callback) {
+    if (! this.listeners.internals.hasOwnProperty(eventType)) {
+        this.listeners.internals[eventType] = [];
+    }
+
+    this.listeners.internals[eventType].push(callback);
+};
+
+KB.trigger = function (eventType, eventData) {
+    if (this.listeners.internals.hasOwnProperty(eventType)) {
+        for (var i = 0; i < this.listeners.internals[eventType].length; i++) {
+            if (! this.listeners.internals[eventType][i](eventData)) {
+                break;
+            }
+        }
+    }
+};
+
+KB.onClick = function (selector, callback) {
+    this.listeners.clicks[selector] = callback;
+};
+
+KB.listen = function () {
+    var self = this;
+
+    function onClick(e) {
+        for (var selector in self.listeners.clicks) {
+            if (self.listeners.clicks.hasOwnProperty(selector) && e.target.matches(selector)) {
+                e.preventDefault();
+                self.listeners.clicks[selector](e);
+            }
+        }
+    }
+
+    document.addEventListener('click', onClick, false);
+};
+
+KB.component = function (name, object) {
+    this.components[name] = object;
+};
+
+KB.getComponent = function (name, containerElement, options) {
+    var object = this.components[name];
+    return new object(containerElement, options);
+};
+
+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 component = KB.getComponent(name, elementList[i], JSON.parse(elementList[i].dataset.params));
+                component.render();
+                elementList[i].className = elementList[i].className + '-rendered';
+            }
+        }
+    }
+};

assets/js/core/dom.js

@@ -1,4 +1,3 @@
-
 KB.dom = function (tag) {
 
     function DomManipulation(tag) {
@@ -31,19 +30,33 @@ KB.dom = function (tag) {
             return this;
         };
 
-        this.click = function (callback) {
-            element.onclick = function (e) {
+        this.on = function (eventName, callback) {
+            element.addEventListener(eventName, function (e) {
                 e.preventDefault();
-                callback();
-            };
+                callback(e.target);
+            });
+
             return this;
         };
 
+        this.click = function (callback) {
+            return this.on('click', callback);
+        };
+
+        this.change = function (callback) {
+            return this.on('change', callback);
+        };
+
         this.add = function (node) {
             element.appendChild(node);
             return this;
         };
 
+        this.replace = function (node) {
+            element.parentNode.replaceChild(node, element);
+            return this;
+        };
+
         this.html = function (html) {
             element.innerHTML = html;
             return this;
@@ -73,6 +86,16 @@ KB.dom = function (tag) {
             return element.classList.contains(className);
         };
 
+        this.disable = function () {
+            element.disabled = true;
+            return this;
+        };
+
+        this.enable = function () {
+            element.disabled = false;
+            return this;
+        };
+
         this.parent = function (selector) {
             for (; element && element !== document; element = element.parentNode) {
                 if (element.matches(selector)) {
@@ -83,7 +106,7 @@ KB.dom = function (tag) {
             return null;
         };
 
-        this.child = function (selector) {
+        this.find = function (selector) {
             return element.querySelector(selector);
         };
 
@@ -118,3 +141,13 @@ KB.dom = function (tag) {
 
     return new DomManipulation(tag);
 };
+
+KB.find = function (selector) {
+    var element = document.querySelector(selector);
+
+    if (element) {
+        return KB.dom(element);
+    }
+
+    return null;
+};

assets/js/core/html.js

@@ -0,0 +1,25 @@
+KB.html.label = function (label, id) {
+    return KB.dom('label').attr('for', id).text(label).build();
+};
+
+KB.html.radio = function (label, name, value) {
+    return KB.dom('label')
+        .add(KB.dom('input')
+            .attr('type', 'radio')
+            .attr('name', name)
+            .attr('value', value)
+            .build()
+        )
+        .text(label)
+        .build();
+};
+
+KB.html.radios = function (items) {
+    var html = KB.dom('div');
+
+    for (var item in items) {
+        if (items.hasOwnProperty(item)) {
+            html.add(KB.html.radio(item.label, item.name, item.value));
+        }
+    }
+};

assets/js/core/http.js

@@ -0,0 +1,66 @@
+KB.http.request = function (method, url, headers, body) {
+    var successCallback = function() {};
+    var errorCallback = function() {};
+
+    function parseResponse(request) {
+        try {
+            return JSON.parse(request.responseText);
+        } catch (e) {
+            return request.responseText;
+        }
+    }
+
+    this.execute = function () {
+        var request = new XMLHttpRequest();
+        request.open(method, url, true);
+        request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+
+        for (var header in headers) {
+            if (headers.hasOwnProperty(header)) {
+                request.setRequestHeader(header, headers[header]);
+            }
+        }
+
+        request.onerror = function() {
+            errorCallback();
+        };
+
+        request.onreadystatechange = function() {
+            if (request.readyState === XMLHttpRequest.DONE) {
+                var response = parseResponse(request);
+
+                if (request.status === 200) {
+                    successCallback(response);
+                } else {
+                    errorCallback(response);
+                }
+            }
+        };
+
+        request.send(body);
+        return this;
+    };
+
+    this.success = function (callback) {
+        successCallback = callback;
+        return this;
+    };
+
+    this.error = function (callback) {
+        errorCallback = callback;
+        return this;
+    };
+};
+
+KB.http.get = function (url) {
+    return (new KB.http.request('GET', url)).execute();
+};
+
+KB.http.postJson = function (url, body) {
+    var headers = {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+    };
+
+    return (new KB.http.request('POST', url, headers, JSON.stringify(body))).execute();
+};

assets/js/core/kb.js

@@ -1,58 +0,0 @@
-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";
-};

assets/js/core/utils.js

@@ -0,0 +1,13 @@
+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";
+};