Kanboard-Prod/assets/js/core/dom.js

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.data = function (attribute, value) {
            if (arguments.length === 1) {
                return element.dataset[attribute];
            }
            element.dataset[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.style = function(attribute, value) {
            element.style[attribute] = value;
            return this;
        };

        this.on = function (eventName, callback) {
            element.addEventListener(eventName, function (e) {
                e.preventDefault();
                callback(e.target);
            });

            return this;
        };

        this.click = function (callback) {
            return this.on('click', callback);
        };

        this.mouseover = function (callback) {
            return this.on('mouseover', 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;
        };

        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.disable = function () {
            element.disabled = true;
            return this;
        };

        this.enable = function () {
            element.disabled = false;
            return this;
        };

        this.remove = function () {
            element.parentNode.removeChild(element);
            return this;
        };

        this.parent = function (selector) {
            for (; element && element !== document; element = element.parentNode) {
                if (element.matches(selector)) {
                    return element;
                }
            }

            return null;
        };

        this.find = 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);
};

KB.find = function (selector) {
    var element = document.querySelector(selector);

    if (element) {
        return KB.dom(element);
    }

    return null;
};