Merge branch 'issue-15068' into production.panel.sutty.nl

app/javascript/controllers/unsaved_changes_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  connect() {
+    this.originalFormData = new FormData(this.element);
+    this.originalFormDataSerialized = this.serializeFormData(this.originalFormData);
+    this.submitting = false;
+  }
+
+  submit(event) {
+    this.submitting = true;
+  }
+
+  unsaved(event) {
+    if (this.submitting) return;
+    if (!this.hasChanged()) return;
+
+    this.submitting = false;
+
+    event.preventDefault();
+
+    event.returnValue = true;
+  }
+
+  unsavedTurbolinks(event) {
+    if (this.submitting) return;
+    if (!this.hasChanged()) return;
+
+    this.submitting = false;
+
+    if (window.confirm(this.element.dataset.unsavedChangesConfirmValue)) return;
+
+    event.preventDefault();
+  }
+
+  serializeFormData(formData) {
+    formData.delete("authenticity_token");
+
+    return (new URLSearchParams(formData)).toString();;
+  }
+
+  hasChanged() {
+    return (this.originalFormDataSerialized !== this.serializeFormData(new FormData(this.element)));
+  }
+}

app/views/posts/_form.haml

@@ -33,7 +33,7 @@
 - dir = t("locales.#{@locale}.dir")
 
 -# Comienza el formulario
-= form_tag url, method: method, class: "form post #{extra_class}", multipart: true do
+= form_tag url, method: method, class: "form post #{extra_class}", multipart: true, data: { controller: 'unsaved-changes', action: 'unsaved-changes#submit beforeunload@window->unsaved-changes#unsaved turbolinks:before-visit@window->unsaved-changes#unsavedTurbolinks', 'unsaved-changes-confirm-value': t('.confirm') } do
   -# Botones de guardado
   = render 'posts/submit', site: site, post: post
 

config/locales/en.yml

@@ -816,6 +816,7 @@ en:
     destroy: Delete
     confirm_destroy: Are you sure?
     form:
+      confirm: "You have unsaved changes and changing pages may lose them, continue anyway?"
       errors:
         title: There are some errors on the form
         help: Please, verify that all values are correct.

config/locales/es.yml

@@ -824,6 +824,7 @@ es:
     destroy: Borrar
     confirm_destroy: ¿Estás segure?
     form:
+      confirm: "Tenés cambios sin guardar y cambiar de página podría perderlos, ¿querés continuar de todas formas?"
       errors:
         title: Hay errores en el formulario
         help: Por favor, verifica que todos los valores sean correctos.