ohif-viewer/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js
2017-10-25 22:09:08 -02:00

121 lines
4.3 KiB
JavaScript

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Session } from 'meteor/session';
import { $ } from 'meteor/jquery';
import { OHIF } from 'meteor/ohif:core';
Template.studySeriesQuickSwitch.onCreated(() => {
const instance = Template.instance();
// Defines the study being shown in the current viewport
instance.data.currentStudy = new ReactiveVar();
// Gets the viewport data for the given viewport index
instance.getViewportData = viewportIndex => {
const layoutManager = OHIF.viewerbase.layoutManager;
return layoutManager && layoutManager.viewportData && layoutManager.viewportData[viewportIndex];
};
// Gets the current viewport data
const viewportIndex = instance.data.viewportIndex;
instance.study = {};
instance.lastStudy = {};
instance.autorun(() => {
Session.get('LayoutManagerUpdated');
const viewportData = instance.getViewportData(viewportIndex);
// @TypeSafeStudies
if (viewportData) {
// Finds the current study and return it
instance.study = OHIF.viewer.Studies.findBy({
studyInstanceUid: viewportData.studyInstanceUid
});
} else {
instance.study = OHIF.viewer.Studies.getElementByIndex(0);
}
if (!instance.study) {
return;
}
if (instance.study.studyInstanceUid !== instance.lastStudy.studyInstanceUid) {
// Change the current study to update the thumbnails
instance.data.currentStudy.set(instance.study);
instance.lastStudy = instance.study;
}
});
});
const checkScrollArea = element => {
const { scrollHeight, offsetHeight, scrollTop } = element;
const matrix = $(element).find('.thumbnailsWrapper').css('transform');
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 {
element.classList.remove('show-scroll-indicator-down');
}
if(scrollTop > 0) {
element.classList.add('show-scroll-indicator-up');
}
else {
element.classList.remove('show-scroll-indicator-up');
}
};
Template.studySeriesQuickSwitch.events({
'mouseenter .js-quick-switch, mouseenter .js-quick-switch .switchSectionSeries'(event, instance) {
instance.$('.quickSwitchWrapper').addClass('overlay');
$(event.currentTarget).addClass('hover');
instance.$('.scrollArea').each((index, scrollAreaElement) => checkScrollArea(scrollAreaElement));
},
'mouseleave .js-quick-switch'(event, instance) {
instance.$('.js-quick-switch, .switchSectionSeries').removeClass('hover');
instance.$('.quickSwitchWrapper').removeClass('overlay');
},
'click .thumbnailEntry'(event, instance) {
// Close the quick switch if we have selected a series
instance.$('.js-quick-switch, .switchSectionSeries').removeClass('hover');
instance.$('.quickSwitchWrapper').removeClass('overlay');
},
'click .study-browser-item'(event, instance) {
instance.$('.switchSectionSeries').addClass('hover');
},
'scroll .scrollArea'(event) {
checkScrollArea(event.currentTarget);
}
});
Template.studySeriesQuickSwitch.helpers({
// Get the current study
currentStudy() {
return Template.instance().data.currentStudy.get();
},
// Check if is Mac OS
// This is necessary due to fix scrollbar space only in browsers in Mac OS:
// Since Lion version, the scrollbar is visible only when user scrolls a div
// As scrollbar is hidden, the space added to hide it in Windows browsers
// is not enough in Mac OS. For WebKit (Safari and Chrome in Mac OS) there is a CSS
// solution using ::-webkit-scrollbar, but unfortunately doesn't work for Firefox
// JS seems to be the only solution for now:
// - http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox/6165489#6165489
// - http://stackoverflow.com/questions/18317634/force-visible-scrollbar-in-firefox-on-mac-os-x/18318273
isMac() {
return window.navigator.appVersion.indexOf('Mac');
}
});