Add right-handed modal positioning

Kruptein · Dec 17, 2023 · 9605316 · 9605316
1 parent cab6630
commit 9605316
Showing 1 changed file with 35 additions and 17 deletions.
diff --git a/client/src/core/components/modals/Modal.vue b/client/src/core/components/modals/Modal.vue
@@ -3,10 +3,14 @@ import { nextTick, onMounted, onUnmounted, ref, watch, watchEffect } from "vue";
 
 import { clearDropCallback, registerDropCallback } from "../../../game/ui/firefox";
 
-const props = withDefaults(defineProps<{ colour?: string; mask?: boolean; visible: boolean }>(), {
-    colour: "white",
-    mask: true,
-});
+const props = withDefaults(
+    defineProps<{ colour?: string; mask?: boolean; visible: boolean; rightHanded?: boolean }>(),
+    {
+        colour: "white",
+        mask: true,
+        rightHanded: false,
+    },
+);
 const emit = defineEmits(["close", "focus"]);
 
 const container = ref<HTMLDivElement | null>(null);
@@ -22,6 +26,7 @@ let screenY = 0;
 
 let containerX = 0;
 let containerY = 0;
+let containerWidth = 0;
 
 function close(): void {
     emit("close");
@@ -33,10 +38,18 @@ async function positionCheck(): Promise<void> {
     }
 }
 
+function setHorizontalAxis(left: number): void {
+    if (props.rightHanded) {
+        container.value!.style.right = `${window.innerWidth - (left + containerWidth)}px`;
+    } else {
+        container.value!.style.left = `${left}px`;
+    }
+}
+
 function checkBounds(): void {
     if (containerX > window.innerWidth - 100) {
         containerX = window.innerWidth - 100;
-        container.value!.style.left = `${containerX}px`;
+        setHorizontalAxis(containerX);
     }
     if (containerY > window.innerHeight - 100) {
         containerY = window.innerHeight - 100;
@@ -60,15 +73,17 @@ watchEffect(() => {
 });
 
 function updatePosition(): void {
-    if (container.value === null) return;
-    if (!positioned) {
-        if (container.value.offsetWidth === 0 && container.value.offsetHeight === 0) return;
-        containerX = (window.innerWidth - container.value.offsetWidth) / 2;
-        containerY = (window.innerHeight - container.value.offsetHeight) / 2;
-        container.value.style.left = `${containerX}px`;
-        container.value.style.top = `${containerY}px`;
-        positioned = true;
-    }
+    const c = container.value;
+    if (c === null || positioned) return;
+    if (c.offsetWidth === 0 && c.offsetHeight === 0) return;
+
+    containerX = (window.innerWidth - c.offsetWidth) / 2;
+    containerY = (window.innerHeight - c.offsetHeight) / 2;
+    containerWidth = c.offsetWidth;
+
+    setHorizontalAxis(containerX);
+    c.style.top = `${containerY}px`;
+    positioned = true;
 }
 
 function dragStart(event: DragEvent): void {
@@ -82,6 +97,7 @@ function dragStart(event: DragEvent): void {
     offsetY = event.offsetY;
     screenX = event.screenX;
     screenY = event.screenY;
+    containerWidth = container.value!.offsetWidth;
     dragging = true;
 }
 
@@ -91,15 +107,17 @@ function dragEnd(event: DragEvent): void {
         clearDropCallback();
         containerX = event.clientX - offsetX;
         containerY = event.clientY - offsetY;
+        const box = container.value!.getBoundingClientRect();
         if (event.clientX === 0 && event.clientY === 0 && event.pageX === 0 && event.pageY === 0) {
-            containerX = parseInt(container.value!.style.left, 10) - (screenX - event.screenX);
-            containerY = parseInt(container.value!.style.top, 10) - (screenY - event.screenY);
+            containerX = box.left - (screenX - event.screenX);
+            containerY = box.top - (screenY - event.screenY);
         }
         if (containerX < 0) containerX = 0;
         if (containerX > window.innerWidth - 100) containerX = window.innerWidth - 100;
         if (containerY < 0) containerY = 0;
         if (containerY > window.innerHeight - 100) containerY = window.innerHeight - 100;
-        container.value!.style.left = `${containerX}px`;
+
+        setHorizontalAxis(containerX);
         container.value!.style.top = `${containerY}px`;
         container.value!.style.display = "block";
     }