mframejs
Version:
simple framework
432 lines • 19.6 kB
JavaScript
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var exported_1 = require("../decorator/exported");
var exported_2 = require("../view/exported");
var exported_3 = require("../view/exported");
var exported_4 = require("../binding/exported");
var repeatAttributeSubscriberHelpers_1 = require("./repeatAttributeSubscriberHelpers");
var exported_5 = require("../utils/exported");
var createBindingContext_1 = require("../binding/createBindingContext");
var RepeatAttribute = (function () {
function RepeatAttribute() {
this.templateArray = [];
this.arrayType = 'object';
}
RepeatAttribute.prototype.setArrayLocalVariables = function (ctx, i) {
ctx.$index = i;
ctx.$even = i % 2 === 0 ? true : false;
ctx.$odd = i % 2 === 0 ? false : true;
ctx.$last = i === this.templateArray.length - 1 ? true : false;
ctx.$first = i === 0 ? true : false;
};
RepeatAttribute.prototype.created = function () {
this.value = this.$attribute.value;
this.loopBinded = this.loopArray.bind(this);
this.$view = this.$controller.getView();
this.$element.attributes.removeNamedItem('repeat.for');
this.elementClone = this.$element.cloneNode(true);
this.templateElement = this.elementClone.tagName === 'TEMPLATE' ? true : false;
if (this.elementClone.getAttribute('if.bind') && this.templateElement) {
this.templateElement = false;
}
this.$element.style.display = 'None';
var x = exported_5.DOM.document.createElement('div');
var template = this.elementClone.cloneNode(true);
if (this.templateElement) {
if (!template.content) {
template.content = exported_5.DOM.document.createDocumentFragment();
while (template.childNodes[0]) {
template.content.appendChild(template.childNodes[0]);
}
}
}
x.appendChild(this.templateElement ? template.content : template);
this.anchor = exported_5.DOM.document.createComment('mf-repeat-for');
this.repeatForArray = this.value.split(' of ');
this.repeatForArray = this.repeatForArray.map(function (x) { return x.trim(); });
if (this.repeatForArray.length !== 2) {
console.error('unknown expression in repeat:' + this.value);
}
else {
this.rowInstanceName = this.repeatForArray[0];
this.arrayVariableName = this.repeatForArray[1];
this.arrayExpression = this.repeatForArray[1];
if (this.arrayVariableName.indexOf('|')) {
var split = this.arrayVariableName.split('|').map(function (x) { return x.trim(); });
this.arrayVariableName = split[0];
}
this.$array = exported_4.BindingEngine.evaluateExpression(this.arrayExpression, this.$bindingContext);
var propertyType = this.$array;
if (!Array.isArray(propertyType)) {
if (typeof propertyType === 'number') {
this.arrayType = 'number';
this.subscribePropSimple();
}
else {
if (typeof propertyType === 'string') {
this.arrayType = 'string';
this.subscribePropSimple();
}
else {
this.subscribeArray();
this.subscribePropArray();
}
}
}
else {
this.subscribeArray();
this.subscribePropArray();
}
}
};
RepeatAttribute.prototype.loopArray = function (changed, remove, add) {
var array = this.$array;
if (array) {
if (changed) {
if (remove) {
var syncLength = this.templateArray.length - remove;
for (var i = 0; i < this.templateArray.length; i++) {
if (i < syncLength) {
if (this.templateArray[i].ctx.$context[this.rowInstanceName] !== array[i]) {
this.templateArray[i].ctx.$context[this.rowInstanceName] = array[i];
}
}
else {
var temp = this.templateArray.pop();
i--;
this.clearInRow(temp);
}
}
}
if (add) {
var syncLength = array.length - add;
for (var i = 0; i < array.length; i++) {
if (i < syncLength) {
if (this.templateArray[i].ctx.$context[this.rowInstanceName] !== this.$array[i]) {
this.templateArray[i].ctx.$context[this.rowInstanceName] = this.$array[i];
}
}
else {
this.push(array[i]);
}
}
}
}
else {
for (var i = 0; i < this.$array.length; i++) {
if (this.templateArray[i].ctx.$context[this.rowInstanceName] !== array[i]) {
this.templateArray[i].ctx.$context[this.rowInstanceName] = array[i];
}
}
}
this.updateInternals();
}
};
RepeatAttribute.prototype.loopArrayNumber = function (changed, remove, add) {
var num = this.templateArray.length + 1;
if (num) {
if (changed) {
if (remove) {
var syncLength = this.templateArray.length - remove;
for (var i = 0; i < this.templateArray.length; i++) {
if (i >= syncLength) {
var temp = this.templateArray.pop();
i--;
this.clearInRow(temp);
}
}
}
if (add) {
var syncLength = num;
for (var i = 0; i < num + add; i++) {
if (i >= syncLength) {
this.push(i);
}
}
}
}
else {
for (var i = 0; i < this.$array; i++) {
if (this.templateArray[i].ctx.$context[this.rowInstanceName] !== i) {
this.templateArray[i].ctx.$context[this.rowInstanceName] = i;
}
}
}
this.updateInternals();
}
};
RepeatAttribute.prototype.detached = function () {
this.clearTemplateArray();
if (this.arrayMethodCallHandler) {
exported_4.BindingEngine.unSubscribeClassArray(this.$bindingContext, this.arrayMethodCallHandler);
}
if (this.arrayPropertyChangeHandler) {
exported_4.BindingEngine.unSubscribeClassProperty(this.$bindingContext, this.arrayPropertyChangeHandler);
}
if (this.arrayPropertyChangeHandlerLocal) {
exported_4.BindingEngine.unSubscribeClassProperty(this.$bindingContext, this.arrayPropertyChangeHandlerLocal);
}
if (this.propertyChangeHandlerSimple) {
exported_4.BindingEngine.unSubscribeClassProperty(this.$bindingContext, this.propertyChangeHandlerSimple);
}
if (this.anchor) {
this.anchor.parentNode.removeChild(this.anchor);
this.anchor = null;
}
this.$view = null;
this.$array = null;
this.arrayMethodCallHandler = null;
this.arrayPropertyChangeHandler = null;
this.arrayPropertyChangeHandlerLocal = null;
this.propertyChangeHandlerSimple = null;
};
RepeatAttribute.prototype.attached = function () {
var _this = this;
this.remove();
this.isAttached = true;
this.$array = exported_4.BindingEngine.evaluateExpression(this.arrayExpression, this.$bindingContext);
var array = this.$array;
if (Array.isArray(array)) {
array.forEach(function (ctx) {
_this.push(ctx);
});
}
else {
if (this.arrayType === 'number') {
if (this.templateArray.length !== array) {
this.clearTemplateArray();
for (var i = 0; i < array; i++) {
this.push(i + 1);
}
}
}
if (this.arrayType === 'string') {
var stringLength = typeof array === 'string' ? array.length : 0;
if (this.templateArray.length !== stringLength) {
this.clearTemplateArray();
for (var i = 0; i < stringLength; i++) {
this.push(array[i]);
}
}
}
}
this.updateInternals();
};
RepeatAttribute.prototype.subscribeArray = function () {
if (!this.arrayMethodCallHandler) {
this.arrayMethodCallHandler = new repeatAttributeSubscriberHelpers_1.ArrayMethodCallHandler(this);
}
exported_4.BindingEngine.subscribeClassArray(this.$bindingContext, this.arrayVariableName, this.arrayMethodCallHandler);
};
RepeatAttribute.prototype.subscribePropArray = function () {
if (!this.arrayPropertyChangeHandler) {
this.arrayPropertyChangeHandler = new repeatAttributeSubscriberHelpers_1.ArrayPropertyChange(this);
}
else {
console.error('subscribePropArray fail, called when set', this.arrayExpression, this.arrayVariableName);
}
exported_4.BindingEngine.subscribeClassProperty(this.$bindingContext, this.arrayVariableName, this.arrayPropertyChangeHandler);
if (this.arrayVariableName !== this.arrayExpression) {
if (!this.arrayPropertyChangeHandlerLocal) {
this.arrayPropertyChangeHandlerLocal = new repeatAttributeSubscriberHelpers_1.ArrayPropertyChange(this);
}
var classKey = this.arrayExpression.replace(this.arrayVariableName, '$array');
exported_4.BindingEngine.subscribeClassProperty(createBindingContext_1.createBindingContext(this), classKey, this.arrayPropertyChangeHandlerLocal);
}
};
RepeatAttribute.prototype.subscribePropSimple = function () {
if (!this.propertyChangeHandlerSimple) {
this.propertyChangeHandlerSimple = new repeatAttributeSubscriberHelpers_1.PropertyChangeSimple(this);
}
exported_4.BindingEngine.subscribeClassProperty(this.$bindingContext, this.arrayVariableName, this.propertyChangeHandlerSimple);
};
RepeatAttribute.prototype.push = function (ctx, i) {
var _a;
var template = this.elementClone.cloneNode(true);
if (this.templateElement) {
if (!template.content) {
template.content = exported_5.DOM.document.createDocumentFragment();
while (template.childNodes[0]) {
template.content.appendChild(template.childNodes[0]);
}
}
}
var context = createBindingContext_1.createBindingContext((_a = {}, _a[this.rowInstanceName] = ctx, _a), createBindingContext_1.createBindingContext(this.$bindingContext, this.$bindingContext));
var temp = exported_5.DOM.document.createElement('div');
temp.appendChild(this.templateElement ? template.content : template);
var $view = new exported_3.ViewController(template, this.$view);
if (!this.cache) {
this.cache = exported_2.View.createTemplateCache(temp);
}
var controllers = exported_2.View.parseTemplateCache(temp, context, $view, this.cache);
var childNodes;
if (this.templateElement) {
childNodes = [];
var anchor = exported_5.DOM.document.createComment('repeat-template-row-anchor-start');
childNodes.push(anchor);
for (var i_1 = 0, ii = temp.childNodes.length; i_1 < ii; i_1++) {
childNodes.push(temp.childNodes[i_1]);
}
anchor = exported_5.DOM.document.createComment('repeat-template-row-anchor-end');
childNodes.push(anchor);
}
if (i === undefined) {
var length_1 = this.templateArray.length;
this.templateArray.push({
ctx: context,
template: this.templateElement ? childNodes : template,
$view: $view
});
this.setArrayLocalVariables(context.$context, this.templateArray.length - 1);
if (this.templateElement) {
if (length_1) {
var u = this.templateArray[length_1 - 1].template.length - 1;
this.anchor.parentNode.insertBefore(childNodes[0], this.templateArray[length_1 - 1].template[u].nextSibling);
for (var i_2 = 1, ii = childNodes.length; i_2 < ii; i_2++) {
this.anchor.parentNode.insertBefore(childNodes[i_2], childNodes[i_2 - 1].nextSibling);
}
}
else {
this.anchor.parentNode.insertBefore(childNodes[0], this.anchor.nextSibling);
for (var i_3 = 1, ii = childNodes.length; i_3 < ii; i_3++) {
this.anchor.parentNode.insertBefore(childNodes[i_3], childNodes[i_3 - 1].nextSibling);
}
}
}
else {
if (length_1) {
this.anchor.parentNode.insertBefore(template, this.templateArray[length_1 - 1].template.nextSibling);
}
else {
this.anchor.parentNode.insertBefore(template, this.anchor.nextSibling);
}
}
}
else {
this.templateArray.splice(i, 0, {
ctx: context,
template: this.templateElement ? childNodes : template,
$view: $view
});
if (this.templateElement) {
if (this.templateArray[i + 1]) {
var u = this.templateArray[length - 1].template.length - 1;
this.anchor.parentNode.insertBefore(childNodes[0], this.templateArray[length - 1].template[u].nextSibling);
for (var i_4 = 1, ii = childNodes.length; i_4 < ii; i_4++) {
this.anchor.parentNode.insertBefore(childNodes[i_4], childNodes[i_4 - 1].nextSibling);
}
}
else {
this.anchor.parentNode.insertBefore(childNodes[0], this.anchor.nextSibling);
for (var i_5 = 1, ii = childNodes.length; i_5 < ii; i_5++) {
this.anchor.parentNode.insertBefore(childNodes[i_5], childNodes[i_5 - 1].nextSibling);
}
}
}
else {
if (this.templateArray[i + 1]) {
this.anchor.parentNode.insertBefore(template, this.templateArray[i + 1].template);
}
else {
this.anchor.parentNode.appendChild(template);
}
}
}
controllers.forEach(function (contr) {
if (contr.attached) {
contr.attached();
}
});
};
RepeatAttribute.prototype.pop = function () {
if (this.templateArray.length > 0) {
var temp = this.templateArray.pop();
this.clearInRow(temp);
this.updateInternals();
}
};
RepeatAttribute.prototype.updateInternals = function () {
var _this = this;
this.templateArray.forEach(function (context, i) {
_this.setArrayLocalVariables(context.ctx.$context, i);
});
};
RepeatAttribute.prototype.shift = function () {
if (this.templateArray.length > 0) {
var temp = this.templateArray.shift();
this.clearInRow(temp);
this.updateInternals();
}
};
RepeatAttribute.prototype.splice = function (args) {
var _this = this;
if (this.templateArray.length > 0) {
var index_1 = args[0];
var deleted = args[0] === 0 && args[1] === undefined ? this.templateArray.length : args[1];
var added = [];
for (var i = 2; i < args.length; i++) {
if (args[i]) {
added.push(args[i]);
}
}
if (deleted) {
var newIndex = index_1 + deleted - 1;
for (var i = newIndex; i > index_1 - 1; i--) {
var temp = this.templateArray.splice(i, 1)[0];
this.clearInRow(temp);
}
}
added.forEach(function (ctx) {
_this.push(ctx, index_1);
});
this.updateInternals();
}
};
RepeatAttribute.prototype.clearTemplateArray = function () {
var _this = this;
var x = exported_5.DOM.document.createElement('div');
this.templateArray.forEach(function (temp) {
if (_this.templateElement) {
for (var i = 0, ii = temp.template.length; i < ii; i++) {
x.appendChild(temp.template[i]);
}
}
else {
x.appendChild(temp.template);
}
});
this.templateArray.forEach(function (temp) {
temp.$view.clearView();
});
x = null;
this.templateArray = [];
};
RepeatAttribute.prototype.remove = function () {
this.clearTemplateArray();
this.$element.parentNode.replaceChild(this.anchor, this.$element);
};
RepeatAttribute.prototype.clearInRow = function (rowData) {
if (rowData) {
if (this.templateElement) {
for (var i = 0, ii = rowData.template.length; i < ii; i++) {
rowData.$view.clearView();
if (rowData.template[i].parentNode) {
rowData.template[i].parentNode.removeChild(rowData.template[i]);
}
}
}
else {
if (rowData.template.parentNode) {
rowData.template.parentNode.removeChild(rowData.template);
}
rowData.$view.clearView();
}
}
};
RepeatAttribute = tslib_1.__decorate([
exported_1.customAttribute('repeat.for')
], RepeatAttribute);
return RepeatAttribute;
}());
exports.RepeatAttribute = RepeatAttribute;
//# sourceMappingURL=repeatAttribute.js.map