Grab and resize lesion table height

Packages/lesiontracker/components/lesionTable/lesionTable.html

@@ -1,5 +1,7 @@
 <template name="lesionTable">
     <div id="lesionTableContainer">
+        <div id="dragbar"></div>
+        <div id="lesionTableWrapper">
             <table class="table table-striped noselect lesionTable" id="tblLesion">
                 <thead>
                 <tr>
@@ -22,4 +24,6 @@
                 </tbody>
             </table>
         </div>
+
+    </div>
 </template>

Packages/lesiontracker/components/lesionTable/lesionTable.js

@@ -3,7 +3,7 @@
  *
  * @param measurementId The unique key for a specific Measurement
  */
-function activateLesion(measurementId, templateData) {
+activateLesion =  function(measurementId, templateData) {
     // Find Measurement data for this lesion
     var measurementData = Measurements.findOne(measurementId);
 
@@ -216,11 +216,61 @@ Template.lesionTable.events({
         $(e.currentTarget).addClass("selectedRow").siblings().removeClass("selectedRow");
 
         activateLesion(measurementId,template.data);
+    },
+
+    'mousedown div#dragbar': function(e, template) {
+        var pY = e.pageY;
+        var draggableParent = $(e.currentTarget).parent();
+        var startHeight = draggableParent.height();
+        //e.preventDefault();
+        template.dragging.set(true);
+
+        $(document).on('mouseup', function(e) {
+            template.dragging.set(false);
+            console.log(e.pageY);
+            $(document).off('mouseup').off('mousemove');
+        });
+
+        $(document).on('mousemove', function(e) {
+            var topPosition = e.pageY - pY;
+            draggableParent.css({
+                top: topPosition,
+                height: startHeight - topPosition
+            });
+
+            var contentId = Session.get("activeContentId");
+            var viewportAndLesionTableHeight = $("#viewportAndLesionTable").height();
+            var newPercentageHeightofLesionTable = (startHeight - topPosition) / viewportAndLesionTableHeight * 100;
+            var newPercentageHeightofViewermain = 100 - newPercentageHeightofLesionTable;
+            $(".viewerMain").height(newPercentageHeightofViewermain+"%");
+
+            // Resize viewport
+            var elements = $('.imageViewerViewport');
+            elements.each(function(index) {
+                var element = this;
+                if (!element) {
+                    return;
                 }
+                cornerstone.resize(element, true);
+            });
+        });
+    }
+
+});
+
+Template.lesionTable.onCreated(function(){
+     this.dragging = new ReactiveVar(false);
+    // Bind document mouse events
+    // $(document).on('mousemove', dragbarMove);
+});
+
+Template.lesionTable.onDestroyed(function(){
+
 });
 
 // Track ViewerData to get active timepoints
 // Put a visual indicator(<) in timepoint header in lesion table for active timepoints
+// timepointLoaded property is used to put indicator for loaded timepoints in viewport
 Tracker.autorun(function () {
     var allViewerData = Session.get('ViewerData');
     var contentId = Session.get('activeContentId');
@@ -273,3 +323,4 @@ Tracker.autorun(function () {
 
 });
 
+

Packages/lesiontracker/components/lesionTable/lesionTable.styl

@@ -1,12 +1,29 @@
 #lesionTableContainer
   width: 100%
   height: 16%
+  background-color: #000000
+
+  #dragbar
+    width: 100%
+    height: 3px
+    postion: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background-color: #666666
+    cursor: col-resize
+
+  #lesionTableWrapper
     position: relative
+    width: 100%
+    height: 100%
+    margin: 0 auto
 
   .lesionTable
 
     td, th
-      border: 1px solid white
+      border: 1px solid #FFFFFF
       border-collapse: collapse
       width: 100px
 
@@ -32,7 +49,7 @@
         th
           border-bottom-width: 0
           font-weight: normal
-          color:white
+          color: #FFFFFF
           line-height: 15px
           text-align: center
           margin: 0
@@ -53,7 +70,7 @@
 
       tr.selectedRow
         background: #F5F5F5 !important
-        color: black !important
+        color: #000000 !important
 
       tr.lesionTableRow
         width: 100%