Drop the ko.bindingHandlers.modal as click.koModal is never used

And replace hideScreenPopup() with this.closeCommand();
This commit is contained in:
djmaze 2021-11-06 22:08:45 +01:00
parent 2e34f98c80
commit 880d4a05e9
30 changed files with 66 additions and 69 deletions

12
dev/External/ko.js vendored
View file

@ -45,18 +45,6 @@ ko.bindingHandlers.onSpace = {
} }
}; };
ko.bindingHandlers.modal = {
init: (element, fValueAccessor) => {
const close = element.querySelector('.close'),
click = () => fValueAccessor()(false);
close && close.addEventListener('click.koModal', click);
ko.utils.domNodeDisposal.addDisposeCallback(element, () =>
close.removeEventListener('click.koModal', click)
);
}
};
ko.bindingHandlers.i18nInit = { ko.bindingHandlers.i18nInit = {
init: element => i18nToNodes(element) init: element => i18nToNodes(element)
}; };

View file

@ -13,8 +13,6 @@ class AbstractView {
this.viewType = type; this.viewType = type;
this.viewModelDom = null; this.viewModelDom = null;
this.modalVisibility = ko.observable(false).extend({ rateLimit: 0 });
this.keyScope = { this.keyScope = {
scope: Scope.None, scope: Scope.None,
previous: Scope.None, previous: Scope.None,
@ -62,6 +60,7 @@ export class AbstractViewPopup extends AbstractView
this.keyScope.scope = Scope[name]; this.keyScope.scope = Scope[name];
} }
this.bDisabeCloseOnEsc = false; this.bDisabeCloseOnEsc = false;
this.modalVisibility = ko.observable(false).extend({ rateLimit: 0 });
} }
/* /*
onShowWithDelay() {} onShowWithDelay() {}

View file

@ -45,9 +45,7 @@ const
ViewModelClass.__dom = vmDom; ViewModelClass.__dom = vmDom;
if (ViewType.Popup === position) { if (ViewType.Popup === position) {
vm.cancelCommand = vm.closeCommand = createCommand(() => { vm.cancelCommand = vm.closeCommand = createCommand(() => hideScreenPopup(ViewModelClass));
hideScreenPopup(ViewModelClass);
});
// show/hide popup/modal // show/hide popup/modal
const endShowHide = e => { const endShowHide = e => {
@ -81,6 +79,17 @@ const
arePopupsVisible(0 < visiblePopups.size); arePopupsVisible(0 < visiblePopups.size);
} }
vmDom.setAttribute('aria-hidden', !value); vmDom.setAttribute('aria-hidden', !value);
/*
// the old ko.bindingHandlers.modal
const close = vmDom.querySelector('.close'),
click = () => vm.modalVisibility(false);
if (close) {
close.addEventListener('click.koModal', click);
ko.utils.domNodeDisposal.addDisposeCallback(vmDom, () =>
close.removeEventListener('click.koModal', click)
);
}
*/
}); });
if ('ontransitionend' in vmDom) { if ('ontransitionend' in vmDom) {
vmDom.addEventListener('transitionend', endShowHide); vmDom.addEventListener('transitionend', endShowHide);
@ -134,6 +143,16 @@ const
}); });
}, },
/**
* @param {Function} ViewModelClassToHide
* @returns {void}
*/
hideScreenPopup = ViewModelClassToHide => {
if (ViewModelClassToHide && ViewModelClassToHide.__vm && ViewModelClassToHide.__dom) {
ViewModelClassToHide.__vm.modalVisibility(false);
}
},
/** /**
* @param {string} screenName * @param {string} screenName
* @param {string} subPart * @param {string} subPart
@ -236,16 +255,6 @@ export const
return fResult; return fResult;
}, },
/**
* @param {Function} ViewModelClassToHide
* @returns {void}
*/
hideScreenPopup = ViewModelClassToHide => {
if (ViewModelClassToHide && ViewModelClassToHide.__vm && ViewModelClassToHide.__dom) {
ViewModelClassToHide.__vm.modalVisibility(false);
}
},
getScreenPopupViewModel = ViewModelClassToShow => getScreenPopupViewModel = ViewModelClassToShow =>
(buildViewModel(ViewModelClassToShow) && ViewModelClassToShow.__dom) && ViewModelClassToShow.__vm, (buildViewModel(ViewModelClassToShow) && ViewModelClassToShow.__dom) && ViewModelClassToShow.__vm,

