modal bar ref

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

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 <https://www.gnu.org/licenses/>.
+ *
+ * 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;
+    }
+}

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

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);
     }
 
     /**