docyard 0.6.0 → 0.8.0

data/lib/docyard/templates/assets/js/components/tab-navigation.js

@@ -0,0 +1,145 @@
+(function() {
+  'use strict';
+
+  var tabIndicator;
+
+  function updateIndicator(activeTab) {
+    if (!activeTab || !tabIndicator) return;
+
+    var rect = activeTab.getBoundingClientRect();
+    var parentRect = activeTab.parentElement.getBoundingClientRect();
+    var inset = 4;
+
+    tabIndicator.style.left = (rect.left - parentRect.left + inset) + 'px';
+    tabIndicator.style.width = (rect.width - (inset * 2)) + 'px';
+  }
+
+  function showIndicator() {
+    if (tabIndicator) {
+      tabIndicator.classList.add('is-ready');
+    }
+  }
+
+  function initTabIndicator() {
+    tabIndicator = document.getElementById('tabIndicator');
+    var tabItems = document.querySelectorAll('.tab-item');
+
+    if (!tabIndicator || tabItems.length === 0) {
+      return;
+    }
+
+    var activeTab = document.querySelector('.tab-item.is-active');
+    if (activeTab) {
+      updateIndicator(activeTab);
+      tabIndicator.offsetHeight;
+      requestAnimationFrame(showIndicator);
+    }
+
+    window.addEventListener('resize', function() {
+      var active = document.querySelector('.tab-item.is-active');
+      if (active) {
+        updateIndicator(active);
+      }
+    });
+  }
+
+  // Handle cross-document view transitions
+  function initViewTransitions() {
+    if (!document.startViewTransition) return;
+
+    // Position indicator immediately when new page is revealed (before animation)
+    window.addEventListener('pagereveal', function(e) {
+      if (!e.viewTransition) return;
+
+      tabIndicator = document.getElementById('tabIndicator');
+      var activeTab = document.querySelector('.tab-item.is-active');
+
+      if (activeTab && tabIndicator) {
+        // Position and show indicator immediately so view transition can animate it
+        updateIndicator(activeTab);
+        tabIndicator.classList.add('is-ready');
+      }
+    });
+  }
+
+  function initNavMenu() {
+    var navMenuBtn = document.getElementById('navMenuBtn');
+    var navMenuOverlay = document.getElementById('navMenuOverlay');
+    var navMenuDropdown = document.getElementById('navMenuDropdown');
+
+    if (!navMenuBtn || !navMenuOverlay || !navMenuDropdown) {
+      return;
+    }
+
+    var scrollPosition = 0;
+
+    function lockBodyScroll() {
+      scrollPosition = window.pageYOffset;
+      document.body.style.overflow = 'hidden';
+      document.body.style.position = 'fixed';
+      document.body.style.top = -scrollPosition + 'px';
+      document.body.style.width = '100%';
+    }
+
+    function unlockBodyScroll() {
+      document.body.style.removeProperty('overflow');
+      document.body.style.removeProperty('position');
+      document.body.style.removeProperty('top');
+      document.body.style.removeProperty('width');
+      window.scrollTo(0, scrollPosition);
+    }
+
+    function openDropdown() {
+      lockBodyScroll();
+      navMenuOverlay.classList.add('is-visible');
+      navMenuDropdown.classList.add('is-open');
+      navMenuBtn.setAttribute('aria-expanded', 'true');
+    }
+
+    function closeDropdown() {
+      navMenuOverlay.classList.remove('is-visible');
+      navMenuDropdown.classList.remove('is-open');
+      navMenuBtn.setAttribute('aria-expanded', 'false');
+      unlockBodyScroll();
+    }
+
+    function toggleDropdown() {
+      if (navMenuDropdown.classList.contains('is-open')) {
+        closeDropdown();
+      } else {
+        openDropdown();
+      }
+    }
+
+    navMenuBtn.addEventListener('click', toggleDropdown);
+    navMenuOverlay.addEventListener('click', closeDropdown);
+
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && navMenuDropdown.classList.contains('is-open')) {
+        closeDropdown();
+      }
+    });
+
+    navMenuDropdown.querySelectorAll('a').forEach(function(link) {
+      link.addEventListener('click', closeDropdown);
+    });
+
+    window.addEventListener('resize', function() {
+      if (window.innerWidth > 1024) {
+        closeDropdown();
+      }
+    });
+  }
+
+  function init() {
+    initViewTransitions();
+    initTabIndicator();
+    initNavMenu();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

data/lib/docyard/templates/assets/js/components/table-of-contents.js

@@ -1,7 +1,3 @@
-/**
- * TableOfContentsManager handles TOC interactions and scroll tracking
- * Features: scroll spy, active highlighting, smooth scrolling, mobile toggle
- */
 class TableOfContentsManager {
   constructor() {
     this.toc = document.querySelector('.docyard-toc');
@@ -20,51 +16,80 @@ class TableOfContentsManager {
   init() {
     if (this.headings.length === 0) return;
 
+    this.aside = document.querySelector('.doc-aside');
+    this.createIndicator();
     this.setupScrollSpy();
     this.setupSmoothScrolling();
     this.setupMobileToggle();
     this.setupKeyboardNavigation();
+    this.setupScrollFadeIndicators();
+    this.setupAsideOverflowDetection();
     this.handleInitialHash();
+
+    requestAnimationFrame(() => {
+      this.updateIndicator();
+    });
+  }
+
+  
+  createIndicator() {
+    const list = this.toc.querySelector('.docyard-toc__list');
+    if (!list) return;
+
+    this.indicator = document.createElement('div');
+    this.indicator.className = 'docyard-toc__indicator';
+    this.indicator.style.opacity = '0';
+    list.appendChild(this.indicator);
+  }
+
+  
+  updateIndicator() {
+    if (!this.indicator || !this.activeLink) return;
+
+    const list = this.toc.querySelector('.docyard-toc__list');
+    if (!list) return;
+
+    const listRect = list.getBoundingClientRect();
+    const linkRect = this.activeLink.getBoundingClientRect();
+
+    const top = linkRect.top - listRect.top;
+    const height = linkRect.height;
+
+    this.indicator.style.top = `${top}px`;
+    this.indicator.style.height = `${height}px`;
+    this.indicator.style.opacity = '1';
   }
 
-  /**
-   * Check if viewport is mobile/tablet (TOC in secondary header)
-   * @returns {boolean}
-   */
+  
   isMobile() {
     return window.innerWidth <= 1280;
   }
 
-  /**
-   * Check if viewport is tablet (both headers visible)
-   * @returns {boolean}
-   */
+  
   isTablet() {
     return window.innerWidth > 1024 && window.innerWidth <= 1280;
   }
 
-  /**
-   * Get scroll offset based on viewport and header state
-   * @returns {number}
-   */
+  
   getScrollOffset() {
+    const hasTabs = document.body.classList.contains('has-tabs');
+    const headerHeight = 64;
+    const tabBarHeight = hasTabs ? 48 : 0;
+    const buffer = 24;
+
     if (this.isTablet()) {
-      return 128;
+      return headerHeight + 48 + buffer;
     }
 
     if (window.innerWidth <= 1024) {
-      const header = document.querySelector('.header');
-      const isHeaderHidden = header && header.classList.contains('hide-on-scroll');
-      return isHeaderHidden ? 128 : 64;
+      const secondaryHeaderHeight = 48;
+      return headerHeight + secondaryHeaderHeight + buffer;
     }
 
-    return 100;
+    return headerHeight + tabBarHeight + buffer;
   }
 
-  /**
-   * Get all headings referenced in TOC
-   * @returns {Array<HTMLElement>}
-   */
+  
   getHeadings() {
     return this.links
       .map(link => {
@@ -74,9 +99,7 @@ class TableOfContentsManager {
       .filter(Boolean);
   }
 
-  /**
-   * Setup Intersection Observer for scroll spy
-   */
+  
   setupScrollSpy() {
     const options = {
       root: null,
@@ -97,10 +120,7 @@ class TableOfContentsManager {
     });
   }
 
-  /**
-   * Set active link in TOC
-   * @param {string} id - Heading ID
-   */
+  
   setActiveLink(id) {
     const link = this.links.find(l => l.dataset.headingId === id);
     if (!link || link === this.activeLink) return;
@@ -112,22 +132,23 @@ class TableOfContentsManager {
     link.classList.add('is-active');
     this.activeLink = link;
 
+    this.updateIndicator();
     this.scrollLinkIntoView(link);
   }
 
-  /**
-   * Scroll TOC to keep active link visible
-   * @param {HTMLElement} link - Active link element
-   */
+  
   scrollLinkIntoView(link) {
     if (this.isMobile()) return;
 
+    const scrollContainer = this.toc.querySelector('.docyard-toc__scroll');
+    if (!scrollContainer) return;
+
     if (!this.ticking) {
       requestAnimationFrame(() => {
-        const tocRect = this.toc.getBoundingClientRect();
+        const containerRect = scrollContainer.getBoundingClientRect();
         const linkRect = link.getBoundingClientRect();
 
-        if (linkRect.top < tocRect.top || linkRect.bottom > tocRect.bottom) {
+        if (linkRect.top < containerRect.top || linkRect.bottom > containerRect.bottom) {
           link.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         }
 
@@ -137,9 +158,7 @@ class TableOfContentsManager {
     }
   }
 
-  /**
-   * Setup smooth scrolling for TOC links
-   */
+  
   setupSmoothScrolling() {
     this.links.forEach(link => {
       link.addEventListener('click', (e) => {
@@ -160,7 +179,6 @@ class TableOfContentsManager {
 
           heading.focus({ preventScroll: true });
 
-          // Close mobile menu after clicking a link
           if (this.isMobile()) {
             this.collapseMobile();
           }
@@ -169,9 +187,7 @@ class TableOfContentsManager {
     });
   }
 
-  /**
-   * Setup mobile toggle functionality
-   */
+  
   setupMobileToggle() {
     const secondaryToggle = document.querySelector('.secondary-header-toc-toggle');
 
@@ -186,12 +202,12 @@ class TableOfContentsManager {
 
       if (!isExpanded) {
         document.body.style.overflow = 'hidden';
+        requestAnimationFrame(() => this.updateIndicator());
       } else {
         document.body.style.overflow = '';
       }
     });
 
-    // Close menu when clicking outside (mobile only)
     document.addEventListener('click', (e) => {
       if (!this.isMobile()) return;
 
@@ -205,11 +221,19 @@ class TableOfContentsManager {
         this.collapseMobile();
       }
     });
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        const isExpanded = secondaryToggle.getAttribute('aria-expanded') === 'true';
+        if (isExpanded) {
+          this.collapseMobile();
+          secondaryToggle.focus();
+        }
+      }
+    });
   }
 
-  /**
-   * Collapse mobile TOC
-   */
+  
   collapseMobile() {
     const secondaryToggle = document.querySelector('.secondary-header-toc-toggle');
     if (secondaryToggle) {
@@ -221,9 +245,7 @@ class TableOfContentsManager {
     }
   }
 
-  /**
-   * Setup keyboard navigation
-   */
+  
   setupKeyboardNavigation() {
     this.links.forEach((link, index) => {
       link.addEventListener('keydown', (e) => {
@@ -257,9 +279,78 @@ class TableOfContentsManager {
     });
   }
 
-  /**
-   * Handle initial hash in URL on page load
-   */
+  
+  setupAsideOverflowDetection() {
+    if (!this.aside) return;
+
+    const checkOverflow = () => {
+      if (this.isMobile()) {
+        this.aside.classList.remove('has-overflow');
+        return;
+      }
+
+      this.aside.classList.remove('has-overflow');
+
+      const footer = this.aside.querySelector('.doc-footer-desktop');
+      const tocScroll = this.toc.querySelector('.docyard-toc__scroll');
+      if (!footer || !tocScroll) return;
+
+      requestAnimationFrame(() => {
+        const asideHeight = this.aside.clientHeight;
+        const tocNaturalHeight = this.toc.offsetHeight;
+        const footerHeight = footer.offsetHeight;
+        const totalContentHeight = tocNaturalHeight + footerHeight;
+
+        if (totalContentHeight > asideHeight) {
+          this.aside.classList.add('has-overflow');
+        }
+      });
+    };
+
+    checkOverflow();
+    window.addEventListener('resize', checkOverflow);
+  }
+
+  setupScrollFadeIndicators() {
+    const scrollContainer = this.toc.querySelector('.docyard-toc__scroll');
+    if (!scrollContainer) return;
+
+    const updateFadeIndicators = () => {
+      if (this.isMobile()) {
+        this.toc.classList.remove('can-scroll-top', 'can-scroll-bottom');
+        return;
+      }
+
+      const scrollTop = scrollContainer.scrollTop;
+      const scrollHeight = scrollContainer.scrollHeight;
+      const clientHeight = scrollContainer.clientHeight;
+      const threshold = 10;
+
+      if (scrollTop > threshold) {
+        this.toc.classList.add('can-scroll-top');
+      } else {
+        this.toc.classList.remove('can-scroll-top');
+      }
+
+      if (scrollTop + clientHeight < scrollHeight - threshold) {
+        this.toc.classList.add('can-scroll-bottom');
+      } else {
+        this.toc.classList.remove('can-scroll-bottom');
+      }
+    };
+
+    updateFadeIndicators();
+    scrollContainer.addEventListener('scroll', () => {
+      updateFadeIndicators();
+      this.updateIndicator();
+    });
+    window.addEventListener('resize', () => {
+      updateFadeIndicators();
+      this.updateIndicator();
+    });
+  }
+
+  
   handleInitialHash() {
     const hash = window.location.hash.slice(1);
     if (!hash) return;
@@ -267,20 +358,16 @@ class TableOfContentsManager {
     const heading = document.getElementById(hash);
     if (!heading) return;
 
-    setTimeout(() => {
-      this.setActiveLink(hash);
+    this.setActiveLink(hash);
 
-      const offsetTop = heading.getBoundingClientRect().top + window.pageYOffset - this.getScrollOffset();
-      window.scrollTo({
-        top: offsetTop,
-        behavior: 'auto'
-      });
-    }, 100);
+    const offsetTop = heading.getBoundingClientRect().top + window.pageYOffset - this.getScrollOffset();
+    window.scrollTo({
+      top: offsetTop,
+      behavior: 'instant'
+    });
   }
 
-  /**
-   * Cleanup and destroy
-   */
+  
   destroy() {
     if (this.observer) {
       this.observer.disconnect();