LT-275: Making the measure flow bounded by window borders

Packages/lesiontracker/client/components/measureFlow/measureFlow.js

@@ -92,6 +92,13 @@ Template.measureFlow.onCreated(() => {
     });
 });
 
+Template.measureFlow.onRendered(() => {
+    const instance = Template.instance();
+
+    // Make the measure flow bounded by the window borders
+    instance.$('.measure-flow').bounded();
+});
+
 Template.measureFlow.events({
     'click .measure-flow .btn-add, click .measure-flow .btn-rename'(event, instance) {
         // Set the open state for the component
@@ -122,6 +129,7 @@ Template.measureFlow.events({
             instance.selectTreeView = Blaze.renderWithData(Template.selectTree, data, parentElement);
         });
     },
+
     'click .measure-flow .btn-description'(event, instance) {
         // Fade out the action buttons
         instance.$('.measure-flow .actions').addClass('fadeOut');
@@ -129,12 +137,13 @@ Template.measureFlow.events({
         // Set the description edit mode
         instance.descriptionEdit.set(true);
 
-        // Wait for DOM rerendering, resize and focus the description textarea
+        // Wait for DOM re-rendering, resize and focus the description textarea
         Tracker.afterFlush(() => {
             const $textarea = instance.$('textarea');
             $textarea.trigger('input').focus();
         });
     },
+
     'input textarea, change textarea'(event, instance) {
         const element = event.currentTarget;
         const $element = $(element);
@@ -143,7 +152,12 @@ Template.measureFlow.events({
         $element.css('max-height', 0);
         $element.height(element.scrollHeight);
         $element.css('max-height', '');
+
+        // Reposition the measure flow if needed
+        const $measureFlow = instance.$('.measure-flow');
+        $element.one('transitionend', () => $measureFlow.trigger('spatialChanged'));
     },
+
     'keydown textarea'(event, instance) {
         // Unset the description edit mode if ENTER or ESC was pressed
         if (event.which === 13 || event.which === 27) {
@@ -156,39 +170,61 @@ Template.measureFlow.events({
             instance.description.set($(event.currentTarget).val());
         }
     },
+
     'click .select-tree-common label'(event, instance) {
+        // Set the common section clicked flag
         instance.commonClicked = true;
     },
+
     'change .select-tree-root'(event, instance) {
         // Stop here if it's an inner input event
         if (event.target !== event.currentTarget) {
             return;
         }
 
+        // Store the selectTree component value before it's removed from DOM
         const $treeRoot = $(event.currentTarget);
         instance.value = $treeRoot.data('component').value();
     },
+
     'click .tree-leaf input'(event, instance) {
         const $target = $(event.currentTarget);
         const $label = $target.closest('label');
         const $treeRoot = $label.closest('.select-tree-root');
         const $container = $treeRoot.find('.tree-options:first');
+
+        // Check if the targe click was a label inside common section
         if (instance.commonClicked) {
             const labelTop = $label.position().top;
             const containerCenter = Math.round($container.height() / 2);
             const labelCenter = Math.round($label.height() / 2);
+
+            // Scroll the options container to make the target input visible
             $container.scrollTop(labelTop - containerCenter + labelCenter);
         }
 
+        // Change the measure flow state to selected
         instance.state.set('selected');
+
+        // Wait for the DOM re-rendering
         Tracker.afterFlush(() => {
+            // Get the measure flow div
             const $measureFlow = instance.$('.measure-flow');
+
+            // Get the clicked label window offset
             const labelOffset = $label.offset();
+
+            // Subtract the label box shadow height from the label's position
             labelOffset.top -= 10;
+
+            // Reposition the measure flow based on the clicked label position
             $measureFlow.css(labelOffset);
+
+            // Resize the copied label with same width of the clicked one
             $measureFlow.children('.tree-leaf').width($label.outerWidth());
         });
 
+        // Wait the fade-out transition and remove the selectTree component
         $container.one('transitionend', event => Blaze.remove(instance.selectTreeView));
     }
 });