demo · v131

beforetoggle Interceptor

A multi-step wizard dialog that sends close attempts through requestClose(), catches the cancellable cancel event mid-flow, and then logs the final beforetoggle transition when the close is allowed. Instead of a simple dirty-check alert, the dialog slides to an in-dialog confirmation step and lets the user choose: resume or abandon.

event log
—waiting for events…

New Project — Step 1 of 3

1
Details
2
Settings
3
Review

the code

let currentStep = 1;
let showingExitConfirm = false;

cancelButton.addEventListener("click", () => dialog.requestClose("cancel"));

dialog.addEventListener("cancel", (e) => {
  if (!interceptEnabled) return;
  if (currentStep <= 1) return; // step 1 has no data yet

  // Prevent this close request
  e.preventDefault();

  // Instead: show an in-dialog confirmation
  showExitConfirm();
});

dialog.addEventListener("beforetoggle", (e) => {
  console.log(e.oldState, e.newState, e.cancelable);
});

function showExitConfirm() {
  hideAllSteps();
  document.getElementById("step-exit").style.display = "";
  showingExitConfirm = true;
}

resumeBtn.onclick = () => {
  showingExitConfirm = false;
  showStep(currentStep);
};

abandonBtn.onclick = () => {
  showingExitConfirm = false;
  dialog.close("abandon");
};

see also