From 3c3b23ccb7c509f16fd03dfeb103c863406fee6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elo=C3=ADzio=20Salgado?= Date: Wed, 23 Nov 2016 16:14:51 -0200 Subject: [PATCH 1/2] LT-384: Centralizing Study / Series quick switch when sidebars (left and/or right) are opened --- .../studySeriesQuickSwitch.js | 12 +++- .../studySeriesQuickSwitch.styl | 10 ++- .../client/lib/resizeViewportElements.js | 71 +++++++++++++++---- 3 files changed, 76 insertions(+), 17 deletions(-) diff --git a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js index c34499b9c..627244ee6 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js +++ b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js @@ -48,9 +48,17 @@ Template.studySeriesQuickSwitch.onCreated(() => { }); const checkScrollArea = element => { - const { scrollHeight, clientHeight, offsetHeight, scrollTop } = element; + const { scrollHeight, offsetHeight, scrollTop } = element; + + const matrix = $(element).find('.thumbnailsWrapper').css('transform'); - if(scrollHeight > offsetHeight + scrollTop) { + let translateY = 0; + + if(matrix && matrix !== 'none') { + translateY = parseInt(matrix.match(/-?[\d\.]+/g)[5]); + } + + if(scrollHeight > offsetHeight + scrollTop + translateY) { element.classList.add('show-scroll-indicator-down'); } else { diff --git a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl index e953e677b..74e24dce6 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl @@ -7,6 +7,7 @@ $seriesSpacing = 2px position: fixed top: 0 z-index: 1 + transition(left 0.25s linear 0s\, right 0.25s linear 0s) &.middle left: 50% @@ -17,9 +18,17 @@ $seriesSpacing = 2px &.left theme('border-right', '1px solid $uiBorderColor') right: 50% + &.right-sidebar-only + .seriesHover + .scrollArea + padding-left: 200px; &.right left: 50% + &.left-sidebar-only + .seriesHover + .scrollArea + padding-right: 200px; &.overlay .quickSwitch transition(z-index 0s linear 0s) @@ -152,7 +161,6 @@ $seriesSpacing = 2px .scrollArea margin-right: -22px; - min-height: 230px max-height: 610px overflow-x: hidden overflow-y: scroll diff --git a/Packages/ohif-viewerbase/client/lib/resizeViewportElements.js b/Packages/ohif-viewerbase/client/lib/resizeViewportElements.js index 0cd4b4611..1013d3584 100644 --- a/Packages/ohif-viewerbase/client/lib/resizeViewportElements.js +++ b/Packages/ohif-viewerbase/client/lib/resizeViewportElements.js @@ -1,21 +1,64 @@ -var resizeTimer; +let resizeTimer; handleResize = function() { // Avoid doing DOM manipulation during the resize handler // because it is fired very often. // Resizing is therefore performed 100 ms after the resize event stops. clearTimeout(resizeTimer); - resizeTimer = setTimeout(function() { + resizeTimer = setTimeout(() => { resizeViewportElements(); }, 100); }; +const repositionStudySeriesQuickSwitch = () => { + const activeTab = Session.get('activeContentId'); + if(activeTab === 'viewerTab') { + const nViewports = window.layoutManager.viewportData.length; + + if(nViewports && nViewports > 1) { + const leftSidebar = $('#viewer .sidebar-left.sidebar-open'); + const rightSidebar = $('#viewer .sidebar-right.sidebar-open'); + const leftQuickSwitch = $('.quickSwitchWrapper.left'); + const rightQuickSwitch = $('.quickSwitchWrapper.right'); + + const hasLeftSidebar = leftSidebar.length > 0; + const hasRightSidebar = rightSidebar.length > 0; + + rightQuickSwitch.removeClass('left-sidebar-only'); + leftQuickSwitch.removeClass('right-sidebar-only'); + + let leftOffset = 0; + + if(hasLeftSidebar) { + leftOffset = ( leftSidebar.width()/$(window).width() ) * 100; + + if(!hasRightSidebar) { + rightQuickSwitch.addClass('left-sidebar-only'); + } + } + + if(hasRightSidebar && !hasLeftSidebar) { + leftQuickSwitch.addClass('right-sidebar-only'); + } + + const leftPosition = ( ($('#imageViewerViewports').width() / nViewports) / $(window).width() ) * 100 + leftOffset; + const rightPosition = 100 - leftPosition; + + leftQuickSwitch.css('right', rightPosition + '%'); + rightQuickSwitch.css('left', leftPosition + '%'); + } + + } +}; + // Resize viewport elements resizeViewportElements = function() { - viewportResizeTimer = setTimeout(function() { - var elements = $('.imageViewerViewport').not('.empty'); - elements.each(function(index, element) { - var enabledElement; + const viewportResizeTimer = setTimeout(() => { + repositionStudySeriesQuickSwitch(); + + const elements = $('.imageViewerViewport').not('.empty'); + elements.each((index, element) => { + let enabledElement; try { enabledElement = cornerstone.getEnabledElement(element); } catch(error) { @@ -25,24 +68,24 @@ resizeViewportElements = function() { cornerstone.resize(element, true); if (enabledElement.fitToWindow === false) { - var imageId = enabledElement.image.imageId; - var instance = cornerstoneTools.metaData.get('instance', imageId); - var instanceClassViewport = getInstanceClassDefaultViewport(instance, enabledElement, imageId); + const imageId = enabledElement.image.imageId; + const instance = cornerstoneTools.metaData.get('instance', imageId); + const instanceClassViewport = getInstanceClassDefaultViewport(instance, enabledElement, imageId); cornerstone.setViewport(element, instanceClassViewport); } // TODO= Refactor this into separate scrollbar resize function - var currentOverlay = $(element).siblings('.imageViewerViewportOverlay'); - var imageControls = currentOverlay.find('.imageControls'); + const currentOverlay = $(element).siblings('.imageViewerViewportOverlay'); + const imageControls = currentOverlay.find('.imageControls'); currentOverlay.find('.imageControls').height($(element).height()); // Set it's width to its parent's height // (because webkit is stupid and can't style vertical sliders) - var scrollbar = currentOverlay.find('#scrollbar'); + const scrollbar = currentOverlay.find('#scrollbar'); scrollbar.height(scrollbar.parent().height() - 20); - var currentImageSlider = currentOverlay.find('#imageSlider'); - var overlayHeight = currentImageSlider.parent().height(); + const currentImageSlider = currentOverlay.find('#imageSlider'); + const overlayHeight = currentImageSlider.parent().height(); currentImageSlider.width(overlayHeight); }); }, 1); From 513079517103da36a8b079b14f61135402e2abff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elo=C3=ADzio=20Salgado?= Date: Wed, 23 Nov 2016 19:29:28 -0200 Subject: [PATCH 2/2] LT-389: Removing animation --- .../viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl | 1 - 1 file changed, 1 deletion(-) diff --git a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl index 74e24dce6..ee27e2d92 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl @@ -7,7 +7,6 @@ $seriesSpacing = 2px position: fixed top: 0 z-index: 1 - transition(left 0.25s linear 0s\, right 0.25s linear 0s) &.middle left: 50%