36 lines
1.1 KiB
JavaScript
36 lines
1.1 KiB
JavaScript
// 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();
|