mframejs/dist/esm/view/elementController.js

simple framework

import { CONSTANTS } from '../interface/exported';
import { View } from './view';
import { ViewController } from './viewController';
import { ContainerClasses } from '../container/exported';
import { BindingEngine, createBindingContext } from '../binding/exported';
import { Logger } from '../utils/exported';
import { DOM } from '../utils/exported';
export class ElementController {
    constructor(bindingContext, htmlNode, classInstance, elementName, templateString, parentViewController) {
        this.bindingContext = bindingContext;
        this.htmlNode = htmlNode;
        this._process = true;
        this.internalAttached = false;
        this.logger = Logger.getLogger(htmlNode.tagName, 'element');
        this.templateString = templateString;
        if (!classInstance) {
            this.logger.log('constructor');
        }
        else {
            this.logger.log('constructor - using supplied class');
        }
        this.classInstance = classInstance || ContainerClasses.get(elementName);
        this.viewController = new ViewController(htmlNode, parentViewController);
        this.viewController.addElement(this);
        if (this.classInstance.__proto__[CONSTANTS.CONTAINER_FREE]) {
            this.anchorNode = DOM.document.createComment('containerless-anchor');
            this.elements = [];
        }
        if (this.classInstance.__proto__[CONSTANTS.SHADOW_DOM]) {
            this.shadowDom = true;
        }
    }
    searchForInstance(_customElement) {
        return this.viewController.searchForInstance(_customElement);
    }
    getView() {
        return this.viewController;
    }
    init() {
        this.classInstance.$element = this.htmlNode;
        this.classInstance.$bindingContext = this.bindingContext;
        this.classInstance.$attributes = this.htmlNode.attributes;
        this.classInstance.$controller = this;
        if (this.shadowDom) {
            if (this.classInstance.__proto__[CONSTANTS.CONTAINER_FREE]) {
                console.warn('containerfree can not be used with showdow dom');
            }
            else {
                const mode = this.classInstance.__proto__[CONSTANTS.SHADOW_DOM].mode;
                try {
                    this.htmlNode = this.classInstance.$shadowdom;
                    this.classInstance.$shadowdom = this.htmlNode.attachShadow({ mode: mode });
                }
                catch (e) {
                    console.warn('error adding showdow dom:', e);
                }
            }
        }
        BindingEngine.subscribeClassMetaBinding(this.classInstance);
        const result = this.loadTemplate();
        Promise.resolve(result).then((template) => {
            this.templateString = this.templateString || template || '<template></template>';
            let arr = [];
            this.template = View.createTemplate(this.templateString);
            this.create();
            this.processContent();
            if (this._process) {
                arr = View.parseTemplate(this.template, createBindingContext(this.classInstance), this.viewController);
            }
            if (this._process) {
                while (this.template.childNodes.length) {
                    if (this.anchorNode) {
                        this.htmlNode.parentNode.insertBefore(this.anchorNode, this.htmlNode.nextSibling);
                        this.elements.push(this.template.firstChild);
                        this.anchorNode.parentNode.insertBefore(this.template.firstChild, this.anchorNode.nextSibling);
                    }
                    else {
                        this.htmlNode.appendChild(this.template.firstChild);
                    }
                }
                if (this.anchorNode) {
                    this.htmlNode.parentNode.removeChild(this.htmlNode);
                }
            }
            arr.reverse();
            this.contentProcessed(arr);
            arr.forEach((a) => {
                if (a.attached) {
                    a.attached();
                }
            });
            this.internalAttached = true;
            this.attached();
        });
        return this;
    }
    loadTemplate() {
        this.logger.log('loadTemplate');
        if (this.templateString) {
            return this.templateString;
        }
        else {
            return this.classInstance.loadTemplate && this.classInstance.loadTemplate();
        }
    }
    create() {
        this.logger.log('create');
        if (this.classInstance.created) {
            this.classInstance.created();
        }
    }
    processContent() {
        this.logger.log('processContent');
        if (this.classInstance.processContent) {
            this._process = this.classInstance.processContent(this.template);
        }
        else {
            while (this.htmlNode.childNodes[0]) {
                this.template.appendChild(this.htmlNode.childNodes[0]);
            }
        }
    }
    contentProcessed(controllers) {
        this.logger.log('contentProcessed');
        if (this.classInstance.contentProcessed && this._process) {
            this.classInstance.contentProcessed(controllers);
        }
    }
    attached() {
        if (this.internalAttached) {
            if (!this.classInstance.$element.parentNode) {
                this.logger.log('attached', 'missing parent node');
            }
            else {
                this.logger.log('attached');
            }
        }
        if (this.classInstance.attached && this.internalAttached) {
            this.internalAttached = false;
            this.classInstance.attached();
        }
    }
    detached() {
        this.logger.log('detached');
        if (this.classInstance.detached) {
            this.classInstance.detached();
        }
        BindingEngine.unSubscribeClassMetaBinding(this.classInstance);
        if (this.anchorNode) {
            this.elements.forEach((element) => {
                if (element.parentNode) {
                    element.parentNode.removeChild(element);
                }
            });
            if (this.anchorNode.parentNode) {
                this.anchorNode.parentNode.removeChild(this.anchorNode);
            }
        }
        this.anchorNode = null;
        this.elements = null;
        this.bindingContext = null;
        this.htmlNode = null;
        this.classInstance.$element = null;
        this.classInstance.$bindingContext = null;
        this.classInstance.$attributes = null;
        this.classInstance.$controller = null;
        this.classInstance = null;
        this.viewController = null;
    }
}
//# sourceMappingURL=elementController.js.map