From 4ca29a2e8f712e2ab327e8561ae2b34af56ea47b Mon Sep 17 00:00:00 2001 From: djmaze Date: Tue, 14 Sep 2021 16:11:50 +0200 Subject: [PATCH] Cleanup knockout Components --- dev/App/Abstract.js | 7 +-- dev/Common/Translator.js | 10 +-- dev/Component/AbstractInput.js | 61 ++++++++----------- dev/Component/Select.js | 6 +- .../app/templates/Views/Components/Input.html | 2 +- .../templates/Views/Components/Select.html | 2 +- .../templates/Views/Components/TextArea.html | 2 +- 7 files changed, 39 insertions(+), 51 deletions(-) diff --git a/dev/App/Abstract.js b/dev/App/Abstract.js index 103e9a969..38037f27f 100644 --- a/dev/App/Abstract.js +++ b/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)) { - params.element.style.display = 'inline-block'; + if (params.inline) { + componentInfo.element.style.display = 'inline-block'; } } diff --git a/dev/Common/Translator.js b/dev/Common/Translator.js index 011791117..554771901 100644 --- a/dev/Common/Translator.js +++ b/dev/Common/Translator.js @@ -59,11 +59,13 @@ export const * @returns {string} */ i18n = (key, valueList, defaulValue) => { - let path = key.split('/'); - if (!I18N_DATA[path[0]] || !path[1]) { - return defaulValue || key; + let result = defaulValue || key; + if (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); diff --git a/dev/Component/AbstractInput.js b/dev/Component/AbstractInput.js index 57ac7aa16..0648a3390 100644 --- a/dev/Component/AbstractInput.js +++ b/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 = undefined === params.enable ? true : params.enable; + this.enable = null == 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.preLabeled = undefined !== params.preLabel; - this.triggered = undefined !== params.trigger && !!this.trigger; + this.labeled = null != params.label; - 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(() => { - const size = ko.unwrap(this.size), - suffixValue = this.trigger ? ' ' + ('settings-saved-trigger-input ' + this.classForTrigger()).trim() : ''; - return (0 < size ? 'span' + size : '') + suffixValue; - }); + setTriggerState(this.trigger()); - if (undefined !== params.width && params.element) { - params.element.querySelectorAll('input,select,textarea').forEach(node => node.style.width = params.width); + this.className = ko.computed(() => + ((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; - } } } diff --git a/dev/Component/Select.js b/dev/Component/Select.js index b7390f7ba..482138e08 100644 --- a/dev/Component/Select.js +++ b/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; - - if (this.optionsCaption) { - this.optionsCaption = i18n(this.optionsCaption); - } + this.optionsCaption = i18n(params.optionsCaption || null); this.defaultOptionsAfterRender = defaultOptionsAfterRender; } diff --git a/snappymail/v/0.0.0/app/templates/Views/Components/Input.html b/snappymail/v/0.0.0/app/templates/Views/Components/Input.html index 96ece3696..0277c77b7 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Components/Input.html +++ b/snappymail/v/0.0.0/app/templates/Views/Components/Input.html @@ -4,6 +4,6 @@   - + diff --git a/snappymail/v/0.0.0/app/templates/Views/Components/Select.html b/snappymail/v/0.0.0/app/templates/Views/Components/Select.html index cc21a3726..5bc600829 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Components/Select.html +++ b/snappymail/v/0.0.0/app/templates/Views/Components/Select.html @@ -5,7 +5,7 @@   - + diff --git a/snappymail/v/0.0.0/app/templates/Views/Components/TextArea.html b/snappymail/v/0.0.0/app/templates/Views/Components/TextArea.html index 66fea7ef3..59e805444 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Components/TextArea.html +++ b/snappymail/v/0.0.0/app/templates/Views/Components/TextArea.html @@ -1,5 +1,5 @@ - +