https://www.hueytownchamber.com/assets/controllers/system_email_preview_controller-7e2d4b84.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["form", "field", "opening", "iframe", "text", "status"]
5
6  connect() {
7    this.previewValues = this.fieldValues()
8    this.requestSequence = 0
9  }
10
11  disconnect() {
12    this.abortController?.abort()
13    this.requestSequence += 1
14  }
15
16  changed() {
17    this.abortController?.abort()
18    this.requestSequence += 1
19    this.statusTarget.textContent = "Unsaved changes"
20  }
21
22  submit(event) {
23    if (event.submitter?.value !== "preview") return
24
25    event.preventDefault()
26    this.refresh()
27  }
28
29  async refresh() {
30    const values = this.fieldValues()
31    if (values === this.previewValues) return
32
33    this.abortController?.abort()
34    this.abortController = new AbortController()
35    const sequence = ++this.requestSequence
36    const body = new FormData(this.formTarget)
37    body.set("intent", "preview")
38    this.statusTarget.textContent = "Updating preview…"
39
40    try {
41      const response = await fetch(this.formTarget.action, {
42        method: "POST",
43        body,
44        headers: { Accept: "application/json", "X-CSRF-Token": document.querySelector("meta[name='csrf-token']")?.content || "" },
45        credentials: "same-origin",
46        signal: this.abortController.signal
47      })
48      const preview = await response.json()
49      if (sequence !== this.requestSequence) return
50      if (!response.ok) {
51        this.statusTarget.textContent = preview.error || "Preview could not update. Try Preview changes again."
52        return
53      }
54
55      this.iframeTarget.srcdoc = preview.html
56      this.textTarget.textContent = preview.text
57      if (this.openingTarget.value.trim() === "") this.openingTarget.value = preview.opening
58      this.previewValues = this.fieldValues()
59      this.statusTarget.textContent = "Unsaved changes"
60    } catch (error) {
61      if (error.name === "AbortError" || sequence !== this.requestSequence) return
62      this.statusTarget.textContent = "Preview could not update. Try Preview changes again."
63    }
64  }
65
66  fieldValues() {
67    return JSON.stringify(this.fieldTargets.map((field) => field.value))
68  }
69}