docyard 0.6.0 → 0.8.0

data/lib/docyard/templates/assets/js/components/code-block.js

@@ -1,13 +1,5 @@
-/**
- * CodeBlockManager - Manages code block copy functionality
- *
- * @class CodeBlockManager
- */
 class CodeBlockManager {
-  /**
-   * Create a CodeBlockManager instance
-   * @param {HTMLElement} container - The .docyard-code-block container element
-   */
+  
   constructor(container) {
     if (!container) return;
 
@@ -15,7 +7,9 @@ class CodeBlockManager {
     this.copyButton = container.querySelector('.docyard-code-block__copy');
     this.codeText = this.copyButton?.getAttribute('data-code') || '';
 
-    this.originalIcon = this.copyButton?.innerHTML || '';
+    this.iconElement = this.copyButton?.querySelector('.docyard-code-block__copy-icon');
+    this.textElement = this.copyButton?.querySelector('.docyard-code-block__copy-text');
+    this.originalIcon = this.iconElement?.innerHTML || '';
 
     this.checkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg>';
 
@@ -24,18 +18,14 @@ class CodeBlockManager {
     this.init();
   }
 
-  /**
-   * Initialize the code block component
-   */
+  
   init() {
     if (!this.copyButton) return;
 
     this.copyButton.addEventListener('click', this.handleCopy);
   }
 
-  /**
-   * Handle copy button click
-   */
+  
   async handleCopy() {
     try {
       await this.copyToClipboard(this.codeText);
@@ -46,11 +36,7 @@ class CodeBlockManager {
     }
   }
 
-  /**
-   * Copy text to clipboard
-   * @param {string} text - Text to copy
-   * @returns {Promise<void>}
-   */
+  
   async copyToClipboard(text) {
     if (navigator.clipboard && window.isSecureContext) {
       await navigator.clipboard.writeText(text);
@@ -59,10 +45,7 @@ class CodeBlockManager {
     }
   }
 
-  /**
-   * Fallback copy method for older browsers
-   * @param {string} text - Text to copy
-   */
+  
   fallbackCopy(text) {
     const textArea = document.createElement('textarea');
     textArea.value = text;
@@ -82,14 +65,17 @@ class CodeBlockManager {
     }
   }
 
-  /**
-   * Show success state
-   */
+  
   showSuccess() {
     this.copyButton.classList.add('is-success');
     this.copyButton.setAttribute('aria-label', 'Copied to clipboard!');
 
-    this.copyButton.innerHTML = this.checkIcon;
+    if (this.iconElement) {
+      this.iconElement.innerHTML = this.checkIcon;
+    }
+    if (this.textElement) {
+      this.textElement.textContent = 'Copied';
+    }
 
     if (this.resetTimeout) {
       clearTimeout(this.resetTimeout);
@@ -100,9 +86,7 @@ class CodeBlockManager {
     }, 2000);
   }
 
-  /**
-   * Show error state
-   */
+  
   showError() {
     this.copyButton.classList.add('is-error');
     this.copyButton.setAttribute('aria-label', 'Failed to copy');
@@ -116,19 +100,20 @@ class CodeBlockManager {
     }, 2000);
   }
 
-  /**
-   * Reset button to default state
-   */
+  
   resetState() {
     this.copyButton.classList.remove('is-success', 'is-error');
     this.copyButton.setAttribute('aria-label', 'Copy code to clipboard');
 
-    this.copyButton.innerHTML = this.originalIcon;
+    if (this.iconElement) {
+      this.iconElement.innerHTML = this.originalIcon;
+    }
+    if (this.textElement) {
+      this.textElement.textContent = 'Copy';
+    }
   }
 
-  /**
-   * Cleanup - remove event listeners
-   */
+  
   destroy() {
     if (this.copyButton) {
       this.copyButton.removeEventListener('click', this.handleCopy);
@@ -140,9 +125,6 @@ class CodeBlockManager {
   }
 }
 
-/**
- * Auto-initialize all code blocks on page load
- */
 function initializeCodeBlocks() {
   const codeBlocks = document.querySelectorAll('.docyard-code-block');
 

data/lib/docyard/templates/assets/js/components/heading-anchor.js

@@ -1,7 +1,3 @@
-/**
- * HeadingAnchorManager handles anchor link interactions
- * Provides copy-to-clipboard functionality with visual feedback
- */
 class HeadingAnchorManager {
   constructor() {
     this.anchors = document.querySelectorAll('.heading-anchor');
@@ -14,11 +10,7 @@ class HeadingAnchorManager {
     });
   }
 
-  /**
-   * Handle anchor link click
-   * @param {Event} e - Click event
-   * @param {HTMLElement} anchor - Anchor element
-   */
+  
   handleClick(e, anchor) {
     e.preventDefault();
 
@@ -31,15 +23,32 @@ class HeadingAnchorManager {
 
     const heading = document.getElementById(headingId);
     if (heading) {
-      heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const offsetTop = heading.getBoundingClientRect().top + window.pageYOffset - this.getScrollOffset();
+      window.scrollTo({
+        top: offsetTop,
+        behavior: 'smooth'
+      });
     }
   }
 
-  /**
-   * Copy text to clipboard with visual feedback
-   * @param {string} text - Text to copy
-   * @param {HTMLElement} anchor - Anchor element for feedback
-   */
+  getScrollOffset() {
+    const hasTabs = document.body.classList.contains('has-tabs');
+    const headerHeight = 64;
+    const tabBarHeight = hasTabs ? 48 : 0;
+    const buffer = 24;
+
+    if (window.innerWidth > 1024 && window.innerWidth <= 1280) {
+      return headerHeight + 48 + buffer;
+    }
+
+    if (window.innerWidth <= 1024) {
+      return headerHeight + 48 + buffer;
+    }
+
+    return headerHeight + tabBarHeight + buffer;
+  }
+
+  
   async copyToClipboard(text, anchor) {
     try {
       await navigator.clipboard.writeText(text);
@@ -50,10 +59,7 @@ class HeadingAnchorManager {
     }
   }
 
-  /**
-   * Fallback copy method for older browsers
-   * @param {string} text - Text to copy
-   */
+  
   fallbackCopyToClipboard(text) {
     const textarea = document.createElement('textarea');
     textarea.value = text;
@@ -65,11 +71,7 @@ class HeadingAnchorManager {
     document.body.removeChild(textarea);
   }
 
-  /**
-   * Show visual feedback on copy
-   * @param {HTMLElement} anchor - Anchor element
-   * @param {boolean} success - Whether copy succeeded
-   */
+  
   showFeedback(anchor, success) {
     const originalTitle = anchor.getAttribute('aria-label');
     anchor.setAttribute('aria-label', success ? 'Link copied!' : 'Failed to copy');

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

@@ -1,6 +1,3 @@
-// Docyard Navigation JavaScript
-// Handles sidebar navigation, mobile menu, accordion groups, and scroll behavior
-
 (function() {
   'use strict';
 
@@ -13,18 +10,36 @@
       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 openMenu() {
+      lockBodyScroll();
       sidebar.classList.add('is-open');
       overlay.classList.add('is-visible');
       toggle.setAttribute('aria-expanded', 'true');
-      document.body.style.overflow = 'hidden';
     }
 
     function closeMenu() {
       sidebar.classList.remove('is-open');
       overlay.classList.remove('is-visible');
       toggle.setAttribute('aria-expanded', 'false');
-      document.body.style.overflow = '';
+      unlockBodyScroll();
     }
 
     function toggleMenu() {
@@ -52,24 +67,86 @@
   }
 
   function initAccordion() {
-    const toggles = document.querySelectorAll('.nav-group-toggle');
+    var TOGGLE_STATE_KEY = 'docyard_toggle_states';
+    var toggles = document.querySelectorAll('[data-nav-toggle]');
+
+    function getDefaultCollapsed(navGroup) {
+      return navGroup.getAttribute('data-default-collapsed') === 'true';
+    }
+
+    function collapseGroup(navGroup, animate) {
+      var header = navGroup.querySelector('[data-nav-toggle]');
+      var children = navGroup.querySelector('.nav-group-children');
+      if (!header || !children) return;
+
+      if (animate) {
+        children.style.transition = 'max-height 0.2s cubic-bezier(0.4, 0, 1, 1)';
+      } else {
+        children.style.transition = 'none';
+      }
+      header.setAttribute('aria-expanded', 'false');
+      children.classList.add('collapsed');
+      children.style.maxHeight = '0';
+    }
+
+    function expandGroup(navGroup, animate) {
+      var header = navGroup.querySelector('[data-nav-toggle]');
+      var children = navGroup.querySelector('.nav-group-children');
+      if (!header || !children) return;
+
+      var fullHeight = children.scrollHeight;
+      if (animate) {
+        children.style.transition = 'max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
+      } else {
+        children.style.transition = 'none';
+      }
+      header.setAttribute('aria-expanded', 'true');
+      children.classList.remove('collapsed');
+      children.style.maxHeight = fullHeight + 'px';
+    }
+
+    function revertOthersToDefault(currentNavGroup) {
+      document.querySelectorAll('.nav-group').forEach(function(navGroup) {
+        if (navGroup === currentNavGroup) return;
+
+        var defaultCollapsed = getDefaultCollapsed(navGroup);
+        var children = navGroup.querySelector('.nav-group-children');
+        if (!children) return;
+
+        var isCurrentlyCollapsed = children.classList.contains('collapsed');
+
+        if (defaultCollapsed && !isCurrentlyCollapsed) {
+          collapseGroup(navGroup, true);
+        } else if (!defaultCollapsed && isCurrentlyCollapsed) {
+          expandGroup(navGroup, true);
+        }
+      });
+    }
 
     toggles.forEach(function(toggle) {
-      toggle.addEventListener('click', function() {
-        const expanded = toggle.getAttribute('aria-expanded') === 'true';
-        const children = toggle.nextElementSibling;
+      toggle.addEventListener('click', function(e) {
+        var expanded = toggle.getAttribute('aria-expanded') === 'true';
+        var navGroup = toggle.closest('.nav-group');
+        var children = navGroup ? navGroup.querySelector('.nav-group-children') : null;
 
-        if (!children || !children.classList.contains('nav-group-children')) {
+        if (!children) {
           return;
         }
 
-        toggle.setAttribute('aria-expanded', !expanded);
-        children.classList.toggle('collapsed');
+        revertOthersToDefault(navGroup);
+
+        if (toggle.tagName === 'A') {
+          var href = toggle.getAttribute('href');
+          var states = {};
+          states[href] = true;
+          sessionStorage.setItem(TOGGLE_STATE_KEY, JSON.stringify(states));
+          return;
+        }
 
         if (expanded) {
-          children.style.maxHeight = '0';
+          collapseGroup(navGroup, true);
         } else {
-          children.style.maxHeight = children.scrollHeight + 'px';
+          expandGroup(navGroup, true);
         }
       });
     });
@@ -80,32 +157,80 @@
   }
 
   function expandActiveGroups() {
-    const activeLinks = document.querySelectorAll('a.active');
+    var TOGGLE_STATE_KEY = 'docyard_toggle_states';
+    var currentUrl = window.location.pathname;
+    var lastUrl = sessionStorage.getItem('docyard_last_url') || '';
+    var toggleStates = JSON.parse(sessionStorage.getItem(TOGGLE_STATE_KEY) || '{}');
 
-    activeLinks.forEach(function(activeLink) {
-      let parent = activeLink.closest('.nav-group-children');
+    sessionStorage.setItem('docyard_last_url', currentUrl);
+    sessionStorage.removeItem(TOGGLE_STATE_KEY);
 
-      while (parent) {
-        if (parent.classList.contains('nav-group-children')) {
-          parent.classList.remove('collapsed');
+    document.querySelectorAll('[data-nav-toggle]').forEach(function(toggle) {
+      if (toggle.tagName !== 'A') return;
 
-          const toggle = parent.previousElementSibling;
-          if (toggle && toggle.classList.contains('nav-group-toggle')) {
-            toggle.setAttribute('aria-expanded', 'true');
+      var href = toggle.getAttribute('href');
+      var shouldOpen = toggleStates[href] === true;
 
-            parent.style.maxHeight = 'none';
-            const height = parent.scrollHeight;
-            parent.style.maxHeight = height + 'px';
-          }
-        }
+      if (!shouldOpen) return;
+
+      var navGroup = toggle.closest('.nav-group');
+      var children = navGroup ? navGroup.querySelector('.nav-group-children') : null;
+
+      if (!children || !children.classList.contains('collapsed')) return;
 
-        parent = parent.parentElement?.closest('.nav-group-children');
+      var fullHeight = children.scrollHeight;
+
+      children.style.transition = 'none';
+      children.style.maxHeight = '0';
+      children.offsetHeight;
+
+      children.style.transition = 'max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
+      requestAnimationFrame(function() {
+        toggle.setAttribute('aria-expanded', 'true');
+        children.classList.remove('collapsed');
+        children.style.maxHeight = fullHeight + 'px';
+      });
+    });
+
+    var expandedGroups = document.querySelectorAll('.nav-group-children:not(.collapsed)');
+
+    expandedGroups.forEach(function(group) {
+      if (group.style.maxHeight) {
+        return;
+      }
+
+      var navGroup = group.closest('.nav-group');
+      var header = navGroup ? navGroup.querySelector('.nav-group-header') : null;
+      var headerHref = header && header.tagName === 'A' ? header.getAttribute('href') : null;
+
+      if (headerHref && toggleStates[headerHref] === true) {
+        group.style.maxHeight = group.scrollHeight + 'px';
+        return;
+      }
+
+      var wasInGroup = headerHref && (lastUrl === headerHref || lastUrl.startsWith(headerHref + '/'));
+      var shouldAnimate = header && header.classList.contains('active') && !wasInGroup;
+      var fullHeight = group.scrollHeight;
+
+      if (shouldAnimate) {
+        group.style.transition = 'none';
+        group.style.maxHeight = '0';
+        group.classList.add('collapsed');
+        group.offsetHeight;
+
+        group.style.transition = 'max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
+        requestAnimationFrame(function() {
+          group.classList.remove('collapsed');
+          group.style.maxHeight = fullHeight + 'px';
+        });
+      } else {
+        group.style.maxHeight = fullHeight + 'px';
       }
     });
   }
 
   function initSidebarScroll() {
-    const scrollContainer = document.querySelector('.sidebar nav');
+    const scrollContainer = document.querySelector('.sidebar-scroll');
     if (!scrollContainer) return;
 
     const STORAGE_KEY = 'docyard_sidebar_scroll';
@@ -153,54 +278,38 @@
     }
   }
 
-  function initScrollBehavior() {
-    const header = document.querySelector('.header');
-    const secondaryHeader = document.querySelector('.secondary-header');
-
-    if (!header || !secondaryHeader) return;
-
-    let lastScrollTop = 0;
-    let ticking = false;
+  function initScrollFadeIndicators() {
+    const sidebar = document.querySelector('.sidebar');
+    const scrollContainer = document.querySelector('.sidebar-scroll');
+    if (!sidebar || !scrollContainer) return;
 
-    function isMobile() {
-      return window.innerWidth <= 1024;
-    }
+    function updateFadeIndicators() {
+      const scrollTop = scrollContainer.scrollTop;
+      const scrollHeight = scrollContainer.scrollHeight;
+      const clientHeight = scrollContainer.clientHeight;
+      const threshold = 10;
 
-    function updateHeaders() {
-      if (!isMobile()) {
-        header.classList.remove('hide-on-scroll');
-        secondaryHeader.classList.remove('shift-up');
-        ticking = false;
-        return;
+      if (scrollTop > threshold) {
+        sidebar.classList.add('can-scroll-top');
+      } else {
+        sidebar.classList.remove('can-scroll-top');
       }
 
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-
-      if (scrollTop > lastScrollTop && scrollTop > 100) {
-        header.classList.add('hide-on-scroll');
-        secondaryHeader.classList.add('shift-up');
-      } else if (scrollTop < lastScrollTop) {
-        header.classList.remove('hide-on-scroll');
-        secondaryHeader.classList.remove('shift-up');
+      if (scrollTop + clientHeight < scrollHeight - threshold) {
+        sidebar.classList.add('can-scroll-bottom');
+      } else {
+        sidebar.classList.remove('can-scroll-bottom');
       }
-
-      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
-      ticking = false;
     }
 
-    window.addEventListener('scroll', function() {
-      if (!ticking) {
-        window.requestAnimationFrame(updateHeaders);
-        ticking = true;
-      }
-    });
+    updateFadeIndicators();
 
-    window.addEventListener('resize', function() {
-      if (!isMobile()) {
-        header.classList.remove('hide-on-scroll');
-        secondaryHeader.classList.remove('shift-up');
-      }
-    });
+    scrollContainer.addEventListener('scroll', updateFadeIndicators);
+
+    window.addEventListener('resize', updateFadeIndicators);
+  }
+
+  function initScrollBehavior() {
   }
 
   if ('scrollRestoration' in history) {
@@ -213,6 +322,7 @@
       initAccordion();
       expandActiveGroups();
       initSidebarScroll();
+      initScrollFadeIndicators();
       initScrollBehavior();
     });
   } else {
@@ -220,6 +330,7 @@
     initAccordion();
     expandActiveGroups();
     initSidebarScroll();
+    initScrollFadeIndicators();
     initScrollBehavior();
   }
 })();