Work towards tabbed panels. Still very broken
This commit is contained in:
Erik Ziegler committed
1 parent
9803046f2d
commit
7217b7c67d
41 files changed
+468
-369
No files matched your search
@@ -0,0 +1,4 @@
|
||||
<template name="tabContent">
|
||||
<div role="tabpanel" class="tab-pane" id="{{contentid}}">
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template name="tabTitle">
|
||||
<li role="presentation" class="tabTitle">
|
||||
<a data-target="#{{contentid}}" role="tab" data-toggle="tab">
|
||||
{{title}}
|
||||
<a class="close">x</a>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
Template.tabTitle.events({
|
||||
'click .close': function(e) {
|
||||
var tab = $(e.currentTarget).parents('[data-toggle="tab"]').eq(0);
|
||||
var contentId = tab.data("target").replace("#","");
|
||||
var tabObjectId = tabs.find({contentid: contentId}).fetch()[0]._id;
|
||||
tabs.remove(tabObjectId);
|
||||
|
||||
var tabIndex = tab.index();
|
||||
var newActiveTabIndex = Math.max(tabIndex - 1, 0);
|
||||
if (newActiveTabIndex === 0) {
|
||||
$('a[data-target="#worklistTab"]').addClass('active').tab('show');
|
||||
return;
|
||||
}
|
||||
|
||||
var newActiveTab = $(".tabTitle").eq(newActiveTabIndex);
|
||||
var newContentId = newActiveTab.data("contentid");
|
||||
|
||||
var tabObject = tabs.find({contentId: newContentId}).fetch()[0];
|
||||
tabObject.active = true;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
.tabTitle
|
||||
a
|
||||
padding: 0 5px
|
||||
|
||||
a.close
|
||||
font-size: 16pt
|
||||
padding: 0 5px
|
||||
font-weight: normal
|
||||
@@ -1,17 +1,21 @@
|
||||
<template name="worklist">
|
||||
<div class="tabbable">
|
||||
<ul id="tabs" class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a data-toggle="tab">Study List</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="tabs-content" class="tab-content">
|
||||
<div id="contentList" class="tab-pane active">
|
||||
<div class="container">
|
||||
{{> worklistSearch }}
|
||||
{{> worklistResult }}
|
||||
</div>
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" class="active">
|
||||
<a data-target="#worklistTab" role="tab" data-toggle="tab">Study List</a>
|
||||
</li>
|
||||
{{ #each tabs }}
|
||||
{{ >tabTitle }}
|
||||
{{ /each }}
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="worklistTab">
|
||||
<div class="container">
|
||||
{{> worklistSearch }}
|
||||
{{> worklistResult }}
|
||||
</div>
|
||||
</div>
|
||||
{{ #each tabs }}
|
||||
{{ >tabContent }}
|
||||
{{ /each }}
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,110 +1,43 @@
|
||||
var contentID = "";
|
||||
|
||||
//Generate UUID to create unique tabs
|
||||
function generateUUID () {
|
||||
var d = new Date().getTime();
|
||||
var uuid = 'xxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
var r = (d + Math.random()*8)%8 | 0;
|
||||
d = Math.floor(d/8);
|
||||
return (c=='x' ? r : (r&0x3|0x8)).toString(8);
|
||||
});
|
||||
return uuid;
|
||||
}
|
||||
|
||||
//Remove tab
|
||||
function removeTab (uuid) {
|
||||
var removedTabIndex = $("#tab"+uuid).index();
|
||||
//Remove tab
|
||||
$("#tab"+uuid).remove();
|
||||
//Remove Content
|
||||
$("#content"+uuid).remove();
|
||||
|
||||
//TODO:Activate previous tab
|
||||
|
||||
}
|
||||
|
||||
//Add new tab
|
||||
function addNewTab (data) {
|
||||
//Make inactive all tabs
|
||||
$("#tabs > li").removeClass("active");
|
||||
$("#tabs-content > div").removeClass("active");
|
||||
|
||||
//Create new li element for tab
|
||||
var tabli = document.createElement("li");
|
||||
$(tabli).addClass("active");
|
||||
$("#tabs").append(tabli);
|
||||
|
||||
//a element inside li
|
||||
var taba = document.createElement("a");
|
||||
var uuid = generateUUID();
|
||||
var tabId = "tab"+uuid;
|
||||
|
||||
|
||||
//activeTabId provides unique tabs content and encapsulates templates in tabs
|
||||
Session.set("activeTabId", tabId);
|
||||
console.log(Session.get("activeTabId"));
|
||||
|
||||
//Create tab
|
||||
taba.setAttribute("data-toggle","tab");
|
||||
taba.setAttribute("id",tabId);
|
||||
taba.innerHTML = data.patientName;
|
||||
tabli.appendChild(taba);
|
||||
|
||||
//Create close button
|
||||
var btnClose = document.createElement('button');
|
||||
$(btnClose).addClass("btnClose");
|
||||
btnClose.innerHTML = "x";
|
||||
btnClose.onclick = function() { // Note this is a function
|
||||
removeTab(uuid);
|
||||
};
|
||||
taba.appendChild(btnClose);
|
||||
|
||||
//Create div content
|
||||
var tabContent = document.createElement("div");
|
||||
var contentId = "content"+uuid;
|
||||
tabContent.setAttribute("id",contentId);
|
||||
$(tabContent).css("background-color", "black");
|
||||
$(tabContent).addClass("tab-pane");
|
||||
$(tabContent).addClass("active");
|
||||
$("#tabs-content").append(tabContent);
|
||||
|
||||
contentID = contentId;
|
||||
}
|
||||
|
||||
function insertContent() {
|
||||
console.log('Include imageViewer template');
|
||||
//Include imageViewer template
|
||||
UI.insert( UI.render( Template.viewer ), $( '#'+contentID ).get(0) );
|
||||
}
|
||||
|
||||
Template.worklist.events({
|
||||
'click ul#tabs>li>a': function (event){
|
||||
var tabId = $(event.target).attr("id");
|
||||
if ( tabId !== undefined ) {
|
||||
//Save activeTabId to load correct study for each tab
|
||||
Session.set("activeTabId", tabId);
|
||||
|
||||
var splitTabId = tabId.split("tab");
|
||||
var contentId = "content"+splitTabId[1];
|
||||
|
||||
//Make inactive all tab-pane divs
|
||||
$("#tabs-content>div").removeClass("active");
|
||||
$("#"+contentId).addClass("active");
|
||||
}
|
||||
}
|
||||
Template.worklist.helpers({
|
||||
'tabs': function() {
|
||||
var tabData = tabs.find().fetch();
|
||||
return tabData;
|
||||
},
|
||||
});
|
||||
|
||||
Tracker.autorun(function () {
|
||||
var data = Session.get('openNewTabEvent');
|
||||
var content = Session.get('showContentInTab');
|
||||
if ( data ) {
|
||||
addNewTab(data);
|
||||
}
|
||||
Template.worklist.events({
|
||||
'click a[data-toggle="tab"]': function(e) {
|
||||
console.log(e.currentTarget);
|
||||
var contentId = $(e.currentTarget).data('target');
|
||||
$(e.currentTarget).tab('show');
|
||||
|
||||
if (content) {
|
||||
insertContent();
|
||||
}
|
||||
var container = $('.tab-content').find(contentId).get(0);
|
||||
var studies = Session.get('StudiesInTab' + contentId);
|
||||
var data = {
|
||||
studies: studies
|
||||
};
|
||||
|
||||
Session.set('openNewTabEvent', false);
|
||||
Session.set('showContentInTab', false);
|
||||
if (contentId === '#worklistTab') {
|
||||
console.log('Switching to worklist');
|
||||
$("#viewer").remove();
|
||||
document.body.style.overflow = null;
|
||||
document.body.style.height = null;
|
||||
document.body.style.minWidth = null;
|
||||
document.body.style.position = null;
|
||||
} else {
|
||||
UI.renderWithData(Template.viewer, data, container);
|
||||
var imageViewer = $("#viewer");
|
||||
if (imageViewer) {
|
||||
$('.navbar-default').css({
|
||||
'background-color': '#000000',
|
||||
'border-color': '#101010'
|
||||
});
|
||||
document.body.style.overflow = "hidden";
|
||||
document.body.style.height = '100%';
|
||||
document.body.style.width = '100%';
|
||||
document.body.style.minWidth = 0;
|
||||
document.body.style.position = 'fixed'; // Prevent overscroll on mobile devices
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,18 +1,5 @@
|
||||
Template.worklistStudy.events({
|
||||
'click': function (){
|
||||
Router.go('viewer', {_id: this.studyInstanceUid});
|
||||
|
||||
Session.set('openNewTabEvent', self);
|
||||
var studyInstanceUid = this.studyInstanceUid;
|
||||
Meteor.call('GetStudyMetadata', studyInstanceUid, function(error, study) {
|
||||
//console.log(study);
|
||||
sortStudy(study);
|
||||
|
||||
var studies = [study];
|
||||
Session.set('studies', studies);
|
||||
Session.set(activeTabId, studies);
|
||||
Session.set('showContentInTab', true);
|
||||
self.render('viewer');
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in new issue
Block a user