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

Fixing scrollbar height issues

Browse Source
This commit is contained in:
Bruno Alves de Faria 2017-10-28 09:10:35 -02:00
parent b8df4d321f
commit a7d6cb4fea
2 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js
View File

@ -1,5 +1,6 @@
import { Template } from 'meteor/templating'; import { Template } from 'meteor/templating';
import { $ } from 'meteor/jquery'; import { $ } from 'meteor/jquery';
import { _ } from 'meteor/underscore';
import { OHIF } from 'meteor/ohif:core'; import { OHIF } from 'meteor/ohif:core';
import { setActiveViewport } from '../../../lib/setActiveViewport'; import { setActiveViewport } from '../../../lib/setActiveViewport';
import { switchToImageByIndex } from '../../../lib/switchToImageByIndex'; import { switchToImageByIndex } from '../../../lib/switchToImageByIndex';
@ -13,13 +14,28 @@ Template.imageControls.onRendered(() => {
// Set the current imageSlider width to its parent's height // Set the current imageSlider width to its parent's height
// (because webkit is stupid and can't style vertical sliders) // (because webkit is stupid and can't style vertical sliders)
const $slider = instance.$('.imageSlider'); const $slider = instance.$('.imageSlider');
const $element = $slider.parents().eq(2).siblings('.imageViewerViewport'); const $viewport = $slider.closest('.imageViewerViewportOverlay').siblings('.imageViewerViewport');
const viewportHeight = $element.height();
$slider.width(viewportHeight - 20); instance.handleResize = _.throttle(() => {
const viewportHeight = $viewport.height();
$slider.width(viewportHeight - 20);
}, 150);
instance.handleResize();
$(window).on('resize', instance.handleResize);
});
Template.imageControls.onDestroyed(() => {
const instance = Template.instance();
$(window).off('resize', instance.handleResize);
}); });
Template.imageControls.events({ Template.imageControls.events({
'rescale .scrollbar'(event, instance) {
instance.handleResize();
},
'keydown input[type=range]'(event) { 'keydown input[type=range]'(event) {
// We don't allow direct keyboard up/down input on the // We don't allow direct keyboard up/down input on the
// image sliders since the natural direction is reversed (0 is at the top) // image sliders since the natural direction is reversed (0 is at the top)

19
Packages/ohif-viewerbase/client/lib/classes/ResizeViewportManager.js
View File

@ -81,23 +81,8 @@ export class ResizeViewportManager {
resizeScrollbars(element) { resizeScrollbars(element) {
OHIF.log.info('ResizeViewportManager resizeScrollbars'); OHIF.log.info('ResizeViewportManager resizeScrollbars');
const currentOverlay = $(element).siblings('.imageViewerViewportOverlay'); const $currentOverlay = $(element).siblings('.imageViewerViewportOverlay');
currentOverlay.find('.imageControls').height($(element).height()); $currentOverlay.find('.scrollbar').trigger('rescale');
// Set it's width to its parent's height
// (because webkit is stupid and can't style vertical sliders)
const scrollbar = currentOverlay.find('#scrollbar');
scrollbar.height(scrollbar.parent().height() - 20);
const currentImageSlider = currentOverlay.find('#imageSlider');
const overlayHeight = currentImageSlider.parent().height();
const browserInfo = cornerstoneTools.getBrowserInfo();
if (browserInfo.indexOf('IE') > -1) {
currentImageSlider.height(overlayHeight);
} else {
currentImageSlider.width(overlayHeight);
}
} }
// Resize a single viewport element // Resize a single viewport element