Fixes for keydown event detection for dialogs. Updated cornerstoneTools to latest master

Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.html

@@ -1,5 +1,5 @@
 <template name="confirmDeleteDialog">
-    <div id="confirmDeleteDialog">
+    <div id="confirmDeleteDialog" tabindex="0">
         <h5>Remove Measurement?</h5>
         <p>Are you sure you would like to remove this measurement?</p>
         <button id="cancel" class="btn btn-link" tabindex="1">Cancel</button>

Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.js

@@ -7,6 +7,9 @@ function closeHandler() {
 
     // Remove the callback from the template data
     delete Template.confirmDeleteDialog.doneCallback;
+
+    // Restore the focus to the active viewport
+    setFocusToActiveViewport();
 }
 
 showConfirmDialog = function(doneCallback, options) {
@@ -19,14 +22,17 @@ showConfirmDialog = function(doneCallback, options) {
         closeHandler();
     });
 
-    $("#confirmDeleteDialog").css('display', 'block');
+    var confirmDeleteDialog = $("#confirmDeleteDialog");
+    confirmDeleteDialog.css('display', 'block');
+    confirmDeleteDialog.focus();
 
     if (doneCallback && typeof doneCallback === 'function') {
         Template.confirmDeleteDialog.doneCallback = doneCallback;
     }
 };
 
-var keys = {
+// Global object of key names (TODO: put this somewhere else)
+keys = {
     ESC: 27,
     ENTER: 13
 };
@@ -46,6 +52,7 @@ Template.confirmDeleteDialog.events({
     'keydown #confirmDeleteDialog': function(e) {
         if (e.which === keys.ESC) {
             closeHandler();
+            return false;
         }
 
         if (this.keyPressAllowed === false) {

Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.html

@@ -1,5 +1,5 @@
 <template name="lesionLocationDialog">
-    <div id="lesionLocationDialog">
+    <div id="lesionLocationDialog" tabindex="0">
         <div class="dialogHeader">
             <h4>Select Lesion Location</h4>
         </div>
@@ -16,7 +16,7 @@
         </div>
     </div>
 
-    <div id="lesionLocationRelabelDialog">
+    <div id="lesionLocationRelabelDialog" tabindex="0">
         <div class="dialogHeader">
             <h4>Change Lesion Location</h4>
         </div>

Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js

@@ -4,6 +4,9 @@ function closeHandler(dialog) {
 
     // Remove the backdrop
     $(".removableBackdrop").remove();
+
+    // Restore the focus to the active viewport
+    setFocusToActiveViewport();
 }
 
 // This event sets lesion number for new lesion
@@ -96,6 +99,7 @@ function getLesionLocationCallback(measurementData, eventData) {
     }
 
     dialog.css(dialogProperty);
+    dialog.focus();
 }
 
 changeLesionLocationCallback = function(measurementData, eventData, doneCallback) {
@@ -134,6 +138,7 @@ changeLesionLocationCallback = function(measurementData, eventData, doneCallback
     }
 
     dialog.css(dialogProperty);
+    dialog.focus();
 
     var measurement = Measurements.findOne(measurementData.id);
     if (!measurement) {
@@ -249,9 +254,10 @@ Template.lesionLocationDialog.events({
     'keydown #lesionLocationDialog, keydown #lesionLocationRelabelDialog': function(e) {
         var dialog = Template.lesionLocationDialog.dialog;
 
-        // If Enter is pressed, close the dialog
-        if (e.which === 13) {
+        // If Esc or Enter are pressed, close the dialog
+        if (e.which === keys.ESC || e.which === keys.ENTER) {
             closeHandler(dialog);
+            return false;
         }
     }
 });

Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.html

@@ -3,7 +3,7 @@
         {{ #if isTarget }}
             <td class="lesionTableTimepointCell targetCell" tabindex="1">{{displayData}}</td>
         {{ else }}
-            <td class="lesionTableTimepointCell nonTargetCell" tabindex="2">{{displayData}}</td>
+            <td class="lesionTableTimepointCell nonTargetCell" tabindex="1">{{displayData}}</td>
         {{ /if }}
     {{ else }}
     <td class="lesionTableTimepointCell empty"></td>

Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html

@@ -1,5 +1,5 @@
 <template name="nonTargetLesionDialog">
-    <div id="nonTargetLesionLocationDialog">
+    <div id="nonTargetLesionLocationDialog" tabindex="0">
         <div class="dialogHeader">
             <h4>Select Lesion Location</h4>
         </div>
@@ -32,7 +32,7 @@
         </div>
     </div>
 
-    <div id="nonTargetLesionRelabelDialog">
+    <div id="nonTargetLesionRelabelDialog" tabindex="0">
         <div class="dialogHeader">
             <h4>Select Lesion Location</h4>
         </div>

Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js

@@ -4,6 +4,9 @@ function closeHandler(dialog) {
 
     // Remove the backdrop
     $(".removableBackdrop").remove();
+
+    // Restore the focus to the active viewport
+    setFocusToActiveViewport();
 }
 
 // This event sets lesion number for new lesion
@@ -168,6 +171,7 @@ changeNonTargetLocationCallback = function(measurementData, eventData, doneCallb
     }
 
     dialog.css(dialogProperty);
+    dialog.focus();
 
     var measurement = Measurements.findOne(measurementData.id);
     if (!measurement) {
@@ -311,9 +315,10 @@ Template.nonTargetLesionDialog.events({
     'keydown #lesionLocationDialog, keydown #lesionLocationRelabelDialog': function(e) {
         var dialog = Template.nonTargetLesionDialog.dialog;
 
-        // If Enter is pressed, close the dialog
-        if (e.which === 13) {
+        // If Esc or Enter are pressed, close the dialog
+        if (e.which === keys.ESC || e.which === keys.ENTER) {
             closeHandler(dialog);
+            return false;
         }
     }
 });

Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.html

@@ -1,5 +1,5 @@
 <template name="nonTargetResponseDialog">
-    <div id="nonTargetResponseDialog">
+    <div id="nonTargetResponseDialog" tabindex="0">
         <div class="dialogHeader">
             <h5>Select Response</h5>
         </div>

Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.js

@@ -4,6 +4,9 @@ function closeHandler(dialog) {
 
     // Remove the backdrop
     $(".removableBackdrop").remove();
+
+    // Restore the focus to the active viewport
+    setFocusToActiveViewport();
 }
 
 changeNonTargetResponse = function(measurementData, eventData, doneCallback) {
@@ -55,6 +58,7 @@ changeNonTargetResponse = function(measurementData, eventData, doneCallback) {
     }
 
     dialog.css(dialogProperty);
+    dialog.focus();
 
     var measurement = Measurements.findOne(measurementData.id);
     if (!measurement) {
@@ -136,9 +140,10 @@ Template.nonTargetResponseDialog.events({
     'keydown #nonTargetResponseDialog': function(e) {
         var dialog = Template.nonTargetResponseDialog.dialog;
 
-        // If Enter is pressed, close the dialog
-        if (e.which === 13) {
+        // If Esc or Enter are pressed, close the dialog
+        if (e.which === keys.ESC || e.which === keys.ENTER) {
             closeHandler(dialog);
+            return false;
         }
     }
 });