mframejs
Version:
simple framework
366 lines • 19.1 kB
JavaScript
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var exported_1 = require("../decorator/exported");
var exported_2 = require("../binding/exported");
var exported_3 = require("../utils/exported");
var PropertyChangeHandler = (function () {
function PropertyChangeHandler(node) {
this.node = node;
this.firstRun = true;
this.name = 'valueAttribute';
}
PropertyChangeHandler.prototype.call = function (newValue, oldValue) {
if (oldValue !== newValue || this.firstRun) {
this.value = newValue;
switch (true) {
case this.node.type === 'textarea':
case (this.node.type !== 'checkbox'
&& this.node.type !== 'radio'
&& this.node.type !== 'select-multiple'
&& this.node.type !== 'select-one'):
this.node.value = newValue || '';
break;
case this.node.type === 'checkbox':
var modelBind = this.node.hasAttribute('model.bind') ? this.node.getAttributeNode('model.bind') : null;
if (modelBind && modelBind.getContent) {
var x = modelBind.getContent();
if (x) {
if (Array.isArray(newValue)) {
if (newValue.indexOf(x.value) !== -1) {
this.node.checked = true;
}
else {
this.node.checked = false;
}
}
else {
if (newValue === x.value) {
this.node.checked = true;
}
else {
this.node.checked = false;
}
}
}
}
else {
if (Array.isArray(newValue)) {
console.warn('error: value is array, this should not happen');
}
else {
this.node.checked = newValue || false;
}
}
break;
case this.node.type === 'radio':
if (this.node) {
var modelBind_1 = this.node.hasAttribute('model.bind') ? this.node.getAttributeNode('model.bind') : null;
if (modelBind_1 && modelBind_1.getContent) {
var x = modelBind_1.getContent();
if (x) {
if (newValue === x.value) {
this.node.checked = true;
}
}
}
}
break;
case this.node.type === 'select-one':
var optionsSingle = this.node.options;
var index = null;
for (var i = 0; i < optionsSingle.length; i++) {
var modelBind_2 = optionsSingle[i].hasAttribute('model.bind') ? optionsSingle[i].getAttributeNode('model.bind') : null;
if (modelBind_2 && modelBind_2.getContent) {
var x = modelBind_2.getContent();
if (x) {
if (Array.isArray(newValue)) {
if (newValue[0] === x.value) {
index = i;
}
}
else {
if (newValue === x.value) {
index = i;
}
}
}
}
}
this.node.selectedIndex = index;
break;
case this.node.type === 'select-multiple':
var optionsMany = this.node.options;
for (var i = 0; i < optionsMany.length; i++) {
var modelBind_3 = optionsMany[i].hasAttribute('model.bind') ? optionsMany[i].getAttributeNode('model.bind') : null;
if (modelBind_3 && modelBind_3.getContent) {
var x = modelBind_3.getContent();
if (x) {
if (Array.isArray(newValue)) {
if (newValue.indexOf(x.value) !== -1) {
optionsMany[i].selected = true;
}
else {
optionsMany[i].selected = false;
}
if (newValue.length === 0 && x.value === null) {
optionsMany[i].selected = true;
}
}
else {
if (newValue === x.value) {
optionsMany[i].selected = true;
}
else {
optionsMany[i].selected = false;
}
}
}
}
}
break;
}
this.firstRun = false;
}
};
return PropertyChangeHandler;
}());
exports.PropertyChangeHandler = PropertyChangeHandler;
var ValueAttribute = (function () {
function ValueAttribute() {
this.valueConverters = [];
this.eventHandlerBinded = this.eventHandler.bind(this);
}
ValueAttribute.prototype.attached = function () {
if (this.$element.type === 'select-multiple') {
this.propertyChangeHandler.call(this.propertyChangeHandler.value, 'somethign % its not');
}
};
ValueAttribute.prototype.created = function () {
var _this = this;
this.expressionValue = this.$attribute.value;
this.attributeName = this.expressionValue.split('|')[0].trim().split('&')[0].trim();
this.trigger = null;
this.name = this.$attribute.name;
this.propertyChangeHandler = new PropertyChangeHandler(this.$element);
switch (true) {
case (this.$element.tagName === 'INPUT'
&& this.$element.type !== 'checkbox'
&& this.$element.type !== 'radio'
&& this.$element.type !== 'select-multiple'
&& this.$element.type !== 'select-one') || this.$element.tagName === 'TEXTAREA':
exported_2.BindingEngine.subscribeClassProperty(this.$bindingContext, this.expressionValue, this.propertyChangeHandler);
exported_3.connectBehavior(this.expressionValue, this);
if (!this.trigger) {
this.$element.addEventListener('input', this.eventHandlerBinded, false);
}
else {
this.trigger.forEach(function (trigger) {
_this.$element.addEventListener(trigger, _this.eventHandlerBinded, false);
});
}
break;
case this.$element.tagName === 'INPUT' && this.$element.type === 'checkbox':
exported_2.BindingEngine.subscribeClassProperty(this.$bindingContext, this.expressionValue, this.propertyChangeHandler);
exported_3.connectBehavior(this.expressionValue, this);
if (!this.trigger) {
this.$element.addEventListener('click', this.eventHandlerBinded, false);
}
else {
this.trigger.forEach(function (trigger) {
_this.$element.addEventListener(trigger, _this.eventHandlerBinded, false);
});
}
break;
case this.$element.tagName === 'INPUT' && this.$element.type === 'radio':
exported_2.BindingEngine.subscribeClassProperty(this.$bindingContext, this.expressionValue, this.propertyChangeHandler);
exported_3.connectBehavior(this.expressionValue, this);
if (!this.trigger) {
this.$element.addEventListener('click', this.eventHandlerBinded, false);
}
else {
this.trigger.forEach(function (trigger) {
_this.$element.addEventListener(trigger, _this.eventHandlerBinded, false);
});
}
break;
case this.$element.tagName === 'SELECT':
exported_2.BindingEngine.subscribeClassProperty(this.$bindingContext, this.expressionValue, this.propertyChangeHandler);
exported_3.connectBehavior(this.expressionValue, this);
if (!this.trigger) {
this.$element.addEventListener('change', this.eventHandlerBinded, false);
}
else {
this.trigger.forEach(function (trigger) {
_this.$element.addEventListener(trigger, _this.eventHandlerBinded, false);
});
}
break;
default:
}
};
ValueAttribute.prototype.runValueConverter = function (value) {
var x = exported_3.Cache.expressionMap.get(this.expressionValue);
return exported_2.BindingEngine.valueConvert(x.ast, this.$bindingContext, value);
};
ValueAttribute.prototype.detached = function () {
var _this = this;
switch (true) {
case (this.$element.tagName === 'INPUT'
&& this.$element.type !== 'checkbox'
&& this.$element.type !== 'radio'
&& this.$element.type !== 'select-multiple'
&& this.$element.type !== 'select-one') || this.$element.tagName === 'TEXTAREA':
if (!this.trigger) {
this.$element.removeEventListener('input', this.eventHandlerBinded);
}
else {
this.trigger.forEach(function (trigger) {
_this.$element.removeEventListener(trigger, _this.eventHandlerBinded);
});
}
break;
case this.$element.tagName === 'INPUT' && this.$element.type === 'checkbox':
if (!this.trigger) {
this.$element.removeEventListener('click', this.eventHandlerBinded);
}
else {
this.trigger.forEach(function (trigger) {
_this.$element.removeEventListener(trigger, _this.eventHandlerBinded);
});
}
break;
case this.$element.tagName === 'INPUT' && this.$element.type === 'radio':
if (!this.trigger) {
this.$element.removeEventListener('click', this.eventHandlerBinded);
}
else {
this.trigger.forEach(function (trigger) {
_this.$element.removeEventListener(trigger, _this.eventHandlerBinded);
});
}
break;
case this.$element.tagName === 'SELECT':
if (!this.trigger) {
this.$element.removeEventListener('change', this.eventHandlerBinded);
}
else {
this.trigger.forEach(function (trigger) {
_this.$element.removeEventListener(trigger, _this.eventHandlerBinded);
});
}
break;
default:
this.$attribute.$bindingContext = null;
break;
}
if (this.propertyChangeHandler.caller) {
exported_2.BindingEngine.unSubscribeClassProperty(this.$bindingContext, this.propertyChangeHandler);
}
};
ValueAttribute.prototype.eventHandler = function () {
switch (true) {
case (this.$element.tagName === 'INPUT'
&& this.$element.type !== 'checkbox'
&& this.$element.type !== 'radio'
&& this.$element.type !== 'select-multiple'
&& this.$element.type !== 'select-one') || this.$element.tagName === 'TEXTAREA':
var value = this.$element.value;
if (this.$element.type === 'number') {
value = this.$element.valueAsNumber;
}
if (this.$element.type === 'date') {
value = this.$element.valueAsDate;
}
exported_2.BindingEngine.setValue(this.$bindingContext, this.attributeName, this.runValueConverter(value));
break;
case this.$element.tagName === 'INPUT' && this.$element.type === 'checkbox':
var modelBindCheckbox = this.$element.hasAttribute('model.bind') ? this.$element.getAttributeNode('model.bind') : null;
if (modelBindCheckbox) {
var value_1 = modelBindCheckbox.getContent().value;
var propertyType_1 = exported_2.BindingEngine.evaluateExpression(this.$attribute.nodeValue, this.$bindingContext);
var isArray_1 = Array.isArray(propertyType_1);
var selected = this.$element.checked;
if (isArray_1) {
if (selected) {
var ii = propertyType_1.indexOf(value_1);
if (ii === -1) {
propertyType_1 = propertyType_1.concat([this.runValueConverter(value_1)]);
exported_2.BindingEngine.setValue(this.$bindingContext, this.attributeName, propertyType_1);
}
}
else {
var ii = propertyType_1.indexOf(value_1);
if (ii !== -1) {
propertyType_1.splice(ii, 1);
if (!propertyType_1.__array_observer__class) {
propertyType_1 = propertyType_1.slice();
}
exported_2.BindingEngine.setValue(this.$bindingContext, this.attributeName, propertyType_1);
}
else {
this.$element.checked = false;
}
}
}
else {
exported_2.BindingEngine.setValue(this.$bindingContext, this.attributeName, this.runValueConverter(value_1) || false);
}
}
else {
exported_2.BindingEngine.setValue(this.$bindingContext, this.attributeName, this.$element.checked || false);
}
break;
case this.$element.tagName === 'INPUT' && this.$element.type === 'radio':
var modelBindRadio = this.$element.hasAttribute('model.bind') ? this.$element.getAttributeNode('model.bind') : null;
if (modelBindRadio) {
var value_2 = exported_2.BindingEngine.evaluateExpression(modelBindRadio.nodeValue, modelBindRadio.getContent().$bindingContext);
exported_2.BindingEngine.setValue(this.$bindingContext, this.attributeName, this.runValueConverter(value_2));
}
else {
exported_2.BindingEngine.setValue(this.$bindingContext, this.attributeName, this.runValueConverter(this.$element.checked));
}
break;
case this.$element.tagName === 'SELECT':
var propertyType = exported_2.BindingEngine.evaluateExpression(this.$attribute.nodeValue, this.$bindingContext);
var isArray = Array.isArray(propertyType);
var length_1 = this.$element.selectedOptions.length;
var finalValue = null;
if (length_1 > 1) {
var values = [];
for (var i = 0; i < length_1; i++) {
var x = this.$element.selectedOptions[i];
var modelBind = x.hasAttribute('model.bind') ? x.getAttributeNode('model.bind') : null;
var value_3 = exported_2.BindingEngine.evaluateExpression(modelBind.nodeValue, modelBind.getContent().$bindingContext);
values.push(this.runValueConverter(value_3));
}
finalValue = values;
}
else {
if (length_1 === 0) {
finalValue = null;
}
else {
var x = this.$element.selectedOptions[0];
var modelBind = x.hasAttribute('model.bind') ? x.getAttributeNode('model.bind') : null;
var value_4 = exported_2.BindingEngine.evaluateExpression(modelBind.nodeValue, modelBind.getContent().$bindingContext);
finalValue = value_4;
}
}
if (isArray) {
exported_2.BindingEngine.setValue(this.$bindingContext, this.attributeName, Array.isArray(finalValue) ? finalValue : finalValue === null ? [] : [finalValue]);
}
else {
exported_2.BindingEngine.setValue(this.$bindingContext, this.attributeName, Array.isArray(finalValue) ? finalValue.map(function (a) { return a; }) : finalValue);
}
break;
}
};
ValueAttribute = tslib_1.__decorate([
exported_1.customAttribute('value.bind'),
exported_1.customAttribute('checked.bind'),
tslib_1.__metadata("design:paramtypes", [])
], ValueAttribute);
return ValueAttribute;
}());
exports.ValueAttribute = ValueAttribute;
//# sourceMappingURL=valueAttribute.js.map