diff --git a/dev/Common/Globals.js b/dev/Common/Globals.js index d1a8878f5..4d86df9dc 100644 --- a/dev/Common/Globals.js +++ b/dev/Common/Globals.js @@ -33,6 +33,11 @@ export const new CustomEvent(name, {detail:detail, cancelable: !!cancelable}) ), + stopEvent = event => { + event.preventDefault(); + event.stopPropagation(); + }, + formFieldFocused = () => doc.activeElement?.matches('input,textarea'), addShortcut = (...args) => shortcuts.add(...args), diff --git a/dev/External/ko.js b/dev/External/ko.js index 9bd5ee698..a67337b81 100644 --- a/dev/External/ko.js +++ b/dev/External/ko.js @@ -28,6 +28,18 @@ export const dispose = disposable => isFunction(disposable?.dispose) && disposable.dispose(), + onKey = (key, element, fValueAccessor, fAllBindings, viewModel) => { + let fn = event => { + if (key == event.key) { +// stopEvent(event); +// element.dispatchEvent(new Event('change')); + fValueAccessor().call(viewModel); + } + }; + element.addEventListener('keydown', fn); + ko.utils.domNodeDisposal.addDisposeCallback(element, () => element.removeEventListener('keydown', fn)); + }, + // With this we don't need delegateRunOnDestroy koArrayWithDestroy = data => { data = ko.observableArray(data); @@ -56,41 +68,18 @@ Object.assign(ko.bindingHandlers, { }, onEnter: { - init: (element, fValueAccessor, fAllBindings, viewModel) => { - let fn = event => { - if ('Enter' == event.key) { - element.dispatchEvent(new Event('change')); - fValueAccessor().call(viewModel); - } - }; - element.addEventListener('keydown', fn); - ko.utils.domNodeDisposal.addDisposeCallback(element, () => element.removeEventListener('keydown', fn)); - } + init: (element, fValueAccessor, fAllBindings, viewModel) => + onKey('Enter', element, fValueAccessor, fAllBindings, viewModel) }, onEsc: { - init: (element, fValueAccessor, fAllBindings, viewModel) => { - let fn = event => { - if ('Escape' == event.key) { - element.dispatchEvent(new Event('change')); - fValueAccessor().call(viewModel); - } - }; - element.addEventListener('keyup', fn); - ko.utils.domNodeDisposal.addDisposeCallback(element, () => element.removeEventListener('keyup', fn)); - } + init: (element, fValueAccessor, fAllBindings, viewModel) => + onKey('Escape', element, fValueAccessor, fAllBindings, viewModel) }, onSpace: { - init: (element, fValueAccessor, fAllBindings, viewModel) => { - let fn = event => { - if (' ' == event.key) { - fValueAccessor().call(viewModel, event); - } - }; - element.addEventListener('keyup', fn); - ko.utils.domNodeDisposal.addDisposeCallback(element, () => element.removeEventListener('keyup', fn)); - } + init: (element, fValueAccessor, fAllBindings, viewModel) => + onKey(' ', element, fValueAccessor, fAllBindings, viewModel) }, i18nUpdate: { diff --git a/dev/Model/Attachment.js b/dev/Model/Attachment.js index 011dcd271..6b610981a 100644 --- a/dev/Model/Attachment.js +++ b/dev/Model/Attachment.js @@ -1,6 +1,7 @@ import ko from 'ko'; import { FileInfo, FileType } from 'Common/File'; +import { stopEvent } from 'Common/Globals'; import { attachmentDownload, serverRequestRaw @@ -53,7 +54,7 @@ export class AttachmentModel extends AbstractModel { } toggleChecked(self, event) { - event.stopPropagation(); + stopEvent(event); self.checked(!self.checked()); } diff --git a/dev/View/User/MailBox/FolderList.js b/dev/View/User/MailBox/FolderList.js index e1ebd9cd4..3f013ffc8 100644 --- a/dev/View/User/MailBox/FolderList.js +++ b/dev/View/User/MailBox/FolderList.js @@ -1,7 +1,7 @@ import ko from 'ko'; import { Scope } from 'Common/Enums'; -import { addShortcut } from 'Common/Globals'; +import { addShortcut, stopEvent } from 'Common/Globals'; import { mailBox, settings } from 'Common/Links'; //import { setFolderETag } from 'Common/Cache'; import { addComputablesTo } from 'External/ko'; @@ -80,8 +80,7 @@ export class MailFolderList extends AbstractViewLeft { setExpandedFolder(folder.fullName, collapsed); folder.collapsed(!collapsed); - event.preventDefault(); - event.stopPropagation(); + stopEvent(event); return; } } diff --git a/dev/View/User/MailBox/MessageList.js b/dev/View/User/MailBox/MessageList.js index 5542b66da..851b87979 100644 --- a/dev/View/User/MailBox/MessageList.js +++ b/dev/View/User/MailBox/MessageList.js @@ -8,7 +8,7 @@ import { ComposeType, FolderType, MessageSetAction } from 'Common/EnumsUser'; import { doc, leftPanelDisabled, toggleLeftPanel, Settings, SettingsCapa, - addEventsListeners, + addEventsListeners, stopEvent, addShortcut, registerShortcut, formFieldFocused } from 'Common/Globals'; @@ -412,8 +412,7 @@ export class MailMessageList extends AbstractViewRight { moveCommand(vm, event) { if (this.mobileCheckedStateShow()) { if (vm && event?.preventDefault) { - event.preventDefault(); - event.stopPropagation(); + stopEvent(event); } let b = moveAction(); diff --git a/dev/View/User/MailBox/MessageView.js b/dev/View/User/MailBox/MessageView.js index fcf7df6ad..160bdab36 100644 --- a/dev/View/User/MailBox/MessageView.js +++ b/dev/View/User/MailBox/MessageView.js @@ -18,6 +18,7 @@ import { Settings, SettingsCapa, fireEvent, + stopEvent, addShortcut, registerShortcut } from 'Common/Globals'; @@ -283,19 +284,18 @@ export class MailMessageView extends AbstractViewRight { let el = eqs(event, 'a'); if (el && 0 === event.button && mailToHelper(el.href)) { - event.preventDefault(); - event.stopPropagation(); + stopEvent(event); return; } if (eqs(event, '.attachmentsPlace .showPreview')) { - event.stopPropagation(); + stopEvent(event); return; } el = eqs(event, '.attachmentsPlace .showPreplay'); if (el) { - event.stopPropagation(); + stopEvent(event); const attachment = ko.dataFor(el); if (attachment && SMAudio.supported) { switch (true) { diff --git a/dev/View/User/SystemDropDown.js b/dev/View/User/SystemDropDown.js index ff0d7d306..63bc09ea8 100644 --- a/dev/View/User/SystemDropDown.js +++ b/dev/View/User/SystemDropDown.js @@ -12,7 +12,7 @@ import { KeyboardShortcutsHelpPopupView } from 'View/Popup/KeyboardShortcutsHelp import { AccountPopupView } from 'View/Popup/Account'; import { ContactsPopupView } from 'View/Popup/Contacts'; -import { doc, leftPanelDisabled, fireEvent, SettingsCapa, registerShortcut } from 'Common/Globals'; +import { doc, leftPanelDisabled, fireEvent, stopEvent, SettingsCapa, registerShortcut } from 'Common/Globals'; import { ThemeStore } from 'Stores/Theme'; @@ -56,8 +56,7 @@ export class SystemDropDownUserView extends AbstractViewRight { let email = account?.email; if (email && 0 === event.button && AccountUserStore.email() != email) { AccountUserStore.loading(true); - event.preventDefault(); - event.stopPropagation(); + stopEvent(event); Remote.request('AccountSwitch', (iError/*, oData*/) => { if (iError) {