View file

@ -35,7 +35,7 @@ import Remote from 'Remote/User/Fetch';
import { ComposeAttachmentModel } from 'Model/ComposeAttachment'; import { ComposeAttachmentModel } from 'Model/ComposeAttachment';
import { decorateKoCommands, isPopupVisible, showScreenPopup, hideScreenPopup } from 'Knoin/Knoin'; import { decorateKoCommands, isPopupVisible, showScreenPopup } from 'Knoin/Knoin';
import { AbstractViewPopup } from 'Knoin/AbstractViews'; import { AbstractViewPopup } from 'Knoin/AbstractViews';
import { FolderSystemPopupView } from 'View/Popup/FolderSystem'; import { FolderSystemPopupView } from 'View/Popup/FolderSystem';
@ -500,7 +500,7 @@ class ComposePopupView extends AbstractViewPopup {
() => { () => {
if (this.modalVisibility()) { if (this.modalVisibility()) {
rl.app.deleteMessagesFromFolderWithoutCheck(this.draftFolder(), [this.draftUid()]); rl.app.deleteMessagesFromFolderWithoutCheck(this.draftFolder(), [this.draftUid()]);
hideScreenPopup(ComposePopupView); this.closeCommand();
} }
} }
]); ]);
@ -1064,9 +1064,7 @@ class ComposePopupView extends AbstractViewPopup {
} else { } else {
showScreenPopup(AskPopupView, [ showScreenPopup(AskPopupView, [
i18n('POPUPS_ASK/DESC_WANT_CLOSE_THIS_WINDOW'), i18n('POPUPS_ASK/DESC_WANT_CLOSE_THIS_WINDOW'),
() => { () => this.closeCommand()
this.modalVisibility() && this.closeCommand();
}
]); ]);
} }
} }

View file

