You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
974 B
31 lines
974 B
import { Controller } from "@hotwired/stimulus"
|
|
|
|
export default class extends Controller {
|
|
connect() {
|
|
this.reset = this.reset.bind(this)
|
|
window.addEventListener("modal:closed", this.reset)
|
|
}
|
|
|
|
disconnect() {
|
|
window.removeEventListener("modal:closed", this.reset)
|
|
}
|
|
|
|
// Slides the copy out and lets the hero flex up to fill the viewport. The
|
|
// negative margin is what frees the space; the transform carries the article
|
|
// the rest of the way off-screen.
|
|
exit() {
|
|
const article = this.element.querySelector(":scope > article")
|
|
if (!article) return
|
|
|
|
this.element.style.setProperty("--exit-shift", `${article.offsetHeight}px`)
|
|
this.element.classList.add("is-exiting")
|
|
|
|
// Force the transitions into existence now, so a fast turbo_stream response
|
|
// still finds something to wait on before it opens the modal.
|
|
getComputedStyle(article).marginBlockEnd
|
|
}
|
|
|
|
reset() {
|
|
this.element.classList.remove("is-exiting")
|
|
}
|
|
}
|