Cleanup knockout Components

dev/App/Abstract.js

@@ -43,16 +43,13 @@ export class AbstractApp {
 				viewModel: {
 					createViewModel: (params, componentInfo) => {
 						params = params || {};
-						params.element = null;
 
 						if (componentInfo && componentInfo.element) {
-							params.component = componentInfo;
-							params.element = componentInfo.element;
 
 							i18nToNodes(componentInfo.element);
 
-							if (params.inline && ko.unwrap(params.inline)) {
+							if (params.inline) {
-								params.element.style.display = 'inline-block';
+								componentInfo.element.style.display = 'inline-block';
 							}
 						}
 

dev/Common/Translator.js

@@ -59,11 +59,13 @@ export const
 	 * @returns {string}
 	 */
 	i18n = (key, valueList, defaulValue) => {
-		let path = key.split('/');
+		let result = defaulValue || key;
-		if (!I18N_DATA[path[0]] || !path[1]) {
+		if (key) {
-			return defaulValue || key;
+			let path = key.split('/');
+			if (I18N_DATA[path[0]] && path[1]) {
+				result = I18N_DATA[path[0]][path[1]] || result;
+			}
 		}
-		let result = I18N_DATA[path[0]][path[1]] || defaulValue || key;
 		if (valueList) {
 			Object.entries(valueList).forEach(([key, value]) => {
 				result = result.replace('%' + key + '%', value);

dev/Component/AbstractInput.js

@@ -11,50 +11,43 @@ class AbstractInput extends AbstractComponent {
 		super();
 
 		this.value = params.value || '';
-		this.size = params.size || 0;
 		this.label = params.label || '';
-		this.preLabel = params.preLabel || '';
+		this.enable = null == params.enable ? true : params.enable;
-		this.enable = undefined === params.enable ? true : params.enable;
 		this.trigger = params.trigger && params.trigger.subscribe ? params.trigger : null;
 		this.placeholder = params.placeholder || '';
 
-		this.labeled = undefined !== params.label;
+		this.labeled = null != params.label;
-		this.preLabeled = undefined !== params.preLabel;
-		this.triggered = undefined !== params.trigger && !!this.trigger;
 
-		this.classForTrigger = ko.observable('');
+		let size = params.size || 0;
+		if (this.trigger) {
+			const
+				classForTrigger = ko.observable(''),
+				setTriggerState = value => {
+					switch (pInt(value)) {
+						case SaveSettingsStep.TrueResult:
+							classForTrigger('success');
+							break;
+						case SaveSettingsStep.FalseResult:
+							classForTrigger('error');
+							break;
+						default:
+							classForTrigger('');
+							break;
+					}
+				};
 
-		this.className = ko.computed(() => {
+			setTriggerState(this.trigger());
-			const size = ko.unwrap(this.size),
-				suffixValue = this.trigger ? ' ' + ('settings-saved-trigger-input ' + this.classForTrigger()).trim() : '';
-			return (0 < size ? 'span' + size : '') + suffixValue;
-		});
 
-		if (undefined !== params.width && params.element) {
+			this.className = ko.computed(() =>
-			params.element.querySelectorAll('input,select,textarea').forEach(node => node.style.width = params.width);
+				((0 < size ? 'span' + size : '') + ' settings-saved-trigger-input ' + classForTrigger()).trim()
+			);
+
+			this.disposable.push(this.trigger.subscribe(setTriggerState, this));
+		} else {
+			this.className = ko.computed(() => 0 < size ? 'span' + size : '');
 		}
 
 		this.disposable.push(this.className);
-
-		if (this.trigger) {
-			this.setTriggerState(this.trigger());
-
-			this.disposable.push(this.trigger.subscribe(this.setTriggerState, this));
-		}
-	}
-
-	setTriggerState(value) {
-		switch (pInt(value)) {
-			case SaveSettingsStep.TrueResult:
-				this.classForTrigger('success');
-				break;
-			case SaveSettingsStep.FalseResult:
-				this.classForTrigger('error');
-				break;
-			default:
-				this.classForTrigger('');
-				break;
-		}
 	}
 }
 

dev/Component/Select.js

@@ -13,11 +13,7 @@ export class SelectComponent extends AbstractInput {
 
 		this.optionsText = params.optionsText || null;
 		this.optionsValue = params.optionsValue || null;
-		this.optionsCaption = params.optionsCaption || null;
+		this.optionsCaption = i18n(params.optionsCaption || null);
-
-		if (this.optionsCaption) {
-			this.optionsCaption = i18n(this.optionsCaption);
-		}
 
 		this.defaultOptionsAfterRender = defaultOptionsAfterRender;
 	}

snappymail/v/0.0.0/app/templates/Views/Components/Input.html

@@ -4,6 +4,6 @@
 	 
 	<span data-bind="attr: {'data-i18n': label}"></span>
 <!-- /ko -->
-<!-- ko if: triggered -->
+<!-- ko if: trigger -->
 	<span data-bind="saveTrigger: trigger"></span>
 <!-- /ko -->

snappymail/v/0.0.0/app/templates/Views/Components/Select.html

@@ -5,7 +5,7 @@
 	 
 	<span data-bind="attr: {'data-i18n': label}"></span>
 	<!-- /ko -->
-	<!-- ko if: triggered -->
+	<!-- ko if: trigger -->
 	<span data-bind="saveTrigger: trigger"></span>
 	<!-- /ko -->
 </div>

snappymail/v/0.0.0/app/templates/Views/Components/TextArea.html

@@ -1,5 +1,5 @@
 <textarea rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 	data-bind="value: value, enable: enable, attr: { 'placeholder': placeholder, 'rows': rows, 'spellcheck': spellcheck ? 'true' : 'false' }, css: className"></textarea>
-<!-- ko if: triggered -->
+<!-- ko if: trigger -->
 	<span data-bind="saveTrigger: trigger"></span>
 <!-- /ko -->