Replace deprecated Knockout throttle with new debounce extender

Replace admin general mainAttachmentLimit with input type="number"

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() {

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;
-};

dev/Model/FilterCondition.js

@@ -55,7 +55,7 @@ export class FilterConditionModel extends AbstractModel {
 				default:
 					return template + 'Default';
 			}
-		}, this);
+		});
 
 		this.addSubscribables({
 			field: () => {

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),

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() {

dev/Settings/User/Contacts.js

@@ -23,7 +23,7 @@ export class ContactsUserSettings {
 					this.contactsSyncPass()
 				].join('|')
 			)
-			.extend({ throttle: 500 });
+			.extend({ debounce: 500 });
 	}
 
 	onBuild() {

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,

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,

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 => {

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,

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('');
 	}
 }

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);
 

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.loading = ko.observable(false).extend({ debounce: 200 });
-		this.contacts.importing = ko.observable(false).extend({ throttle: 200 });
+		this.contacts.importing = ko.observable(false).extend({ debounce: 200 });
-		this.contacts.syncing = ko.observable(false).extend({ throttle: 200 });
+		this.contacts.syncing = ko.observable(false).extend({ debounce: 200 });
-		this.contacts.exportingVcf = ko.observable(false).extend({ throttle: 200 });
+		this.contacts.exportingVcf = ko.observable(false).extend({ debounce: 200 });
-		this.contacts.exportingCsv = ko.observable(false).extend({ throttle: 200 });
+		this.contacts.exportingCsv = ko.observable(false).extend({ debounce: 200 });
 
 		ko.addObservablesTo(this, {
 			allowContactsSync: false,

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);
 	}

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.messageListCompleteLoadingThrottle = ko.observable(false).extend({ debounce: 200 });
-		this.messageListCompleteLoadingThrottleForAnimation = ko.observable(false).extend({ specialThrottle: 700 });
+		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(

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();

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.dragAndDropOver = ko.observable(false).extend({ debounce: 1 });
-		this.dragAndDropVisible = ko.observable(false).extend({ throttle: 1 });
+		this.dragAndDropVisible = ko.observable(false).extend({ debounce: 1 });
 
 		this.currentIdentity.extend({
 			toggleSubscribe: [

snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsGeneral.html

@@ -111,14 +111,14 @@
 		<div class="control-group">
 			<label class="control-label" data-i18n="TAB_GENERAL/LABEL_ATTACHMENT_SIZE_LIMIT"></label>
 			<div class="controls">
+				<input type="number" min="1" step="1" class="span1" data-bind="textInput: mainAttachmentLimit"/>
+				&nbsp;
+				<span data-i18n="MB"></span>
+				&nbsp;
+				&nbsp;
 				<div data-bind="component: {
-					name: 'Input',
+					name: 'SaveTrigger',
-					params: {
+					params: { value: attachmentLimitTrigger }
-						label: 'MB',
-						value: mainAttachmentLimit,
-						trigger: attachmentLimitTrigger,
-						size: 1
-					}
 				}"></div>
 				<br />
 				<br />