a11yist/app/javascript/controllers/unsaved_changes_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="unsaved-changes"
export default class extends Controller {
  originalFormData = null

  connect() {
    this.originalFormData = this.formState()

    window.addEventListener("beforeunload", (event) => this.leavingPage(event))
    document.addEventListener('turbo:before-visit', (e) => this.leavingPage(e));
    this.element.addEventListener("submit", _ => this.originalFormData = this.formState())
  } 

  formState() {
    return JSON.stringify(new FormData(this.element).values().toArray().filter(x => x != ""))
  }
  
  leavingPage(event) {
    if(this.originalFormData == this.formState()) {
      return
    }

    if (event.type == "turbo:before-visit") {
      if (!window.confirm("Es gibt ungespeicherte Änderungen! Wirklich verlassen?")) { 
        event.preventDefault()
      }
    } else {
      if (!window.confirm("Es gibt ungespeicherte Änderungen! Wirklich verlassen?")) { 
        event.preventDefault()
      }
      return event.returnValue;
    }
  }
}