rename template

app/javascript/elements/form_prompt.js

@@ -0,0 +1,33 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.addEventListener('click', this.prompt)
+    document.addEventListener('turbo:submit-end', this.onSubmitEnd)
+  }
+
+  disconnectedCallback () {
+    this.removeEventListener('click', this.prompt)
+    document.removeEventListener('turbo:submit-end', this.onSubmitEnd)
+  }
+
+  get form () {
+    return this.querySelector('form')
+  }
+
+  prompt = () => {
+    const label = this.form.querySelector('label')
+    const input = this.form.querySelector(`#${CSS.escape(label.htmlFor)}`)
+    const value = window.prompt(label.textContent.trim(), input.value)?.trim()
+
+    if (!value || value === input.value) return
+
+    input.value = value
+
+    this.form.requestSubmit()
+  }
+
+  onSubmitEnd = (e) => {
+    if (e.detail.success && e.detail.formSubmission?.formElement === this.form && this.dataset.refresh !== 'false') {
+      window.Turbo.visit(window.location.href, { action: 'replace' })
+    }
+  }
+}

app/javascript/elements/native_event.js

@@ -1,16 +1,27 @@
 export default class extends HTMLElement {
   connectedCallback () {
-    this.addEventListener('click', this.dispatch)
+    if (this.dataset.on === 'submit') {
+      document.addEventListener('turbo:submit-end', this.onSubmitEnd)
+    } else {
+      this.addEventListener('click', this.dispatch)
+    }
   }
 
   disconnectedCallback () {
+    document.removeEventListener('turbo:submit-end', this.onSubmitEnd)
     this.removeEventListener('click', this.dispatch)
   }
 
-  dispatch = async () => {
-    const bridge = window.webkit?.messageHandlers?.modal
+  onSubmitEnd = async (e) => {
+    const form = e.detail.formSubmission?.formElement
 
-    if (!bridge || this.dataset.loading) return
+    if (!e.detail.success || !form || !this.contains(form)) return
+
+    this.post(JSON.stringify({ form: form.id, action: form.action, body: await e.detail.fetchResponse.responseText }))
+  }
+
+  dispatch = async () => {
+    if (this.dataset.loading) return
 
     let detail = this.dataset.detail || 'null'
 
@@ -30,6 +41,10 @@ export default class extends HTMLElement {
       }
     }
 
-    bridge.postMessage({ action: 'dispatch', name: this.dataset.name, detail })
+    this.post(detail)
+  }
+
+  post (detail) {
+    window.webkit?.messageHandlers?.modal?.postMessage({ action: 'dispatch', name: this.dataset.name, detail, dismiss: this.dataset.dismiss || 'true' })
   }
 }

app/javascript/elements/native_modal.js

@@ -13,6 +13,7 @@ export default class extends HTMLElement {
     if (e.detail.formSubmission?.formElement?.method === 'get') return
     if (this.dataset.closeAfterSubmit === 'false') return
     if (e.detail.formSubmission?.formElement?.dataset?.closeOnSubmit === 'false') return
+    if (e.detail.formSubmission?.formElement?.closest('native-event[data-on="submit"]')) return
 
     window.webkit?.messageHandlers?.modal?.postMessage({ action: 'submitted' })
   }