First pass at a Hanging Protocol implementation and editor (LT-131)

Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.html

@@ -0,0 +1,23 @@
+<template name="textEntryDialog">
+    <div class="textEntryDialog">
+        <div class="dialogHeader">
+            <h4 class="title">{{title}}}</h4>
+        </div>
+        <div class="dialogContent">
+            <div class="row">
+                <div class="col-xs-12">
+                    <h5 class="instructions">{{instructions}}</h5>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    <input class='currentValue' type="text" value={{currentValue}}>
+                </div>
+            </div>
+        </div>
+        <div class="dialogFooter">
+            <button class="cancel btn btn-link" tabindex="1">Cancel</button>
+            <button class="save btn btn-primary" tabindex="0">OK</button>
+        </div>
+    </div>
+</template>

Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.js

@@ -0,0 +1,132 @@
+var keys = {
+    ESC: 27,
+    ENTER: 13
+};
+
+/**
+ * Close the specified dialog element and returns the browser
+ * focus to the active viewport.
+ *
+ * @param dialog The DOM element of the dialog to close
+ */
+function closeHandler(dialog) {
+    // Hide the lesion dialog
+    $(dialog).css('display', 'none');
+
+    // Remove the backdrop
+    $('.removableBackdrop').remove();
+
+    // Restore the focus to the active viewport
+    setFocusToActiveViewport();
+}
+
+/**
+ * Displays and updates the UI of the Text Entry Dialog given a new title,
+ * instructions, and doneCallback
+ *
+ * @param title Title of the dialog box
+ * @param instructions Instructions to display to the user
+ * @param doneCallback Function to execute when the dialog has been closed
+ */
+openTextEntryDialog = function(title, instructions, currentValue, doneCallback) {
+    // Get the lesion location dialog
+    var dialog = $('.textEntryDialog');
+
+    // Clear any input that is still on the page
+    var currentValueInput = dialog.find('input.currentValue');
+    currentValueInput.val(currentValue);
+
+    // Store the Dialog DOM data, rule level and rule in the template data
+    Template.textEntryDialog.dialog = dialog;
+    Template.textEntryDialog.title = title;
+    Template.textEntryDialog.instructions = instructions;
+    Template.textEntryDialog.doneCallback = doneCallback;
+
+    dialog.find('.title').html(title);
+    dialog.find('.instructions').html(instructions);
+
+    // Update the dialog's CSS so that it is visible on the page
+    dialog.css('display', 'block');
+
+    // Show the backdrop
+    UI.render(Template.removableBackdrop, document.body);
+
+    // Make sure the context menu is closed when the user clicks away
+    $('.removableBackdrop').one('mousedown touchstart', function() {
+        closeHandler(dialog);
+    });
+};
+
+Template.textEntryDialog.events({
+    /**
+     * Save the user-specified text
+     *
+     */
+    'click .save': function() {
+        // Retrieve the input properties to the template
+        var dialog = Template.textEntryDialog.dialog;
+        var currentValue = dialog.find('input.currentValue').val();
+
+        // If currentValue input is undefined, prevent saving this rule
+        if (currentValue === undefined) {
+            return;
+        }
+
+        var doneCallback = Template.textEntryDialog.doneCallback;
+        if (doneCallback) {
+            doneCallback(currentValue);
+        }
+
+        // Close the dialog
+        closeHandler(Template.textEntryDialog.dialog);
+    },
+    /**
+     * Allow the user to click the Cancel button to close the dialog
+     */
+    'click .cancel': function() {
+        closeHandler(Template.textEntryDialog.dialog);
+    },
+    /**
+     * Allow Esc keydown events to close the dialog
+     *
+     * @param event The Keydown event details
+     * @returns {boolean} Return false to prevent bubbling of the event
+     */
+    'keydown .textEntryDialog': function(event) {
+        var dialog = Template.textEntryDialog.dialog;
+
+        // If Esc key is pressed, close the dialog
+        if (event.which === keys.ESC) {
+            closeHandler(dialog);
+            return false;
+        } else if (event.which === keys.ENTER) {
+            var currentValue = dialog.find('input.currentValue').val();
+
+            // If currentValue input is undefined, prevent saving this rule
+            if (currentValue === undefined) {
+                return;
+            }
+
+            var doneCallback = Template.textEntryDialog.doneCallback;
+            if (doneCallback) {
+                doneCallback(currentValue);
+            }
+
+            closeHandler(dialog);
+            return false;
+        }
+    },
+    /**
+     * Update the currentValue ReactiveVar if the user changes the attribute value
+     *
+     * @param event The Change event for the input
+     * @param template The current template context
+     */
+    'change input.currentValue': function(event, template) {
+        // Get the DOM element representing the input box
+        var input = $(event.currentTarget);
+
+        // Update the template data with the current value
+        Template.textEntryDialog.currentValue = input.val();
+    }
+});

Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl

@@ -0,0 +1,29 @@
+.textEntryDialog
+  display: none
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  z-index: 100
+  width: 50%
+  max-width: 400px
+  height: 170px
+  margin: auto
+  border-radius: 5px
+  padding: 10px 20px 10px 20px
+  background-color: rgba(255,255,255,1)
+  outline: none
+
+  .dialogContent
+    margin-bottom: 10px
+
+  .cancel
+    float: left
+
+  .save
+    float: right
+
+  input.currentValue
+    width: 95%
+    text-align: left