Added ko toggle bindingHandler

dev/External/ko.js

@@ -28,6 +28,11 @@ export const
 
 	dispose = disposable => isFunction(disposable?.dispose) && disposable.dispose(),
 
+	onEvent = (element, event, fn) => {
+		element.addEventListener(event, fn);
+		ko.utils.domNodeDisposal.addDisposeCallback(element, () => element.removeEventListener(event, fn));
+	},
+
 	onKey = (key, element, fValueAccessor, fAllBindings, model) => {
 		let fn = event => {
 			if (key == event.key) {
@@ -36,8 +41,7 @@ export const
 				fValueAccessor().call(model);
 			}
 		};
-		element.addEventListener('keydown', fn);
+		onEvent(element, 'keydown', fn);
-		ko.utils.domNodeDisposal.addDisposeCallback(element, () => element.removeEventListener('keydown', fn));
 	},
 
 	// With this we don't need delegateRunOnDestroy
@@ -82,6 +86,15 @@ Object.assign(ko.bindingHandlers, {
 			onKey(' ', element, fValueAccessor, fAllBindings, model)
 	},
 
+	toggle: {
+		init: (element, fValueAccessor) => {
+			let observable = fValueAccessor(),
+				fn = () => observable(!observable());
+			onEvent(element, 'click', fn);
+			onEvent(element, 'keydown', event => ' ' == event.key && fn());
+		}
+	},
+
 	i18nUpdate: {
 		update: (element, fValueAccessor) => {
 			ko.unwrap(fValueAccessor());

dev/View/User/Login.js

@@ -92,10 +92,6 @@ export class LoginUserView extends AbstractViewLogin {
 		this.submitError('');
 	}
 
-	toggleSignMe() {
-		this.signMe(!this.signMe());
-	}
-
 	submitCommand(self, event) {
 		const email = this.email().trim();
 		this.email(email);

snappymail/v/0.0.0/app/templates/Views/User/Login.html

@@ -25,7 +25,7 @@
 	</div>
 	<div id="plugin-Login-BottomControlGroup"></div>
 	<div class="controls" style="display: flex">
-		<div class="e-checkbox" tabindex="0" data-bind="click: toggleSignMe, onSpace: toggleSignMe">
+		<div class="e-checkbox" tabindex="0" data-bind="toggle: signMe">
 			<i role="checkbox" class="fontastic" data-bind="text: signMe() ? '☑' : '☐'"></i>
 			<span data-i18n="LOGIN/LABEL_SIGN_ME"></span>
 		</div>

snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html

@@ -12,49 +12,49 @@
 	<span class="saved-text hide-mobile" data-bind="text: savedTimeText"></span>
 
 	<div class="pull-right">
-		<a class="btn hide-mobile" data-i18n="GLOBAL/BCC" data-bind="visible: !showBcc(), click: function () { showBcc(true); }"></a>
+		<a class="btn hide-mobile" data-i18n="GLOBAL/BCC" data-bind="visible: !showBcc(), toggle: showBcc"></a>
-		<a class="btn hide-mobile" data-i18n="GLOBAL/CC" data-bind="visible: !showCc(), click: function () { showCc(true); }"></a>
+		<a class="btn hide-mobile" data-i18n="GLOBAL/CC" data-bind="visible: !showCc(), toggle: showCc"></a>
 		<a class="btn fontastic" data-bind="visible: allowContacts, command: contactsCommand" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
 		<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true" style="display:inline-block;vertical-align:top">
 			<a class="btn dropdown-toggle fontastic">☰</a>
 			<menu class="dropdown-menu right-edge" role="menu">
-				<li data-bind="click: function () { showBcc(!showBcc()); }">
+				<li data-bind="toggle: showBcc">
 					<a>
 						<i class="fontastic" data-bind="text: showBcc() ? '☑' : '☐'"></i>
 						<span data-i18n="GLOBAL/BCC"></span>
 					</a>
 				</li>
-				<li data-bind="click: function () { showCc(!showCc()); }">
+				<li data-bind="toggle: showCc">
 					<a>
 						<i class="fontastic" data-bind="text: showCc() ? '☑' : '☐'"></i>
 						<span data-i18n="GLOBAL/CC"></span>
 					</a>
 				</li>
-				<li data-bind="click: function () { showReplyTo(!showReplyTo()); }">
+				<li data-bind="toggle: showReplyTo">
 					<a>
 						<i class="fontastic" data-bind="text: showReplyTo() ? '☑' : '☐'"></i>
 						<span data-i18n="GLOBAL/REPLY_TO"></span>
 					</a>
 				</li>
-				<li data-bind="click: function () { requestReadReceipt(!requestReadReceipt()); }">
+				<li data-bind="toggle: requestReadReceipt">
 					<a>
 						<i class="fontastic" data-bind="text: requestReadReceipt() ? '☑' : '☐'"></i>
 						<span data-i18n="COMPOSE/BUTTON_REQUEST_READ_RECEIPT"></span>
 					</a>
 				</li>
-				<li data-bind="click: function () { requestDsn(!requestDsn()); }">
+				<li data-bind="toggle: requestDsn">
 					<a>
 						<i class="fontastic" data-bind="text: requestDsn() ? '☑' : '☐'"></i>
 						<span data-i18n="COMPOSE/BUTTON_REQUEST_DSN"></span>
 					</a>
 				</li>
-				<li data-bind="click: function () { requireTLS(!requireTLS()); }">
+				<li data-bind="toggle: requireTLS">
 					<a>
 						<i class="fontastic" data-bind="text: requireTLS() ? '☑' : '☐'"></i>
 						<span data-i18n="COMPOSE/BUTTON_REQUIRE_TLS"></span>
 					</a>
 				</li>
-				<li data-bind="click: function () { markAsImportant(!markAsImportant()); }">
+				<li data-bind="toggle: markAsImportant">
 					<a>
 						<i class="fontastic" data-bind="text: markAsImportant() ? '☑' : '☐'"></i>
 						<span data-i18n="COMPOSE/BUTTON_MARK_AS_IMPORTANT"></span>