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

Packages/lesiontracker/client/components/hidingPanel/hidingPanel.html

@@ -0,0 +1,20 @@
+<template name="hidingPanel">
+    <div class="hidingPanel {{#if isPinned}}pinned{{/if}}">
+        <div class="iconContainer">
+            {{#unless isPinned}}
+            <i class="arrowIcon fa fa-angle-double-right"></i>
+            {{/unless}}
+            <button class="btn btn-sm btn-primary btnPin {{#if isPinned}}active{{/if}}">
+                <i class="fa fa-thumb-tack"></i>
+            </button>
+        </div>
+        <div class="hidingPanelContent">
+            {{#if studyDateIsShown}}
+                {{> studyDateList}}
+            {{/if}}
+            <div class="studyBrowserContainer">
+                {{> studyBrowser}}
+            </div>
+        </div>
+    </div>
+</template>

Packages/lesiontracker/client/components/hidingPanel/hidingPanel.js

@@ -0,0 +1,123 @@
+
+function pinPanel() {
+    var hidingPanel = $(".hidingPanel");
+    hidingPanel.css({
+        width: '122px'
+    });
+
+    hidingPanel.find('.hidingPanelContent').css({
+        transform: 'translate(130px)'
+    });
+
+    // Calculate newWidth of viewportAndLesionTable
+    var viewerWidth = $('#viewer').width();
+    var newWidth = 100 - 122 / viewerWidth * 100;
+    $("#viewportAndLesionTable").css('width', newWidth + '%');
+}
+
+function unpinPanel() {
+// Calculate newWidth of viewportAndLesionTable
+    $("#viewportAndLesionTable").css('width', '99%');
+}
+
+Template.hidingPanel.events({
+    'mouseover div.hidingPanel': function(e, template) {
+        var isPinned = template.isPinned.get();
+        if (isPinned) {
+            return;
+        }
+
+        var hidingPanel = $(e.currentTarget);
+        hidingPanel.css({
+            width: '122px'
+        });
+
+        // Set panel as open
+        template.panelOpen.set(true);
+
+        // Rotate Arrow Icon
+        $('.arrowIcon').addClass('fa-flip-horizontal');
+
+        // Set panel content opacity
+        //hidingPanel.find('.hidingPanelContent').css('opacity', '1');
+        hidingPanel.find('.hidingPanelContent').css({
+            transform: 'translate(130px)'
+        });
+    },
+
+    'mouseout div.hidingPanel': function(e, template) {
+        var isPinned = template.isPinned.get();
+        if (isPinned) {
+            return;
+        }
+
+        var hidingPanel = $(e.currentTarget);
+        hidingPanel.css({
+            width: '1%'
+        });
+
+        // Set panel as closed
+        template.panelOpen.set(false);
+
+        // Rotate Arrow Icon
+        $('.arrowIcon').removeClass('fa-flip-horizontal');
+
+        // Set panel content opacity
+        //hidingPanel.find('.hidingPanelContent').css('opacity', '0');
+        hidingPanel.find('.hidingPanelContent').css({
+            transform: 'translate(-130px)'
+        });
+    },
+    'click button.btnPin': function(e, template) {
+        var isPinned = template.isPinned.get();
+        isPinned = !isPinned;
+
+        template.isPinned.set(isPinned);
+
+        // Set isPanelPinned of ViewerData
+        var contentId = template.data.contentId;
+        ViewerData[contentId].isPanelPinned = isPinned;
+        Session.set('ViewerData', ViewerData);
+
+        if (isPinned) {
+            pinPanel();
+        } else {
+            unpinPanel();
+        }
+
+        resizeViewportElements();
+    }
+});
+
+Template.hidingPanel.helpers({
+    studyDateIsShown: function() {
+        return true;
+    },
+    isPinned: function() {
+        return Template.instance().isPinned.get();
+    }
+});
+
+Template.hidingPanel.onRendered(function() {
+
+    var contentId = this.data.contentId;
+    var isPanelPinned = ViewerData[contentId].isPanelPinned;
+    if (isPanelPinned) {
+        pinPanel();
+    }
+
+});
+
+Template.hidingPanel.onCreated(function() {
+
+    this.panelOpen = new ReactiveVar(false);
+
+    var contentId = this.data.contentId;
+    var isPanelPinned = ViewerData[contentId].isPanelPinned;
+    if (!isPanelPinned) {
+        isPanelPinned = false;
+    }
+    this.isPinned = new ReactiveVar(isPanelPinned);
+
+
+});

Packages/lesiontracker/client/components/hidingPanel/hidingPanel.styl

@@ -0,0 +1,46 @@
+.hidingPanel
+  width: 1%
+  height: 100%
+  position: absolute
+  left: 0
+  top: 70px
+  bottom: 0
+  z-index: 10
+  background-color: black
+  border: 1px solid #666
+
+  &.pinned
+    border: 1px solid transparent
+
+  .iconContainer
+    width: 100%
+    height: 35px
+    overflow: hidden
+
+    .arrowIcon
+      color: white
+      margin: 0px 3px
+      font-size: 15pt
+      line-height: 35px
+
+    .btnPin
+      float: right
+      margin: 3px
+      outline: none
+
+  .hidingPanelContent
+    position: absolute
+    left: -130px
+    width: 100%
+    height: 100%
+    margin: 1px auto
+
+    .studyBrowserContainer
+      height: calc(100% - 150px)
+
+.hidingPanel, .arrowIcon
+  -o-transition: all 0.3s ease-out
+  -ms-transition: all 0.3s ease-out
+  -moz-transition: all 0.3s ease-out
+  -webkit-transition: all 0.3s ease-out
+  transition: all 0.3s ease-out