amitwh/markdown-converter
1
0
Fork 0
mirror of https://github.com/amitwh/markdown-converter.git synced 2026-08-02 10:00:17 +05:30
Code Issues Packages Projects Releases Wiki Activity
Files
31468e77c5f873113516b2b21f1eb0860f3df869
markdown-converter/docs/plans/2026-03-24-modal-system.md
T

1215 lines
33 KiB
Markdown
Raw Blame History

# Modal System Implementation Plan
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
**Goal:** Replace existing dialog implementations with a unified modal system providing glassmorphism backdrop, full accessibility, and smooth animations.
**Architecture:** Single `ModalManager` class manages all modals with focus trap, keyboard handling, and dynamic backdrop. All 10 dialogs convert to unified HTML structure with new CSS classes.
**Tech Stack:** Vanilla JavaScript, CSS custom properties (design tokens), no external dependencies
---
## Task 1: Create ModalManager Class
**Files:**
- Create: `src/utils/ModalManager.js`
**Step 1: Create utils directory and ModalManager class**
```javascript
/**
* ModalManager - Unified modal system with accessibility support
* @version 4.0.0
*/
export class ModalManager {
#modal;
#backdrop;
#options;
#lastFocusedElement;
#focusableElements;
#eventListeners;
#isOpen;
static #openModals = [];
constructor(element, options = {}) {
this.#modal = typeof element === 'string' ? document.querySelector(element) : element;
this.#options = {
closeOnBackdrop: true,
closeOnEscape: true,
focusFirst: true,
onOpen: null,
onClose: null,
...options
};
this.#isOpen = false;
this.#eventListeners = [];
this.#init();
}
#init() {
// Ensure modal has required attributes
if (!this.#modal.hasAttribute('role')) {
this.#modal.setAttribute('role', 'dialog');
}
if (!this.#modal.hasAttribute('aria-modal')) {
this.#modal.setAttribute('aria-modal', 'true');
}
// Find or create backdrop
this.#backdrop = this.#modal.querySelector('.modal-backdrop');
// Setup close triggers
this.#setupCloseTriggers();
}
#setupCloseTriggers() {
// Close button
const closeBtn = this.#modal.querySelector('.modal-close');
if (closeBtn) {
const handler = (e) => {
e.preventDefault();
this.close();
};
closeBtn.addEventListener('click', handler);
this.#eventListeners.push({ el: closeBtn, type: 'click', handler });
}
// Elements with data-close attribute
const closeTriggers = this.#modal.querySelectorAll('[data-close]');
closeTriggers.forEach(el => {
if (el.classList.contains('modal-backdrop') && !this.#options.closeOnBackdrop) {
return;
}
const handler = (e) => {
e.preventDefault();
this.close();
};
el.addEventListener('click', handler);
this.#eventListeners.push({ el, type: 'click', handler });
});
}
#getFocusableElements() {
const selector = [
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
'a[href]',
'[tabindex]:not([tabindex="-1"])'
].join(', ');
return Array.from(this.#modal.querySelectorAll(selector))
.filter(el => el.offsetParent !== null && !el.classList.contains('modal-backdrop'));
}
#trapFocus(e) {
if (e.key !== 'Tab') return;
const focusable = this.#getFocusableElements();
if (focusable.length === 0) return;
const firstEl = focusable[0];
const lastEl = focusable[focusable.length - 1];
if (e.shiftKey) {
if (document.activeElement === firstEl) {
e.preventDefault();
lastEl.focus();
}
} else {
if (document.activeElement === lastEl) {
e.preventDefault();
firstEl.focus();
}
}
}
#handleKeydown(e) {
if (e.key === 'Escape' && this.#options.closeOnEscape) {
e.preventDefault();
this.close();
}
this.#trapFocus(e);
}
open() {
if (this.#isOpen) return;
// Store last focused element
this.#lastFocusedElement = document.activeElement;
// Track open modals
ModalManager.#openModals.push(this);
// Show modal
this.#modal.classList.add('open');
this.#isOpen = true;
// Prevent body scroll
document.body.style.overflow = 'hidden';
// Add keyboard listener
const keydownHandler = (e) => this.#handleKeydown(e);
document.addEventListener('keydown', keydownHandler);
this.#eventListeners.push({ el: document, type: 'keydown', handler: keydownHandler });
// Focus first element
if (this.#options.focusFirst) {
requestAnimationFrame(() => {
const focusable = this.#getFocusableElements();
if (focusable.length > 0) {
focusable[0].focus();
}
});
}
// Callback
if (this.#options.onOpen) {
this.#options.onOpen(this);
}
// Dispatch custom event
this.#modal.dispatchEvent(new CustomEvent('modal:open'));
}
close() {
if (!this.#isOpen) return;
// Remove from open modals
const index = ModalManager.#openModals.indexOf(this);
if (index > -1) {
ModalManager.#openModals.splice(index, 1);
}
// Hide modal
this.#modal.classList.remove('open');
this.#isOpen = false;
// Restore body scroll if no modals open
if (ModalManager.#openModals.length === 0) {
document.body.style.overflow = '';
}
// Remove keyboard listener
const keydownListener = this.#eventListeners.find(
l => l.el === document && l.type === 'keydown'
);
if (keydownListener) {
document.removeEventListener('keydown', keydownListener.handler);
this.#eventListeners = this.#eventListeners.filter(l => l !== keydownListener);
}
// Restore focus
if (this.#lastFocusedElement && typeof this.#lastFocusedElement.focus === 'function') {
this.#lastFocusedElement.focus();
}
// Callback
if (this.#options.onClose) {
this.#options.onClose(this);
}
// Dispatch custom event
this.#modal.dispatchEvent(new CustomEvent('modal:close'));
}
isOpen() {
return this.#isOpen;
}
destroy() {
// Close if open
if (this.#isOpen) {
this.close();
}
// Remove all event listeners
this.#eventListeners.forEach(({ el, type, handler }) => {
el.removeEventListener(type, handler);
});
this.#eventListeners = [];
}
}
// Export for use in renderer
window.ModalManager = ModalManager;
```
**Step 2: Commit ModalManager**
```bash
git add src/utils/ModalManager.js
git commit -m "feat: add ModalManager class for unified modal system"
```
---
## Task 2: Create Modal CSS Styles
**Files:**
- Create: `src/styles/modal.css`
**Step 1: Create modal.css with glassmorphism styles**
```css
/**
* Modal System Styles
* Unified modal components with glassmorphism backdrop
* @version 4.0.0
*/
/* ============================================
* Modal Backdrop - Glassmorphism
* ============================================ */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: var(--z-modal, 200);
cursor: pointer;
}
/* ============================================
* Modal Container
* ============================================ */
.modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: calc(var(--z-modal, 200) + 1);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
visibility var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1));
padding: var(--spacing-4, 1rem);
}
.modal.open {
opacity: 1;
visibility: visible;
}
/* ============================================
* Modal Content - With Animation
* ============================================ */
.modal-content {
background: hsl(var(--background, 0 0% 100%));
border-radius: var(--radius-lg, 0.5rem);
box-shadow: var(--shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
max-width: 90vw;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
transform: scale(0.95);
transition: transform var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1));
}
.modal.open .modal-content {
transform: scale(1);
}
/* ============================================
* Modal Header
* ============================================ */
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
border-bottom: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
background: hsl(var(--muted, 210 40% 96.1%));
}
.modal-header h3 {
margin: 0;
font-size: var(--text-lg, 1.125rem);
font-weight: var(--font-semibold, 600);
color: hsl(var(--foreground, 222.2 84% 4.9%));
}
/* ============================================
* Modal Close Button
* ============================================ */
.modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: var(--radius, 0.5rem);
background: transparent;
color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%));
font-size: 24px;
line-height: 1;
cursor: pointer;
transition: background-color var(--transition-fast, 150ms),
color var(--transition-fast, 150ms);
}
.modal-close:hover {
background: hsl(var(--accent, 210 40% 96.1%));
color: hsl(var(--foreground, 222.2 84% 4.9%));
}
.modal-close:focus-visible {
outline: 2px solid hsl(var(--ring, 227 44% 52%));
outline-offset: 2px;
}
/* ============================================
* Modal Body
* ============================================ */
.modal-body {
padding: var(--spacing-6, 1.5rem);
overflow-y: auto;
flex: 1;
}
/* ============================================
* Modal Footer
* ============================================ */
.modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--spacing-3, 0.75rem);
padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
border-top: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
background: hsl(var(--muted, 210 40% 96.1%));
}
.modal-footer .btn {
min-width: 80px;
}
/* ============================================
* Form Elements within Modal
* ============================================ */
.modal-body .form-row {
display: flex;
align-items: center;
gap: var(--spacing-3, 0.75rem);
margin-bottom: var(--spacing-3, 0.75rem);
}
.modal-body .form-row label {
min-width: 100px;
font-size: var(--text-sm, 0.875rem);
color: hsl(var(--foreground, 222.2 84% 4.9%));
}
.modal-body .form-row input,
.modal-body .form-row select {
flex: 1;
padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
border: 1px solid hsl(var(--input, 214.3 31.8% 91.4%));
border-radius: var(--radius, 0.5rem);
font-size: var(--text-sm, 0.875rem);
background: hsl(var(--background, 0 0% 100%));
color: hsl(var(--foreground, 222.2 84% 4.9%));
}
.modal-body .form-row input:focus,
.modal-body .form-row select:focus {
outline: 2px solid hsl(var(--ring, 227 44% 52%));
outline-offset: 1px;
}
.modal-body .export-section {
margin-bottom: var(--spacing-4, 1rem);
padding-bottom: var(--spacing-4, 1rem);
border-bottom: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
}
.modal-body .export-section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.modal-body .export-section label {
display: block;
font-weight: var(--font-medium, 500);
margin-bottom: var(--spacing-2, 0.5rem);
color: hsl(var(--foreground, 222.2 84% 4.9%));
}
.modal-body .checkbox-group label {
display: flex;
align-items: center;
gap: var(--spacing-2, 0.5rem);
margin-bottom: var(--spacing-2, 0.5rem);
font-weight: var(--font-normal, 400);
cursor: pointer;
}
/* ============================================
* Size Variants
* ============================================ */
.modal-content.small {
max-width: 400px;
}
.modal-content.large {
max-width: 800px;
}
.modal-content.full {
max-width: 95vw;
max-height: 95vh;
}
/* ============================================
* Dark Mode Support
* ============================================ */
.dark .modal-content,
[data-theme="dark"] .modal-content {
background: hsl(var(--background));
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}
.dark .modal-header,
.dark .modal-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
background: hsl(var(--muted));
}
/* ============================================
* Accessibility - Reduced Motion
* ============================================ */
@media (prefers-reduced-motion: reduce) {
.modal,
.modal-content {
transition: none;
}
}
/* ============================================
* Legacy Support - Hidden class
* ============================================ */
.modal.hidden {
display: none;
}
```
**Step 2: Commit modal.css**
```bash
git add src/styles/modal.css
git commit -m "feat: add modal CSS with glassmorphism and animations"
```
---
## Task 3: Include Modal CSS in HTML
**Files:**
- Modify: `src/index.html` (line ~18)
**Step 1: Add modal.css link after tokens.css**
Find this line in `src/index.html`:
```html
<link rel="stylesheet" href="styles/tokens.css">
```
Add after it:
```html
<link rel="stylesheet" href="styles/modal.css">
```
**Step 2: Commit**
```bash
git add src/index.html
git commit -m "feat: include modal.css in index.html"
```
---
## Task 4: Include ModalManager in HTML
**Files:**
- Modify: `src/index.html` (near end of body, before renderer.js)
**Step 1: Add script tag for ModalManager**
Find the script tags near the end of body and add before renderer.js:
```html
<script src="utils/ModalManager.js"></script>
```
**Step 2: Commit**
```bash
git add src/index.html
git commit -m "feat: include ModalManager script in index.html"
```
---
## Task 5: Convert Find Dialog
**Files:**
- Modify: `src/index.html` (lines 160-174)
- Modify: `src/renderer.js` (find dialog handlers)
**Step 1: Update HTML structure**
Replace the find-dialog div (lines 160-174) with:
```html
<!-- Find & Replace Dialog -->
<div id="find-dialog" class="modal" role="dialog" aria-modal="true" aria-labelledby="find-dialog-title">
<div class="modal-backdrop" data-close></div>
<div class="modal-content small">
<div class="modal-header">
<h3 id="find-dialog-title">Find & Replace</h3>
<button class="modal-close" id="btn-find-close" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<div class="find-controls">
<input type="text" id="find-input" placeholder="Find..." class="input">
<input type="text" id="replace-input" placeholder="Replace..." class="input">
</div>
<div class="find-buttons" style="display: flex; gap: 8px; margin-top: 8px;">
<button id="btn-find-prev" class="btn btn-secondary" title="Previous">↑</button>
<button id="btn-find-next" class="btn btn-secondary" title="Next">↓</button>
<button id="btn-replace" class="btn btn-secondary" title="Replace">Replace</button>
<button id="btn-replace-all" class="btn btn-secondary" title="Replace All">All</button>
</div>
</div>
<div class="modal-footer">
<span id="find-count" style="flex: 1; color: hsl(var(--muted-foreground));">0 matches</span>
</div>
</div>
</div>
```
**Step 2: Add CSS for find controls in modal.css**
Append to `src/styles/modal.css`:
```css
/* ============================================
* Find Dialog Specific
* ============================================ */
.find-controls {
display: flex;
flex-direction: column;
gap: var(--spacing-2, 0.5rem);
}
.find-controls input {
width: 100%;
}
```
**Step 3: Update renderer.js to use ModalManager**
Find the find dialog show/hide code and replace with ModalManager usage.
Add near top of renderer.js (after DOMContentLoaded):
```javascript
// Initialize ModalManager for find dialog
let findModal = null;
document.addEventListener('DOMContentLoaded', () => {
findModal = new ModalManager('#find-dialog');
// ... rest of initialization
});
```
Replace show/hide calls:
```javascript
// Old: document.getElementById('find-dialog').classList.remove('hidden');
// New:
findModal.open();
// Old: document.getElementById('find-dialog').classList.add('hidden');
// New:
findModal.close();
```
**Step 4: Commit**
```bash
git add src/index.html src/renderer.js src/styles/modal.css
git commit -m "feat: convert find dialog to unified modal system"
```
---
## Task 6: Convert Export Dialog
**Files:**
- Modify: `src/index.html` (lines 176-337)
- Modify: `src/renderer.js` (export dialog handlers)
**Step 1: Update HTML structure**
Replace the export-dialog div with new modal structure. Keep all the internal content, just wrap in modal classes:
```html
<!-- Export Options Dialog -->
<div id="export-dialog" class="modal" role="dialog" aria-modal="true" aria-labelledby="export-dialog-title">
<div class="modal-backdrop" data-close></div>
<div class="modal-content large">
<div class="modal-header">
<h3 id="export-dialog-title">Export Options</h3>
<button class="modal-close" id="export-dialog-close" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<!-- Keep ALL existing content from export-dialog-body here -->
</div>
<div class="modal-footer">
<button id="export-cancel" class="btn btn-secondary" data-close>Cancel</button>
<button id="export-confirm" class="btn btn-primary">Export</button>
</div>
</div>
</div>
```
**Step 2: Update renderer.js**
```javascript
// Initialize export modal
let exportModal = null;
// In DOMContentLoaded:
exportModal = new ModalManager('#export-dialog');
// Replace showExportDialog function:
function showExportDialog(format) {
console.log('showExportDialog called with format:', format);
const title = document.getElementById('export-dialog-title');
title.textContent = `Export as ${format.toUpperCase()}`;
document.getElementById('export-dialog').setAttribute('data-format', format);
initializeExportForm(format);
exportModal.open();
}
// Replace hideExportDialog function:
function hideExportDialog() {
exportModal.close();
currentExportFormat = null;
}
```
**Step 3: Remove old event listeners**
Remove the manual click and escape key handlers for export-dialog since ModalManager handles them.
**Step 4: Commit**
```bash
git add src/index.html src/renderer.js
git commit -m "feat: convert export dialog to unified modal system"
```
---
## Task 7: Convert Print Preview Dialog
**Files:**
- Modify: `src/index.html` (lines 339-420)
- Modify: `src/renderer.js`
**Step 1: Update HTML structure**
```html
<!-- Print Preview Dialog -->
<div id="print-preview-overlay" class="modal" role="dialog" aria-modal="true" aria-labelledby="print-preview-title">
<div class="modal-backdrop" data-close></div>
<div class="modal-content full">
<div class="modal-header">
<h3 id="print-preview-title">Print Preview</h3>
<button class="modal-close" id="print-preview-close" aria-label="Close">&times;</button>
</div>
<div class="modal-body print-preview-body">
<!-- Keep existing print preview content -->
</div>
</div>
</div>
```
**Step 2: Update renderer.js**
```javascript
let printPreviewModal = null;
// In DOMContentLoaded:
printPreviewModal = new ModalManager('#print-preview-overlay');
function openPrintPreviewDialog() {
printPreviewModal.open();
// ... rest of existing logic
}
```
**Step 3: Commit**
```bash
git add src/index.html src/renderer.js
git commit -m "feat: convert print preview dialog to unified modal system"
```
---
## Task 8: Convert Table Generator Dialog
**Files:**
- Modify: `src/index.html` (lines 422-471)
- Modify: `src/renderer.js`
**Step 1: Update HTML structure**
```html
<!-- Table Generator Dialog -->
<div id="table-generator-dialog" class="modal" role="dialog" aria-modal="true" aria-labelledby="table-dialog-title">
<div class="modal-backdrop" data-close></div>
<div class="modal-content">
<div class="modal-header">
<h3 id="table-dialog-title">Table Generator</h3>
<button class="modal-close" id="table-dialog-close" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<!-- Keep existing table generator content -->
</div>
<div class="modal-footer">
<button id="table-dialog-cancel" class="btn btn-secondary" data-close>Cancel</button>
<button id="table-dialog-insert" class="btn btn-primary">Insert Table</button>
</div>
</div>
</div>
```
**Step 2: Update renderer.js**
```javascript
let tableModal = null;
// In DOMContentLoaded:
tableModal = new ModalManager('#table-generator-dialog');
```
**Step 3: Commit**
```bash
git add src/index.html src/renderer.js
git commit -m "feat: convert table generator dialog to unified modal system"
```
---
## Task 9: Convert ASCII Art Dialog
**Files:**
- Modify: `src/index.html` (lines 473-582)
- Modify: `src/renderer.js`
**Step 1: Update HTML structure**
```html
<!-- ASCII Art Generator Dialog -->
<div id="ascii-art-dialog" class="modal" role="dialog" aria-modal="true" aria-labelledby="ascii-dialog-title">
<div class="modal-backdrop" data-close></div>
<div class="modal-content large">
<div class="modal-header">
<h3 id="ascii-dialog-title">ASCII Art Generator</h3>
<button class="modal-close" id="ascii-dialog-close" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<!-- Keep existing ASCII art content -->
</div>
<div class="modal-footer">
<button id="ascii-dialog-cancel" class="btn btn-secondary" data-close>Cancel</button>
<button id="ascii-dialog-insert" class="btn btn-primary">Insert ASCII Art</button>
</div>
</div>
</div>
```
**Step 2: Update renderer.js**
```javascript
let asciiModal = null;
// In DOMContentLoaded:
asciiModal = new ModalManager('#ascii-art-dialog');
```
**Step 3: Commit**
```bash
git add src/index.html src/renderer.js
git commit -m "feat: convert ASCII art dialog to unified modal system"
```
---
## Task 10: Convert Universal Converter Dialog
**Files:**
- Modify: `src/index.html` (lines 584-810)
- Modify: `src/renderer.js`
**Step 1: Update HTML structure**
```html
<!-- Universal File Converter Dialog -->
<div id="universal-converter-dialog" class="modal" role="dialog" aria-modal="true" aria-labelledby="converter-dialog-title">
<div class="modal-backdrop" data-close></div>
<div class="modal-content large">
<div class="modal-header">
<h3 id="converter-dialog-title">Universal File Converter</h3>
<button class="modal-close" id="converter-dialog-close" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<!-- Keep existing converter content -->
</div>
<div class="modal-footer">
<button id="converter-dialog-cancel" class="btn btn-secondary" data-close>Cancel</button>
<button id="converter-dialog-convert" class="btn btn-primary">Convert</button>
</div>
</div>
</div>
```
**Step 2: Update renderer.js**
```javascript
let converterModal = null;
// In DOMContentLoaded:
converterModal = new ModalManager('#universal-converter-dialog');
```
**Step 3: Commit**
```bash
git add src/index.html src/renderer.js
git commit -m "feat: convert universal converter dialog to unified modal system"
```
---
## Task 11: Convert Batch Dialog
**Files:**
- Modify: `src/index.html` (lines 812-879)
- Modify: `src/renderer.js`
**Step 1: Update HTML structure**
```html
<!-- Batch Conversion Dialog -->
<div id="batch-dialog" class="modal" role="dialog" aria-modal="true" aria-labelledby="batch-dialog-title">
<div class="modal-backdrop" data-close></div>
<div class="modal-content large">
<div class="modal-header">
<h3 id="batch-dialog-title">Batch Conversion</h3>
<button class="modal-close" id="batch-dialog-close" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<!-- Keep existing batch content -->
</div>
<div class="modal-footer">
<button id="batch-dialog-cancel" class="btn btn-secondary" data-close>Cancel</button>
<button id="batch-dialog-start" class="btn btn-primary">Start Conversion</button>
</div>
</div>
</div>
```
**Step 2: Update renderer.js**
```javascript
let batchModal = null;
// In DOMContentLoaded:
batchModal = new ModalManager('#batch-dialog');
// Replace showBatchDialog:
function showBatchDialog() {
batchModal.open();
}
// Replace hideBatchDialog:
function hideBatchDialog() {
batchModal.close();
}
```
**Step 3: Commit**
```bash
git add src/index.html src/renderer.js
git commit -m "feat: convert batch dialog to unified modal system"
```
---
## Task 12: Convert PDF Editor Dialog
**Files:**
- Modify: `src/index.html` (lines 881-1274)
- Modify: `src/renderer.js`
**Step 1: Update HTML structure**
```html
<!-- PDF Editor Dialog -->
<div id="pdf-editor-dialog" class="modal" role="dialog" aria-modal="true" aria-labelledby="pdf-editor-title">
<div class="modal-backdrop" data-close></div>
<div class="modal-content full">
<div class="modal-header">
<h3 id="pdf-editor-title">PDF Editor</h3>
<button class="modal-close" id="pdf-editor-dialog-close" aria-label="Close">&times;</button>
</div>
<div class="modal-body pdf-editor-body">
<!-- Keep existing PDF editor content -->
</div>
<div class="modal-footer">
<button id="pdf-editor-cancel" class="btn btn-secondary" data-close>Cancel</button>
<button id="pdf-editor-process" class="btn btn-primary">Process PDF</button>
</div>
</div>
</div>
```
**Step 2: Update renderer.js**
```javascript
let pdfEditorModal = null;
// In DOMContentLoaded:
pdfEditorModal = new ModalManager('#pdf-editor-dialog');
```
**Step 3: Commit**
```bash
git add src/index.html src/renderer.js
git commit -m "feat: convert PDF editor dialog to unified modal system"
```
---
## Task 13: Convert Header & Footer Dialog
**Files:**
- Modify: `src/index.html` (lines 1276-1368)
- Modify: `src/renderer.js`
**Step 1: Update HTML structure**
```html
<!-- Header & Footer Configuration Dialog -->
<div id="header-footer-dialog" class="modal" role="dialog" aria-modal="true" aria-labelledby="header-footer-title">
<div class="modal-backdrop" data-close></div>
<div class="modal-content">
<div class="modal-header">
<h3 id="header-footer-title">Header & Footer Configuration</h3>
<button class="modal-close" id="header-footer-close" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<!-- Keep existing header/footer content -->
</div>
<div class="modal-footer">
<button id="header-footer-cancel" class="btn btn-secondary" data-close>Cancel</button>
<button id="header-footer-save" class="btn btn-primary">Save</button>
</div>
</div>
</div>
```
**Step 2: Update renderer.js**
```javascript
let headerFooterModal = null;
// In DOMContentLoaded:
headerFooterModal = new ModalManager('#header-footer-dialog');
```
**Step 3: Commit**
```bash
git add src/index.html src/renderer.js
git commit -m "feat: convert header & footer dialog to unified modal system"
```
---
## Task 14: Convert Field Picker Dialog
**Files:**
- Modify: `src/index.html` (lines 1370-1440)
- Modify: `src/renderer.js`
**Step 1: Update HTML structure**
```html
<!-- Dynamic Field Picker Dialog -->
<div id="field-picker-dialog" class="modal" role="dialog" aria-modal="true" aria-labelledby="field-picker-title">
<div class="modal-backdrop" data-close></div>
<div class="modal-content small">
<div class="modal-header">
<h3 id="field-picker-title">Insert Field</h3>
<button class="modal-close" id="field-picker-close" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<!-- Keep existing field picker content -->
</div>
</div>
</div>
```
**Step 2: Update renderer.js**
```javascript
let fieldPickerModal = null;
// In DOMContentLoaded:
fieldPickerModal = new ModalManager('#field-picker-dialog');
```
**Step 3: Commit**
```bash
git add src/index.html src/renderer.js
git commit -m "feat: convert field picker dialog to unified modal system"
```
---
## Task 15: Remove Old Dialog CSS
**Files:**
- Modify: `src/styles.css`
**Step 1: Remove old .export-dialog, .batch-dialog, .find-dialog CSS**
Find and remove these sections from `src/styles.css`:
- `.find-dialog` and related selectors (lines ~1244-1328)
- `.export-dialog` and related selectors (lines ~1332-1540)
- `.batch-dialog` and related selectors
**Step 2: Commit**
```bash
git add src/styles.css
git commit -m "refactor: remove old dialog CSS in favor of unified modal system"
```
---
## Task 16: Test All Modals
**Step 1: Run the application**
```bash
npm start
```
**Step 2: Verify each modal**
- [ ] Find dialog (Ctrl+F) - opens/closes, focus trap works
- [ ] Export dialog (Ctrl+E or File > Export) - all options visible
- [ ] Print preview (Ctrl+P) - renders correctly
- [ ] Table generator - inserts table
- [ ] ASCII art - generates art
- [ ] Universal converter - file selection works
- [ ] Batch conversion - file list works
- [ ] PDF editor - opens PDF
- [ ] Header & footer - saves settings
- [ ] Field picker - inserts fields
**Step 3: Test accessibility**
- [ ] Tab cycles within open modal
- [ ] Escape closes modal
- [ ] Click backdrop closes modal
- [ ] Focus returns to trigger element after close
---
## Task 17: Build Windows Release
**Files:**
- Run: build command
**Step 1: Build release**
```bash
npm run build:win
```
**Step 2: Verify artifacts**
```bash
ls -la dist/*.exe
```
Expected output:
- `dist/MarkdownConverter-Setup-4.0.0.exe`
- `dist/MarkdownConverter-4.0.0-x64.exe`
**Step 3: Final commit with version bump if needed**
```bash
git add -A
git commit -m "release: v4.0.0 with unified modal system"
git push origin master
```
---
## Summary
| Task | Description | Files Modified |
|------|-------------|----------------|
| 1 | Create ModalManager class | `src/utils/ModalManager.js` |
| 2 | Create modal CSS | `src/styles/modal.css` |
| 3 | Include modal CSS | `src/index.html` |
| 4 | Include ModalManager script | `src/index.html` |
| 5 | Convert find dialog | `src/index.html`, `src/renderer.js` |
| 6 | Convert export dialog | `src/index.html`, `src/renderer.js` |
| 7 | Convert print preview | `src/index.html`, `src/renderer.js` |
| 8 | Convert table generator | `src/index.html`, `src/renderer.js` |
| 9 | Convert ASCII art | `src/index.html`, `src/renderer.js` |
| 10 | Convert universal converter | `src/index.html`, `src/renderer.js` |
| 11 | Convert batch dialog | `src/index.html`, `src/renderer.js` |
| 12 | Convert PDF editor | `src/index.html`, `src/renderer.js` |
| 13 | Convert header/footer | `src/index.html`, `src/renderer.js` |
| 14 | Convert field picker | `src/index.html`, `src/renderer.js` |
| 15 | Remove old CSS | `src/styles.css` |
| 16 | Test all modals | - |
| 17 | Build release | - |
Reference in New Issue View Git Blame Copy Permalink