📚 Rename (#1907)

Author: KATO-Hiro

src/lib/actions/handle_dropdown.ts

@@ -34,7 +34,7 @@ let resizeTimeout: ReturnType<typeof setTimeout>;
  *   isOpen: $isMenuOpen,
  *   closeDropdown: () => isMenuOpen.set(false),
  *   onStatusChange: (status) => console.log(`Menu is ${status ? 'open' : 'closed'}`)
- *   updatePosition: (x, y, isLower) => {updateDropdownPosition(x, y, isLower)},
+ *   updatePosition: (x, y, isInBottomHalf) => {updateDropdownPosition(x, y, isInBottomHalf)},
  * }}>
  *   <!-- Dropdown content -->
  * </div>
@@ -46,7 +46,7 @@ export function handleDropdownBehavior(
     isOpen: boolean;
     closeDropdown: () => void;
     onStatusChange?: (status: boolean) => void;
-    updatePosition?: (x: number, y: number, isLower: boolean) => void;
+    updatePosition?: (x: number, y: number, isInBottomHalf: boolean) => void;
   },
 ) {
   if (!browser) {
@@ -107,7 +107,7 @@ export function handleDropdownBehavior(
       isOpen: boolean;
       closeDropdown: () => void;
       onStatusChange?: (status: boolean) => void;
-      updatePosition?: (x: number, y: number, isLower: boolean) => void;
+      updatePosition?: (x: number, y: number, isInBottomHalf: boolean) => void;
     }) {
       Object.assign(options, newOptions);
     },
@@ -133,12 +133,12 @@ export function handleDropdownBehavior(
  * @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
+ *   - isInBottomHalf: Boolean indicating whether the element is in the lower half of the viewport
  */
 export function calculateDropdownPosition(event: MouseEvent): {
   x: number;
   y: number;
-  isLower: boolean;
+  isInBottomHalf: boolean;
 } {
   lastTriggerElement = event.currentTarget as HTMLElement;
   const rect = (lastTriggerElement as HTMLElement).getBoundingClientRect();
@@ -147,7 +147,7 @@ export function calculateDropdownPosition(event: MouseEvent): {
   return {
     x: x,
     y: y,
-    isLower: rect.top > window.innerHeight / 2,
+    isInBottomHalf: rect.top > window.innerHeight / 2,
   };
 }
 
@@ -167,11 +167,11 @@ export function calculateDropdownPosition(event: MouseEvent): {
  * and will do nothing if either is undefined or if the dropdown is not open.
  *
  * The dropdown will be positioned at the bottom-right corner of the trigger element.
- * The `isLower` parameter passed to `updatePosition` will be true if the trigger is
+ * The `isInBottomHalf` parameter passed to `updatePosition` will be true if the trigger is
  * in the top half of the screen, suggesting the dropdown should expand downward.
  */
 export function recalculateDropdownPosition(options: {
-  updatePosition: (x: number, y: number, isLower: boolean) => void;
+  updatePosition: (x: number, y: number, isInBottomHalf: boolean) => void;
   dropdownIsOpen: boolean;
 }): void {
   if (!browser || !lastTriggerElement || !options.dropdownIsOpen) {

src/lib/components/SubmissionStatus/UpdatingDropdown.svelte

@@ -62,7 +62,7 @@
   let dropdownStatus = $state(false);
   let closeDropdown = dropdown.close;
 
-  let dropdownPosition = $state({ x: 0, y: 0, isLower: false });
+  let dropdownPosition = $state({ x: 0, y: 0, isInBottomHalf: false });
   const componentId = Math.random().toString(36).substring(2);
 
   $effect(() => {
@@ -86,23 +86,23 @@
   // Required for the dropdown to open at the correct position.
   function updateDropdownPosition(event: MouseEvent): void {
     const position = calculateDropdownPosition(event);
-    updatePositionInComponent(position.x, position.y, position.isLower);
+    updatePositionInComponent(position.x, position.y, position.isInBottomHalf);
   }
 
-  function updatePositionInComponent(x: number, y: number, isLower: boolean) {
-    dropdownPosition = { x, y, isLower };
+  function updatePositionInComponent(x: number, y: number, isInBottomHalf: boolean) {
+    dropdownPosition = { x, y, isInBottomHalf };
 
     if (browser) {
       document.documentElement.style.setProperty('--dropdown-x', `${x}px`);
       document.documentElement.style.setProperty('--dropdown-y', `${y}px`);
     }
   }
 
-  function getDropdownClasses(isLower: boolean): string {
+  function getDropdownClasses(isInBottomHalf: boolean): string {
     let classes =
       'absolute w-32 z-[999] shadow-lg pointer-events-auto left-[var(--dropdown-x)] transform -translate-x-full ';
 
-    if (isLower) {
+    if (isInBottomHalf) {
       classes += 'bottom-[calc(100vh-var(--dropdown-y))] mb-5';
     } else {
       classes += 'top-[var(--dropdown-y)] mt-1';
@@ -237,7 +237,7 @@
     {activeUrl}
     {dropdownStatus}
     {closeDropdown}
-    class={getDropdownClasses(dropdownPosition.isLower)}
+    class={getDropdownClasses(dropdownPosition.isInBottomHalf)}
   >
     <DropdownUl class="border rounded-lg shadow">
       {#if isLoggedIn}