Merge pull request #3630 from obsidian-tasks-group/refactor-context-menus

refactor: Remove repetition from menu-handling code

Author: claremacrae

src/Renderer/QueryResultsRenderer.ts

@@ -15,6 +15,7 @@ import type { TasksFile } from '../Scripting/TasksFile';
 import type { ListItem } from '../Task/ListItem';
 import { Task } from '../Task/Task';
 import { PostponeMenu } from '../ui/Menus/PostponeMenu';
+import { showMenu } from '../ui/Menus/TaskEditingMenu';
 import { TaskLineRenderer, type TextRenderer, createAndAppendElement } from './TaskLineRenderer';
 
 export type BacklinksEventHandler = (ev: MouseEvent, task: Task) => Promise<void>;
@@ -554,10 +555,7 @@ export class QueryResultsRenderer {
         /** Open a context menu on right-click.
          */
         button.addEventListener('contextmenu', async (ev: MouseEvent) => {
-            ev.preventDefault(); // suppress the default context menu
-            ev.stopPropagation(); // suppress further event propagation
-            const menu = new PostponeMenu(button, task);
-            menu.showAtPosition({ x: ev.clientX, y: ev.clientY });
+            showMenu(ev, new PostponeMenu(button, task));
         });
     }
 

src/Renderer/TaskLineRenderer.ts

@@ -10,7 +10,7 @@ import { Task } from '../Task/Task';
 import { TaskRegularExpressions } from '../Task/TaskRegularExpressions';
 import { StatusMenu } from '../ui/Menus/StatusMenu';
 import type { AllTaskDateFields } from '../DateTime/DateFieldTypes';
-import { defaultTaskSaver } from '../ui/Menus/TaskEditingMenu';
+import { defaultTaskSaver, showMenu } from '../ui/Menus/TaskEditingMenu';
 import { promptForDate } from '../ui/Menus/DatePicker';
 import { splitDateText } from '../DateTime/Postponer';
 import { DateMenu } from '../ui/Menus/DateMenu';
@@ -188,10 +188,7 @@ export class TaskLineRenderer {
             });
 
             checkbox.addEventListener('contextmenu', (ev: MouseEvent) => {
-                ev.preventDefault(); // suppress the default click behavior
-                ev.stopPropagation(); // suppress further event propagation
-                const menu = new StatusMenu(StatusRegistry.getInstance(), task);
-                menu.showAtPosition({ x: ev.clientX, y: ev.clientY });
+                showMenu(ev, new StatusMenu(StatusRegistry.getInstance(), task));
             });
             checkbox.setAttribute('title', 'Right-click for options');
         }
@@ -257,10 +254,7 @@ export class TaskLineRenderer {
                     });
 
                     span.addEventListener('contextmenu', (ev: MouseEvent) => {
-                        ev.preventDefault(); // suppress the default context menu
-                        ev.stopPropagation(); // suppress further event propagation
-                        const menu = new DateMenu(componentDateField, task, defaultTaskSaver);
-                        menu.showAtPosition({ x: ev.clientX, y: ev.clientY });
+                        showMenu(ev, new DateMenu(componentDateField, task, defaultTaskSaver));
                     });
                     span.setAttribute(
                         'title',

src/ui/Menus/PriorityMenu.ts

@@ -7,8 +7,7 @@ import { TaskEditingMenu, type TaskSaver, defaultTaskSaver } from './TaskEditing
  *
  * @example
  *     editTaskPencil.addEventListener('contextmenu', (ev: MouseEvent) => {
- *         const menu = new PriorityMenu(task);
- *         menu.showAtPosition({ x: ev.clientX, y: ev.clientY });
+ *         showMenu(ev, new PriorityMenu(task));
  *     });
  *     editTaskPencil.setAttribute('title', 'Right-click for options');
  */

src/ui/Menus/StatusMenu.ts

@@ -8,8 +8,7 @@ import { TaskEditingMenu, type TaskSaver, defaultTaskSaver } from './TaskEditing
  *
  * @example
  *     checkbox.addEventListener('contextmenu', (ev: MouseEvent) => {
- *         const menu = new StatusMenu(StatusRegistry.getInstance(), task);
- *         menu.showAtPosition({ x: ev.clientX, y: ev.clientY });
+ *         showMenu(ev, new StatusMenu(StatusRegistry.getInstance(), task));
  *     });
  *     checkbox.setAttribute('title', 'Right-click for options');
  */

src/ui/Menus/TaskEditingMenu.ts

@@ -22,9 +22,22 @@ export async function defaultTaskSaver(originalTask: Task, newTasks: Task | Task
     });
 }
 
+/**
+ * A helper function to ensure that menus behave correctly, not overlapping or being overlapped by other menus.
+ * @param ev
+ * @param menu
+ */
+export function showMenu(ev: MouseEvent, menu: Menu) {
+    ev.preventDefault(); // suppress the default click behavior
+    ev.stopPropagation(); // suppress further event propagation
+    menu.showAtPosition({ x: ev.clientX, y: ev.clientY });
+}
+
 /**
  * Base class for Menus that offer editing one or more properties of a Task object.
  *
+ * Once created, menus should be passed to {@link showMenu}.
+ *
  * A {@link TaskSaver} function must be supplied, in order for any edits to be saved.
  * Derived classes should default to using {@link defaultTaskSaver}, but allow
  * alternative implementations to be used in tests.