ignite-html/src/ignite-template.js

import { IgniteProperty } from './ignite-html.js';

class IgniteTemplate {
    constructor(items) {
        this.siblings = [];
        this.children = [];
        this.attributes = {};
        this.classes = [];
        this.tagName = null;
        this.element = null;
        this.properties = {};
        this.refs = [];
        this.callbacks = [];

        if (items) {
            for (var i = 0; i < items.length; i++) {
                if (items[i] instanceof IgniteProperty) {
                    this.children.push(new property(items[i]));
                } else {
                    this.children.push(items[i]);
                }
            }
        }
    }

    /**
     * Adds a single or series of classes to this template
     * to be added once this template is constructed.
     * @param  {...any} items 
     */
    class(...items) {
        for (var i = 0; i < items.length; i++) {
            if (items[i] instanceof IgniteProperty) {
                this.callbacks.push(items[i].attach(this.onClassChanged));
                this.classes.push(items[i].value);
            } else {
                this.classes.push(items[i]);
            }
        }

        return this;
    }

    /**
     * Adds a attribute to this template to be added once this template is constructed.
     * @param {string} name 
     * @param {any} value 
     */
    attribute(name, value) {
        if (value instanceof IgniteProperty) {
            this.callbacks.push(value.attach((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name)));
            this.attributes[name] = value.value;
        } else {
            this.attributes[name] = value;
        }

        return this;
    }

    /**
     * Adds a property to this template to be added once this template is constructed.
     * @param {string} name 
     * @param {any} value 
     */
    property(name, value) {
        if (value instanceof IgniteProperty) {
            this.callbacks.push(value.attach((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name)));
            this.properties[name] = value.value;
        } else {
            this.properties[name] = value;
        }

        return this;
    }

    /**
     * Adds a single or series of children to be added once this template
     * is constructed.
     * @param  {...any} items 
     */
    child(...items) {
        for (var i = 0; i < items.length; i++) {
            if (items[i] instanceof IgniteProperty) {
                this.children.push(new property(items[i]));
            } else {
                this.children.push(items[i]);
            }
        }

        return this;
    }

    /**
     * Adds a ref callback function to be invoked once this template is constructed.
     * @param {function} item 
     */
    ref(item) {
        if (item instanceof IgniteProperty) {
            this.refs.push((element) => {
                item.value = element;
            });
        } else {
            this.refs.push(item);
        }

        return this;
    }

    /**
     * Constructs this template and adds it to the DOM if this template
     * has not already been constructed.
     * @param {HTMLElement} parent 
     * @param {HTMLElement} sibling 
     */
    construct(parent, sibling) {
        //Construct this element if we haven't already
        if (!this.element) {
            this.element = window.document.createElement(this.tagName);

            if (sibling) {
                parent.insertBefore(this.element, sibling);
            } else {
                parent.appendChild(this.element);
            }

            //If the element has a onDisconnected function, attach to it
            //(This way if a custom element is removed we can deconstruct and cleanup)
            if (this.element.onDisconnected !== undefined) {
                this.element.onDisconnected = () => this.deconstruct();
            }

            //Invoke any refs we have
            this.refs.forEach((ref) => { ref(this.element); });
        }

        //Set the classes on this element
        for (var i = 0; i < this.classes.length; i++) {
            if (this.classes[i] !== null && this.classes[i] !== undefined) {
                this.element.classList.add(this.classes[i]);
            }
        }

        //Set the attributes on this element
        var keys = Object.keys(this.attributes);
        for (var i = 0; i < keys.length; i++) {
            if (this.attributes[keys[i]] !== null && this.attributes[keys[i]] !== undefined) {
                this.element.setAttribute(keys[i], this.attributes[keys[i]]);
            }
        }

        //Set the properties on this element
        var keys = Object.keys(this.properties);
        for (var i = 0; i < keys.length; i++) {
            this.element[keys[i]] = this.properties[keys[i]];
        }

        //Construct the children under this element
        for (var i = 0; i < this.children.length; i++) {
            if (this.children[i] instanceof String || typeof this.children[i] === 'string') {
                this.element.appendChild(document.createTextNode(this.children[i]));
            } else if (this.children[i] instanceof IgniteTemplate || this.children[i].prototype instanceof IgniteTemplate) {
                this.children[i].construct(this.element);
            }
        }
    }

    /**
     * Deconstructs this template and cleans up all resources to make sure
     * there are no memory leaks.
     */
    deconstruct() {
        console.log(`Deconstructing ${this.tagName}`);
        //Remove our element if we have one.
        if (this.element) {
            this.element.remove();
            this.element = null;
        }

        //Deconstruct all children elements.
        if (this.children) {
            for (var i = 0; i < this.children.length; i++) {
                if (this.children[i] instanceof IgniteTemplate || this.children[i].prototype instanceof IgniteTemplate) {
                    this.children[i].deconstruct();
                }
            }
            this.children = null;
        }

        //disconnect all callbacks
        if (this.callbacks) {
            this.callbacks.forEach((item) => item.disconnect());
            this.callbacks = null;
        }

        //remove any refs
        if (this.refs) {
            this.refs = null;
        }
    }

