♻️ Extract methods (#1907)

Author: KATO-Hiro

src/lib/actions/handle_dropdown.ts

@@ -0,0 +1,164 @@
+import { writable, type Writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const activeDropdownId: Writable<string | null> = writable<string | null>(null);
+
+/**
+ * A Svelte action that manages dropdown behavior for an HTML element.
+ *
+ * This action handles common dropdown interactions such as:
+ * - Closing when clicking outside the dropdown
+ * - Closing on page scroll
+ * - Coordinating with other dropdowns to ensure only one is open at a time
+ *
+ * @param node - The HTML element that contains the dropdown
+ * @param options - Configuration options for the dropdown behavior
+ * @param options.dropdownId - Unique identifier for this dropdown
+ * @param options.isOpen - Boolean indicating if the dropdown is currently open
+ * @param options.closeDropdown - Function to call when the dropdown should close
+ * @param options.onStatusChange - Optional callback that fires when dropdown open state changes
+ *
+ * @returns An object containing update and destroy methods (Svelte action interface)
+ * @returns.update - Method to update the dropdown options
+ * @returns.destroy - Cleanup method to remove event listeners
+ *
+ * @example
+ * <div use:handleDropdownBehavior={{
+ *   dropdownId: 'user-menu',
+ *   isOpen: $isMenuOpen,
+ *   closeDropdown: () => isMenuOpen.set(false),
+ *   onStatusChange: (status) => console.log(`Menu is ${status ? 'open' : 'closed'}`)
+ * }}>
+ *   <!-- Dropdown content -->
+ * </div>
+ */
+export function handleDropdownBehavior(
+  node: HTMLElement,
+  options: {
+    dropdownId: string;
+    isOpen: boolean;
+    closeDropdown: () => void;
+    onStatusChange?: (status: boolean) => void;
+  },
+) {
+  if (!browser) {
+    return {
+      update: () => {},
+      destroy: () => {},
+    };
+  }
+
+  let ignoreNextClick = false;
+
+  // Close the dropdown on scroll.
+  const handleScroll = () => {
+    if (options.isOpen) {
+      options.closeDropdown();
+    }
+  };
+
+  // Close the dropdown when clicking outside of it.
+  const handleWindowClick = (event: MouseEvent) => {
+    if (ignoreNextClick) {
+      ignoreNextClick = false;
+      return;
+    }
+
+    if (options.isOpen && !node.contains(event.target as Node)) {
+      options.closeDropdown();
+    }
+  };
+
+  // Close the dropdown if another one is opened.
+  const unsubscribe = activeDropdownId.subscribe((id) => {
+    if (id && id !== options.dropdownId && options.isOpen) {
+      options.closeDropdown();
+    }
+  });
+
+  window.addEventListener('click', handleWindowClick);
+  window.addEventListener('scroll', handleScroll, { passive: true });
+
+  return {
+    update(newOptions: {
+      dropdownId: string;
+      isOpen: boolean;
+      closeDropdown: () => void;
+      onStatusChange?: (status: boolean) => void;
+    }) {
+      Object.assign(options, newOptions);
+    },
+
+    destroy() {
+      if (browser) {
+        window.removeEventListener('scroll', handleScroll);
+        window.removeEventListener('click', handleWindowClick);
+        unsubscribe();
+      }
+    },
+  };
+}
+
+/**
+ * Calculates the position for a dropdown menu based on the event's target element.
+ *
+ * @param event - The mouse event that triggered the dropdown
+ * @returns An object containing:
+ *   - x: The horizontal position (right edge of the element)
+ *   - y: The vertical position (bottom edge of the element)
+ *   - isLower: Boolean indicating whether the element is in the lower half of the viewport
+ */
+export function calculateDropdownPosition(event: MouseEvent): {
+  x: number;
+  y: number;
+  isLower: boolean;
+} {
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+
+  return {
+    x: rect.right,
+    y: rect.bottom,
+    isLower: rect.top > window.innerHeight / 2,
+  };
+}
+
+/**
+ * Toggles a dropdown menu's visibility state and manages its active status.
+ *
+ * @param event - The mouse event that triggered the dropdown toggle. If undefined, the dropdown
+ *                is toggled without position calculations or stopping event propagation.
+ * @param options - Configuration options for the dropdown toggle operation
+ * @param options.dropdownId - Unique identifier for the dropdown being toggled
+ * @param options.toggle - Callback function that handles the actual toggling of the dropdown state
+ * @param options.getPosition - Optional callback to calculate and set dropdown position based on the mouse event
+ *
+ * @remarks
+ * This function handles several aspects of dropdown management:
+ * - Stops event propagation if an event is provided
+ * - Optionally positions the dropdown based on mouse coordinates
+ * - Updates the currently active dropdown ID in the application state
+ * - Executes the toggle callback to change dropdown visibility
+ */
+export function toggleDropdown(
+  event: MouseEvent | undefined,
+  options: {
+    dropdownId: string;
+    toggle: () => void;
+    getPosition?: (e: MouseEvent) => void;
+  },
+) {
+  if (event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (options.getPosition) {
+      options.getPosition(event);
+    }
+  }
+
+  activeDropdownId.set(options.dropdownId);
+
+  setTimeout(() => {
+    options.toggle();
+  }, 10);
+}

src/lib/components/SubmissionStatus/UpdatingDropdown.svelte

@@ -25,18 +25,9 @@
 
 <UpdatingDropdown bind:this={updatingDropdown} {taskResult} {isLoggedIn} {onupdate} />
 -->
-<script module lang="ts">
-  import { writable } from 'svelte/store';
-
-  // Avoid multiple activation of dropdowns.
-  const activeDropdownId = writable<string | null>(null);
-</script>
-
 <script lang="ts">
   import { getStores } from '$app/stores';
   import { enhance } from '$app/forms';
-  import { onMount } from 'svelte';
-  import { browser } from '$app/environment';
 
   import { Dropdown, DropdownUl, DropdownLi, uiHelpers } from 'svelte-5-ui-lib';
   import Check from 'lucide-svelte/icons/check';
@@ -45,6 +36,11 @@
 
   import InputFieldWrapper from '$lib/components/InputFieldWrapper.svelte';
 
+  import {
+    handleDropdownBehavior,
+    calculateDropdownPosition,
+    toggleDropdown,
+  } from '$lib/actions/handle_dropdown';
   import { submission_statuses } from '$lib/services/submission_status';
   import { errorMessageStore } from '$lib/stores/error_message';
 
@@ -66,19 +62,8 @@
   let closeDropdown = dropdown.close;
 
   let dropdownPosition = $state({ x: 0, y: 0, isLower: false });
-
   const componentId = Math.random().toString(36).substring(2);
 
-  onMount(() => {
-    const unsubscribe = activeDropdownId.subscribe((id) => {
-      if (id && id !== componentId && dropdownStatus) {
-        closeDropdown();
-      }
-    });
-
-    return unsubscribe;
-  });
-
   $effect(() => {
     activeUrl = $page.url.pathname;
     dropdownStatus = dropdown.isOpen;
@@ -90,28 +75,16 @@
   });
 
   export function toggle(event?: MouseEvent): void {
-    if (event) {
-      event.stopPropagation();
-      getDropdownPosition(event);
-    }
-
-    activeDropdownId.set(componentId);
-    dropdown.toggle();
-
-    // Note: Wait until the next event cycle before accepting a click event.
-    if (!dropdownStatus) {
-      setTimeout(() => {}, 0);
-    }
+    toggleDropdown(event, {
+      dropdownId: componentId,
+      toggle: dropdown.toggle,
+      getPosition: updateDropdownPosition,
+    });
   }
 
-  function getDropdownPosition(event: MouseEvent): void {
-    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
-
-    dropdownPosition = {
-      x: rect.right,
-      y: rect.bottom,
-      isLower: rect.top > window.innerHeight / 2,
-    };
+  // Required for the dropdown to open at the correct position.
+  function updateDropdownPosition(event: MouseEvent): void {
+    dropdownPosition = calculateDropdownPosition(event);
   }
 
   function getDropdownClasses(isLower: boolean): string {
@@ -235,60 +208,19 @@
     };
     return option;
   });
-
-  function handleDropdown(node: HTMLElement) {
-    if (!browser) {
-      return {
-        destroy: () => {},
-      };
-    }
-
-    let justOpened = false;
-
-    const handleScroll = () => {
-      if (dropdownStatus) {
-        closeDropdown();
-      }
-    };
-
-    const handleWindowClick = (event: MouseEvent) => {
-      if (justOpened) {
-        justOpened = false;
-        return;
-      }
-
-      if (dropdownStatus && !node.contains(event.target as Node)) {
-        closeDropdown();
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    window.addEventListener('click', handleWindowClick);
-
-    return {
-      update(newStatus: boolean) {
-        if (newStatus && !dropdownStatus) {
-          justOpened = true;
-
-          setTimeout(() => {
-            justOpened = false;
-          }, 0);
-        }
-
-        dropdownStatus = newStatus;
-      },
-
-      destroy() {
-        if (browser) {
-          window.removeEventListener('scroll', handleScroll);
-          window.removeEventListener('click', handleWindowClick);
-        }
-      },
-    };
-  }
 </script>
 
-<div class="fixed inset-0 pointer-events-none z-50 w-full h-full" use:handleDropdown>
+<div
+  class="fixed inset-0 pointer-events-none z-50 w-full h-full"
+  use:handleDropdownBehavior={{
+    dropdownId: componentId,
+    isOpen: dropdownStatus,
+    closeDropdown,
+    onStatusChange: (status: boolean) => {
+      dropdownStatus = status;
+    },
+  }}
+>
   <Dropdown
     {activeUrl}
     {dropdownStatus}