Stub out basic boundary detection
This commit is contained in:
@@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user