    /**
     * Called when a class on this template was changed and needs to be updated
     * on the template's element.
     * @param {any} oldValue 
     * @param {any} newValue 
     */
    onClassChanged(oldValue, newValue) {
        console.log(`Class changed, oldValue: ${oldValue} newValue: ${newValue}`);
        if (oldValue !== null && oldValue !== undefined && oldValue !== "" && oldValue !== " ") {
            this.element.classList.remove(oldValue);
        }

        if (newValue !== null && newValue !== undefined && newValue !== "" && newValue !== " ") {
            this.element.classList.add(newValue);
        }
    }

    /**
     * Called when a attribute on this template was changed and needs to be updated
     * on the template's element.
     * @param {any} oldValue 
     * @param {any} newValue 
     * @param {string} attributeName 
     */
    onAttributeChanged(oldValue, newValue, attributeName) {
        console.log(`Attribute changed, oldValue: ${oldValue} newValue: ${newValue} attribute: ${attributeName}`);
        if (newValue == null || newValue == undefined) {
            this.element.removeAttribute(attributeName);
        } else {
            this.element.setAttribute(attributeName, newValue);
        }
    }

    /**
     * Called when a property on this template was changed and needs to be updated
     * on the template's element.
     * @param {any} oldValue 
     * @param {any} newValue 
     * @param {string} propertyName 
     */
    onPropertyChanged(oldValue, newValue, propertyName) {
        console.log(`Property changed, oldValue: ${oldValue} newValue: ${newValue} property: ${propertyName}`);
        this.properties[propertyName] = newValue;
        this.element[propertyName] = newValue;
    }
}

class div extends IgniteTemplate {
    constructor(...items) {
        super(items);

        this.tagName = "div";
    }
}

class a extends IgniteTemplate {
    constructor(...items) {
        super(items);

        this.tagName = "a";
    }
}

class html extends IgniteTemplate {
    constructor(code) {
        super([]);
        this.code = code;
        this.tagName = "shadow html";
    }

    construct(parent) {
        if (!parent) {
            parent = window.document.body;
        }

        parent.insertAdjacentHTML('beforeend', this.code);
    }
}

class list extends IgniteTemplate {
    constructor(list, forEach) {
        super([]);
        this.tagName = "shadow list";

        if (list instanceof IgniteProperty) {
            this.callbacks.push(list.attach((oldValue, newValue) => {
                this.list = newValue;
                this.construct(null); //If the list changed, reconstruct this template.
            }));

            this.list = list.value;
        } else {
            this.list = list;
        }

        this.forEach = forEach;
        this.elements = [];
    }

    construct(parent, sibling) {
        if (!this.element) {
            this.element = window.document.createTextNode(""); //Use a textnode as our placeholder
            parent.appendChild(this.element);
        } else {
            parent = this.element.parentElement;
        }

        //If we already have elements we created, destroy them.
        if (this.elements.length > 0) {
            for (var i = 0; i < this.elements.length; i++) {
                this.elements[i].remove();
            }
            this.elements = [];
        }

        //If we already have children elements, deconstruct them.
        //(Because we are about to recreate them)
        if (this.children.length > 0) {
            for (var i = 0; i < this.children.length; i++) {
                this.children[i].deconstruct();
            }
            this.children = [];
        }

        //Construct all the items in our list and use the container
        if (this.list) {
            for (var i = 0; i < this.list.length; i++) {
                var template = this.forEach(this.list[i]);
                template.construct(parent, this.element);

                this.children.push(template);
                this.elements.push(template.element);
            }
        }
    }
}

class property extends IgniteTemplate {
    constructor(prop) {
        super(null);

        this.property = prop;
        this.elements = [];
        this.callbacks.push(this.property.attach((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue)));
    }

    construct(parent, sibling) {
        if (!this.element) {
            this.element = window.document.createTextNode("");

            if (sibling) {
                parent.insertBefore(this.element, sibling);
            } else {
                parent.appendChild(this.element);
            }
        }

        //Remove any elements that already exist.
        this.elements.forEach((item) => item.remove());

        //Create a template to hold the elements that will be created from the
        //properties value and then add them to the DOM and store their pointer.
        var template = window.document.createElement("template");
        template.innerHTML = this.property.value;
        while (template.content.childNodes.length > 0) {
            var item = template.content.childNodes[0];
            this.element.parentElement.insertBefore(item, this.element);
            this.elements.push(item);
        }
        template.remove();
    }

    onPropertyChanged(oldValue, newValue) {
        this.construct(null, null);
    }
}

export {
    IgniteTemplate,
    div,
    html,
    list,
    a
};