othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LT-357: Fixing quick switch issues with loading state

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-11-17 10:30:55 -02:00
parent a99fe33620
commit de789dae59
1 changed files with 20 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointStudy.js
View File

@ -1,5 +1,6 @@
import { Meteor } from 'meteor/meteor'; import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating'; import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { _ } from 'meteor/underscore'; import { _ } from 'meteor/underscore';
Template.studyTimepointStudy.onCreated(() => { Template.studyTimepointStudy.onCreated(() => {
@ -7,38 +8,36 @@ Template.studyTimepointStudy.onCreated(() => {
instance.loading = new ReactiveVar(false); instance.loading = new ReactiveVar(false);
// Get the current study element
instance.getStudyElement = () => {
const studyInstanceUid = instance.data.study.studyInstanceUid;
return instance.$browser.find(`.studyTimepointStudy[data-uid='${studyInstanceUid}']`);
};
// Set the current study as selected in the studies list // Set the current study as selected in the studies list
instance.select = (isQuickSwitch=false) => { instance.select = (isQuickSwitch=false) => {
// Stop here if the view was already destroyed const studyInstanceUid = instance.data.study.studyInstanceUid;
if (instance.view.isDestroyed) {
return;
}
const $study = instance.$('.studyTimepointStudy'); const $study = instance.getStudyElement();
const $timepoint = $study.closest('.studyTimepoint'); const $timepoint = $study.closest('.studyTimepoint');
const selectionChanged = { const selectionChanged = {
selection: [$study[0]], selection: [$study[0]],
studyInstanceUid: instance.data.study.studyInstanceUid, studyInstanceUid,
isQuickSwitch isQuickSwitch
}; };
$timepoint.trigger('selectionChanged', selectionChanged); $timepoint.trigger('selectionChanged', selectionChanged);
}; };
instance.initializeStudyWrapper = instance => { instance.initializeStudyWrapper = () => {
// Stop here if the view was already destroyed
if (instance.view.isDestroyed) {
return;
}
// Stop here if it's a quick switch // Stop here if it's a quick switch
if (instance.data.currentStudy) { if (instance.data.viewportIndex) {
return; return;
} }
const $study = instance.$('.studyTimepointStudy'); const $study = instance.getStudyElement();
const $thumbnails = instance.$('.studyTimepointThumbnails'); const $thumbnails = $study.find('.studyTimepointThumbnails');
$study.addClass('active'); $study.addClass('active');
// If element already has max-height property set, .height() // If element already has max-height property set, .height()
// will return that value, so remove it to recalculate // will return that value, so remove it to recalculate
@ -49,9 +48,7 @@ Template.studyTimepointStudy.onCreated(() => {
// Here we add, remove, and add the active class again because this way // Here we add, remove, and add the active class again because this way
// the max-height animation appears smooth to the user. // the max-height animation appears smooth to the user.
if (instance.data.active) { if (instance.data.active) {
Meteor.setTimeout(() => { Meteor.setTimeout(() => $study.addClass('active'), 1);
$study.addClass('active');
}, 1);
} }
}; };
}); });
@ -60,7 +57,10 @@ Template.studyTimepointStudy.onCreated(() => {
Template.studyTimepointStudy.onRendered(() => { Template.studyTimepointStudy.onRendered(() => {
const instance = Template.instance(); const instance = Template.instance();
instance.initializeStudyWrapper(instance); // Keep the study timepoint browser element to manipulate elements even after DOM is removed
instance.$browser = instance.$('.studyTimepointStudy').closest('.studyTimepointBrowser');
instance.initializeStudyWrapper();
}); });
Template.studyTimepointStudy.events({ Template.studyTimepointStudy.events({
@ -78,8 +78,6 @@ Template.studyTimepointStudy.events({
// Changes the current study selection for the clicked study // Changes the current study selection for the clicked study
'click .studyModality'(event, instance) { 'click .studyModality'(event, instance) {
const $study = $(event.currentTarget).closest('.studyTimepointStudy');
const studyData = instance.data.study; const studyData = instance.data.study;
const { studyInstanceUid, _id } = studyData; const { studyInstanceUid, _id } = studyData;
@ -98,7 +96,7 @@ Template.studyTimepointStudy.events({
ViewerStudies.insert(study, () => { ViewerStudies.insert(study, () => {
// To make sure studies are rendered in the DOM // To make sure studies are rendered in the DOM
// use minimongo insert callback // use minimongo insert callback
instance.initializeStudyWrapper(instance); instance.initializeStudyWrapper();
instance.select(isQuickSwitch); instance.select(isQuickSwitch);
}); });
}); });