Mini Dialog Convention (FiveWin Style → Web)

[Otto]

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.

--- 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.

--- Naming Convention (Critical) Dialog Functions

Code: Select all | Expand

mdXXX_...

PurposeExample BookingmdBOOK_... DeletemdDEL_... SavemdSAVE_... WarningmdWARN_... InfomdINFO_...

md = Modal Dialog (explicit, intentional)

--- Mandatory Functions per Dialog

Every dialog always provides exactly these five functions:

Code: Select all | Expand

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

Meaning (1:1 FiveWin mapping) FunctionFiveWin Equivalent OpenACTIVATE DIALOG ConfirmIF lOk AbortELSE CloseEND DIALOG CleanupON ESC / ON CANCEL --- State Logic (No Surprises) User ActionResult ConfirmExecute action → Close() AbortDo nothing → Close() ESCAlways Cleanup() Backdrop clickAlways Cleanup()

Abort is always harmless.

--- HTML Rules (Simple & Robust)

Code: Select all | Expand

<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

--- JavaScript Reference Pattern

Code: Select all | Expand

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

--- Keyboard Rule (FiveWin Logic)

Code: Select all | Expand

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

--- Styling Rules

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

Code: Select all | Expand

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

--- 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

[AiBot]

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**

```js
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 `` after close, which breaks keyboard navigation flow.

```js
// 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.