Closing loose components on navigation

Packages/ohif-core/client/routes.js

@@ -1,5 +1,14 @@
+import { Meteor } from 'meteor/meteor';
+import { $ } from 'meteor/jquery';
 import { Router } from 'meteor/iron:router';
 
-Router.route('/playground', function() {
-    this.render('componentPlayground');
+Router.onRun(function() {
+    $(document.body).trigger('ohif.navigated');
+    this.next();
 });
+
+if (Meteor.isDevelopment) {
+    Router.route('/playground', function() {
+        this.render('componentPlayground');
+    });
+}

Packages/ohif-core/client/ui/dialog/display.js

@@ -50,16 +50,28 @@ OHIF.ui.showDialog = (templateName, dialogData={}) => {
     }
 
     // Destroy the created dialog view when the promise is either resolved or rejected
-    const dismissModal = () => {
-        if (dialogData && dialogData.promise && $modal) {
+    const dismissModal = (hideFirst=false) => {
+        if (hideFirst || (dialogData && dialogData.promise && $modal)) {
             $modal.one('hidden.bs.modal', () => Blaze.remove(view)).modal('hide');
         } else {
             Blaze.remove(view);
         }
     };
 
+    // Create a handler to dismiss the modal on navigation
+    const $body = $(document.body);
+    const navigationHandler = () => {
+        dismissModal(true);
+        $body.off('ohif.navigated', navigationHandler);
+    };
+
     promise.then(dismissModal).catch(dismissModal);
 
+    // Dismiss the modal if navigation occurs and it should not be kept opened
+    if (!dialogData.keepOpenOnNavigation) {
+        $body.on('ohif.navigated', navigationHandler);
+    }
+
     // Return the promise to allow callbacks stacking from outside
     return promise;
 };

Packages/ohif-core/client/ui/dropdown/display.js

@@ -28,6 +28,16 @@ OHIF.ui.showDropdown = (items=[], options={}) => {
     const parentElement = options.parentElement || document.body;
     view = Blaze.renderWithData(Template.dropdownForm, templateData, parentElement);
 
+    // Create a handler to dismiss the dropdown on navigation
+    const $body = $(document.body);
+    const navigationHandler = () => {
+        promiseReject();
+        $body.off('ohif.navigated', navigationHandler);
+    };
+
+    // Dismiss the dropdown if navigation occurs
+    $body.on('ohif.navigated', navigationHandler);
+
     // Return the promise to allow callbacks stacking from outside
     return promise;
 };