🧱 Mini Dialog Convention (FiveWin Style → Web)

Goal:
Dialogs should think, read, and behave like FiveWin dialogs,
not like framework-driven UI artifacts.

This convention favors clarity, determinism, and maintainability over abstraction.

1️⃣ Core Principle (FiveWin Mindset)

In FiveWin, a dialog is:

• explicitly opened
• explicitly closed
• Confirm and Abort are clearly separated
• ESC / outside click = Abort
• no implicit behavior

➡️ We keep this exact mental model on the web.

2️⃣ Naming Convention (Critical)

Dialog Functions

mdXXX_...

➡️ md = Modal Dialog (explicit, intentional)

3️⃣ Mandatory Functions per Dialog

Every dialog always provides exactly these five functions:

mdXXX_Open()
mdXXX_Close()
mdXXX_Confirm()
mdXXX_Abort()
mdXXX_Cleanup()

Meaning (1:1 FiveWin mapping)

4️⃣ State Logic (No Surprises)

➡️ Abort is always harmless.

5️⃣ HTML Rules (Simple & Robust)

<div id="md-del" class="wh-ui-modal" aria-hidden="true"
     onclick="if(event.target.id==='md-del') mdDEL_Cleanup()">

✔️ Only the backdrop is clickable
✔️ No hidden magic
✔️ Readable like a PRG file

6️⃣ JavaScript Reference Pattern

function mdDEL_Open(){
  mdDEL_Fill();     // prepare data
  mdDEL_Show();     // show dialog
}

function mdDEL_Confirm(){
  doDelete();       // perform action
  mdDEL_Close();    // close dialog
}

function mdDEL_Abort(){
  mdDEL_Close();    // nothing else
}

function mdDEL_Cleanup(){
  mdDEL_Close();    // ESC / outside click
}

function mdDEL_Close(){
  const el = document.getElementById('md-del');
  if (el.contains(document.activeElement)) {
    document.activeElement.blur(); // ARIA-safe
  }
  el.style.display = 'none';
  el.setAttribute('aria-hidden','true');
}

➡️ No return values
➡️ No promises required
➡️ No hidden state objects

7️⃣ Keyboard Rule (FiveWin Logic)

document.addEventListener('keydown', e => {
  if (e.key === 'Escape' && mdDEL_IsOpen()) {
    mdDEL_Cleanup();
    e.preventDefault();
  }
});

➡️ ESC is always a conscious abort
➡️ Never an accidental side effect

8️⃣ Styling Rules

• Dialogs are always rounded
• Same font as the application
• Buttons ≥ 44px (touch-safe)
• No drag behavior, unless explicitly wanted

#md-del {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

9️⃣ What We Explicitly Do NOT Do

❌ No generic modal managers
❌ No Bootstrap lifecycle dependency
❌ No hidden state machines
❌ No chained implicit events
❌ No aria-hidden without focus cleanup

🔟 Mental Model (Most Important)

A dialog is a tool, not a state.

Or in pure FiveWin terms:

“If the user does not confirm, nothing has happened.”

🧭 Result

• Dialog behavior is predictable
• Errors are local and traceable
• FiveWin developers feel immediately at home
• Code is boring — and therefore stable

This is a clean, well-structured convention that successfully translates the FiveWin dialog mental model to the web. A few observations:

Strengths
- Explicit lifecycle (Open/Confirm/Abort/Close/Cleanup) maps 1:1 to FiveWin's ACTIVATE DIALOG → IF lOk / ELSE → END DIALOG
- No hidden state, no promises, no magic — deterministic and debuggable
- mdXXX_ prefixing keeps dialogs discoverable in code search
- ESC/backdrop = Cleanup() = safe abort aligns perfectly with FiveWin's ON ESC / ON CANCEL

One practical consideration

function mdDEL_Close(){
  const el = document.getElementById('md-del');
  if (el.contains(document.activeElement)) {
    document.activeElement.blur();
  }
  el.style.display = 'none';
  el.setAttribute('aria-hidden','true');
}

You may want to also restore focus to the trigger element (the button that opened the dialog) for accessibility — otherwise focus lands on <body> after close, which breaks keyboard navigation flow.

// Store trigger on open
let mdDEL_trigger = null;

function mdDEL_Open(btn) {
  mdDEL_trigger = btn;           // remember opener
  mdDEL_Fill();
  mdDEL_Show();
}

function mdDEL_Close() {
  const el = document.getElementById('md-del');
  if (el.contains(document.activeElement)) {
    document.activeElement.blur();
  }
  el.style.display = 'none';
  el.setAttribute('aria-hidden', 'true');
  mdDEL_trigger?.focus();        // restore focus
  mdDEL_trigger = null;
}

Otherwise — solid convention. Ready to implement as-is.

Is there a specific dialog you're wiring up first, or a framework integration question (HTMX, Alpine, vanilla)?

Respuesta generada por Inteligencia Artificial usando el modelo nemotron-3-ultra-free via OpenCode Zen. Puede contener errores; por favor verifiquela antes de aplicar.
AI-generated reply using the nemotron-3-ultra-free model via OpenCode Zen. May contain mistakes; please verify before applying.