@ -23,7 +23,7 @@ import { EmailModel } from 'Model/Email';
import { ContactModel } from 'Model/Contact'; import { ContactModel } from 'Model/Contact';
import { ContactPropertyModel, ContactPropertyType } from 'Model/ContactProperty'; import { ContactPropertyModel, ContactPropertyType } from 'Model/ContactProperty';
import { decorateKoCommands, hideScreenPopup } from 'Knoin/Knoin'; import { decorateKoCommands } from 'Knoin/Knoin';
import { AbstractViewPopup } from 'Knoin/AbstractViews'; import { AbstractViewPopup } from 'Knoin/AbstractViews';
const CONTACTS_PER_PAGE = 50, const CONTACTS_PER_PAGE = 50,
@ -183,7 +183,7 @@ class ContactsPopupView extends AbstractViewPopup {
if (arrayLength(aE)) { if (arrayLength(aE)) {
this.bBackToCompose = false; this.bBackToCompose = false;
hideScreenPopup(ContactsPopupView); this.closeCommand();
switch (this.sLastComposeFocusedField) { switch (this.sLastComposeFocusedField) {
case 'cc': case 'cc':

View file

@ -32,8 +32,8 @@
<div id="rl-content" hidden=""> <div id="rl-content" hidden="">
<div id="rl-left"></div> <div id="rl-left"></div>
<div id="rl-right"></div> <div id="rl-right"></div>
<div id="rl-popups"></div>
</div> </div>
<div id="rl-popups"></div>
{{BaseTemplates}} {{BaseTemplates}}
<script nonce="" type="text/javascript">{{BaseAppBootScript}}{{BaseLanguage}}</script> <script nonce="" type="text/javascript">{{BaseAppBootScript}}{{BaseLanguage}}</script>
</body> </body>

View file

@ -1,5 +1,5 @@
<div class="modal fade b-domain-content g-ui-user-select-none" <div class="modal fade b-domain-content g-ui-user-select-none"
data-bind="modal: modalVisibility, css: {'domain-edit': edit}"> data-bind="css: {'domain-edit': edit}">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-bind="text: headerText"></h3> <h3 data-bind="text: headerText"></h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-domain-alias-content" data-bind="modal: modalVisibility"> <div class="modal fade b-domain-alias-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="POPUPS_DOMAIN_ALIAS/TITLE_ADD_DOMAIN_ALIAS"></h3> <h3 data-i18n="POPUPS_DOMAIN_ALIAS/TITLE_ADD_DOMAIN_ALIAS"></h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-plugin-content" data-bind="modal: modalVisibility"> <div class="modal fade b-plugin-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h4> <h4>

View file

@ -1,3 +1,3 @@
<div class="e-paginator g-ui-user-select-none" data-bind="foreach: $data"> <nav class="e-paginator g-ui-user-select-none" data-bind="foreach: $data">
<a data-bind="css: { 'current': current, 'custom': custom }, title: title, text: name"></a> <a data-bind="css: { 'current': current, 'custom': custom }, title: title, text: name"></a>
</div> </nav>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-ask-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-ask-content g-ui-user-select-none">
<div class="modal-body" data-bind="html: askDesc"></div> <div class="modal-body" data-bind="html: askDesc"></div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn buttonYes" data-bind="click: yesClick"> <button class="btn buttonYes" data-bind="click: yesClick">

View file

@ -1,4 +1,4 @@
<div class="modal fade b-languages-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-languages-content g-ui-user-select-none">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="POPUPS_LANGUAGES/TITLE_LANGUAGES"></h3> <h3 data-i18n="POPUPS_LANGUAGES/TITLE_LANGUAGES"></h3>

View file

@ -7,7 +7,18 @@
<a class="btn buttonContacts fontastic" data-bind="visible: allowContacts, click: contactsClick" data-i18n="[title]GLOBAL/CONTACTS">📇</a> <a class="btn buttonContacts fontastic" data-bind="visible: allowContacts, click: contactsClick" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
</div> </div>
<div class="b-content"> <div class="b-content">
<ul class="b-folders-system" data-bind="template: { name: 'MailFolderListSystemItem', foreach: folderListSystem }"></ul> <ul class="b-folders-system" data-bind="foreach: folderListSystem">
<li>
<a data-bind="dropmessages: $data,
css: { 'selected': selected, 'selectable': selectable, 'anim-action-class': actionBlink, 'is-flagged': isFlagged },
attr: { 'data-unread': printableUnreadCount }">
<!-- ko text: localName --><!-- /ko -->
<!-- ko if: isInbox -->
<span class="flag-icon fontastic"></span>
<!-- /ko -->
</a>
</li>
</ul>
<hr/> <hr/>
<ul class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderListVisible }"></ul> <ul class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderListVisible }"></ul>
<div class="move-action-content-wrapper" data-bind="visible: moveAction"></div> <div class="move-action-content-wrapper" data-bind="visible: moveAction"></div>

View file

@ -1,10 +0,0 @@
<li>
<a data-bind="dropmessages: $data,
css: { 'selected': selected, 'selectable': selectable, 'anim-action-class': actionBlink, 'is-flagged': isFlagged },
attr: { 'data-unread': printableUnreadCount }">
<!-- ko text: localName --><!-- /ko -->
<!-- ko if: isInbox -->
<span class="flag-icon fontastic"></span>
<!-- /ko -->
</a>
</li>

View file

@ -224,9 +224,11 @@
<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail"></i></div> <div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail"></i></div>
</div> </div>
<div class="b-footer thm-message-list-bottom-toolbar"> <div class="b-footer thm-message-list-bottom-toolbar">
<span data-bind="visible: 0 < userUsageProc(), attr: { title: quotaTooltip() }" class="e-quota"> <!-- ko if: 0 < userUsageProc() -->
<span data-bind="attr: { title: quotaTooltip() }" class="e-quota">
<!-- ko text: userUsageProc --><!-- /ko -->% <!-- ko text: userUsageProc --><!-- /ko -->%
</span> </span>
<!-- /ko -->
<div class="pull-right"> <div class="pull-right">
<!-- ko template: { name: 'Paginator', data: messageListPaginator } --><!-- /ko --> <!-- ko template: { name: 'Paginator', data: messageListPaginator } --><!-- /ko -->
</div> </div>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-account-add-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-account-add-content g-ui-user-select-none">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3> <h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-open-pgp-key-add-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-open-pgp-key-add-content g-ui-user-select-none">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="POPUPS_IMPORT_OPEN_PGP_KEY/TITLE_IMPORT_OPEN_PGP_KEY"></h3> <h3 data-i18n="POPUPS_IMPORT_OPEN_PGP_KEY/TITLE_IMPORT_OPEN_PGP_KEY"></h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-advanced-search-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-advanced-search-content g-ui-user-select-none">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="SEARCH/TITLE_ADV"></h3> <h3 data-i18n="SEARCH/TITLE_ADV"></h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-compose" data-bind="modal: modalVisibility, css: {'loading': saving() || sending()}"> <div class="modal fade b-compose" data-bind="css: {'loading': saving() || sending()}">
<div class="modal-header b-header-toolbar g-ui-user-select-none"> <div class="modal-header b-header-toolbar g-ui-user-select-none">
<a class="btn button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }"> <a class="btn button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
<i data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner': sending()}"></i> <i data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner': sending()}"></i>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-compose-open-pgp-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-compose-open-pgp-content g-ui-user-select-none">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="POPUPS_COMPOSE_OPEN_PGP/TITLE_COMPOSE_OPEN_PGP"></h3> <h3 data-i18n="POPUPS_COMPOSE_OPEN_PGP/TITLE_COMPOSE_OPEN_PGP"></h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-filter-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-filter-content g-ui-user-select-none">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3> <h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-folder-clear-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-folder-clear-content g-ui-user-select-none">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3> <h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-folder-create-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-folder-create-content g-ui-user-select-none">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="POPUPS_CREATE_FOLDER/TITLE_CREATE_FOLDER"></h3> <h3 data-i18n="POPUPS_CREATE_FOLDER/TITLE_CREATE_FOLDER"></h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-folder-system-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-folder-system-content g-ui-user-select-none">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="POPUPS_SYSTEM_FOLDERS/TITLE_SYSTEM_FOLDERS"></h3> <h3 data-i18n="POPUPS_SYSTEM_FOLDERS/TITLE_SYSTEM_FOLDERS"></h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-identity-content" data-bind="modal: modalVisibility"> <div class="modal fade b-identity-content">
<div class="modal-header g-ui-user-select-none"> <div class="modal-header g-ui-user-select-none">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3> <h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-shortcuts-content" data-bind="modal: modalVisibility"> <div class="modal fade b-shortcuts-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="SHORTCUTS_HELP/LEGEND_SHORTCUTS_HELP"></h3> <h3 data-i18n="SHORTCUTS_HELP/LEGEND_SHORTCUTS_HELP"></h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-message-open-pgp-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-message-open-pgp-content g-ui-user-select-none">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="POPUPS_MESSAGE_OPEN_PGP/TITLE_MESSAGE_OPEN_PGP"></h3> <h3 data-i18n="POPUPS_MESSAGE_OPEN_PGP/TITLE_MESSAGE_OPEN_PGP"></h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-open-pgp-key-generate-content g-ui-user-select-none" data-bind="modal: modalVisibility"> <div class="modal fade b-open-pgp-key-generate-content g-ui-user-select-none">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="POPUPS_GENERATE_OPEN_PGP_KEYS/TITLE_GENERATE_OPEN_PGP_KEYS"></h3> <h3 data-i18n="POPUPS_GENERATE_OPEN_PGP_KEYS/TITLE_GENERATE_OPEN_PGP_KEYS"></h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-filter-script g-ui-user-select-none" data-bind="modal: modalVisibility, with: script"> <div class="modal fade b-filter-script g-ui-user-select-none" data-bind="with: script">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-bind="command: $root.cancelCommand">×</button> <button type="button" class="close" data-bind="command: $root.cancelCommand">×</button>
<h3> <h3>

View file

@ -1,4 +1,4 @@
<div class="modal fade b-open-pgp-key-view-content" data-bind="modal: modalVisibility"> <div class="modal fade b-open-pgp-key-view-content">
<div class="modal-header g-ui-user-select-none"> <div class="modal-header g-ui-user-select-none">
<button type="button" class="close" data-bind="command: cancelCommand">×</button> <button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="POPUPS_VIEW_OPEN_PGP_KEY/TITLE_VIEW_OPEN_PGP_KEY"></h3> <h3 data-i18n="POPUPS_VIEW_OPEN_PGP_KEY/TITLE_VIEW_OPEN_PGP_KEY"></h3>