Added ko toggle bindingHandler

This commit is contained in:
the-djmaze 2024-02-11 20:34:02 +01:00
parent 17cb093b32
commit ec5d570ac6
4 changed files with 25 additions and 16 deletions

17
dev/External/ko.js vendored
View file

@ -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);
ko.utils.domNodeDisposal.addDisposeCallback(element, () => element.removeEventListener('keydown', fn));
onEvent(element, '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());

View file

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

View file

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

View file

@ -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/CC" data-bind="visible: !showCc(), click: function () { showCc(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(), 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>