mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-29 20:19:22 +03:00
Revamp saveTrigger
This commit is contained in:
parent
325f3c8eea
commit
ce4ee3ba3f
15 changed files with 72 additions and 179 deletions
38
dev/External/Admin/ko.js
vendored
38
dev/External/Admin/ko.js
vendored
|
|
@ -2,43 +2,9 @@ import 'External/ko';
|
|||
import ko from 'ko';
|
||||
import { SaveSettingsStep } from 'Common/Enums';
|
||||
|
||||
ko.bindingHandlers.saveTrigger = {
|
||||
init: (element) => {
|
||||
element.saveTriggerType = element.matches('input[type=text],input[type=email],input[type=password],select,textarea')
|
||||
? 'input' : 'custom';
|
||||
|
||||
if ('custom' === element.saveTriggerType) {
|
||||
element.append(
|
||||
' ',
|
||||
Element.fromHTML('<i class="icon-spinner"></i>'),
|
||||
Element.fromHTML('<i class="fontastic error">✖</i>'),
|
||||
Element.fromHTML('<i class="icon-ok success"></i>')
|
||||
);
|
||||
element.classList.add('settings-saved-trigger');
|
||||
} else {
|
||||
element.classList.add('settings-saved-trigger-input');
|
||||
}
|
||||
},
|
||||
update: (element, fValueAccessor) => {
|
||||
const value = parseInt(ko.unwrap(fValueAccessor()),10);
|
||||
if ('custom' === element.saveTriggerType) {
|
||||
element.querySelector('.icon-spinner').hidden = value !== SaveSettingsStep.Animate;
|
||||
element.querySelector('.success').hidden = value !== SaveSettingsStep.TrueResult;
|
||||
element.querySelector('.error').hidden = value !== SaveSettingsStep.FalseResult;
|
||||
} else if (value !== SaveSettingsStep.Animate) {
|
||||
element.classList.toggle('success', value === SaveSettingsStep.TrueResult);
|
||||
element.classList.toggle('error', value === SaveSettingsStep.FalseResult);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ko.extenders.idleTrigger = (target) => {
|
||||
target.trigger = ko.observable(SaveSettingsStep.Idle);
|
||||
return target;
|
||||
};
|
||||
|
||||
// functions
|
||||
|
||||
ko.observable.fn.idleTrigger = function() {
|
||||
return this.extend({ 'idleTrigger': true });
|
||||
this.trigger = ko.observable(SaveSettingsStep.Idle);
|
||||
return this;
|
||||
};
|
||||
|
|
|
|||
44
dev/External/ko.js
vendored
44
dev/External/ko.js
vendored
|
|
@ -1,5 +1,6 @@
|
|||
import { i18n, i18nToNodes, trigger } from 'Common/Translator';
|
||||
import { doc, dropdownVisibility } from 'Common/Globals';
|
||||
import { doc, createElement, dropdownVisibility } from 'Common/Globals';
|
||||
import { SaveSettingsStep } from 'Common/Enums';
|
||||
|
||||
const
|
||||
isFunction = v => typeof v === 'function',
|
||||
|
|
@ -170,6 +171,29 @@ ko.bindingHandlers.command = {
|
|||
}
|
||||
};
|
||||
|
||||
ko.bindingHandlers.saveTrigger = {
|
||||
init: (element) => {
|
||||
let icon = element;
|
||||
if (element.matches('input,select,textarea')) {
|
||||
element.classList.add('settings-saved-trigger-input');
|
||||
element.after(element.saveTriggerIcon = icon = createElement('span'));
|
||||
}
|
||||
icon.classList.add('settings-save-trigger');
|
||||
},
|
||||
update: (element, fValueAccessor) => {
|
||||
const value = parseInt(ko.unwrap(fValueAccessor()),10);
|
||||
let cl = (element.saveTriggerIcon || element).classList;
|
||||
if (element.saveTriggerIcon) {
|
||||
cl.toggle('saving', value === SaveSettingsStep.Animate);
|
||||
cl.toggle('success', value === SaveSettingsStep.TrueResult);
|
||||
cl.toggle('error', value === SaveSettingsStep.FalseResult);
|
||||
}
|
||||
cl = element.classList;
|
||||
cl.toggle('success', value === SaveSettingsStep.TrueResult);
|
||||
cl.toggle('error', value === SaveSettingsStep.FalseResult);
|
||||
}
|
||||
};
|
||||
|
||||
// extenders
|
||||
|
||||
ko.extenders.limitedList = (target, limitedList) => {
|
||||
|
|
@ -233,17 +257,7 @@ ko.extenders.toggleSubscribeProperty = (target, options) => {
|
|||
};
|
||||
|
||||
ko.extenders.falseTimeout = (target, option) => {
|
||||
target.iFalseTimeoutTimeout = 0;
|
||||
target.subscribe(value => {
|
||||
if (value) {
|
||||
clearTimeout(target.iFalseTimeoutTimeout);
|
||||
target.iFalseTimeoutTimeout = setTimeout(() => {
|
||||
target(false);
|
||||
target.iFalseTimeoutTimeout = 0;
|
||||
}, parseInt(option, 10) || 0);
|
||||
}
|
||||
});
|
||||
|
||||
target.subscribe((() => target(false)).debounce(parseInt(option, 10) || 0));
|
||||
return target;
|
||||
};
|
||||
|
||||
|
|
@ -254,12 +268,8 @@ ko.observable.fn.deleteAccessHelper = function() {
|
|||
};
|
||||
|
||||
ko.addObservablesTo = (target, observables) => {
|
||||
Object.entries(observables).forEach(([key, value]) => target[key] = ko.observable(value) );
|
||||
/*
|
||||
Object.entries(observables).forEach(([key, value]) =>
|
||||
target[key] = Array.isArray(value) ? ko.observableArray(value) : ko.observable(value)
|
||||
);
|
||||
*/
|
||||
target[key] = /*Array.isArray(value) ? ko.observableArray(value) :*/ ko.observable(value) );
|
||||
};
|
||||
|
||||
ko.addComputablesTo = (target, computables) =>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue