From 8c780ad353131f656af451db3c0bd5df4cb61faf Mon Sep 17 00:00:00 2001 From: djmaze Date: Wed, 10 Feb 2021 12:12:36 +0100 Subject: [PATCH] Replace deprecated Knockout throttle with new debounce extender Replace admin general mainAttachmentLimit with input type="number" --- dev/External/Admin/ko.js | 22 -------------- dev/External/User/ko.js | 29 ------------------- dev/Model/FilterCondition.js | 2 +- dev/Model/SieveScript.js | 2 +- dev/Settings/Admin/General.js | 4 +-- dev/Settings/User/Contacts.js | 2 +- dev/Settings/User/Filters.js | 2 +- dev/Settings/User/General.js | 2 +- dev/Settings/User/Themes.js | 2 +- dev/Stores/Admin/Package.js | 2 +- dev/Stores/Admin/Plugin.js | 2 +- dev/Stores/User/Account.js | 2 +- dev/Stores/User/Contact.js | 10 +++---- dev/Stores/User/Identity.js | 2 +- dev/Stores/User/Message.js | 22 ++++++++++---- dev/Stores/User/Template.js | 4 +-- dev/View/Popup/Compose.js | 4 +-- .../Views/Admin/AdminSettingsGeneral.html | 14 ++++----- 18 files changed, 45 insertions(+), 84 deletions(-) diff --git a/dev/External/Admin/ko.js b/dev/External/Admin/ko.js index 824794c98..79d3ab902 100644 --- a/dev/External/Admin/ko.js +++ b/dev/External/Admin/ko.js @@ -1,7 +1,6 @@ import 'External/ko'; import ko from 'ko'; import { SaveSettingsStep } from 'Common/Enums'; -import { pInt } from 'Common/Utils'; ko.bindingHandlers.saveTrigger = { init: (element) => { @@ -38,27 +37,6 @@ ko.extenders.idleTrigger = (target) => { return target; }; -ko.extenders.posInterer = (target, defaultVal) => { - const result = ko.computed({ - read: target, - write: newValue => { - let val = pInt(newValue.toString(), defaultVal); - if (0 >= val) { - val = defaultVal; - } - - if (val === target() && '' + val !== '' + newValue) { - target(val + 1); - } - - target(val); - } - }); - - result(target()); - return result; -}; - // functions ko.observable.fn.idleTrigger = function() { diff --git a/dev/External/User/ko.js b/dev/External/User/ko.js index dd59d117e..e79dafbc3 100644 --- a/dev/External/User/ko.js +++ b/dev/External/User/ko.js @@ -237,32 +237,3 @@ ko.bindingHandlers.onEsc = { ko.utils.domNodeDisposal.addDisposeCallback(element, () => element.removeEventListener('keyup', fn)); } }; - -// extenders - -ko.extenders.specialThrottle = (target, timeout) => { - timeout = parseInt(timeout, 10); - if (0 < timeout) { - let timer = 0, - valueForRead = ko.observable(!!target()).extend({ throttle: 10 }); - - return ko.computed({ - read: valueForRead, - write: (bValue) => { - if (bValue) { - valueForRead(bValue); - } else if (valueForRead()) { - clearTimeout(timer); - timer = setTimeout(() => { - valueForRead(false); - timer = 0; - }, timeout); - } else { - valueForRead(bValue); - } - } - }); - } - - return target; -}; diff --git a/dev/Model/FilterCondition.js b/dev/Model/FilterCondition.js index a17c96486..c4a06387a 100644 --- a/dev/Model/FilterCondition.js +++ b/dev/Model/FilterCondition.js @@ -55,7 +55,7 @@ export class FilterConditionModel extends AbstractModel { default: return template + 'Default'; } - }, this); + }); this.addSubscribables({ field: () => { diff --git a/dev/Model/SieveScript.js b/dev/Model/SieveScript.js index 604f438fb..44ec4401d 100644 --- a/dev/Model/SieveScript.js +++ b/dev/Model/SieveScript.js @@ -275,7 +275,7 @@ export class SieveScriptModel extends AbstractModel }); this.filters = ko.observableArray(); -// this.saving = ko.observable(false).extend({ throttle: 200 }); +// this.saving = ko.observable(false).extend({ debounce: 200 }); this.addSubscribables({ name: () => this.hasChanges(true), diff --git a/dev/Settings/Admin/General.js b/dev/Settings/Admin/General.js index 464530be0..60814e76d 100644 --- a/dev/Settings/Admin/General.js +++ b/dev/Settings/Admin/General.js @@ -57,7 +57,7 @@ export class GeneralAdminSettings { this.mainAttachmentLimit = ko .observable(pInt(settingsGet('AttachmentLimit')) / (1024 * 1024)) - .extend({ posInterer: 25 }); + .extend({ debounce: 500 }); this.uploadData = settingsGet('PhpUploadSizes'); this.uploadDataDesc = @@ -77,7 +77,7 @@ export class GeneralAdminSettings { this.languageFullName = ko.computed(() => convertLangName(this.language())); this.languageAdminFullName = ko.computed(() => convertLangName(this.languageAdmin())); - this.languageAdminTrigger = ko.observable(SaveSettingsStep.Idle).extend({ throttle: 100 }); + this.languageAdminTrigger = ko.observable(SaveSettingsStep.Idle).extend({ debounce: 100 }); } onBuild() { diff --git a/dev/Settings/User/Contacts.js b/dev/Settings/User/Contacts.js index bdc3e1342..061deec97 100644 --- a/dev/Settings/User/Contacts.js +++ b/dev/Settings/User/Contacts.js @@ -23,7 +23,7 @@ export class ContactsUserSettings { this.contactsSyncPass() ].join('|') ) - .extend({ throttle: 500 }); + .extend({ debounce: 500 }); } onBuild() { diff --git a/dev/Settings/User/Filters.js b/dev/Settings/User/Filters.js index ff79e3d3b..73cc2171a 100644 --- a/dev/Settings/User/Filters.js +++ b/dev/Settings/User/Filters.js @@ -16,7 +16,7 @@ import { SieveScriptPopupView } from 'View/Popup/SieveScript'; export class FiltersUserSettings { constructor() { this.scripts = SieveStore.scripts; - this.loading = ko.observable(false).extend({ throttle: 200 }); + this.loading = ko.observable(false).extend({ debounce: 200 }); ko.addObservablesTo(this, { serverError: false, diff --git a/dev/Settings/User/General.js b/dev/Settings/User/General.js index 4cc9088b7..a5aa1b832 100644 --- a/dev/Settings/User/General.js +++ b/dev/Settings/User/General.js @@ -47,7 +47,7 @@ export class GeneralUserSettings { this.allowLanguagesOnSettings = !!rl.settings.get('AllowLanguagesOnSettings'); this.languageFullName = ko.computed(() => convertLangName(this.language())); - this.languageTrigger = ko.observable(SaveSettingsStep.Idle).extend({ throttle: 100 }); + this.languageTrigger = ko.observable(SaveSettingsStep.Idle).extend({ debounce: 100 }); ko.addObservablesTo(this, { mppTrigger: SaveSettingsStep.Idle, diff --git a/dev/Settings/User/Themes.js b/dev/Settings/User/Themes.js index 3500a0690..de64da382 100644 --- a/dev/Settings/User/Themes.js +++ b/dev/Settings/User/Themes.js @@ -25,7 +25,7 @@ export class ThemesUserSettings { this.capaUserBackground = ko.observable(rl.settings.capa(Capa.UserBackground)); - this.themeTrigger = ko.observable(SaveSettingsStep.Idle).extend({ throttle: 100 }); + this.themeTrigger = ko.observable(SaveSettingsStep.Idle).extend({ debounce: 100 }); this.theme.subscribe((value) => { this.themesObjects.forEach(theme => { diff --git a/dev/Stores/Admin/Package.js b/dev/Stores/Admin/Package.js index 3edb010a1..c4618df7e 100644 --- a/dev/Stores/Admin/Package.js +++ b/dev/Stores/Admin/Package.js @@ -3,7 +3,7 @@ import ko from 'ko'; class PackageAdminStore { constructor() { this.packages = ko.observableArray(); - this.packages.loading = ko.observable(false).extend({ throttle: 100 }); + this.packages.loading = ko.observable(false).extend({ debounce: 100 }); ko.addObservablesTo(this, { packagesReal: true, diff --git a/dev/Stores/Admin/Plugin.js b/dev/Stores/Admin/Plugin.js index c60b03e84..09dc17055 100644 --- a/dev/Stores/Admin/Plugin.js +++ b/dev/Stores/Admin/Plugin.js @@ -3,7 +3,7 @@ import ko from 'ko'; class PluginAdminStore { constructor() { this.plugins = ko.observableArray(); - this.plugins.loading = ko.observable(false).extend({ throttle: 100 }); + this.plugins.loading = ko.observable(false).extend({ debounce: 100 }); this.plugins.error = ko.observable(''); } } diff --git a/dev/Stores/User/Account.js b/dev/Stores/User/Account.js index 512172026..54d3ec057 100644 --- a/dev/Stores/User/Account.js +++ b/dev/Stores/User/Account.js @@ -9,7 +9,7 @@ class AccountUserStore { }); this.accounts = ko.observableArray(); - this.accounts.loading = ko.observable(false).extend({ throttle: 100 }); + this.accounts.loading = ko.observable(false).extend({ debounce: 100 }); this.getEmailAddresses = () => this.accounts.map(item => item ? item.email : null).filter(v => v); diff --git a/dev/Stores/User/Contact.js b/dev/Stores/User/Contact.js index 8137f8f59..d118b2139 100644 --- a/dev/Stores/User/Contact.js +++ b/dev/Stores/User/Contact.js @@ -3,11 +3,11 @@ import ko from 'ko'; class ContactUserStore { constructor() { this.contacts = ko.observableArray(); - this.contacts.loading = ko.observable(false).extend({ throttle: 200 }); - this.contacts.importing = ko.observable(false).extend({ throttle: 200 }); - this.contacts.syncing = ko.observable(false).extend({ throttle: 200 }); - this.contacts.exportingVcf = ko.observable(false).extend({ throttle: 200 }); - this.contacts.exportingCsv = ko.observable(false).extend({ throttle: 200 }); + this.contacts.loading = ko.observable(false).extend({ debounce: 200 }); + this.contacts.importing = ko.observable(false).extend({ debounce: 200 }); + this.contacts.syncing = ko.observable(false).extend({ debounce: 200 }); + this.contacts.exportingVcf = ko.observable(false).extend({ debounce: 200 }); + this.contacts.exportingCsv = ko.observable(false).extend({ debounce: 200 }); ko.addObservablesTo(this, { allowContactsSync: false, diff --git a/dev/Stores/User/Identity.js b/dev/Stores/User/Identity.js index ed3344c46..657e41c69 100644 --- a/dev/Stores/User/Identity.js +++ b/dev/Stores/User/Identity.js @@ -3,7 +3,7 @@ import ko from 'ko'; class IdentityUserStore { constructor() { this.identities = ko.observableArray(); - this.identities.loading = ko.observable(false).extend({ throttle: 100 }); + this.identities.loading = ko.observable(false).extend({ debounce: 100 }); this.getIDS = () => this.identities.map(item => (item ? item.id() : null)).filter(value => null !== value); } diff --git a/dev/Stores/User/Message.js b/dev/Stores/User/Message.js index cd5d05e5e..55dc9c5bc 100644 --- a/dev/Stores/User/Message.js +++ b/dev/Stores/User/Message.js @@ -57,7 +57,7 @@ class MessageUserStore { constructor() { this.staticMessage = new MessageModel(); - this.messageList = ko.observableArray().extend({ rateLimit: 0 }); + this.messageList = ko.observableArray().extend({ debounce: 0 }); ko.addObservablesTo(this, { messageListCount: 0, @@ -93,12 +93,12 @@ class MessageUserStore { messageActiveDom: null }); - this.messageListCompleteLoadingThrottle = ko.observable(false).extend({ throttle: 200 }); - this.messageListCompleteLoadingThrottleForAnimation = ko.observable(false).extend({ specialThrottle: 700 }); + this.messageListCompleteLoadingThrottle = ko.observable(false).extend({ debounce: 200 }); + this.messageListCompleteLoadingThrottleForAnimation = ko.observable(false); this.messageListDisableAutoSelect = ko.observable(false).extend({ falseTimeout: 500 }); - this.messageLoadingThrottle = ko.observable(false).extend({ throttle: 50 }); + this.messageLoadingThrottle = ko.observable(false).extend({ debounce: 50 }); this.messageLoading = ko.computed(() => this.messageCurrentLoading()); @@ -184,10 +184,22 @@ class MessageUserStore { } subscribers() { + let timer = 0, fn = this.messageListCompleteLoadingThrottleForAnimation; this.messageListCompleteLoading.subscribe((value) => { value = !!value; this.messageListCompleteLoadingThrottle(value); - this.messageListCompleteLoadingThrottleForAnimation(value); + + if (value) { + fn(value); + } else if (fn()) { + clearTimeout(timer); + timer = setTimeout(() => { + fn(value); + timer = 0; + }, 700); + } else { + fn(value); + } }); this.messageList.subscribe( diff --git a/dev/Stores/User/Template.js b/dev/Stores/User/Template.js index 21fdb6e88..c4151fe3d 100644 --- a/dev/Stores/User/Template.js +++ b/dev/Stores/User/Template.js @@ -5,9 +5,9 @@ import ko from 'ko'; class TemplateUserStore { constructor() { this.templates = ko.observableArray(); - this.templates.loading = ko.observable(false).extend({ throttle: 100 }); + this.templates.loading = ko.observable(false).extend({ debounce: 100 }); - this.templatesNames = ko.observableArray().extend({ throttle: 1000 }); + this.templatesNames = ko.observableArray().extend({ debounce: 1000 }); this.templatesNames.skipFirst = true; this.subscribers(); diff --git a/dev/View/Popup/Compose.js b/dev/View/Popup/Compose.js index 3dad7ac37..3969ce2cf 100644 --- a/dev/View/Popup/Compose.js +++ b/dev/View/Popup/Compose.js @@ -202,8 +202,8 @@ class ComposePopupView extends AbstractViewPopup { this.attachments = ko.observableArray(); - this.dragAndDropOver = ko.observable(false).extend({ throttle: 1 }); - this.dragAndDropVisible = ko.observable(false).extend({ throttle: 1 }); + this.dragAndDropOver = ko.observable(false).extend({ debounce: 1 }); + this.dragAndDropVisible = ko.observable(false).extend({ debounce: 1 }); this.currentIdentity.extend({ toggleSubscribe: [ diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsGeneral.html b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsGeneral.html index 152c56d1a..38c12cc24 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsGeneral.html +++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsGeneral.html @@ -111,14 +111,14 @@
+ +   + +   +