PWV-1: Refactoring ohif:studylist package

Packages/ohif-study-list/client/components/studyContextMenu/studyContextMenu.js

@@ -1,84 +1,48 @@
-function closeHandler(dialog) {
-    // Hide the dialog
-    $(dialog).css('display', 'none');
-
-    // Remove the backdrop
-    $('.removableBackdrop').remove();
-}
+import { OHIF } from 'meteor/ohif:core';
 
 /**
  * This function is used inside the StudyList package to define a right click callback
  *
- * @param e
+ * @param event
  */
-openStudyContextMenu = function(e) {
-    StudyList.functions['exportSelectedStudies'] = exportSelectedStudies;
-    StudyList.functions['viewSeriesDetails'] = viewSeriesDetails;
-
-
-    Template.studyContextMenu.study = $(e.currentTarget);
-
-    var dialog = $('#studyContextMenu');
-
-    // Show the nonTargetLesion dialog above
-    var dialogProperty = {
-        display: 'block'
-    };
-
-    var pageHeight = $(document).height();
-    dialogProperty.top = Math.max(e.pageY, 0);
-    dialogProperty.top = Math.min(dialogProperty.top, pageHeight - dialog.outerHeight());
-
-    var pageWidth = $(document).width();
-    dialogProperty.left = Math.max(e.pageX, 0);
-    dialogProperty.left = Math.min(dialogProperty.left, pageWidth - dialog.outerWidth());
-
-    // Device is touch device or not
-    // If device is touch device, set position center of screen vertically and horizontally
-    if (isTouchDevice()) {
-        // add dialogMobile class to provide a black, transparent background
-        dialog.addClass('dialogMobile');
-        dialogProperty.top = 0;
-        dialogProperty.left = 0;
-        dialogProperty.right = 0;
-        dialogProperty.bottom = 0;
-        dialogProperty.margin = 'auto';
+openStudyContextMenu = event => {
+    if (!OHIF.uiSettings.studyListFunctionsEnabled) {
+        return;
     }
 
-    dialog.css(dialogProperty);
-    dialog.focus();
+    StudyList.functions.exportSelectedStudies = exportSelectedStudies;
+    StudyList.functions.viewSeriesDetails = viewSeriesDetails;
 
-    // Show the backdrop
-    UI.render(Template.removableBackdrop, document.body);
+    Template.studyContextMenu.$study = $(event.currentTarget);
 
-    // Make sure the context menu is closed when the user clicks away
-    $('.removableBackdrop').one('mousedown touchstart', function() {
-        closeHandler(dialog);
-    });
+    const dropdown = OHIF.ui.showFormDropdown('studyContextMenu');
+    const $dropdown = $(dropdown);
+    const $dropdownMenu = $dropdown.children('.dropdown-menu');
+
+    dropdown.oncontextmenu = () => false;
+
+    $dropdownMenu.css({
+        position: 'fixed',
+        left: `${event.clientX}px`,
+        top: `${event.clientY}px`,
+        'z-index': 10000
+    }).bounded().focus();
 };
 
 /**
  * Exports all selected studies on the studylist
  */
 function exportSelectedStudies() {
-    var selectedStudies = StudyListSelectedStudies.find({}, {
-            sort: {
-                studyDate: 1
-            }
-        }).fetch() || [];
+    const selectedStudies = OHIF.studylist.getSelectedStudies();
 
-    exportStudies(selectedStudies);
+    OHIF.studylist.exportStudies(selectedStudies);
 }
 
 /**
  * Display series details of study in modal
  */
 function viewSeriesDetails() {
-    var selectedStudies = StudyListSelectedStudies.find({}, {
-        sort: {
-            studyDate: 1
-        }
-    }).fetch();
+    const selectedStudies = OHIF.studylist.getSelectedStudies();
 
     if (!selectedStudies) {
         return;
@@ -91,7 +55,7 @@ function viewSeriesDetails() {
 
 Template.studyContextMenu.events({
     'click a': function(e) {
-        var study = Template.studyContextMenu.study;
+        var study = Template.studyContextMenu.$study;
         var id = $(e.currentTarget).attr('id');
 
         var fn = StudyList.functions[id];
@@ -100,6 +64,5 @@ Template.studyContextMenu.events({
         }
 
         var dialog = $('#studyContextMenu');
-        closeHandler(dialog);
     }
 });