LT-259 New proactive UI (three options) for unsaved changes dialog + New API for unsaved changes module (now handlers can be attached to unsaved changes namespace) + Save measurements integration.

LesionTracker/client/components/app/app.js

@@ -18,21 +18,37 @@ Template.app.onRendered(() => {
 });
 
 Template.app.events({
-    'click .js-toggle-studyList'() {
+    'click .js-toggle-studyList'(event) {
         const contentId = Session.get('activeContentId');
 
-        OHIF.ui.unsavedChanges.checkBeforeAction('viewer.*', function(shouldProceed, hasChanges) {
+        OHIF.ui.unsavedChanges.presentProactiveDialog('viewer.*', (hasChanges, userChoice) => {
-            if (shouldProceed) {
+
-                // Drop signaled unsaved changes if any...
+            if (hasChanges) {
-                if (hasChanges) {
+
-                    OHIF.ui.unsavedChanges.clear('viewer.*');
+                switch (userChoice) {
+                    case 'abort-action':
+                        return;
+                    case 'save-changes':
+                        OHIF.ui.unsavedChanges.trigger('viewer', 'save', false);
+                        OHIF.ui.unsavedChanges.clear('viewer.*');
+                        break;
+                    case 'abandon-changes':
+                        OHIF.ui.unsavedChanges.clear('viewer.*');
+                        break;
                 }
 
-                if (contentId !== studylistContentId) {
+            }
-                    switchToTab(studylistContentId);
+
-                } else {
+            if (contentId !== studylistContentId) {
-                    switchToTab(viewerContentId);
+                switchToTab(studylistContentId);
-                }
+            } else {
+                switchToTab(viewerContentId);
+            }
+
+        }, {
+            position: {
+                x: event.clientX + 15,
+                y: event.clientY + 15
             }
         });
 

Packages/ohif-core/client/components/bootstrap/dialog/unsavedChangesDialog.html

@@ -0,0 +1,35 @@
+<template name="unsavedChangesDialog">
+    <div class="modal unsavedChangesDialog fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button class="close" aria-label="Close" data-choice="abort-action" data-dismiss="modal">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title">You have unsaved changes!</h4>
+                </div>
+                <div class="modal-footer">
+
+                    {{#let label='Stay'}}
+                    <button class="btn btn-default" aria-label="{{label}}" data-choice="abort-action" data-dismiss="modal">
+                        {{label}}
+                    </button>
+                    {{/let}}
+
+                    {{#let label='Leave without saving...'}}
+                    <button class="btn btn-danger" aria-label="{{label}}" data-choice="abandon-changes" data-dismiss="modal">
+                        {{label}}
+                    </button>
+                    {{/let}}
+
+                    {{#let label='Save and Exit!'}}
+                    <button class="btn btn-primary" aria-label="{{label}}" data-choice="save-changes" data-dismiss="modal">
+                        {{label}}
+                    </button>
+                    {{/let}}
+
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

Packages/ohif-core/client/components/bootstrap/dialog/unsavedChangesDialog.js

@@ -0,0 +1,133 @@
+import { Blaze } from 'meteor/blaze';
+import { Template } from 'meteor/templating';
+import { OHIF } from 'meteor/ohif:core';
+import { _ } from 'meteor/underscore';
+import { $ } from 'meteor/jquery';
+
+const MARGIN_RIGHT = 15;
+const MARGIN_BOTTOM = 15;
+
+Template.unsavedChangesDialog.onRendered(function() {
+
+    const instance = Template.instance();
+    const $modal = instance.$('.modal.unsavedChangesDialog');
+
+    // Routine which effectivelly displays the BS modal...
+    instance.displayModal = () => {
+
+        // Make modal options extensible...
+        const modalOptions = _.extend({
+            backdrop: 'static',
+            keyboard: false
+        }, instance.data.modalOptions);
+
+        // Set handler for "hidden" event... Simply remove the view!
+        $modal.on('hidden.bs.modal', () => {
+            Blaze.remove(instance.view);
+        });
+
+        // Create the bootstrap modal
+        $modal.modal(modalOptions);
+
+    };
+
+    // Routine which repositions the modal before display...
+    instance.displayModalWithPosition = (position) => {
+
+        // Preserve original CSS rules...
+        const origCSS = {
+            display: $modal.css('display'),
+            visibility: $modal.css('visibility')
+        };
+
+        // Make sure modal is propperly rendered before proceeding with math...
+        if (origCSS.display === 'none') {
+            $modal.css({
+                visibility: 'hidden',
+                display: 'block'
+            });
+        }
+
+        // Run presentation code on next tick...
+        setTimeout(() => {
+
+            let dimension;
+            const $dialog = $modal.find('.modal-dialog');
+
+            const dialogRect = {
+                position: {
+                    x: parseInt(position.x) || 0,
+                    y: parseInt(position.y) || 0
+                },
+                size: {
+                    width: $dialog.outerWidth(),
+                    height: $dialog.outerHeight()
+                }
+            };
+
+            const modalSize = {
+                width: $modal.width(),
+                height: $modal.height()
+            };
+
+            dimension = dialogRect.position.x + dialogRect.size.width + MARGIN_RIGHT;
+            if (dimension > modalSize.width) {
+                dialogRect.position.x -= dimension - modalSize.width;
+            }
+
+            if (dialogRect.position.x < 0) {
+                dialogRect.position.x = 0;
+            }
+
+            dimension = dialogRect.position.y + dialogRect.size.height + MARGIN_BOTTOM;
+            if (dimension > modalSize.height) {
+                dialogRect.position.y -= dimension - modalSize.height;
+            }
+
+            if (dialogRect.position.y < 0) {
+                dialogRect.position.y = 0;
+            }
+
+            // Restore original CSS...
+            $modal.css(origCSS);
+
+            // Set new position...
+            $dialog.css({
+                position: 'fixed',
+                margin: 0,
+                left: dialogRect.position.x,
+                top: dialogRect.position.y
+            });
+
+            instance.displayModal();
+
+        }, 0);
+
+    };
+
+    // Check if modal will be presented with custom positioning...
+    let position = instance.data.position;
+    if (position && 'x' in position && 'y' in position) {
+        instance.displayModalWithPosition(position);
+    } else {
+        instance.displayModal();
+    }
+
+});
+
+Template.unsavedChangesDialog.events({
+
+    'click button[data-choice]'(event) {
+
+        const instance = Template.instance();
+        const callback = instance.data.callback;
+        const choice = $(event.currentTarget).attr('data-choice') || '';
+
+        // if callback is a function, call it passing user choice...
+        if (typeof callback === 'function') {
+            callback.call(instance, choice);
+        }
+
+    }
+
+});

Packages/ohif-core/client/components/bootstrap/dialog/unsavedChangesDialog.styl

@@ -0,0 +1,7 @@
+.modal.unsavedChangesDialog
+
+  .modal-dialog
+    width: 400px
+
+    .modal-footer
+        border-top: 0 none

Packages/ohif-core/client/components/bootstrap/index.js

@@ -3,6 +3,8 @@ import './dialog/form.html';
 import './dialog/form.js';
 import './dialog/login.html';
 import './dialog/login.js';
+import './dialog/unsavedChangesDialog.html';
+import './dialog/unsavedChangesDialog.js';
 
 import './dropdown/backdrop.html';
 import './dropdown/form.html';

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

@@ -0,0 +1,14 @@
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
+import { _ } from 'meteor/underscore';
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.ui.unsavedChangesDialog = function(callback, options) {
+
+    // Render the dialog with the given template passing the promise object and callbacks
+    const templateData = _.extend({}, options, {
+        callback: callback
+    });
+    Blaze.renderWithData(Template.unsavedChangesDialog, templateData, document.body);
+
+};

Packages/ohif-core/client/ui/index.js

@@ -1,6 +1,7 @@
 import './bounded/bounded.js';
 import './dialog/form.js';
 import './dialog/spatial.js';
+import './dialog/unsavedChangesDialog.js';
 import './draggable/draggable.js';
 import './dropdown/form.js';
 import './resizable/resizable.js';

Packages/ohif-core/client/ui/unsavedChanges/unsavedChanges.js

@@ -1,210 +1,476 @@
 import { OHIF } from 'meteor/ohif:core';
 import { _ } from 'meteor/underscore';
 
-OHIF.ui.unsavedChanges = (function(OHIF, _) {
+const FUNCTION = 'function';
+const STRING = 'string';
+const UNDEFINED = 'undefined';
+const WILDCARD = '*'; // "*" is a special name which means "all children".
+const SEPARATOR = '.';
 
-    // Root of the internal Namespace tree.
+/**
-    const rootTree = {};
+ * Main Namespace Component Class
+ */
 
-    // Create an unattached namespace node be later appended to the Namespace tree.
+class Node {
-    function createNode(name, hasChildren) {
 
-        let node = { name };
+    constructor() {
+        this.value = 0;
+        this.children = {};
+        this.handlers = {};
+    }
 
-        if (hasChildren) {
+    getPathComponents(path) {
-            node.type = 'tree';
+        return typeof path === STRING ? path.split(SEPARATOR) : null;
-            node.children = {};
+    }
-        } else {
+
-            node.type = 'leaf';
+    getNodeUpToIndex(path, index) {
-            node.value = 1;
+
+        let node = this;
+
+        for (let i = 0; i < index; ++i) {
+            let item = path[i];
+            if (node.children.hasOwnProperty(item)) {
+                node = node.children[item];
+            } else {
+                node = null;
+                break;
+            }
         }
 
         return node;
 
     }
 
-    // Attach a new node (identified by a namespace string) to the Namespace tree or increment its internal signal count.
+    append(name, value) {
-    function addNode(tree, path) {
 
-        let node,
+        const children = this.children;
-            result = false,
+        let node = null;
-            name = path.shift();
 
-        if (name !== '*') { // "*" is a special name which means "all children" and thus CANNOT be used.
+        if (children.hasOwnProperty(name)) {
-            if (name in tree) {
+            node = children[name];
-                node = tree[name];
+        } else if (typeof name === STRING && name !== WILDCARD) {
-                if (path.length > 0) {
+            node = new Node();
-                    result = node.type === 'tree' && addNode(node.children, path);
+            children[name] = node;
-                } else if (node.type === 'leaf') {
+        }
-                    node.value++;
+
-                    result = true;
+        if (node !== null) {
-                }
+            node.value += value > 0 ? parseInt(value) : 0;
-            } else {
+        }
-                node = createNode(name, path.length > 0);
+
-                if (node.type !== 'tree' || addNode(node.children, path)) {
+        return node;
-                    tree[name] = node;
+
-                    result = true;
+    }
+
+    probe(recursively) {
+
+        let value = this.value;
+
+        // Calculate entire tree value recursively?
+        if (recursively === true) {
+            const children = this.children;
+            for (let item in children) {
+                if (children.hasOwnProperty(item)) {
+                    value += children[item].probe(recursively);
                 }
             }
         }
 
-        return result;
+        return value;
 
     }
 
-    // Detach a node (identified by a namespace string) from the internal Namespace tree consequently clearing its internal signal count.
+    clear(recursively) {
-    // ... The supplied namespace can be a wildcard, in which case all sub-nodes are removed as well.
-    function removeNode(tree, path) {
 
-        let result = false,
+        this.value = 0;
-            name = path.shift();
 
-        if (name === '*') {
+        // Clear entire tree recursively?
-            for (name in tree) {
+        if (recursively === true) {
-                if (tree.hasOwnProperty(name)) {
+            const children = this.children;
-                    delete tree[name];
+            for (let item in children) {
+                if (children.hasOwnProperty(item)) {
+                    children[item].clear(recursively);
+                }
+            }
+        }
+
+    }
+
+    appendPath(path, value) {
+
+        path = this.getPathComponents(path);
+
+        if (path !== null) {
+            const last = path.length - 1;
+            let node = this;
+            for (let i = 0; i < last; ++i) {
+                node = node.append(path[i], 0);
+                if (node === null) {
+                    return false;
                 }
             }
 
-            result = true;
+            return (node.append(path[last], value) !== null);
-        } else if (name in tree) {
+        }
-            if (path.length === 0) {
+
-                delete tree[name];
+        return false;
+
+    }
+
+    clearPath(path, recursively) {
+
+        path = this.getPathComponents(path);
+
+        if (path !== null) {
+            const last = path.length - 1;
+            let node = this.getNodeUpToIndex(path, last);
+            if (node !== null) {
+                let item = path[last];
+                if (item !== WILDCARD) {
+                    if (node.children.hasOwnProperty(item)) {
+                        node.children[item].clear(recursively);
+                        return true;
+                    }
+                } else {
+                    const children = node.children;
+                    for (item in children) {
+                        if (children.hasOwnProperty(item)) {
+                            children[item].clear(recursively);
+                        }
+                    }
+
+                    return true;
+                }
+            }
+        }
+
+        return false;
+
+    }
+
+    probePath(path, recursively) {
+
+        path = this.getPathComponents(path);
+
+        if (path !== null) {
+            const last = path.length - 1;
+            let node = this.getNodeUpToIndex(path, last);
+            if (node !== null) {
+                let item = path[last];
+                if (item !== WILDCARD) {
+                    if (node.children.hasOwnProperty(item)) {
+                        return node.children[item].probe(recursively);
+                    }
+                } else {
+                    const children = node.children;
+                    let value = 0;
+                    for (item in children) {
+                        if (children.hasOwnProperty(item)) {
+                            value += children[item].probe(recursively);
+                        }
+                    }
+
+                    return value;
+                }
+            }
+        }
+
+        return 0;
+
+    }
+
+    attachHandler(type, handler) {
+
+        let result = false;
+
+        if (typeof type === STRING && typeof handler === FUNCTION) {
+
+            const handlers = this.handlers;
+            const list = handlers.hasOwnProperty(type) ? handlers[type] : (handlers[type] = []);
+            const length = list.length;
+
+            let notFound = true;
+
+            for (let i = 0; i < length; ++i) {
+                if (handler === list[i]) {
+                    notFound = false;
+                    break;
+                }
+            }
+
+            if (notFound) {
+                list[length] = handler;
                 result = true;
-            } else {
-                let node = tree[name];
-                if (node.type === 'tree') {
-                    result = removeNode(node.children, path);
-                }
             }
+
         }
 
         return result;
 
     }
 
-    // Count the amount of signals registered for a given node.
+    removeHandler(type, handler) {
-    // ... The supplied namespace can be a wildcard, in which case the resulting value will consider the counter of all sub-nodes.
-    function probeNode(tree, path) {
 
-        let node,
+        let result = false;
-            result = 0,
-            name = path.shift();
 
-        if (name === '*') {
+        if (typeof type === STRING && typeof handler === FUNCTION) {
-            for (name in tree) {
+
-                if (tree.hasOwnProperty(name)) {
+            const handlers = this.handlers;
-                    node = tree[name];
+            if (handlers.hasOwnProperty(type)) {
-                    if (node.type === 'leaf') {
+                const list = handlers[type];
-                        result += node.value;
+                const length = list.length;
-                    } else {
+                for (let i = 0; i < length; ++i) {
-                        path.unshift('*');
+                    if (handler === list[i]) {
-                        result += probeNode(node.children, path);
+                        list.splice(i, 1);
+                        result = true;
+                        break;
                     }
                 }
             }
-        } else if (name in tree) {
-            node = tree[name];
-            if (node.type === 'tree') {
-                if (path.length === 0) {
-                    path.unshift('*');
-                }
 
-                result = probeNode(node.children, path);
-            } else {
-                result = path.length === 0 ? node.value : 0;
-            }
         }
 
         return result;
 
     }
 
-    // return the exposed interface of UnsavedChanges object
+    trigger(type, nonRecursively) {
-    return {
 
-        /**
+        if (typeof type === STRING) {
-         * Signal an unsaved change for a given namespace.
-         * @param {String} name A string (e.g., "viewer.studyViewer.measurements.targets") that identifies the namespace of the signaled changes.
-         * @return {Boolean} Returns false if the signal could not be saved or the supplied namespace is invalid. Otherwise, true is returned.
-         */
-        set: function(name) {
-            return typeof name === 'string' ? addNode(rootTree, name.split('.')) : false;
-        },
 
-        /**
+            const handlers = this.handlers;
-         * Clear all signaled unsaved changes for a given namespace. If the supplied namespace is a wildcard, all signals below that namespace
-         * are cleared.
-         * @param {String} name A string that identifies the namespace of the signaled changes (e.g., "viewer.studyViewer.measurements.targets"
-         *  for clearing the "targets" item of the "viewer.studyViewer.measurements" namespace or "viewer.studyViewer.*" to specify all signaled
-         *  changes for the "viewer.studyViewer" namespace).
-         * @return {Boolean} Returns false if the signal could not be removed or the supplied namespace is invalid. Otherwise, true is returned.
-         */
-        clear: function(name) {
-            return typeof name === 'string' ? removeNode(rootTree, name.split('.')) : false;
-        },
 
-        /**
+            if (handlers.hasOwnProperty(type)) {
-         * Count the amount of signaled unsaved changes for a given namespace. If the supplied namespace is a wildcard, all signals below that
+                const list = handlers[type];
-         * namespace will also be accounted.
+                const length = list.length;
-         * @param {String} name A string that identifies the namespace of the signaled changes (e.g., "viewer.studyViewer.measurements.targets"
+                for (let i = 0; i < length; ++i) {
-         *  for counting the amount of signals for the "targets" item of the "viewer.studyViewer.measurements" namespace or "viewer.studyViewer.*"
+                    list[i].call(null);
-         *  to count all signaled changes for the "viewer.studyViewer" namespace).
+                }
-         * @return {Number} Returns the amount of signaled changes for a given namespace. If the supplied namespace is a wildcard, the sum of all
-         *  changes for that namespace are returned.
-         */
-        probe: function(name) {
-            return typeof name === 'string' ? probeNode(rootTree, name.split('.')) : 0;
-        },
-
-        /**
-         * UI utility that presents a confirmation dialog to the user if any unsaved changes where sinaled for the given namespace.
-         * @param {String} name A string that identifies the namespace of the signaled changes (e.g., "viewer.studyViewer.measurements.targets"
-         *  for considering only the signals for the "targets" item of the "viewer.studyViewer.measurements" namespace or "viewer.studyViewer.*"
-         *  to consider all signaled changes for the "viewer.studyViewer" namespace).
-         * @param {Function} callback A callback function (e.g, function(shouldProceed, hasChanges) { ... }) that will be executed after assessment.
-         *  Upon execution, the callback will receive two boolean arguments (shouldProceed and hasChanges) indicating if the action can be performed
-         *  or not and if changes that need to be cleared exist.
-         * @param {Object} options (Optional) An object with UI presentation options.
-         * @param {String} options.title The string that will be used as a title for confirmation dialog.
-         * @param {String} options.message The string that will be used as a message for confirmation dialog.
-         * @return {void} No value is returned.
-         */
-        checkBeforeAction: function(name, callback, options) {
-
-            let probe, hasChanges, shouldProceed;
-
-            if (typeof callback !== 'function') {
-                // nothing to do if no callback function is supplied...
-                return;
             }
 
-            probe = this.probe(name);
+            if (nonRecursively !== true) {
-            if (probe > 0) {
+                const children = this.children;
-                // Unsaved changes exist...
+                for (let item in children) {
-                hasChanges = true;
+                    if (children.hasOwnProperty(item)) {
-                let dialogOptions = _.extend({
+                        children[item].trigger(type);
-                    title: 'You have unsaved changes!',
+                    }
-                    message: "Your changes will be lost if you don't save them before leaving the current page... Are you sure you want to proceed?"
+                }
-                }, options);
-                OHIF.ui.showFormDialog('dialogConfirm', dialogOptions).then(function() {
-                    // Unsaved changes exist but user confirms action...
-                    shouldProceed = true;
-                    callback.call(null, shouldProceed, hasChanges);
-                }, function() {
-                    // Unsaved changes exist and user does NOT confirm action...
-                    shouldProceed = false;
-                    callback.call(null, shouldProceed, hasChanges);
-                });
-            } else {
-                // No unsaved changes, action can be performed...
-                hasChanges = false;
-                shouldProceed = true;
-                callback.call(null, shouldProceed, hasChanges);
             }
 
         }
 
-    };
+    }
 
-}(OHIF, _));
+    attachHandlerForPath(path, type, handler) {
+
+        path = this.getPathComponents(path);
+
+        if (path !== null) {
+            let node = this.getNodeUpToIndex(path, path.length);
+            if (node !== null) {
+                return node.attachHandler(type, handler);
+            }
+        }
+
+        return false;
+
+    }
+
+    removeHandlerForPath(path, type, handler) {
+
+        path = this.getPathComponents(path);
+
+        if (path !== null) {
+            let node = this.getNodeUpToIndex(path, path.length);
+            if (node !== null) {
+                return node.removeHandler(type, handler);
+            }
+        }
+
+        return false;
+
+    }
+
+    triggerHandlersForPath(path, type, nonRecursively) {
+
+        path = this.getPathComponents(path);
+
+        if (path !== null) {
+            let node = this.getNodeUpToIndex(path, path.length);
+            if (node !== null) {
+                node.trigger(type, nonRecursively);
+            }
+        }
+
+    }
+
+}
+
+/**
+ * Root Namespace Node and API
+ */
+
+const rootNode = new Node();
+
+export const unsavedChanges = {
+
+    rootNode: rootNode,
+
+    /**
+     * Signal an unsaved change for a given namespace.
+     * @param {String} path A string (e.g., "viewer.studyViewer.measurements.targets") that identifies the namespace of the signaled changes.
+     * @return {Boolean} Returns false if the signal could not be saved or the supplied namespace is invalid. Otherwise, true is returned.
+     */
+    set: function(path) {
+        return rootNode.appendPath(path, 1);
+    },
+
+    /**
+     * Clear all signaled unsaved changes for a given namespace. If the supplied namespace is a wildcard, all signals below that namespace
+     * are cleared.
+     * @param {String} path A string that identifies the namespace of the signaled changes (e.g., "viewer.studyViewer.measurements.targets"
+     *  for clearing the "targets" item of the "viewer.studyViewer.measurements" namespace or "viewer.studyViewer.*" to specify all signaled
+     *  changes for the "viewer.studyViewer" namespace).
+     * @param {Boolean} recursively Clear node and all its children recursively. If not specified defaults to true.
+     * @return {Boolean} Returns false if the signal could not be removed or the supplied namespace is invalid. Otherwise, true is returned.
+     */
+    clear: function(path, recursively) {
+        return rootNode.clearPath(path, typeof recursively === UNDEFINED ? true : recursively);
+    },
+
+    /**
+     * Count the amount of signaled unsaved changes for a given namespace. If the supplied namespace is a wildcard, all signals below that
+     * namespace will also be accounted.
+     * @param {String} path A string that identifies the namespace of the signaled changes (e.g., "viewer.studyViewer.measurements.targets"
+     *  for counting the amount of signals for the "targets" item of the "viewer.studyViewer.measurements" namespace or "viewer.studyViewer.*"
+     *  to count all signaled changes for the "viewer.studyViewer" namespace).
+     * @param {Boolean} recursively Probe node and all its children recursively. If not specified defaults to true.
+     * @return {Number} Returns the amount of signaled changes for a given namespace. If the supplied namespace is a wildcard, the sum of all
+     *  changes for that namespace are returned.
+     */
+    probe: function(path, recursively) {
+        return rootNode.probePath(path, typeof recursively === UNDEFINED ? true : recursively);
+    },
+
+    /**
+     * Attach an event handler to the specified namespace.
+     * @param {String} name A string that identifies the namespace to which the event handler will be attached (e.g.,
+     *  "viewer.studyViewer.measurements" to attach an event handler for that namespace).
+     * @param {String} type A string that identifies the event type to which the event handler will be attached.
+     * @param {Function} handler The handler that will be executed when the specifed event is triggered.
+     * @return {Boolean} Returns true on success and false on failure.
+     */
+    attachHandler: function(path, type, handler) {
+        return (rootNode.appendPath(path, 0) && rootNode.attachHandlerForPath(path, type, handler));
+    },
+
+    /**
+     * Detach an event handler from the specified namespace.
+     * @param {String} name A string that identifies the namespace from which the event handler will be detached (e.g.,
+     *  "viewer.studyViewer.measurements" to remove an event handler from that namespace).
+     * @param {String} type A string that identifies the event type to which the event handler was attached.
+     * @param {Function} handler The handler that will be removed from execution list.
+     * @return {Boolean} Returns true on success and false on failure.
+     */
+    removeHandler: function(path, type, handler) {
+        return rootNode.removeHandlerForPath(path, type, handler);
+    },
+
+    /**
+     * Trigger all event handlers for the specified namespace and type.
+     * @param {String} name A string that identifies the namespace from which the event handler will be detached (e.g.,
+     *  "viewer.studyViewer.measurements" to remove an event handler from that namespace).
+     * @param {String} type A string that identifies the event type which will be triggered.
+     * @param {Boolean} nonRecursively If set to true, prevents triggering event handlers from descending tree.
+     * @return {Void} No value is returned.
+     */
+    trigger: function(path, type, nonRecursively) {
+        rootNode.triggerHandlersForPath(path, type, nonRecursively);
+    },
+
+    /**
+     * UI utility that presents a confirmation dialog to the user if any unsaved changes where signaled for the given namespace.
+     * @param {String} path A string that identifies the namespace of the signaled changes (e.g., "viewer.studyViewer.measurements.targets"
+     *  for considering only the signals for the "targets" item of the "viewer.studyViewer.measurements" namespace or "viewer.studyViewer.*"
+     *  to consider all signaled changes for the "viewer.studyViewer" namespace).
+     * @param {Function} callback A callback function (e.g, function(shouldProceed, hasChanges) { ... }) that will be executed after assessment.
+     *  Upon execution, the callback will receive two boolean arguments (shouldProceed and hasChanges) indicating if the action can be performed
+     *  or not and if changes that need to be cleared exist.
+     * @param {Object} options (Optional) An object with UI presentation options.
+     * @param {String} options.title The string that will be used as a title for confirmation dialog.
+     * @param {String} options.message The string that will be used as a message for confirmation dialog.
+     * @return {void} No value is returned.
+     */
+    checkBeforeAction: function(path, callback, options) {
+
+        let probe, hasChanges, shouldProceed;
+
+        if (typeof callback !== 'function') {
+            // nothing to do if no callback function is supplied...
+            return;
+        }
+
+        probe = this.probe(path);
+        if (probe > 0) {
+            // Unsaved changes exist...
+            hasChanges = true;
+            let dialogOptions = _.extend({
+                title: 'You have unsaved changes!',
+                message: "Your changes will be lost if you don't save them before leaving the current page... Are you sure you want to proceed?"
+            }, options);
+            OHIF.ui.showFormDialog('dialogConfirm', dialogOptions).then(function() {
+                // Unsaved changes exist but user confirms action...
+                shouldProceed = true;
+                callback.call(null, shouldProceed, hasChanges);
+            }, function() {
+                // Unsaved changes exist and user does NOT confirm action...
+                shouldProceed = false;
+                callback.call(null, shouldProceed, hasChanges);
+            });
+        } else {
+            // No unsaved changes, action can be performed...
+            hasChanges = false;
+            shouldProceed = true;
+            callback.call(null, shouldProceed, hasChanges);
+        }
+
+    },
+
+    /**
+     * UI utility that presents a "proactive" dialog (with three options: stay, abandon-changes, save-changes) to the user if any unsaved changes where signaled for the given namespace.
+     * @param {String} path A string that identifies the namespace of the signaled changes (e.g., "viewer.studyViewer.measurements.targets"
+     *  for considering only the signals for the "targets" item of the "viewer.studyViewer.measurements" namespace or "viewer.studyViewer.*"
+     *  to consider all signaled changes for the "viewer.studyViewer" namespace).
+     * @param {Function} callback A callback function (e.g, function(hasChanges, userChoice) { ... }) that will be executed after assessment.
+     *  Upon execution, the callback will receive two arguments: one boolean (hasChanges) indicating that unsaved changes exist and one string with the ID of the
+     *  option picked by the user on the dialog ('abort-action', 'abandon-changes' and 'save-changes'). If no unsaved changes exist, the second argument is null.
+     * @param {Object} options (Optional) An object with UI presentation options.
+     * @param {Object} options.position An object with optimal position (e.g., { x: ..., y: ... }) for the dialog.
+     * @return {void} No value is returned.
+     */
+    presentProactiveDialog: function(path, callback, options) {
+
+        let probe, hasChanges;
+
+        if (typeof callback !== 'function') {
+            // nothing to do if no callback function is supplied...
+            return;
+        }
+
+        probe = this.probe(path, true);
+        if (probe > 0) {
+            // Unsaved changes exist...
+            hasChanges = true;
+            OHIF.ui.unsavedChangesDialog(function(choice) {
+                callback.call(null, hasChanges, choice);
+            }, options);
+        } else {
+            // No unsaved changes, action can be performed...
+            hasChanges = false;
+            callback.call(null, hasChanges, null);
+        }
+
+    }
+
+};
+
+OHIF.ui.unsavedChanges = unsavedChanges;

Packages/ohif-core/package.js

@@ -25,6 +25,7 @@ Package.onUse(function(api) {
     // UI Styles
     api.addFiles([
         'client/ui/resizable/resizable.styl',
+        'client/components/bootstrap/dialog/unsavedChangesDialog.styl',
         'client/components/bootstrap/dropdown/dropdown.styl'
     ], 'client');
 

Packages/ohif-measurements/client/components/caseProgress/caseProgress.js

@@ -8,6 +8,36 @@ Template.caseProgress.onCreated(() => {
     instance.progressPercent = new ReactiveVar();
     instance.progressText = new ReactiveVar();
     instance.isLocked = new ReactiveVar();
+
+    instance.saveData = () => {
+
+        const timepointApi = instance.data.timepointApi;
+        const timepoints = timepointApi.all();
+        OHIF.log.info('Saving Measurements for timepoints:');
+        OHIF.log.info(timepoints);
+        instance.data.measurementApi.storeMeasurements(timepoints);
+
+        // Clear signaled unsaved changes...
+        OHIF.ui.unsavedChanges.clear('viewer.studyViewer.measurements.*');
+
+    };
+
+    instance.unsavedChangesHandler = () => {
+        const isNotDisabled = !instance.$('.js-finish-case').hasClass('disabled');
+        if (isNotDisabled && instance.progressPercent.get() === 100) {
+            instance.saveData();
+        }
+    };
+
+    // Attach handler for unsaved changes dialog...
+    OHIF.ui.unsavedChanges.attachHandler('viewer.studyViewer.measurements', 'save', instance.unsavedChangesHandler);
+
+});
+
+Template.caseProgress.onDestroyed(() => {
+    const instance = Template.instance();
+    // Remove unsaved changes handler after this view has been destroyed...
+    OHIF.ui.unsavedChanges.removeHandler('viewer.studyViewer.measurements', 'save', instance.unsavedChangesHandler);
 });
 
 Template.caseProgress.onRendered(() => {
@@ -132,15 +162,8 @@ Template.caseProgress.events({
             return;
         }
 
-        const timepointApi = instance.data.timepointApi;
+        instance.saveData();
-        const timepoints = timepointApi.all();
-        OHIF.log.info('Saving Measurements for timepoints:')
-        OHIF.log.info(timepoints);
-        instance.data.measurementApi.storeMeasurements(timepoints);
-
-        // Clear signaled unsaved changes...
-        OHIF.ui.unsavedChanges.clear('viewer.studyViewer.measurements.*');
-
         switchToTab('studylistTab');
+
     }
 });