@purtuga/dom-data-bind/src/directives/if-directive.js

DOM Data Bind utility. Bind data to DOM

import Directive    from "./Directive.js"
import {
    PRIVATE,
    DOM_DATA_BIND_PROP,
    hasAttribute,
    createComment,
    removeChild,
    createValueGetter } from "../utils.js"
import {render} from "../render.js"
import {NodeHandler} from "./NodeHandler.js";
import {domInsertBefore} from "@purtuga/common/src/domutils/domInsertBefore.js"

//============================================
const DIRECTIVE = "_if";

export class IfDirective extends Directive {
    static NodeHandlerConstructor = class extends NodeHandler {

        _renderedEle = null;

        _renderTemplate = this._node.data;

        init(...args) {
            super.init(...args);
            this._placeholderEle = createComment("directive.if");
            domInsertBefore(this._placeholderEle, this._node);
            removeChild(this._node.parentNode, this._node);
        }
        update(showElement) {
            const state = PRIVATE.get(this);

            // If there is no change in Element visibility, then only update its data.
            if (state.value === showElement) {
                if (this._renderedEle) {
                    this._renderedEle[DOM_DATA_BIND_PROP].setData(state.data);
                }
                return;
            }

            if (showElement && !this._renderedEle) {
                this._renderedEle = render(this._renderTemplate, state.data, this._directives);
                domInsertBefore(this._renderedEle, this._placeholderEle);
            } else if (!showElement)  {
                this.teardown();
            }
        }

        teardown() {
            if (this._renderedEle) {
                this._renderedEle[DOM_DATA_BIND_PROP].recover();
                this._renderedEle[DOM_DATA_BIND_PROP].destroy();
                this._renderedEle = null;
            }
        }

        destroy() {
            this.teardown();
            super.destroy();
        }
    };

    static has(ele) {
        return hasAttribute(ele, DIRECTIVE) ? DIRECTIVE : "";
    }

    static manages() { return true; }

    init(attr, attrValue) {
        this._attr              = attr;
        this._tokenValueGetter  = createValueGetter((attrValue || ""), "if");
    }
}

export default IfDirective;