First pass at a Hanging Protocol implementation and editor (LT-131)
This commit is contained in:
Erik Ziegler committed
1 parent
dfcb33153f
commit
2e52d9e3c1
157 files changed
+8869
-23585
No files matched your search
+16
@@ -0,0 +1,16 @@
|
||||
<template name="confirmDeleteDialog">
|
||||
<div id="confirmDeleteDialog" tabindex="0">
|
||||
{{ #if title }}
|
||||
<h5>{{title}}</h5>
|
||||
{{ else }}
|
||||
<h5>Remove data from Timepoint?</h5>
|
||||
{{/if}}
|
||||
{{ #if text }}
|
||||
<p>{{text}}</p>
|
||||
{{ else }}
|
||||
<p>Are you sure you would like to remove the measurement data at this timepoint?</p>
|
||||
{{/if}}
|
||||
<button id="cancel" class="btn btn-link" tabindex="1">Cancel</button>
|
||||
<button id="confirm" class="btn btn-primary" tabindex="0">OK</button>
|
||||
</div>
|
||||
</template>
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
function closeHandler() {
|
||||
// Hide the lesion dialog
|
||||
$('#confirmDeleteDialog').css('display', 'none');
|
||||
|
||||
// Remove the backdrop
|
||||
$('.removableBackdrop').remove();
|
||||
|
||||
// Remove the callback from the template data
|
||||
delete Template.confirmDeleteDialog.doneCallback;
|
||||
|
||||
// Restore the focus to the active viewport
|
||||
setFocusToActiveViewport();
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays the confirmation dialog template and the removable backdrop element
|
||||
*
|
||||
* @param doneCallback A callback
|
||||
* @param options
|
||||
*/
|
||||
showConfirmDialog = function(doneCallback, options) {
|
||||
// Show the backdrop
|
||||
options = options || {};
|
||||
UI.renderWithData(Template.removableBackdrop, options, document.body);
|
||||
|
||||
var confirmDeleteDialog = $('#confirmDeleteDialog');
|
||||
confirmDeleteDialog.remove();
|
||||
|
||||
var viewer = document.getElementById('viewer');
|
||||
UI.renderWithData(Template.confirmDeleteDialog, options, viewer);
|
||||
|
||||
// Make sure the context menu is closed when the user clicks away
|
||||
$('.removableBackdrop').one('mousedown touchstart', function() {
|
||||
closeHandler();
|
||||
});
|
||||
|
||||
confirmDeleteDialog = $('#confirmDeleteDialog');
|
||||
confirmDeleteDialog.css('display', 'block');
|
||||
confirmDeleteDialog.focus();
|
||||
|
||||
if (doneCallback && typeof doneCallback === 'function') {
|
||||
Template.confirmDeleteDialog.doneCallback = doneCallback;
|
||||
}
|
||||
};
|
||||
|
||||
// Global object of key names (TODO: put this somewhere else)
|
||||
keys = {
|
||||
ESC: 27,
|
||||
ENTER: 13
|
||||
};
|
||||
|
||||
Template.confirmDeleteDialog.events({
|
||||
'click #cancel, click #close': function() {
|
||||
closeHandler();
|
||||
},
|
||||
'click #confirm': function() {
|
||||
var doneCallback = Template.confirmDeleteDialog.doneCallback;
|
||||
if (doneCallback && typeof doneCallback === 'function') {
|
||||
doneCallback();
|
||||
}
|
||||
|
||||
closeHandler();
|
||||
},
|
||||
'keydown #confirmDeleteDialog': function(e) {
|
||||
if (e.which === keys.ESC) {
|
||||
closeHandler();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.keyPressAllowed === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
var doneCallback = Template.confirmDeleteDialog.doneCallback;
|
||||
|
||||
// If Enter is pressed, close the dialog
|
||||
if (e.which === keys.ENTER) {
|
||||
if (doneCallback && typeof doneCallback === 'function') {
|
||||
doneCallback();
|
||||
}
|
||||
|
||||
closeHandler();
|
||||
}
|
||||
}
|
||||
});
|
||||
+12
-11
@@ -1,25 +1,26 @@
|
||||
#progressDialog
|
||||
#confirmDeleteDialog
|
||||
display: none
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
margin: auto
|
||||
width: 20%
|
||||
height: 20%
|
||||
z-index: 100
|
||||
width: 300px
|
||||
min-height: 145px
|
||||
max-height: 300px
|
||||
height: fit-content
|
||||
margin: auto
|
||||
border-radius: 5px
|
||||
padding: 10px 20px 10px 20px
|
||||
background-color: rgba(255,255,255,1)
|
||||
outline: none
|
||||
|
||||
.dialogContent
|
||||
margin-bottom: 20px
|
||||
.btn
|
||||
text-decoration: none
|
||||
|
||||
#message
|
||||
width: 100%
|
||||
#cancel
|
||||
float: left
|
||||
|
||||
span
|
||||
display: inline-block;
|
||||
width: 100%
|
||||
#confirm
|
||||
float: right
|
||||
@@ -1,20 +0,0 @@
|
||||
<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>
|
||||
@@ -1,123 +0,0 @@
|
||||
|
||||
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);
|
||||
|
||||
|
||||
});
|
||||
@@ -1,46 +0,0 @@
|
||||
.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
|
||||
@@ -1,33 +0,0 @@
|
||||
<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>
|
||||
@@ -1,47 +0,0 @@
|
||||
.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
|
||||
@@ -1,3 +0,0 @@
|
||||
<template name="login">
|
||||
{{> atForm}}
|
||||
</template>
|
||||
@@ -1,3 +0,0 @@
|
||||
<template name="notFound">
|
||||
Not found
|
||||
</template>
|
||||
@@ -1,17 +0,0 @@
|
||||
<template name="progressDialog">
|
||||
<div id="progressDialog" tabindex="0">
|
||||
<div class="dialogHeader">
|
||||
<h5>{{progressDialogTitle}}</h5>
|
||||
</div>
|
||||
<div class="dialogContent">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:{{progressStatus}}">
|
||||
{{progressStatus}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="message">
|
||||
{{{progressMessage}}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,100 +0,0 @@
|
||||
progressDialog = {
|
||||
/**
|
||||
* Shows progress dialog
|
||||
* @param {Object} settings - Settings used by progress dialog
|
||||
* @param {string} settings.title
|
||||
* @param {int} settings.numberOfCompleted - The value of progress dialog
|
||||
* @param {int} settings.numberOfTotal - The max value of progress dialog
|
||||
* @param {Object} [settings.messageParams] - Show a message in progress dialog by setting message and messageType
|
||||
* @param {string} [settings.messageParams.message="Progress"] - The message will be shown in the progress dialog
|
||||
* @param {string} [settings.messageParams.messageType="info"] - Sets ui, accepts bootstrap predefined classes such as success, info, warning, danger
|
||||
*/
|
||||
'show': function(settings) {
|
||||
// Set dialog settings
|
||||
Session.set("progressDialogSettings", settings);
|
||||
$('#progressDialog').css('display', 'block');
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the value of the progress dialog
|
||||
* @param {int} numberOfCompleted
|
||||
*/
|
||||
'update': function(numberOfCompleted) {
|
||||
var progressDialogSettings = Session.get("progressDialogSettings");
|
||||
progressDialogSettings.numberOfCompleted = numberOfCompleted;
|
||||
|
||||
Session.set("progressDialogSettings", progressDialogSettings);
|
||||
|
||||
if (progressDialogSettings.numberOfCompleted === progressDialogSettings.numberOfTotal) {
|
||||
progressDialog.close();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Closes the progress dialog
|
||||
*/
|
||||
'close': function() {
|
||||
// Reset progressDialogSettings session
|
||||
resetDialogSettingsSession();
|
||||
|
||||
// Close dialog
|
||||
$('#progressDialog').css('display', 'none');
|
||||
},
|
||||
/**
|
||||
* Shows a message in the progress dialog
|
||||
* @param {Object} messageParams
|
||||
* @param {string} messageParams.message
|
||||
* @param {string} messageParams.messageType
|
||||
*/
|
||||
'setMessage': function(messageParams) {
|
||||
var progressDialogSettings = Session.get("progressDialogSettings");
|
||||
if (!messageParams.messageType || messageParams.messageType == '') {
|
||||
messageParams.messageType = 'info';
|
||||
}
|
||||
progressDialogSettings.messageParams = messageParams;
|
||||
Session.set("progressDialogSettings", progressDialogSettings);
|
||||
}
|
||||
};
|
||||
|
||||
Template.progressDialog.helpers({
|
||||
'progressDialogTitle': function () {
|
||||
if (Session.get("progressDialogSettings") && Session.get("progressDialogSettings").title) {
|
||||
return Session.get("progressDialogSettings").title;
|
||||
}
|
||||
|
||||
return "Progress:";
|
||||
},
|
||||
'progressStatus': function() {
|
||||
var numberOfCompleted = 0;
|
||||
if (Session.get("progressDialogSettings") && Session.get("progressDialogSettings").numberOfCompleted) {
|
||||
numberOfCompleted = Session.get("progressDialogSettings").numberOfCompleted;
|
||||
}
|
||||
|
||||
var numberofTotal = 1;
|
||||
if (Session.get("progressDialogSettings") && Session.get("progressDialogSettings").numberOfTotal) {
|
||||
numberofTotal = Session.get("progressDialogSettings").numberOfTotal;
|
||||
}
|
||||
|
||||
return parseInt((numberOfCompleted / numberofTotal) * 100) + "%";
|
||||
},
|
||||
'progressMessage': function() {
|
||||
var progressDialogSettings = Session.get("progressDialogSettings");
|
||||
var messageParams = progressDialogSettings && progressDialogSettings.messageParams || false;
|
||||
if (messageParams && messageParams.message) {
|
||||
return '<span class="label label-'+messageParams.messageType+'">'+messageParams.message+'</span>';
|
||||
}
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
// Resets progressDialogSettings
|
||||
function resetDialogSettingsSession() {
|
||||
Session.set("progressDialogSettings",
|
||||
{
|
||||
title: 'Progress',
|
||||
numberOfCompleted: 0,
|
||||
numberOfTotal: 0,
|
||||
messageParams: {message: null, messageType: 'info'}
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
<template name="studyNotFound">
|
||||
<div class="studyNotFound">
|
||||
<h5>Study not found</h5>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,6 +0,0 @@
|
||||
.studyNotFound
|
||||
margin: 30px
|
||||
|
||||
h5
|
||||
text-align: center
|
||||
color: #888888
|
||||
Reference in new issue
Block a user