Skip to content

feat: Add Modal History Navigation and Local Development Setup#290

Open
davidjeonai-web wants to merge 3 commits into
CCALI:developfrom
davidjeonai-web:issue-412
Open

feat: Add Modal History Navigation and Local Development Setup#290
davidjeonai-web wants to merge 3 commits into
CCALI:developfrom
davidjeonai-web:issue-412

Conversation

@davidjeonai-web

@davidjeonai-web davidjeonai-web commented May 15, 2026

Copy link
Copy Markdown

🚀 Overview

This PR introduces a modal history navigation (back button functionality) for multi-popup scenarios and significantly improves the local development workflow by adding a dedicated static build setup. These enhancements are strictly additive and introduce no breaking changes to existing functionality.

🛠️ Changes Made

1. Modal History & Back Functionality

  • modal.js:
    • Introduced a modalHistory stack to track content states.
    • Added a historyLength getter and a goBack() method to navigate through previous states.
    • Updated logic to push current content to the stack upon opening and clear the history upon closing to prevent stale content.
  • modal.stache:
    • Implemented a conditional "Back" button in the modal header (rendered when modalHistory.length > 1).
    • Included appropriate ARIA labels for accessibility and a click handler mapped to goBack().
  • modal.less:
    • Added styles for the new .back button, including focus/hover states.
    • Applied Safari-specific outline fixes to ensure consistent accessibility visibility.

2. Local Development Setup

  • package.json: Added a new dev script to streamline local builds and serve files locally (node scripts/build.local.js && npx http-server dist_local).
  • build.viewer.html.js:
    • Refactored the build script to support local builds via a new isLocal parameter.
    • Adjusted template paths using the templatePath variable.
    • Configured the output to target index.html locally rather than the demo folder.
  • README.md: Added a comprehensive "Local Development & Testing" section detailing how to place guide files, use the npm run dev command, and understand current HMR limitations.
  • .gitignore: Added dist_local, index.html, and default to prevent accidental commits of local build artifacts and sample guide files.
  • scripts/ Directory: Added a new directory to house local build utilities and scripts.

🧪 Impact

  • UX Improvement: Users can now smoothly navigate back through previously viewed content in nested popup scenarios.
  • DX Improvement: Developers can easily spin up a local server and test changes in an isolated environment without relying on the production build pipeline.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants