cHTML.js

(function (root, factory) {

    // requirejs|amd loader
    if (typeof define === 'function' && define.amd) {
        define(factory);

    // node js
    } else if (typeof module === 'object' && module.exports) {
        module.exports = factory();

    // global
    } else {
        root.cHTML = factory();
    }
})(
typeof self !== 'undefined' ? self : this,
function () {

    const clsMethodTest = /^(?:add|(?:rem(?:ove)?)|(?:tog(?:gle)?))$/
    class cHTMLNode {
        constructor(node) {
            if (node instanceof cHTMLNode) {
                return node;
            }
            this.node = node;
            this._eventhandlers = {};
        }
        set(attrs) {
            let node = this.node;
            Object.keys(attrs).forEach(function (key) {
                node.setAttribute(key, attrs[key]);
            });
            return this;
        }
        unset(attrs) {
            let node = this.node;
            Object.keys(attrs).forEach(function (key) {
                if (this.node.hasAttribute(key)) {
                    this.node.removeAttribute(key, attrs[key]);
                }
            });
            return this;
        }
        cls(classes, method) {
            if (typeof classes === 'string') {
                classes = String(classes).trim().split(/\s+/g);

            } else if (typeof classes === "object" && !Array.isArray(classes)) {
                classes = [classes];

            } else if (!Array.isArray(classes)) {
                throw new TypeError('invalid class list');
            }
            method = method || 'add';
            if (typeof method !== 'string' || !clsMethodTest.test(method = method.toLowerCase())) {
                throw new Error('Invalid method');
            }
            let seen = {},
                className = this.node.className.trim();
            if (className === "") {
                className = [];
            } else {
                className = className.split(/\s+/g).filter(function (item) {
                    return !seen.hasOwnProperty(item) && (seen[item] = true);
                });
            }
            classes.forEach(function (cls) {
                if (typeof cls === '') {
                    return
                }
                let action = method;
                if (typeof cls === 'object') {
                    action = cls.action || method;
                    cls = cls.name;
                    if (typeof action !== "string" || clsMethodTest.test(action = action.toLowerCase())) {
                        throw new TypeError('Invalid method');
                    }
                } else if (typeof cls !== 'string') {
                    throw new TypeError('invalid class');
                }
                action = action.substring(0,3);
                let idx = className.indexOf(cls);
                if (idx === -1 && (action === 'tog' || action === 'add')) {
                    className.push(cls);
                } else if (idx > -1 && (action === 'tog' || action === 'rem')) {
                    className.splice(idx, 1);
                }
            });
            this.node.className = className.join(" ");
            return this;
        }
        text(text, overwrite) {
            if (overwrite) {
                this.empty();
            }
            this.node.appendChild(document.createTextNode(text));
            return this;
        }
        html(html, overwrite) {
            if (overwrite) {
                this.empty();
            }
            this.node.innerHTML += html;
            return this;
        }
        empty() {
            let node = this.node, child;
            while (child = node.lastChild) {
                node.removeChild(child);
            }
            return this;
        }
        on(name, handler, capture, once) {
            if (typeof name !== 'string' || name == null) {
                throw new TypeError('invalid event name');
            }
            if (typeof handler !== 'function') {
                throw new TypeError('invalid handler');
            }
            if (capture != null && typeof capture !== 'boolean') {
                throw new TypeError('invalid capture parameter');
            }
            if (once != null && typeof once !== 'boolean') {
                throw new TypeError('invalid once parameter');
            }
            const self = this,
                evthandler = {
                    handler: handler,
                    capture: capture,
                    once: once,
                    func: function callback(evt) {
                        if (once) {
                            self.off(name, handler, capture, once);
                        }
                        handler.call(self.node, evt || event);
                    }
                };
            if (!this._eventhandlers.hasOwnProperty(name)) {
                this._eventhandlers[name] = [];
            }
            this._eventhandlers[name].push(evthandler);
            this.node.addEventListener(name, evthandler.func, capture == null ? false : capture);
            return this;
        }
        off(name, handler, capture, once) {
            if (typeof name !== 'string' || name == null) {
                throw new TypeError('invalid event name');
            }
            if (typeof handler !== 'function') {
                throw new TypeError('invalid handler');
            }
            if (capture != null && typeof capture !== 'boolean') {
                throw new TypeError('invalid bubble parameter');
            }
            if (this._eventhandlers.hasOwnProperty(name)) {
                let handlers = this._eventhandlers[name],
                    idx = handlers.findIndex(function (item, idx) {
                        return item.handler === handler && item.capture === capture && item.once === once;
                    });
                if (idx > -1) {
                    handler = handlers[idx].func;
                    if (handlers.length === 1) {
                        delete this._eventhandlers[name]
                    } else {
                        handlers.splice(idx, 1);
                    }
                    return this;
                }
            }
            this.node.removeEventListener(name, handler, capture == null ? false : capture)
            return this;
        }
        once(name, handler, capture) {
            return this.on(name, handler, capture, true);
        }
        onceoff(name, handler, capture) {
            return this.off(name, handler, capture, true);
        }
        attach(target, method) {
            if (target instanceof cHTMLNode) {
                target = target.node;
            } else if (typeof target === 'string') {
                target = document.querySelector(target);
            }
            if (!(target instanceof Node)) {
                throw new TypeError('attach target not a node');
            }
            if (method == null) {
                method = 'to';
            }
            if (typeof method !== 'string' || !/^(?:first|before|after|to|last)$/.test(method = String(method).toLowerCase())) {
                throw new TypeError('invalid attachment method');
            }
            if (!target.parent && (method === 'before' || method === 'after')) {
                throw new Error('method not applicable for target');
            }
            this.detach();
            if (method === 'first' && target.firstChild) {
                target.insertBefore(this.node, target.firstChild);

            } else if (method === 'before') {
                target.parent.insertBefore(this.node, target);

            } else if (method === 'after') {
                if (target.nextSibling) {
                    target.parent.insertBefore(this.node, target.nextSibling);

                } else {
                    target.parent.appendChild(this.node);
                }
            } else {
                target.appendChild(this.node);
            }
            return this;
        }
        detach() {
            if (this.node.parentNode) {
                this.node.parentNode.removeChild(this.node);
            }
            return this;
        }
    }
    return function cHTML(target) {
        if (target instanceof cHTMLNode) {
            return target;
        }
        if (typeof target === "string") {
            target = String(target);
            if (/^<.*>$/.test(target)) {
                target = document.createElement(target.substring(1, target.length -1));
            } else {
                target = document.querySelector(target);
            }
        }
        if (target instanceof Node) {
            return new cHTMLNode(target);
        }
        throw new TypeError('invald target')
    }
});