🧱 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