Merge branch 'LT-384'

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 {

Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl

@@ -17,9 +17,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 +160,6 @@ $seriesSpacing = 2px
 
   .scrollArea
     margin-right: -22px;
-    min-height: 230px
     max-height: 610px
     overflow-x: hidden
     overflow-y: scroll

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);