From d25f628204c3f5ddd832f4ae7922a36a8e9bb3a0 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 14 Aug 2025 15:44:01 -0500
Subject: [PATCH] Extract orient into a module

---
 app/assets/stylesheets/orient.css             | 13 +++++++++
 app/assets/stylesheets/popup.css              |  7 +----
 .../controllers/dialog_controller.js          | 28 ++-----------------
 app/javascript/helpers/orientation_helpers.js | 19 +++++++++++++
 4 files changed, 36 insertions(+), 31 deletions(-)
 create mode 100644 app/assets/stylesheets/orient.css
 create mode 100644 app/javascript/helpers/orientation_helpers.js

diff --git a/app/assets/stylesheets/orient.css b/app/assets/stylesheets/orient.css
new file mode 100644
index 000000000..780244fbf
--- /dev/null
+++ b/app/assets/stylesheets/orient.css
@@ -0,0 +1,13 @@
+@layer utilities {
+  .orient-left {
+    inset-inline: auto 0;
+    transform: translateX(0);
+    background: lime !important;
+  }
+
+  .orient-right {
+    inset-inline: 0 auto;
+    transform: translateX(0);
+    background: gold !important;
+  }
+}
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index c74350ab2..7ef87d85d 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -10,18 +10,13 @@
     max-inline-size: min(55ch, calc(100dvw - var(--block-space-double)));
     overflow: auto;
     position: absolute;
-    translate: -50% 0;
+    transform: translateX(-50%);
     z-index: var(--z-popup);
 
     &[open] {
       display: flex;
     }
 
-    &.orient-left {
-      inset-inline: auto 0;
-      translate: 0;
-    }
-
     &:has(.popup__footer) {
       --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space);
     }
diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index 553de7361..96483b72c 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/app/javascript/controllers/dialog_controller.js
@@ -1,6 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-
-const EDGE_THRESHOLD = 90
+import { orient } from "helpers/orientation_helpers"
 
 export default class extends Controller {
   static targets = [ "dialog" ]
@@ -19,8 +18,9 @@ export default class extends Controller {
       this.dialogTarget.showModal()
     } else {
       this.dialogTarget.show()
+      orient(this.dialogTarget)
     }
-    this.#orient(this.dialogTarget)
+
     this.dialogTarget.setAttribute('aria-hidden', 'false')
     this.dispatch("show")
   }
@@ -42,26 +42,4 @@ export default class extends Controller {
   closeOnClickOutside({ target }) {
     if (!this.element.contains(target)) this.close()
   }
-
-  #orient(element) {
-    element.classList.toggle("orient-left", this.#distanceToRight < EDGE_THRESHOLD)
-    element.classList.toggle("orient-right", this.#distanceToLeft < EDGE_THRESHOLD)
-    element.classList.toggle("orient-top", this.#distanceToBottom < EDGE_THRESHOLD)
-  }
-
-  get #distanceToLeft() {
-    return this.#boundingClientRect.left
-  }
-
-  get #distanceToRight() {
-    return window.innerWidth - this.#boundingClientRect.right
-  }
-
-  get #distanceToBottom() {
-    return window.innerHeight - this.#boundingClientRect.bottom
-  }
-
-  get #boundingClientRect() {
-    return this.dialogTarget.getBoundingClientRect()
-  }
 }
diff --git a/app/javascript/helpers/orientation_helpers.js b/app/javascript/helpers/orientation_helpers.js
new file mode 100644
index 000000000..6d8e075ec
--- /dev/null
+++ b/app/javascript/helpers/orientation_helpers.js
@@ -0,0 +1,19 @@
+const EDGE_THRESHOLD = 16
+
+export function orient(el) {
+  el.classList.toggle("orient-left", spaceOnRight(el) < EDGE_THRESHOLD)
+  el.classList.toggle("orient-right", spaceOnLeft(el) < EDGE_THRESHOLD)
+  el.classList.toggle("orient-top", spaceOnBottom(el) < EDGE_THRESHOLD)
+}
+
+function spaceOnLeft(el) {
+  return el.getBoundingClientRect().left
+}
+
+function spaceOnRight(el) {
+  return window.innerWidth - el.getBoundingClientRect().right
+}
+
+function spaceOnBottom(el) {
+  return window.innerHeight - el.getBoundingClientRect().bottom
+}