diff --git a/steps/code-base-overview.html b/steps/code-base-overview.html index 830aeec..1bed23c 100644 --- a/steps/code-base-overview.html +++ b/steps/code-base-overview.html @@ -253,7 +253,8 @@ } /* Hover Interaction for Minimized State */ - #visual-nav-wrapper.shrunk:hover { + /* Only active when the 'interactive' class is added after animation completes */ + #visual-nav-wrapper.shrunk.interactive:hover { transform: scale(0.85); /* Expand to readable size (not quite full to save space) */ opacity: 1; @@ -606,567 +607,178 @@ -
- -
- -
- -

Visual Navigation Map -

- - Click a UI element to see its code - -
- - - -
- - - -
- - - - - - - -
- - - - - - - - - - - -
- - - - - - - - - - - -
- - - - - - - -
- - - -
- - - - Data Explorer & Sidebar - - - -
- - - -
- - - - - - - - - - - -
- - - -
- - - - Radar Visualization Canvas
- - - - (p5.js Render Loop) - - - -
- - - -
- - - - - - - - - - - -
- - - -
- - - - Video Player
- - - - (Sync Engine) - - - -
- - - -
- - - - Speed Graph - - - -
- - - -
- - - -
- - - - - - - - - - - -
- - - -
- - - - Playback Controls & Timeline - - - -
- - - -
- - - -
- - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
- - - - - - - - - - - - - - - -
- - - - - - - -
- - - - - - - - Data Pipeline & Storage - - - - - - - - (Loader/DB) - - - - - - - -
- - - - - - - -
- - - - - - - - - - - - - - - -
- - - + +
+ + +
+
+
+

Visual Navigation Map

+ Click a UI element to see its code +
+ +
+ +
+ +
+ + +
+ + +
+ +
+
+ Data Explorer & Sidebar +
+
+ + +
+
+ Radar Visualization Canvas
+ (p5.js Render Loop) +
+
+ + +
+
+ Video Player
+ (Sync Engine) +
+
+ Speed Graph +
+
+
+ + +
+
+ Playback Controls & Timeline +
+
+
+ + +
+ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+
+ +
+
+ Data Pipeline & Storage + (Loader/DB) +
+
+
+
+ +
+
+
+
+
- - -
- - - + +
+
+

+ Project Files + src/ +

+ +
    +
  • index.html
    • +
  • readme.md
    • - - - -
- -
- - - + +
  • src/ +
      + + +
    • main.js
      • +
    • state.js
      • +
    • constants.js
      • + + +
    • fileLoader.js
      • +
    • fileParsers.js
      • +
    • parser.worker.js
      • +
    • db.js
      • + + +
    • sync.js
      • +
    • utils.js
      • + + +
    • dom.js
      • +
    • ui.js
      • +
    • keyboard.js
      • +
    • dataExplorer.js
      • +
    • session.js
      • +
    • theme.js
      • +
    • modal.js
      • +
    • debug.js
      • + + +
    • drawUtils.js
      • + +
    • p5/ +
        +
      • radarSketch.js
        • +
      • speedGraphSketch.js
        • +
      • zoomSketch.js
        • +
      +
      • +
    +
    • +
    -
    - -
    @@ -1664,34 +1276,103 @@ } } - // Shrink-on-scroll effect - const navWrapper = document.getElementById('visual-nav-wrapper'); - const navPlaceholder = document.getElementById('visual-nav-placeholder'); - const navContent = document.getElementById('visual-nav-content'); + // Shrink-on-scroll effect - window.addEventListener('scroll', () => { - const currentScrollY = window.scrollY; + const navWrapper = document.getElementById('visual-nav-wrapper'); - // Threshold: When the user scrolls past the initial header + some buffer - if (currentScrollY > 100) { - if (!navWrapper.classList.contains('shrunk')) { - // Lock the height of the placeholder to prevent layout shift - navPlaceholder.style.height = navWrapper.offsetHeight + 'px'; + const navPlaceholder = document.getElementById('visual-nav-placeholder'); - navWrapper.classList.add('shrunk'); - navWrapper.title = "Hover to expand map"; - } - } else { - if (navWrapper.classList.contains('shrunk')) { - navWrapper.classList.remove('shrunk'); - navWrapper.title = ""; + const filePanel = document.getElementById('file-structure-panel'); - // Unlock the height - navPlaceholder.style.height = 'auto'; - } - } - }, { passive: true }); - - + let interactTimeout = null; + + + + window.addEventListener('scroll', () => { + + const currentScrollY = window.scrollY; + + + + // Threshold: When the user scrolls past the initial header + some buffer + + if (currentScrollY > 100) { + + if (!navWrapper.classList.contains('shrunk')) { + + // Lock the height of the placeholder to prevent layout shift + + navPlaceholder.style.height = navWrapper.offsetHeight + 'px'; + + + + navWrapper.classList.add('shrunk'); + + navWrapper.title = "Hover to expand map"; + + + + // Enable hover interaction ONLY after animation completes (500ms) + + if (interactTimeout) clearTimeout(interactTimeout); + + interactTimeout = setTimeout(() => { + + navWrapper.classList.add('interactive'); + + }, 500); + + + + // Hide File Structure (Only on Desktop where it sits alongside) + + if (filePanel && window.innerWidth >= 1024) { + + filePanel.style.opacity = '0'; + + filePanel.style.pointerEvents = 'none'; + + } + + } + + } else { + + if (navWrapper.classList.contains('shrunk')) { + + // Reset interaction state immediately + + navWrapper.classList.remove('shrunk', 'interactive'); + + if (interactTimeout) clearTimeout(interactTimeout); + + + + navWrapper.title = ""; + + + + // Unlock the height + + navPlaceholder.style.height = 'auto'; + + + + // Show File Structure + + if (filePanel) { + + filePanel.style.opacity = '1'; + + filePanel.style.pointerEvents = 'auto'; + + } + + } + + } + + }, { passive: true }); + \ No newline at end of file