diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js index b1d9eee4a..d86bc1c08 100644 --- a/app/javascript/controllers/dialog_controller.js +++ b/app/javascript/controllers/dialog_controller.js @@ -1,5 +1,7 @@ import { Controller } from "@hotwired/stimulus" +const BOTTOM_THRESHOLD = 90 + export default class extends Controller { static targets = [ "dialog" ] static values = { @@ -18,6 +20,7 @@ export default class extends Controller { } else { this.dialogTarget.show() } + this.#orient() this.dialogTarget.setAttribute('aria-hidden', 'false') this.dispatch("show") } @@ -39,4 +42,25 @@ export default class extends Controller { closeOnClickOutside({ target }) { if (!this.element.contains(target)) this.close() } + + #orient() { + console.log("ORIENT") + console.log(`distanceToBottom = ${this.#distanceToBottom}`) + console.log(`maxWidth = ${this.#maxWidth}px`) + + this.dialogTarget.classList.toggle("ANDYSMITH", this.#distanceToBottom < BOTTOM_THRESHOLD) + this.dialogTarget.style.setProperty("--max-width", this.#maxWidth + "px") + } + + get #distanceToBottom() { + return window.innerHeight - this.#boundingClientRect.bottom + } + + get #maxWidth() { + return window.innerWidth - this.#boundingClientRect.left + } + + get #boundingClientRect() { + return this.dialogTarget.getBoundingClientRect() + } }