Replacing studyListContextMenu for dropdown

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

@@ -1,5 +1,4 @@
 import './seriesDetailsModal';
 import './serverInformation';
-import './studyContextMenu';
 import './studylist';
 import './themeSelector';

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

@@ -1,89 +1,23 @@
-import { Template } from 'meteor/templating';
 import { Meteor } from 'meteor/meteor';
 import { OHIF } from 'meteor/ohif:core';
-import { $ } from 'meteor/jquery';
 
-/**
- * This function is used inside the StudyList package to define a right click callback
- *
- * @param event
- */
-openStudyContextMenu = event => {
-    if (!OHIF.uiSettings.studyListFunctionsEnabled) {
-        return;
-    }
-
-    StudyList.functions.exportSelectedStudies = exportSelectedStudies;
-    StudyList.functions.viewSeriesDetails = viewSeriesDetails;
-
-    Template.studyContextMenu.$study = $(event.currentTarget);
-
-    const dropdown = OHIF.ui.showFormDropdown('studyContextMenu');
-    const $dropdown = $(dropdown);
-    const $dropdownMenu = $dropdown.children('.dropdown-menu');
-
-    dropdown.oncontextmenu = () => false;
-
-    $dropdownMenu.css({
-        visibility: 'hidden',
-        position: 'fixed',
-        'z-index': 10000,
-    }).bounded().focus();
-
-    // Postpone position change to allow boundaries restriction
-    Meteor.defer(() => {
-        $dropdownMenu.css({
-            visibility: 'visible',
-            left: `${event.clientX}px`,
-            top: `${event.clientY}px`
-        }).trigger('spatialChanged');
-    });
-};
-
-/**
- * Exports all selected studies on the studylist
- */
-function exportSelectedStudies($study, event) {
-    const selectedStudies = OHIF.studylist.getSelectedStudies();
-    const studiesCount = selectedStudies.length;
-    const studyText = studiesCount > 1 ? 'Studies' : 'Study';
-
-    OHIF.ui.showDialog('dialogConfirm', {
-        element: event.element,
-        title: `Export ${studyText}`,
-        message: `Would you like to export ${studiesCount} ${studyText.toLowerCase()}?`
-    }).then(() => {
-        OHIF.studylist.exportStudies(selectedStudies);
-    });
-}
-
-/**
- * Display series details of study in modal
- */
-function viewSeriesDetails() {
-    const selectedStudies = OHIF.studylist.getSelectedStudies();
-
-    if (!selectedStudies) {
-        return;
-    }
-
-    OHIF.ui.showDialog('seriesDetailsModal', { selectedStudies });
-}
-
-Template.studyContextMenu.events({
-    'click a'(event, instance) {
-        const $target = $(event.currentTarget);
-
-        if ($target.hasClass('disabled')) {
-            return;
-        }
-
-        const id = $target.attr('id');
-        if (id in StudyList.functions) {
-            const fn = StudyList.functions[id];
-            if (typeof fn === 'function') {
-                fn(Template.studyContextMenu.$study, event);
-            }
-        }
-    }
+Meteor.startup(() => {
+    OHIF.studylist.dropdown.setItems([{
+        action: OHIF.studylist.viewSeriesDetails,
+        text: 'View Series Details'
+    }, {
+        text: 'Anonymize',
+        disabled: true
+    }, {
+        text: 'Send',
+        disabled: true,
+        separatorAfter: true
+    }, {
+        text: 'Delete',
+        disabled: true
+    }, {
+        action: OHIF.studylist.exportSelectedStudies,
+        text: 'Export',
+        title: 'Export Selected Studies'
+    }]);
 });

Packages/ohif-study-list/client/components/studylist/studylistStudy/studylistStudy.js

@@ -1,3 +1,6 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
 import { OHIF } from 'meteor/ohif:core';
 
 // Maybe we should use regular StudyList collection?
@@ -45,7 +48,7 @@ function doUnselectRow(studyRow, data) {
     studyRow.removeClass('active');
 }
 
-function handleShiftClick(studyRow, data) {
+function handleShiftClick($studyRow, data) {
     //OHIF.log.info('shiftKey');
 
     let study, previous = StudyList.previouslySelected ? $(StudyList.previouslySelected) : null;
@@ -59,49 +62,49 @@ function handleShiftClick(studyRow, data) {
 
     // Select all rows in between these two rows
     if (previous) {
-        let rowsInBetween;
-        if (previous.index() < studyRow.index()) {
+        let $rowsInBetween;
+        if (previous.index() < $studyRow.index()) {
             // The previously selected row is above (lower index) the
             // currently selected row.
 
             // Fill in the rows upwards from the previously selected row
-            rowsInBetween = previous.nextAll('tr');
-        } else if (previous.index() > studyRow.index()) {
+            $rowsInBetween = previous.nextAll('tr');
+        } else if (previous.index() > $studyRow.index()) {
             // The previously selected row is below the currently
             // selected row.
 
             // Fill in the rows upwards from the previously selected row
-            rowsInBetween = previous.prevAll('tr');
+            $rowsInBetween = previous.prevAll('tr');
         } else {
-            // nothing to do since previous.index() === studyRow.index()
+            // nothing to do since previous.index() === $studyRow.index()
             // the user is shift-clicking the same row...
             return;
         }
 
         // Loop through the rows in between current and previous selected studies
-        rowsInBetween.each(function() {
-            let row = $(this);
+        $rowsInBetween.forEach(row => {
+            const $row = $(row);
 
-            if (row.hasClass('active')) {
+            if ($row.hasClass('active')) {
                 // If we find one that is already selected, do nothing
                 return;
             }
 
             // Get the relevant studyInstanceUid
-            let studyInstanceUid = row.attr('studyInstanceUid');
+            let studyInstanceUid = $row.attr('studyInstanceUid');
 
             // Retrieve the data context through Blaze
             let data = Blaze.getData(this);
 
             // Set the current study as selected
-            doSelectRow(row, data);
+            doSelectRow($row, data);
 
-            // When we reach the currently clicked-on row, stop the loop
-            return !row.is(studyRow);
+            // When we reach the currently clicked-on $row, stop the loop
+            return !$row.is($studyRow);
         });
     } else {
         // Set the current study as selected
-        doSelectSingleRow(studyRow, data);
+        doSelectSingleRow($studyRow, data);
     }
 }
 
@@ -139,59 +142,58 @@ Template.studylistStudy.onRendered(function() {
 });
 
 Template.studylistStudy.events({
-    'click tr.studylistStudy': function(e) {
-        var studyRow = $(e.currentTarget);
-        var data = this;
+    'click tr.studylistStudy'(event, instance) {
+        const $studyRow = $(event.currentTarget);
+        const data = instance.data;
 
         // Remove the ID so we can directly insert this into our client-side collection
         delete data._id;
 
-        if (e.shiftKey) {
-            handleShiftClick(studyRow, data);
-        } else if (e.ctrlKey || e.metaKey) {
-            handleCtrlClick(studyRow, data);
+        if (event.shiftKey) {
+            handleShiftClick($studyRow, data);
+        } else if (event.ctrlKey || event.metaKey) {
+            handleCtrlClick($studyRow, data);
         } else {
-            doSelectSingleRow(studyRow, data);
+            doSelectSingleRow($studyRow, data);
         }
     },
-    'mousedown tr.studylistStudy': function(e) {
+
+    'mousedown tr.studylistStudy'(event, instance) {
         // This event handler is meant to handle middle-click on a study
-        if (e.which !== 2) {
+        if (event.which !== 2) {
             return;
         }
 
-        var data = this;
-        var middleClickOnStudy = StudyList.callbacks.middleClickOnStudy;
+        const middleClickOnStudy = StudyList.callbacks.middleClickOnStudy;
         if (middleClickOnStudy && typeof middleClickOnStudy === 'function') {
-            middleClickOnStudy(data);
+            middleClickOnStudy(instance.data);
         }
     },
-    'dblclick tr.studylistStudy, doubletap tr.studylistStudy': function(e) {
-        if (e.which !== undefined && e.which !== 1) {
+
+    'dblclick tr.studylistStudy, doubletap tr.studylistStudy'(event, instance) {
+        if (event.which !== undefined && event.which !== 1) {
             return;
         }
 
-        var data = this;
-        var dblClickOnStudy = StudyList.callbacks.dblClickOnStudy;
+        const dblClickOnStudy = StudyList.callbacks.dblClickOnStudy;
 
         if (dblClickOnStudy && typeof dblClickOnStudy === 'function') {
-            dblClickOnStudy(data);
+            dblClickOnStudy(instance.data);
         }
     },
-    'contextmenu tr.studylistStudy, press tr.studylistStudy': function(e, template) {
 
-        var studyRow = $(e.currentTarget),
-            data = this;
+    'contextmenu tr.studylistStudy, press tr.studylistStudy'(event, instance) {
+        const $studyRow = $(event.currentTarget);
 
-        if (!isStudySelected(data)) {
-            doSelectSingleRow(studyRow, data);
+        if (!isStudySelected(instance.data)) {
+            doSelectSingleRow($studyRow, instance.data);
         }
 
-        if (typeof openStudyContextMenu === 'function') {
-            e.preventDefault();
-            openStudyContextMenu(e, template);
-            return false;
-        }
+        event.preventDefault();
+        OHIF.ui.showDropdown(OHIF.studylist.dropdown.getItems(), {
+            event,
+            menuClasses: 'dropdown-menu-left'
+        });
+        return false;
     }
-
 });