Added hotkey support to viewerbase

2015-12-09 15:48:24 +01:00
1 parent a005e5b359
commit da3101be93
@@ -0,0 +1,15 @@
+<template name="hidingPanel">
+    <div class="hidingPanel">
+        <div class="toggleBtnContainer">
+            <button id="btnCollapse">
+                <i id="btnCollapseIcon" class="btnCollapseIcon fa fa-angle-left fa-lg"></i>
+            </button>
+        </div>
+        <div class="studyBrowserContainer">
+            {{#if studyDateIsShown}}
+                {{> studyDateList}}
+            {{/if}}
+            {{> studyBrowser}}
+        </div>
+    </div>
+</template>
@@ -0,0 +1,51 @@
+Template.hidingPanel.events({
+    'click button#btnCollapse': function(e,template) {
+
+        // Check hidingPanel is open or not
+        var hidingPanelOpen = template.hidingPanelOpen.get();
+        hidingPanelOpen = !hidingPanelOpen;
+        template.hidingPanelOpen.set(hidingPanelOpen);
+
+        // Get hidingPanel width from hidingPanelWidth reactiveVar
+        var contentId = this.contentId;
+        var hidingPanelElement = $("#"+contentId).find(".hidingPanel");
+        var hidingPanelWidth = template.hidingPanelWidth.get();
+        if(hidingPanelWidth == 0) {
+            hidingPanelWidth = $(hidingPanelElement).width();
+            template.hidingPanelWidth.set(parseInt(hidingPanelWidth));
+        }
+
+        $(hidingPanelElement).toggleClass("hidingPanelCollapse");
+
+        var studyBrowserContainerElement = $("#"+contentId).find(".studyBrowserContainer");
+        $(studyBrowserContainerElement).toggleClass("studyBrowserContainerCollapse");
+
+        var btnCollapseIconElement = $("#"+contentId).find("#btnCollapseIcon");
+        $(btnCollapseIconElement).toggleClass("btnCollapseIcon-collapse");
+
+        // Set viewportAndLesionTable width according to hiding panel status
+        if (hidingPanelOpen) {
+            var viewportAndLesionTableElement = $("#"+contentId).find("#viewportAndLesionTable");
+            var viewportAndLesionTableElementWidth = $(viewportAndLesionTableElement).width();
+            $(viewportAndLesionTableElement).width(viewportAndLesionTableElementWidth - hidingPanelWidth +"px");
+
+        } else {
+            var viewportAndLesionTableElement = $("#"+contentId).find("#viewportAndLesionTable");
+            var viewportAndLesionTableElementWidth = $(viewportAndLesionTableElement).width();
+            $(viewportAndLesionTableElement).width(viewportAndLesionTableElementWidth + hidingPanelWidth +"px");
+        }
+
+
+    }
+});
+
+Template.hidingPanel.helpers({
+    'studyDateIsShown': function() {
+        return true;
+    }
+});
+
+Template.hidingPanel.onCreated(function() {
+    this.hidingPanelOpen =  new ReactiveVar(true);
+    this.hidingPanelWidth = new ReactiveVar(0);
+});
@@ -0,0 +1,70 @@
+
+.hidingPanel,.hidingPanelCollapse, .toggleBtnContainer, .studyBrowserContainer, .studyBrowserContainerCollapse, #btnCollapse,.btnCollapseIcon, .btnCollapseIcon-collapse, .viewportStyle {
+
+  -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;
+}
+
+.hidingPanel {
+  width: 120px;
+  height: 100%;
+  position: relative;
+  float: left;
+}
+
+.hidingPanelCollapse{
+  width: 0px;
+}
+
+.toggleBtnContainer{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 25px;
+  height: 25px;
+}
+
+.studyBrowserContainer {
+  position: absolute;
+  display: block;
+  margin-top: 30px;
+  height: calc(100% - 30px);
+  width: 100%;
+  opacity: 1;
+}
+
+.studyBrowserContainerCollapse {
+  opacity: 0;
+  width: 0px;
+
+}
+.studyBrowserContainerCollapseDisplay {
+  display: none;
+}
+
+#btnCollapse{
+  position: absolute;
+  display: block;
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+  padding: 0;
+  border: 0;
+  border-top: 1px solid #e6e6e6;
+  background: #f6f6f6;
+  color: #666;
+  font-size: 0.875rem;
+  text-align: center;
+  cursor: pointer;
+}
+
+.btnCollapseIcon-collapse{
+  -moz-transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+
@@ -0,0 +1,33 @@
+<template name="layout">
+    <nav class="navbar navbar-default noselect" role="navigation">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                  <span class="sr-only">Toggle navigation</span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="/">
+                    <img height="30px" src="/images/logo.png">
+                    <h4 class="name">Open Health Imaging Foundation</h4>
+                </a>
+            </div>
+            <div id="navbar" class="navbar-collapse collapse">
+                <ul class="nav navbar-nav navbar-right">
+                    <li>
+                        <a href="http://www.ohif.org">About</a>
+                    </li>
+                    <li>
+                        <form class="navbar-form">
+                            <div class="form-group">
+                                {{> loginButtons align="right"}}
+                            </div>
+                        </form>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    {{> yield}}
+</template>
@@ -0,0 +1,47 @@
+.noselect
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -khtml-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+  
+.navbar
+  margin-bottom: 0
+  border-radius: 0
+  color: #888888
+  background-color: #060606
+  border: none
+  font-family: "Sanchez"
+  color: #C1C1C1
+    
+.navbar-default .navbar-nav > li > a
+  color: #C1C1C1
+  font-weight: bold
+  font-size: 12pt
+    
+.navbar-form
+  height: 50px
+  margin: 0
+  padding: 15px 3px
+  font-weight: bold
+  font-size: 12pt
+  line-height: 20px
+  
+.navbar-brand
+  display: inline-block
+  
+  img
+    float: left
+    margin-right: 10px
+    margin-top: -5px
+
+  h4.name
+    float: left
+    margin: 0
+    font-family: "Sanchez"
+    color: #C1C1C1
+
+@media (min-width: 768px)
+  .navbar
+    border-radius: 0px
@@ -0,0 +1,5 @@
+<template name="loadingText">
+    <div class="loadingTextDiv">
+        <h5>Loading... <i class="fa fa-spinner fa-pulse"></i></h5>
+    </div>
+</template>
@@ -0,0 +1,5 @@
+.loadingTextDiv
+  margin: 30px
+
+  h5
+    text-align: center
@@ -0,0 +1,3 @@
+<template name="login">
+    {{> atForm}}
+</template>
@@ -0,0 +1,3 @@
+<template name="notFound">
+    Not found
+</template>
@@ -0,0 +1,7 @@
+<template name="removableBackdrop">
+    <div class="removableBackdrop noselect"
+        oncontextmenu='return false;'
+        unselectable='on'
+        onselectstart='return false;'>
+    </div>
+</template>
@@ -0,0 +1,9 @@
+.removableBackdrop
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  z-index: 50
+  background-color: transparent
+