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

Fixing multi-level dropdown issues with window boundaries

Browse Source
This commit is contained in:
Bruno Alves de Faria 2017-03-28 18:30:40 -03:00
parent e4622aee2d
commit 0cd4714f1a
2 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Packages/ohif-core/client/components/base/mixins/dropdown.js
View File

@ -117,10 +117,10 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
} else if ($parentLi) {
// Change the dropdown menu position based on the parent menu item
const $parentDm = $parentLi.closest('.dropdown-menu');
const pdmOffset = $parentDm.offset();
const pdmWidth = $parentDm.outerWidth();
const pliOffset = $parentLi.offset();
const dmWidth = $dropdownMenu.outerWidth();
const pdmWidth = $parentDm.outerWidth();
const pdmOffset = $parentDm.offset();
const pliOffset = OHIF.ui.getOffset($parentLi[0]);
Object.assign(position, {
left: pdmWidth + pdmOffset.left,
top: pliOffset.top
@ -155,7 +155,7 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
}
},
'mouseenter .form-action'(event, instance) {
'mouseenter .form-action, openByKey .form-action'(event, instance) {
// Postpone the submenu opening if it's still being animated
if (instance.opening) {
instance.$('.dropdown-menu').one('transitionend', event => {
@ -204,13 +204,18 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
parentInstance.closeSubmenu(true);
}
// Close the dropdown if there's no submenu open and ESC key was pressed
if (!parentInstance && key === 27) {
instance.close(false);
}
// Stop here if it's not a submenu trigger
if (!this.items) return;
// Open the submenu if RIGHT, ENTER or SPACE key was pressed
if (key === 39 || key === 13 || key === 32) {
$(event.currentTarget).trigger('openByKey');
event.preventDefault();
$(event.currentTarget).trigger('mouseenter');
}
},
@ -236,6 +241,9 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
break;
} else {
currentInstance = currentInstance.data.options.parentInstance;
// Close the current instance's submenu as it has no focus
currentInstance.closeSubmenu(false);
}
} while (currentInstance);

22
Packages/ohif-core/client/lib/ui.js
View File

@ -4,3 +4,25 @@ import { Meteor } from 'meteor/meteor';
// Get the UI settings
const ui = Meteor.settings && Meteor.settings.public && Meteor.settings.public.ui;
OHIF.uiSettings = ui || {};
/**
* Get the offset for the given element
*
* @param {Object} element DOM element which will have the offser calculated
* @returns {Object} Object containing the top and left offset
*/
OHIF.ui.getOffset = element => {
let top = 0;
let left = 0;
if (element.offsetParent) {
do {
left += element.offsetLeft;
top += element.offsetTop;
} while (element = element.offsetParent);
}
return {
left,
top
};
};