mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 15:45:55 +08:00
Cleanup knockout Components
This commit is contained in:
parent
3f295349b6
commit
4ca29a2e8f
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 -->
|
||||
|
|
Loading…
Reference in a new issue