move showConfirmDialog from lesiontracker to viewerbase

Packages/viewerbase/client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.html

@@ -0,0 +1,16 @@
+<template name="confirmDeleteDialog">
+    <div id="confirmDeleteDialog" tabindex="0">
+        {{ #if title }}
+        <h5>{{title}}</h5>
+        {{ else }}
+        <h5>Remove data from Timepoint?</h5>
+        {{/if}}
+        {{ #if text }}
+        <p>{{text}}</p>
+        {{ else }}
+        <p>Are you sure you would like to remove the measurement data at this timepoint?</p>
+        {{/if}}
+        <button id="cancel" class="btn btn-link" tabindex="1">Cancel</button>
+        <button id="confirm" class="btn btn-primary" tabindex="0">OK</button>
+    </div>
+</template>

Packages/viewerbase/client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.js

@@ -0,0 +1,85 @@
+function closeHandler() {
+    // Hide the lesion dialog
+    $('#confirmDeleteDialog').css('display', 'none');
+
+    // Remove the backdrop
+    $('.removableBackdrop').remove();
+
+    // Remove the callback from the template data
+    delete Template.confirmDeleteDialog.doneCallback;
+
+    // Restore the focus to the active viewport
+    setFocusToActiveViewport();
+}
+
+/**
+ * Displays the confirmation dialog template and the removable backdrop element
+ *
+ * @param doneCallback A callback
+ * @param options
+ */
+showConfirmDialog = function(doneCallback, options) {
+    // Show the backdrop
+    options = options || {};
+    UI.renderWithData(Template.removableBackdrop, options, document.body);
+
+    var confirmDeleteDialog = $('#confirmDeleteDialog');
+    confirmDeleteDialog.remove();
+
+    var viewer = document.getElementById('viewer');
+    UI.renderWithData(Template.confirmDeleteDialog, options, viewer);
+
+    // Make sure the context menu is closed when the user clicks away
+    $('.removableBackdrop').one('mousedown touchstart', function() {
+        closeHandler();
+    });
+
+    confirmDeleteDialog = $('#confirmDeleteDialog');
+    confirmDeleteDialog.css('display', 'block');
+    confirmDeleteDialog.focus();
+
+    if (doneCallback && typeof doneCallback === 'function') {
+        Template.confirmDeleteDialog.doneCallback = doneCallback;
+    }
+};
+
+// Global object of key names (TODO: put this somewhere else)
+keys = {
+    ESC: 27,
+    ENTER: 13
+};
+
+Template.confirmDeleteDialog.events({
+    'click #cancel, click #close': function() {
+        closeHandler();
+    },
+    'click #confirm': function() {
+        var doneCallback = Template.confirmDeleteDialog.doneCallback;
+        if (doneCallback && typeof doneCallback === 'function') {
+            doneCallback();
+        }
+
+        closeHandler();
+    },
+    'keydown #confirmDeleteDialog': function(e) {
+        if (e.which === keys.ESC) {
+            closeHandler();
+            return false;
+        }
+
+        if (this.keyPressAllowed === false) {
+            return;
+        }
+
+        var doneCallback = Template.confirmDeleteDialog.doneCallback;
+
+        // If Enter is pressed, close the dialog
+        if (e.which === keys.ENTER) {
+            if (doneCallback && typeof doneCallback === 'function') {
+                doneCallback();
+            }
+
+            closeHandler();
+        }
+    }
+});

Packages/viewerbase/client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.styl

@@ -0,0 +1,26 @@
+#confirmDeleteDialog
+  display: none
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  z-index: 100
+  width: 300px
+  min-height: 145px
+  max-height: 300px
+  height: fit-content
+  margin: auto
+  border-radius: 5px
+  padding: 10px 20px 10px 20px
+  background-color: rgba(255,255,255,1)
+  outline: none
+
+  .btn
+    text-decoration: none
+
+  #cancel
+    float: left
+
+  #confirm
+    float: right