From 2e5f6299ccb0f41e6c21701a86dc5bf151e8d200 Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Wed, 19 Apr 2017 09:18:53 -0300 Subject: [PATCH] Fixing CINE dialog initial width and position on IE11 --- .../viewer/cineDialog/cineDialog.js | 78 +++++++++---------- .../viewer/cineDialog/cineDialog.styl | 7 +- 2 files changed, 42 insertions(+), 43 deletions(-) diff --git a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js index a119f7c70..373fc51bc 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js +++ b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js @@ -1,6 +1,8 @@ import { Template } from 'meteor/templating'; import { SimpleSchema } from 'meteor/aldeed:simple-schema'; import { Session } from 'meteor/session'; +import { Tracker } from 'meteor/tracker'; +import { Random } from 'meteor/random'; import { _ } from 'meteor/underscore'; import { $ } from 'meteor/jquery'; import { OHIF } from 'meteor/ohif:core'; @@ -132,7 +134,7 @@ Template.cineDialog.onCreated(() => { * ... Further investigation is necessary. * * This happens because when an event is attached using jQuery's - * you can't get it using vanilla JavaScript, it returns null. + * you can't get it using vanilla JavaScript, it returns null. * You need to use jQuery for that. So, either you use vanilla JS or jQuery * to get an element's event handler. See viewerMain for more details. */ @@ -141,10 +143,11 @@ Template.cineDialog.onCreated(() => { if (typeof handler === 'function') { const origHandler = window.onresize; instance.origWindowResizeHandler = typeof origHandler === 'function' ? origHandler : null; - window.onresize = function (event) { + window.onresize = event => { if (typeof origHandler === 'function') { origHandler.call(window, event); } + handler.call(window, event); }; } else { @@ -158,36 +161,37 @@ Template.cineDialog.onCreated(() => { */ instance.setOptimalPosition = (event, options) => { - const viewer = $('#viewer'); + const $viewer = $('#viewer'); + const $toolbarElement = $('.toolbarSection .toolbarSectionTools:first'); + const $cineDialog = $('#cineDialog'); - let toolbarElement = $('.toolbarSection .toolbarSectionTools:first'), - cineDialog = $('#cineDialog'), - cineDialogSize, - cineDialogCoords, - toolbarRect; - - if (toolbarElement.length < 1 || cineDialog.length < 1) { + if ($toolbarElement.length < 1 || $cineDialog.length < 1) { return; } - if (cineDialog.data('wasDragged') || cineDialog.data('wasBounded')) { + if ($cineDialog.data('wasDragged') || $cineDialog.data('wasBounded')) { // restore original handler... instance.setResizeHandler(null); return; } - cineDialogSize = { - width: cineDialog.outerWidth() || 0, - height: cineDialog.outerHeight() || 0 + const cineDialogSize = { + width: $cineDialog.outerWidth() || 0, + height: $cineDialog.outerHeight() || 0 }; - toolbarRect = { - offset: toolbarElement.offset() || { top: 0, left: 0 }, - width: toolbarElement.outerWidth() || 0, - height: toolbarElement.outerHeight() || 0 + const topLeftCoords = { + top: 0, + left: 0 }; - cineDialogCoords = { + const toolbarRect = { + offset: $toolbarElement.offset() || topLeftCoords, + width: $toolbarElement.outerWidth() || 0, + height: $toolbarElement.outerHeight() || 0 + }; + + const cineDialogCoords = { left: toolbarRect.offset.left + toolbarRect.width + 20, top: toolbarRect.offset.top + toolbarRect.height - cineDialogSize.height }; @@ -196,6 +200,7 @@ Template.cineDialog.onCreated(() => { if (options.left) { cineDialogCoords.left = options.left; } + if (options.top) { cineDialogCoords.top = options.top; } @@ -204,34 +209,28 @@ Template.cineDialog.onCreated(() => { // Check if it is out of screen if (cineDialogCoords.top < 0) { cineDialogCoords.top = 0; - } - else if (cineDialogCoords.top + cineDialogSize.height > viewer.height()) { - cineDialogCoords.top -= (cineDialogCoords.top + cineDialogSize.height) - viewer.height(); + } else if (cineDialogCoords.top + cineDialogSize.height > $viewer.height()) { + cineDialogCoords.top -= (cineDialogCoords.top + cineDialogSize.height) - $viewer.height(); } if (cineDialogCoords.left < 0) { cineDialogCoords.left = 0; - } - else if (cineDialogCoords.left + cineDialogSize.width > viewer.width()) { - cineDialogCoords.left -= (cineDialogCoords.left + cineDialogSize.width) - viewer.width(); + } else if (cineDialogCoords.left + cineDialogSize.width > $viewer.width()) { + cineDialogCoords.left -= (cineDialogCoords.left + cineDialogSize.width) - $viewer.width(); } - cineDialog.css(cineDialogCoords); - + $cineDialog.css(cineDialogCoords); }; - }); Template.cineDialog.onRendered(() => { const instance = Template.instance(); - const dialog = instance.$('#cineDialog'); + const $dialog = instance.$('#cineDialog'); const singleRowLayout = OHIF.uiSettings.displayEchoUltrasoundWorkflow; // set dialog in optimal position and make sure it continues in a optimal position... // ... when the window has been resized - instance.setOptimalPosition(null, { - top: singleRowLayout ? 47 : 26 - }); + instance.setOptimalPosition(null, { top: singleRowLayout ? 47 : 26 }); // The jQuery method does not seem to be working... // ... $(window).resize(instance.setOptimalPosition) @@ -239,16 +238,14 @@ Template.cineDialog.onRendered(() => { instance.setResizeHandler(instance.setOptimalPosition); // Make the CINE dialog bounded and draggable - dialog.draggable({ defaultElementCursor: 'move' }); + $dialog.draggable({ defaultElementCursor: 'move' }); // Polyfill for older browsers - dialogPolyfill.registerDialog(dialog.get(0)); + dialogPolyfill.registerDialog($dialog.get(0)); // Prevent dialog from being dragged when user clicks any button - dialog.find('.cine-navigation, .cine-controls, .cine-options').on('mousedown touchstart', function (e) { - e.stopPropagation(); - }); - + const $controls = $dialog.find('.cine-navigation, .cine-controls, .cine-options'); + $controls.on('mousedown touchstart', event => event.stopPropagation()); }); Template.cineDialog.onDestroyed(() => { @@ -300,8 +297,9 @@ Template.cineDialog.helpers({ return viewportUtils.hasMultipleFrames(); }, - getClassNames(baseCls) { - return baseCls + ' ' + (OHIF.uiSettings.displayEchoUltrasoundWorkflow ? 'single' : 'double') + '-row-style' + getClassNames(baseClass) { + const style = OHIF.uiSettings.displayEchoUltrasoundWorkflow ? 'single' : 'double'; + return `${baseClass} ${style}-row-style`; } }); diff --git a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl index a421f6b86..76b8497a4 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl @@ -4,12 +4,13 @@ theme('border', '2px solid $uiBorderColor', 0.95) theme('background', '$uiGrayDarkest', 0.95) theme('color', '$textSecondaryColor') - position: absolute border-radius: 8px - z-index: 1000 - overflow: hidden cursor: move + overflow: hidden padding: 0 + position: absolute + width: 300px + z-index: 1000 h5 font-size: 20px