From d787ed2cb9c33fe90efa95ec2b87e109ed1f5495 Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Mon, 16 Oct 2017 07:20:37 -0200 Subject: [PATCH] Finishing timepoint browser behavior --- .../viewerSection/viewerSection.html | 4 +- .../components/viewerSection/viewerSection.js | 38 +++++++++--- .../client/ui/dimensional/dimensional.js | 4 +- .../client/ui/dimensional/dimensional.styl | 2 +- .../components/timepointBrowser/item.html | 12 ++-- .../components/timepointBrowser/item.js | 12 +++- .../components/timepointBrowser/item.styl | 61 ++++++++++--------- .../components/timepointBrowser/list.html | 1 + .../components/timepointBrowser/studies.html | 4 +- .../components/timepointBrowser/studies.js | 13 +--- .../client/components/browser/item.html | 4 +- .../imports/client/components/browser/item.js | 16 ++--- .../client/components/browser/item.styl | 6 +- .../studyTimepointBrowser/studyTimepoint.js | 2 +- .../studyTimepointBrowser/studyTimepoint.styl | 2 +- .../studyTimepointBrowser.html | 24 ++++---- .../studyTimepointBrowser.js | 8 +-- 17 files changed, 118 insertions(+), 95 deletions(-) diff --git a/LesionTracker/client/components/viewerSection/viewerSection.html b/LesionTracker/client/components/viewerSection/viewerSection.html index 4b4d2e234..f0f4b1842 100644 --- a/LesionTracker/client/components/viewerSection/viewerSection.html +++ b/LesionTracker/client/components/viewerSection/viewerSection.html @@ -2,8 +2,8 @@
{{>timepointBrowserList (extend timepointBrowserData scrollableClass='p-a-1')}} - + +
{{>viewerMain (clone this)}} diff --git a/LesionTracker/client/components/viewerSection/viewerSection.js b/LesionTracker/client/components/viewerSection/viewerSection.js index d14431cbd..ef6a03010 100644 --- a/LesionTracker/client/components/viewerSection/viewerSection.js +++ b/LesionTracker/client/components/viewerSection/viewerSection.js @@ -1,3 +1,4 @@ +import { Meteor } from 'meteor/meteor'; import { Template } from 'meteor/templating'; Template.viewerSection.events({ @@ -7,6 +8,34 @@ Template.viewerSection.events({ } window.ResizeViewportManager.handleResize(); + }, + + 'ohif.studies.study.click'(event, instance) { + const $element = $(event.currentTarget); + + // Defer the active class toggling to wait for child template rendering + Meteor.defer(() => { + // Remove max height restriction from studies browser + const $studiesBrowser = $element.closest('.timepoint-browser-studies'); + $studiesBrowser.css('max-height', ''); + + // Remove active class from sibling studies + $element.siblings().removeClass('active'); + + // Toggle the active class on clicked study + $element.toggleClass('active'); + + // Adjust the max height for studiesBrowser when series transition is finished + const $seriesBrowser = $element.find('.study-browser-series'); + $seriesBrowser.one('transitionend', () => $studiesBrowser.adjustMax('height')); + }); + }, + + 'ohif.lesiontracker.timepoint.click'(event, instance) { + const $element = $(event.currentTarget); + + // Defer the active class toggling to wait for child template rendering + Meteor.defer(() => $element.toggleClass('active')); } }); @@ -26,15 +55,8 @@ Template.viewerSection.helpers({ return { timepointApi, timepoints, - timepointChildTemplate: 'timepointBrowserStudies', - studyChildTemplate: 'studyBrowserSeries', - - studyClickCallback(studyInformation, element) { - const $element = $(element); - $element.siblings().removeClass('active'); - $element.toggleClass('active'); - } + studyChildTemplate: 'studyBrowserSeries' }; } }); diff --git a/Packages/ohif-core/client/ui/dimensional/dimensional.js b/Packages/ohif-core/client/ui/dimensional/dimensional.js index c8365300b..d8eea2323 100644 --- a/Packages/ohif-core/client/ui/dimensional/dimensional.js +++ b/Packages/ohif-core/client/ui/dimensional/dimensional.js @@ -27,8 +27,10 @@ $.fn.tempShow = function(callback) { }; // Adjust the max width/height to enable CSS3 transitions -$.fn.adjustMax = function(dimension) { +$.fn.adjustMax = function(dimension, modifierFn) { const $element = $(this); + + // Temporarily make the element visible to allow getting its dimensions $element.tempShow(() => { const maxProperty = `max-${dimension}`; diff --git a/Packages/ohif-core/client/ui/dimensional/dimensional.styl b/Packages/ohif-core/client/ui/dimensional/dimensional.styl index 07ffd007d..13ff4c84a 100644 --- a/Packages/ohif-core/client/ui/dimensional/dimensional.styl +++ b/Packages/ohif-core/client/ui/dimensional/dimensional.styl @@ -1,2 +1,2 @@ body *.visible - display: block !important + display: block !important diff --git a/Packages/ohif-lesiontracker/client/components/timepointBrowser/item.html b/Packages/ohif-lesiontracker/client/components/timepointBrowser/item.html index 2920dc678..e871b7b5c 100644 --- a/Packages/ohif-lesiontracker/client/components/timepointBrowser/item.html +++ b/Packages/ohif-lesiontracker/client/components/timepointBrowser/item.html @@ -1,16 +1,16 @@ diff --git a/Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.html b/Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.html index f892188f1..dd07f9d8f 100644 --- a/Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.html +++ b/Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.html @@ -1,5 +1,7 @@ diff --git a/Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.js b/Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.js index 405a51358..82b69ba56 100644 --- a/Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.js +++ b/Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.js @@ -1,16 +1,5 @@ -import { Meteor } from 'meteor/meteor'; import { Template } from 'meteor/templating'; Template.timepointBrowserStudies.onRendered(() => { - const instance = Template.instance(); - const $container = instance.$('.timepoint-browser-studies'); - instance.adjustMaxHeight = () => $container.adjustMax('height'); - instance.adjustMaxHeight(); -}); - -Template.timepointBrowserStudies.events({ - 'ohif.studies.study.click'(event, instance) { - // FIXME disable all transitions during $.tempShow - Meteor.setTimeout(instance.adjustMaxHeight, 300); - } + Template.instance().$('.timepoint-browser-studies').adjustMax('height'); }); diff --git a/Packages/ohif-studies/imports/client/components/browser/item.html b/Packages/ohif-studies/imports/client/components/browser/item.html index f69b7db1b..8eff95a84 100644 --- a/Packages/ohif-studies/imports/client/components/browser/item.html +++ b/Packages/ohif-studies/imports/client/components/browser/item.html @@ -15,7 +15,9 @@
{{#if this.studyChildTemplate}} - {{>Template.dynamic template=this.studyChildTemplate data=(clone this)}} + {{#if and (not isLoading) instance.loaded}} + {{>Template.dynamic template=this.studyChildTemplate data=(clone this)}} + {{/if}} {{/if}} diff --git a/Packages/ohif-studies/imports/client/components/browser/item.js b/Packages/ohif-studies/imports/client/components/browser/item.js index a4cd095bc..e5ff80d82 100644 --- a/Packages/ohif-studies/imports/client/components/browser/item.js +++ b/Packages/ohif-studies/imports/client/components/browser/item.js @@ -1,5 +1,6 @@ import { Template } from 'meteor/templating'; import { ReactiveVar } from 'meteor/reactive-var'; +import { Tracker } from 'meteor/tracker'; import { $ } from 'meteor/jquery'; import { OHIF } from 'meteor/ohif:core'; @@ -17,27 +18,20 @@ Template.studyBrowserItem.events({ 'click .study-item'(event, instance) { if (instance.loading.get()) return; - const { studyClickCallback, studyInformation } = instance.data; + const { studyInformation } = instance.data; const element = event.currentTarget.parentElement; const $element = $(element); - - const triggerClickCallback = () => { - if (typeof studyClickCallback === 'function') { - studyClickCallback(studyInformation, element); - } - - $element.trigger('ohif.studies.study.click', studyInformation); - }; + const triggerClick = () => $element.trigger('ohif.studies.study.click', studyInformation); if (instance.loaded) { - triggerClickCallback(); + triggerClick(); } else { instance.loading.set(true); OHIF.studies.retrieveStudyMetadata(studyInformation.studyInstanceUid).then(() => { instance.loaded = true; instance.loading.set(false); $element.trigger('ohif.studies.study.load', studyInformation); - triggerClickCallback(); + Tracker.afterFlush(triggerClick); }); } } diff --git a/Packages/ohif-studies/imports/client/components/browser/item.styl b/Packages/ohif-studies/imports/client/components/browser/item.styl index c7152f275..6fdf2fccf 100644 --- a/Packages/ohif-studies/imports/client/components/browser/item.styl +++ b/Packages/ohif-studies/imports/client/components/browser/item.styl @@ -55,13 +55,11 @@ $spacerY = 12px .study-browser-series overflow: hidden - transform(translateY(0)) - transform-origin(50% 0%) - transition($sidebarTransition) + transition(max-height 0.3s ease) .study-series-container opacity: 1 - transition($sidebarTransition) + transition(opacity 0.3s ease\, transform 0.3s ease) transform(translateY(0)) transform-origin(50% 0%) diff --git a/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.js b/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.js index 9b9f76375..eab6cf0b5 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.js +++ b/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.js @@ -17,7 +17,7 @@ Template.studyTimepoint.onRendered(() => { const $studies = instance.$('.studyTimepoint'); const $wrapper = $studies.closest('.studyTimepointWrapper'); - const $timepoint = $wrapper.closest('.timepointEntry'); + const $timepoint = $wrapper.closest('.timepoint-item'); const studiesVisible = $studies.is(':visible'); if (!studiesVisible) { diff --git a/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.styl b/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.styl index 7222fb7eb..ab78bc3f0 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.styl @@ -4,5 +4,5 @@ overflow: hidden transition($sidebarTransition) -.timepointEntry:not(.active) .studyTimepointWrapper +.timepoint-item:not(.active) .studyTimepointWrapper max-height: 0 !important diff --git a/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.html b/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.html index ed989585c..cc93aa501 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.html +++ b/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.html @@ -8,20 +8,22 @@
{{#if timepointList.length}} {{#each timepoint in timepointList}} -
-
-
-
- {{timepointApi.title timepoint}} +
+
+
+
+
+ {{timepointApi.title timepoint}} +
+
+ +
+
{{formatDA timepoint.earliestDate 'D-MMM-YYYY'}}
-
- -
-
{{formatDA timepoint.earliestDate 'D-MMM-YYYY'}}
+
{{modalitiesSummary timepoint}}
-
{{modalitiesSummary timepoint}}
+ {{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
- {{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
{{/each}} diff --git a/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.js b/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.js index 26ead8eba..e636fb038 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.js +++ b/Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.js @@ -53,10 +53,10 @@ Template.studyTimepointBrowser.onRendered(() => { const type = instance.timepointViewType.get(); // Removes all active classes to collapse the timepoints and studies - instance.$('.timepointEntry, .study-browser-item').removeClass('active'); + instance.$('.timepoint-item, .study-browser-item').removeClass('active'); if (type === 'key' && !instance.data.currentStudy) { // Show only first timepoint expanded for key timepoints - instance.$('.timepointEntry:first').addClass('active'); + instance.$('.timepoint-item:first').addClass('active'); } }); @@ -70,7 +70,7 @@ Template.studyTimepointBrowser.onRendered(() => { instance.$(`.study-browser-item[data-uid='${studyInstanceUid}']`).addClass('active'); }); // Show only first timepoint expanded for key timepoints - instance.$('.timepointEntry:first').addClass('active'); + instance.$('.timepoint-item:first').addClass('active'); }); instance.autorun(() => { @@ -95,7 +95,7 @@ Template.studyTimepointBrowser.onRendered(() => { Template.studyTimepointBrowser.events({ 'click .timepointHeader'(event, instance) { - const $timepoint = $(event.currentTarget).closest('.timepointEntry'); + const $timepoint = $(event.currentTarget).closest('.timepoint-item'); // Recalculates the timepoint height to make CSS transition smoother $timepoint.find('.studyTimepoint').trigger('displayStateChanged');