mframejs
Version:
simple framework
114 lines • 4.57 kB
JavaScript
import * as tslib_1 from "tslib";
import { customAttribute } from '../decorator/exported';
import { ViewController, View } from '../view/exported';
import { BindingEngine } from '../binding/exported';
import { DOM } from '../utils/exported';
let IfAttribute = class IfAttribute {
created() {
this.value = this.$attribute.value;
this.$element.attributes.removeNamedItem('if.bind');
this.$view = this.$controller.getView();
this.elementClone = this.$element.cloneNode(true);
this.templateElement = this.elementClone.tagName === 'TEMPLATE' ? true : false;
this.$element.style.display = 'None';
this.added = false;
}
attached() {
this.anchor = DOM.document.createComment('mf-if-bind');
this.$element.parentNode.insertBefore(this.anchor, this.$element);
this.remove();
this.subscribeCall = {
name: 'ifAttribute',
value: this.value,
call: (newValue) => {
switch (true) {
case newValue && !this.added:
this.added = true;
this.add();
break;
case !newValue && this.added:
this.remove();
break;
}
}
};
BindingEngine.subscribeClassProperty(this.$bindingContext, this.value, this.subscribeCall);
}
detached() {
BindingEngine.unSubscribeClassProperty(this.$bindingContext, this.subscribeCall);
this.remove();
if (this.anchor) {
this.anchor.parentNode.removeChild(this.anchor);
this.anchor = null;
}
}
add() {
const template = this.elementClone.cloneNode(true);
if (this.templateElement) {
if (!template.content) {
template.content = DOM.document.createDocumentFragment();
while (template.childNodes[0]) {
template.content.appendChild(template.childNodes[0]);
}
}
}
this.$element = template;
let temp;
this.$templateView = new ViewController(template, this.$view);
if (this.templateElement) {
temp = DOM.document.createElement('div');
temp.appendChild(template.content);
this.childNodes = [];
let anchor = DOM.document.createComment('ifbind-template-anchor-start');
this.childNodes.push(anchor);
for (let i = 0, ii = temp.childNodes.length; i < ii; i++) {
this.childNodes.push(temp.childNodes[i]);
}
anchor = DOM.document.createComment('ifbind-template-anchor-end');
this.childNodes.push(anchor);
}
let controllers = View.parseTemplate(this.templateElement ? temp : this.$element, this.$bindingContext, this.$templateView);
if (this.templateElement) {
this.anchor.parentNode.insertBefore(this.childNodes[0], this.anchor);
for (let i = 1, ii = this.childNodes.length; i < ii; i++) {
this.anchor.parentNode.insertBefore(this.childNodes[i], this.childNodes[i - 1].nextSibling);
}
}
else {
this.anchor.parentNode.insertBefore(this.$element, this.anchor);
}
controllers.forEach((x) => {
if (x.attached) {
x.attached();
}
});
controllers = null;
}
remove() {
if (this.added) {
this.added = false;
this.$templateView.clearView();
this.$templateView = null;
}
if (this.$element) {
if (this.templateElement && this.childNodes) {
for (let i = 0, ii = this.childNodes.length; i < ii; i++) {
if (this.childNodes[i].parentNode === this.anchor.parentNode) {
this.anchor.parentNode.removeChild(this.childNodes[i]);
}
}
}
else {
if (this.anchor.parentNode === this.$element.parentNode) {
this.anchor.parentNode.removeChild(this.$element);
}
}
this.$element = null;
}
}
};
IfAttribute = tslib_1.__decorate([
customAttribute('if.bind')
], IfAttribute);
export { IfAttribute };
//# sourceMappingURL=ifAttribute.js.map