impress/app/assets/javascripts/wardrobe/show.js

// Wardrobe v2 - Simple Rails+Turbo outfit editor
//
// This page uses Turbo for instant updates when changing species/color.
// The outfit_viewer Web Component handles the pet rendering.

// Unsaved changes warning: use a MutationObserver to watch the
// data-has-unsaved-changes attribute on the wardrobe container. This is more
// robust than event listeners because it works regardless of how the DOM is
// updated (Turbo morph, direct manipulation, etc.).
function setupUnsavedChangesObserver() {
  const container = document.querySelector("[data-has-unsaved-changes]");
  if (!container) return;

  function update() {
    if (container.dataset.hasUnsavedChanges === "true") {
      window.onbeforeunload = (e) => {
        e.preventDefault();
        return "";
      };
    } else {
      window.onbeforeunload = null;
    }
  }

  // Set initial state
  update();

  // Watch for attribute changes
  const observer = new MutationObserver(update);
  observer.observe(container, {
    attributes: true,
    attributeFilter: ["data-has-unsaved-changes"],
  });
}

setupUnsavedChangesObserver();