From c623faea947ee89a4346ac0b085be2f200121f57 Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Fri, 17 Jun 2016 15:03:44 -0300 Subject: [PATCH] LT-251: Hiding series from sutdy quick switch --- .../studySeriesQuickSwitch.styl | 2 + .../studyTimepointBrowser/studyTimepoint.js | 47 +++++++++++----- .../studyTimepointStudy.html | 42 +++++++------- .../studyTimepointStudy.js | 55 +++++++++++++------ .../studyTimepointStudy.styl | 1 - Packages/viewerbase/lib/helpers/logical.js | 5 ++ 6 files changed, 99 insertions(+), 53 deletions(-) diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl index 7ab63327b..62ba40f24 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl @@ -38,6 +38,8 @@ $seriesSpacing = 2px position: relative .studySwitch + .studyTimepointStudy.active .studyModality + box-shadow: inset 0 0 0 3px $activeColor .studyBox background-color: $darkUiColor border: solid 1px $activeColor diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepoint.js b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepoint.js index e092b7ccf..a03f6e7ad 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepoint.js +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepoint.js @@ -1,4 +1,8 @@ -var isActive = {}; +Template.studyTimepoint.onCreated(() => { + const instance = Template.instance(); + + instance.isActive = {}; +}); // Initialize the timepoint wrapper max-height to enable CSS transition Template.studyTimepoint.onRendered(() => { @@ -25,23 +29,34 @@ Template.studyTimepoint.events({ // Changes the selected study 'selectionChanged .studyTimepoint'(event, instance, changed) { const $selection = $(changed.selection); - const $thumbnails = $selection.find('.studyTimepointThumbnails'); - const $timepoint = instance.$('.studyTimepoint'); - const studyInstanceUid = changed.studyInstanceUid; - // Set the max-height to inherit to be able to expand the wrapper on its full height - instance.$('.studyTimepointWrapper').css('max-height', 'inherit'); + let $studiesTarget = instance.$('.studyTimepoint'); + if (changed.isQuickSwitch) { + $studiesTarget = $studiesTarget.closest('.studyTimepointBrowser'); + } // Removes selected state from all studies but the triggered study - instance.$('.studyTimepointStudy').not($selection).removeClass('active'); + $studiesTarget.find('.studyTimepointStudy').not($selection).removeClass('active'); - // Toggle selected state for the triggered study - $selection.removeClass('loading'); - $selection.toggleClass('active'); - isActive[studyInstanceUid] = $selection.hasClass('active'); + if (changed.isQuickSwitch) { + // Reset active studies map to allow only one active study + instance.isActive = {}; + // Add selected state for the triggered study + $selection.addClass('active'); + } else { + const $timepoint = instance.$('.studyTimepoint'); + // Set the max-height to inherit to be able to expand the wrapper on its full height + instance.$('.studyTimepointWrapper').css('max-height', 'inherit'); + // Toggle selected state for the triggered study + $selection.removeClass('loading'); + $selection.toggleClass('active'); + // Recalculates the timepoint height to make CSS transition smoother + const $thumbnails = $selection.find('.studyTimepointThumbnails'); + $thumbnails.one('transitionend', () => $timepoint.trigger('displayStateChanged')); + } - // Recalculates the timepoint height to make CSS transition smoother - $thumbnails.one('transitionend', () => $timepoint.trigger('displayStateChanged')); + // Set the current study as active + instance.isActive[changed.studyInstanceUid] = $selection.hasClass('active'); }, // It should be triggered when the timepoint height is changed 'displayStateChanged .studyTimepoint'(event, instance) { @@ -55,10 +70,12 @@ Template.studyTimepoint.events({ Template.studyTimepoint.helpers({ isActive(study) { + const instance = Template.instance(); + if (!study.studyInstanceUid) { return; } - return isActive[study.studyInstanceUid]; + return instance.isActive[study.studyInstanceUid]; } -}) +}); diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html index d67d6d781..39d01798f 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html @@ -1,23 +1,27 @@ diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js index 4307d4758..11c822f49 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js @@ -1,3 +1,21 @@ +Template.studyTimepointStudy.onCreated(() => { + const instance = Template.instance(); + + // Set the current study as selected in the studies list + instance.select = (isQuickSwitch=false) => { + const $study = instance.$('.studyTimepointStudy'); + const $timepoint = $study.closest('.studyTimepoint'); + + const selectionChanged = { + selection: [$study[0]], + studyInstanceUid: instance.data.study.studyInstanceUid, + isQuickSwitch + }; + + $timepoint.trigger('selectionChanged', selectionChanged); + }; +}); + // Initialize the study wrapper max-height to enable CSS transition Template.studyTimepointStudy.onRendered(() => { const instance = Template.instance(); @@ -23,36 +41,37 @@ Template.studyTimepointStudy.events({ $(event.currentTarget).closest('.studyTimepoint').trigger('displayStateChanged'); } }, - // Changes the current study selection for the clicked study - 'click .studyModality'(event, instance) { - const $study = $(event.currentTarget).closest('.studyTimepointStudy'); - const $timepoint = $study.closest('.studyTimepoint'); - const study = $study[0]; - const studyInstanceUid = this.study.studyInstanceUid; - const selectionChanged = { - selection: [study], - studyInstanceUid: studyInstanceUid - }; + // Transfers the active state to the current study + 'click .studyQuickSwitchTimepoint .studyModality'(event, instance) { + instance.select(true); + }, + + // Changes the current study selection for the clicked study + 'click .studySidebarTimepoint .studyModality'(event, instance) { + const $study = $(event.currentTarget).closest('.studyTimepointStudy'); + + const studyData = instance.data.study; + const studyInstanceUid = studyData.studyInstanceUid; // Check if the study already has series data, // and if not, retrieve it. - if (!this.study.seriesList) { - var alreadyLoaded = ViewerStudies.findOne({ - studyInstanceUid: studyInstanceUid + if (!studyData.seriesList) { + const alreadyLoaded = ViewerStudies.findOne({ + studyInstanceUid }); if (!alreadyLoaded) { - study.classList.add('loading'); - getStudyMetadata(studyInstanceUid, (studyData) => { + $study.addClass('loading'); + getStudyMetadata(studyInstanceUid, studyData => { ViewerStudies.insert(studyData); - $timepoint.trigger('selectionChanged', selectionChanged); + instance.select(); }); } else { - this.study.seriesList = alreadyLoaded.seriesList; + studyData.seriesList = alreadyLoaded.seriesList; } } else { - $timepoint.trigger('selectionChanged', selectionChanged); + instance.select(); } } }); diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl index 891ef8d06..f4070f542 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl @@ -37,7 +37,6 @@ $spacerY = 12px &.active .studyModality - box-shadow: inset 0 0 0 3px $activeColor .studyModalityBox color: $boxActiveTextColor & diff --git a/Packages/viewerbase/lib/helpers/logical.js b/Packages/viewerbase/lib/helpers/logical.js index 08a95a60d..408ee00e2 100644 --- a/Packages/viewerbase/lib/helpers/logical.js +++ b/Packages/viewerbase/lib/helpers/logical.js @@ -62,3 +62,8 @@ Template.registerHelper('choose', (...values) => { _.each(_.initial(values, 1), value => value && (result = value)); return result; }); + +// Check if the value is different from undefined +Template.registerHelper('isDefined', value => { + return typeof value !== 'undefined'; +});