From 22d50aee21b9fe3bfa07bcddb1c059f22fa19081 Mon Sep 17 00:00:00 2001 From: Yuri Kuznetsov Date: Thu, 20 Mar 2025 20:59:04 +0200 Subject: [PATCH] modal bar ref --- client/src/controller.js | 42 +++++++++----- client/src/helpers/site/modal-bar-provider.js | 58 +++++++++++++++++++ client/src/views/modal.js | 23 ++++---- client/src/views/site/master.js | 11 ++++ 4 files changed, 110 insertions(+), 24 deletions(-) create mode 100644 client/src/helpers/site/modal-bar-provider.js diff --git a/client/src/controller.js b/client/src/controller.js index 5729b82597..8b27b59e93 100644 --- a/client/src/controller.js +++ b/client/src/controller.js @@ -30,6 +30,8 @@ import Exceptions from 'exceptions'; import {Events, View as BullView} from 'bullbone'; +import {inject} from 'di'; +import ModalBarProvider from 'helpers/site/modal-bar-provider'; /** * @callback module:controller~viewCallback @@ -126,6 +128,13 @@ class Controller { */ masterView = null + /** + * @private + * @type {ModalBarProvider} + */ + @inject(ModalBarProvider) + modalBarProvider + /** * Set the router. * @@ -431,21 +440,24 @@ class Controller { const viewName = this.masterView || 'views/site/master'; - this.viewFactory.create(viewName, {fullSelector: 'body'}, async /** module:view */masterView => { - this.setMasterView(masterView); + this.viewFactory.create(viewName, {fullSelector: 'body'}, + async /** import('views/site/master').default */masterView => { + this.setMasterView(masterView); + + if (this.isMasterRendered()) { + callback.call(this, masterView); + + return; + } + + this.modalBarProvider.set(masterView.collapsedModalBarView || null) + + await masterView.render(); + + this.setMasterRendered(true); - if (this.isMasterRendered()) { callback.call(this, masterView); - - return; - } - - await masterView.render(); - - this.setMasterRendered(true); - - callback.call(this, masterView); - }); + }); } /** @@ -477,6 +489,10 @@ class Controller { * @param {import('view').default|null} view */ setMasterView(view) { + if (!view) { + this.modalBarProvider.set(null); + } + this.set('master', view); } diff --git a/client/src/helpers/site/modal-bar-provider.js b/client/src/helpers/site/modal-bar-provider.js new file mode 100644 index 0000000000..fdbcaf75d0 --- /dev/null +++ b/client/src/helpers/site/modal-bar-provider.js @@ -0,0 +1,58 @@ +/************************************************************************ + * This file is part of EspoCRM. + * + * EspoCRM – Open Source CRM application. + * Copyright (C) 2014-2025 Yurii Kuznietsov, Taras Machyshyn, Oleksii Avramenko + * Website: https://www.espocrm.com + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + * The interactive user interfaces in modified source and object code versions + * of this program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU Affero General Public License version 3. + * + * In accordance with Section 7(b) of the GNU Affero General Public License version 3, + * these Appropriate Legal Notices must retain the display of the "EspoCRM" word. + ************************************************************************/ + +import {register} from 'di'; + +/** + * @internal + */ +@register() +export default class ModalBarProvider { + + /** + * @private + * @type {import('views/collapsed-modal-bar').default|null} + */ + view = null + + /** + * @internal + * @return {import('views/collapsed-modal-bar').default|null} + */ + get() { + return this.view; + } + + /** + * @internal + * @param {import('views/collapsed-modal-bar').default|null} view + */ + set(view) { + this.view = view; + } +} diff --git a/client/src/views/modal.js b/client/src/views/modal.js index 45bd0e81ad..2e540e67ea 100644 --- a/client/src/views/modal.js +++ b/client/src/views/modal.js @@ -29,7 +29,8 @@ /** @module views/modal */ import View from 'view'; -import CollapsedModalBarView from 'views/collapsed-modal-bar'; +import {inject} from 'di'; +import ModalBarProvider from 'helpers/site/modal-bar-provider'; /** * A base modal view. Can be extended or used directly. @@ -289,6 +290,13 @@ class ModalView extends View { */ containerElement + /** + * @private + * @type {ModalBarProvider} + */ + @inject(ModalBarProvider) + modalBarProvider + /** * @inheritDoc */ @@ -1141,17 +1149,10 @@ class ModalView extends View { this.unchainFromParent(); - /** @type {CollapsedModalBarView} */ - let barView; + const barView = this.modalBarProvider.get(); - const key = 'collapsedModalBar'; - - if (masterView.hasView(key)) { - barView = masterView.getView(key); - } else { - barView = new CollapsedModalBarView({fullSelector: 'body > .collapsed-modal-bar'}); - - await masterView.assignView(key, barView); + if (!barView) { + return; } barView.addModalView(this, {title: title}); diff --git a/client/src/views/site/master.js b/client/src/views/site/master.js index 81851d1353..ec2d05ec31 100644 --- a/client/src/views/site/master.js +++ b/client/src/views/site/master.js @@ -30,6 +30,7 @@ import View from 'view'; import $ from 'jquery'; +import CollapsedModalBarView from 'views/collapsed-modal-bar'; class MasterSiteView extends View { @@ -60,6 +61,12 @@ class MasterSiteView extends View { */ currentName + /** + * @internal + * @type {CollapsedModalBarView} + */ + collapsedModalBarView + showLoadingNotification() { Espo.Ui.notifyWait(); } @@ -72,6 +79,10 @@ class MasterSiteView extends View { $(window).on('resize.' + this.cid, () => { this.adjustContent(); }); + + this.collapsedModalBarView = new CollapsedModalBarView({fullSelector: 'body > .collapsed-modal-bar'}); + + this.assignView('collapsedModalBar', this.collapsedModalBarView); } /**