Revamp saveTrigger

This commit is contained in:
djmaze 2021-02-11 10:08:27 +01:00
parent 325f3c8eea
commit ce4ee3ba3f
15 changed files with 72 additions and 179 deletions

View file

@ -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
View file

@ -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) =>