docyard 0.2.0 → 0.4.0

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

@@ -0,0 +1,162 @@
+/**
+ * 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;
+
+    this.container = container;
+    this.copyButton = container.querySelector('.docyard-code-block__copy');
+    this.codeText = this.copyButton?.getAttribute('data-code') || '';
+
+    this.originalIcon = this.copyButton?.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>';
+
+    this.handleCopy = this.handleCopy.bind(this);
+
+    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);
+      this.showSuccess();
+    } catch (error) {
+      console.warn('Failed to copy code:', error);
+      this.showError();
+    }
+  }
+
+  /**
+   * 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);
+    } else {
+      this.fallbackCopy(text);
+    }
+  }
+
+  /**
+   * Fallback copy method for older browsers
+   * @param {string} text - Text to copy
+   */
+  fallbackCopy(text) {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+      document.execCommand('copy');
+      textArea.remove();
+    } catch (error) {
+      textArea.remove();
+      throw error;
+    }
+  }
+
+  /**
+   * 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.resetTimeout) {
+      clearTimeout(this.resetTimeout);
+    }
+
+    this.resetTimeout = setTimeout(() => {
+      this.resetState();
+    }, 2000);
+  }
+
+  /**
+   * Show error state
+   */
+  showError() {
+    this.copyButton.classList.add('is-error');
+    this.copyButton.setAttribute('aria-label', 'Failed to copy');
+
+    if (this.resetTimeout) {
+      clearTimeout(this.resetTimeout);
+    }
+
+    this.resetTimeout = setTimeout(() => {
+      this.resetState();
+    }, 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;
+  }
+
+  /**
+   * Cleanup - remove event listeners
+   */
+  destroy() {
+    if (this.copyButton) {
+      this.copyButton.removeEventListener('click', this.handleCopy);
+    }
+
+    if (this.resetTimeout) {
+      clearTimeout(this.resetTimeout);
+    }
+  }
+}
+
+/**
+ * Auto-initialize all code blocks on page load
+ */
+function initializeCodeBlocks() {
+  const codeBlocks = document.querySelectorAll('.docyard-code-block');
+
+  codeBlocks.forEach(container => {
+    new CodeBlockManager(container);
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeCodeBlocks);
+} else {
+  initializeCodeBlocks();
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { CodeBlockManager };
+}

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

@@ -0,0 +1,221 @@
+// Docyard Navigation JavaScript
+// Handles sidebar navigation, mobile menu, accordion groups, and scroll behavior
+
+(function() {
+  'use strict';
+
+  function initMobileMenu() {
+    const toggle = document.querySelector('.secondary-header-menu');
+    const sidebar = document.querySelector('.sidebar');
+    const overlay = document.querySelector('.mobile-overlay');
+
+    if (!toggle || !sidebar || !overlay) return;
+
+    function openMenu() {
+      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 = '';
+    }
+
+    function toggleMenu() {
+      if (sidebar.classList.contains('is-open')) {
+        closeMenu();
+      } else {
+        openMenu();
+      }
+    }
+
+    toggle.addEventListener('click', toggleMenu);
+    overlay.addEventListener('click', closeMenu);
+
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
+        closeMenu();
+      }
+    });
+
+    sidebar.querySelectorAll('a').forEach(function(link) {
+      link.addEventListener('click', closeMenu);
+    });
+  }
+
+  function initAccordion() {
+    const toggles = document.querySelectorAll('.nav-group-toggle');
+
+    toggles.forEach(function(toggle) {
+      toggle.addEventListener('click', function() {
+        const expanded = toggle.getAttribute('aria-expanded') === 'true';
+        const children = toggle.nextElementSibling;
+
+        if (!children || !children.classList.contains('nav-group-children')) {
+          return;
+        }
+
+        toggle.setAttribute('aria-expanded', !expanded);
+        children.classList.toggle('collapsed');
+
+        if (expanded) {
+          children.style.maxHeight = '0';
+        } else {
+          children.style.maxHeight = children.scrollHeight + 'px';
+        }
+      });
+    });
+
+    document.querySelectorAll('.nav-group-children.collapsed').forEach(function(el) {
+      el.style.maxHeight = '0';
+    });
+  }
+
+  function expandActiveGroups() {
+    const activeLinks = document.querySelectorAll('a.active');
+
+    activeLinks.forEach(function(activeLink) {
+      let parent = activeLink.closest('.nav-group-children');
+
+      while (parent) {
+        if (parent.classList.contains('nav-group-children')) {
+          parent.classList.remove('collapsed');
+
+          const toggle = parent.previousElementSibling;
+          if (toggle && toggle.classList.contains('nav-group-toggle')) {
+            toggle.setAttribute('aria-expanded', 'true');
+
+            parent.style.maxHeight = 'none';
+            const height = parent.scrollHeight;
+            parent.style.maxHeight = height + 'px';
+          }
+        }
+
+        parent = parent.parentElement?.closest('.nav-group-children');
+      }
+    });
+  }
+
+  function initSidebarScroll() {
+    const scrollContainer = document.querySelector('.sidebar nav');
+    if (!scrollContainer) return;
+
+    const STORAGE_KEY = 'docyard_sidebar_scroll';
+    const savedPosition = sessionStorage.getItem(STORAGE_KEY);
+
+    if (savedPosition) {
+      const position = parseInt(savedPosition, 10);
+      scrollContainer.scrollTop = position;
+
+      setTimeout(function() {
+        scrollContainer.scrollTop = position;
+      }, 100);
+    } else {
+      const activeLink = scrollContainer.querySelector('a.active');
+      if (activeLink) {
+        setTimeout(function() {
+          activeLink.scrollIntoView({
+            behavior: 'instant',
+            block: 'center'
+          });
+        }, 50);
+      }
+    }
+
+    scrollContainer.querySelectorAll('a').forEach(function(link) {
+      link.addEventListener('click', function() {
+        sessionStorage.setItem(STORAGE_KEY, scrollContainer.scrollTop);
+      });
+    });
+
+    let scrollTimeout;
+    scrollContainer.addEventListener('scroll', function() {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(function() {
+        sessionStorage.setItem(STORAGE_KEY, scrollContainer.scrollTop);
+      }, 150);
+    });
+
+    const logo = document.querySelector('.header-logo');
+    if (logo) {
+      logo.addEventListener('click', function() {
+        sessionStorage.removeItem(STORAGE_KEY);
+        scrollContainer.scrollTop = 0;
+      });
+    }
+  }
+
+  function initScrollBehavior() {
+    const header = document.querySelector('.header');
+    const secondaryHeader = document.querySelector('.secondary-header');
+
+    if (!header || !secondaryHeader) return;
+
+    let lastScrollTop = 0;
+    let ticking = false;
+
+    function isMobile() {
+      return window.innerWidth <= 1024;
+    }
+
+    function updateHeaders() {
+      if (!isMobile()) {
+        header.classList.remove('hide-on-scroll');
+        secondaryHeader.classList.remove('shift-up');
+        ticking = false;
+        return;
+      }
+
+      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');
+      }
+
+      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+      ticking = false;
+    }
+
+    window.addEventListener('scroll', function() {
+      if (!ticking) {
+        window.requestAnimationFrame(updateHeaders);
+        ticking = true;
+      }
+    });
+
+    window.addEventListener('resize', function() {
+      if (!isMobile()) {
+        header.classList.remove('hide-on-scroll');
+        secondaryHeader.classList.remove('shift-up');
+      }
+    });
+  }
+
+  if ('scrollRestoration' in history) {
+    history.scrollRestoration = 'manual';
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      initMobileMenu();
+      initAccordion();
+      expandActiveGroups();
+      initSidebarScroll();
+      initScrollBehavior();
+    });
+  } else {
+    initMobileMenu();
+    initAccordion();
+    expandActiveGroups();
+    initSidebarScroll();
+    initScrollBehavior();
+  }
+})();

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

@@ -0,0 +1,338 @@
+/**
+ * TabsManager - Manages tab component interactions
+ *
+ * @class TabsManager
+ */
+class TabsManager {
+  /**
+   * Create a TabsManager instance
+   * @param {HTMLElement} container - The .docyard-tabs container element
+   */
+  constructor(container) {
+    if (!container) return;
+
+    this.container = container;
+    this.tabListWrapper = container.querySelector('.docyard-tabs__list-wrapper');
+    this.tabList = container.querySelector('[role="tablist"]');
+    this.tabs = Array.from(container.querySelectorAll('[role="tab"]'));
+    this.panels = Array.from(container.querySelectorAll('[role="tabpanel"]'));
+    this.indicator = container.querySelector('.docyard-tabs__indicator');
+    this.activeIndex = 0;
+    this.groupId = container.getAttribute('data-tabs');
+
+    this.handleTabClick = this.handleTabClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleResize = this.handleResize.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+
+    this.init();
+  }
+
+  /**
+   * Initialize the tabs component
+   */
+  init() {
+    if (!this.tabList || this.tabs.length === 0 || this.panels.length === 0) {
+      return;
+    }
+
+    this.createScrollIndicators();
+    this.loadPreference();
+    this.attachEventListeners();
+    this.activateTab(this.activeIndex, false);
+    this.updateIndicator();
+    this.updateScrollIndicators();
+  }
+
+  /**
+   * Create scroll indicator elements
+   */
+  createScrollIndicators() {
+    if (!this.tabListWrapper || !this.tabList) return;
+
+    this.leftIndicator = document.createElement('div');
+    this.leftIndicator.className = 'docyard-tabs__scroll-indicator docyard-tabs__scroll-indicator--left';
+    this.tabListWrapper.insertBefore(this.leftIndicator, this.tabList);
+
+    this.rightIndicator = document.createElement('div');
+    this.rightIndicator.className = 'docyard-tabs__scroll-indicator docyard-tabs__scroll-indicator--right';
+    this.tabListWrapper.appendChild(this.rightIndicator);
+  }
+
+  /**
+   * Attach all event listeners
+   */
+  attachEventListeners() {
+    this.tabs.forEach((tab, index) => {
+      tab.addEventListener('click', () => this.handleTabClick(index));
+    });
+
+    this.tabList.addEventListener('keydown', this.handleKeyDown);
+
+    this.tabList.addEventListener('scroll', this.handleScroll);
+
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  /**
+   * Handle tab click
+   * @param {number} index - Index of clicked tab
+   */
+  handleTabClick(index) {
+    if (index === this.activeIndex) return;
+
+    this.activateTab(index, true);
+    this.savePreference(index);
+  }
+
+  /**
+   * Handle keyboard navigation
+   * @param {KeyboardEvent} event - Keyboard event
+   */
+  handleKeyDown(event) {
+    const { key } = event;
+
+    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+      event.preventDefault();
+
+      if (key === 'ArrowLeft') {
+        this.activatePreviousTab();
+      } else {
+        this.activateNextTab();
+      }
+
+      this.tabs[this.activeIndex].focus();
+    }
+
+    if (key === 'Home') {
+      event.preventDefault();
+      this.activateTab(0, true);
+      this.tabs[0].focus();
+    }
+
+    if (key === 'End') {
+      event.preventDefault();
+      const lastIndex = this.tabs.length - 1;
+      this.activateTab(lastIndex, true);
+      this.tabs[lastIndex].focus();
+    }
+  }
+
+  /**
+   * Handle scroll event - update scroll indicators
+   */
+  handleScroll() {
+    if (this.scrollTimeout) {
+      cancelAnimationFrame(this.scrollTimeout);
+    }
+
+    this.scrollTimeout = requestAnimationFrame(() => {
+      this.updateScrollIndicators();
+    });
+  }
+
+  /**
+   * Handle window resize - update indicator and scroll indicators
+   */
+  handleResize() {
+    if (this.resizeTimeout) {
+      cancelAnimationFrame(this.resizeTimeout);
+    }
+
+    this.resizeTimeout = requestAnimationFrame(() => {
+      this.updateIndicator(false);
+      this.updateScrollIndicators();
+    });
+  }
+
+  /**
+   * Activate a specific tab
+   * @param {number} index - Index of tab to activate
+   * @param {boolean} animate - Whether to animate the transition
+   */
+  activateTab(index, animate = true) {
+    if (index < 0 || index >= this.tabs.length) return;
+
+    const previousIndex = this.activeIndex;
+    this.activeIndex = index;
+
+    this.tabs.forEach((tab, i) => {
+      const isActive = i === index;
+      tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      tab.setAttribute('tabindex', isActive ? '0' : '-1');
+    });
+
+    this.panels.forEach((panel, i) => {
+      const isActive = i === index;
+      panel.setAttribute('aria-hidden', isActive ? 'false' : 'true');
+    });
+
+    this.updateIndicator(animate);
+
+    if (previousIndex !== index) {
+      this.savePreference(index);
+    }
+  }
+
+  /**
+   * Activate the next tab (wraps around)
+   */
+  activateNextTab() {
+    const nextIndex = (this.activeIndex + 1) % this.tabs.length;
+    this.activateTab(nextIndex, true);
+  }
+
+  /**
+   * Activate the previous tab (wraps around)
+   */
+  activatePreviousTab() {
+    const prevIndex = (this.activeIndex - 1 + this.tabs.length) % this.tabs.length;
+    this.activateTab(prevIndex, true);
+  }
+
+  /**
+   * Update the visual indicator position
+   * @param {boolean} animate - Whether to animate the transition
+   */
+  updateIndicator(animate = true) {
+    if (!this.indicator || !this.tabs[this.activeIndex]) return;
+
+    const activeTab = this.tabs[this.activeIndex];
+    const tabListRect = this.tabList.getBoundingClientRect();
+    const activeTabRect = activeTab.getBoundingClientRect();
+
+    const left = activeTabRect.left - tabListRect.left + this.tabList.scrollLeft;
+    const width = activeTabRect.width;
+
+    this.indicator.style.width = `${width}px`;
+    this.indicator.style.transform = `translateX(${left}px)`;
+
+    if (!animate) {
+      this.indicator.style.transition = 'none';
+      void this.indicator.offsetWidth;
+      this.indicator.style.transition = '';
+    }
+  }
+
+  /**
+   * Update scroll indicators visibility based on scroll position
+   */
+  updateScrollIndicators() {
+    if (!this.tabList || !this.leftIndicator || !this.rightIndicator) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = this.tabList;
+    const hasOverflow = scrollWidth > clientWidth;
+
+    if (!hasOverflow) {
+      this.leftIndicator.classList.remove('is-visible');
+      this.rightIndicator.classList.remove('is-visible');
+      return;
+    }
+
+    const canScrollLeft = scrollLeft > 5;
+    if (canScrollLeft) {
+      this.leftIndicator.classList.add('is-visible');
+    } else {
+      this.leftIndicator.classList.remove('is-visible');
+    }
+
+    const canScrollRight = scrollLeft < scrollWidth - clientWidth - 5;
+    if (canScrollRight) {
+      this.rightIndicator.classList.add('is-visible');
+    } else {
+      this.rightIndicator.classList.remove('is-visible');
+    }
+  }
+
+  /**
+   * Load user preference from localStorage
+   */
+  loadPreference() {
+    try {
+      const preferredTab = localStorage.getItem('docyard-preferred-pm');
+      if (!preferredTab) return;
+
+      const index = this.tabs.findIndex(tab =>
+        tab.textContent.trim().toLowerCase() === preferredTab.toLowerCase()
+      );
+
+      if (index !== -1) {
+        this.activeIndex = index;
+      }
+    } catch (error) {
+      console.warn('Could not load tab preference:', error);
+    }
+  }
+
+  /**
+   * Save user preference to localStorage
+   * @param {number} index - Index of active tab
+   */
+  savePreference(index) {
+    if (index < 0 || index >= this.tabs.length) return;
+
+    try {
+      const tabName = this.tabs[index].textContent.trim().toLowerCase();
+      localStorage.setItem('docyard-preferred-pm', tabName);
+    } catch (error) {
+      console.warn('Could not save tab preference:', error);
+    }
+  }
+
+  /**
+   * Activate tab by name
+   * @param {string} name - Name of tab to activate
+   */
+  activateTabByName(name) {
+    const index = this.tabs.findIndex(tab =>
+      tab.textContent.trim().toLowerCase() === name.toLowerCase()
+    );
+
+    if (index !== -1) {
+      this.activateTab(index, true);
+    }
+  }
+
+  /**
+   * Cleanup - remove event listeners
+   */
+  destroy() {
+    this.tabs.forEach((tab, index) => {
+      tab.removeEventListener('click', () => this.handleTabClick(index));
+    });
+
+    this.tabList.removeEventListener('keydown', this.handleKeyDown);
+    this.tabList.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener('resize', this.handleResize);
+
+    if (this.resizeTimeout) {
+      cancelAnimationFrame(this.resizeTimeout);
+    }
+
+    if (this.scrollTimeout) {
+      cancelAnimationFrame(this.scrollTimeout);
+    }
+  }
+}
+
+/**
+ * Auto-initialize all tabs on page load
+ */
+function initializeTabs() {
+  const tabsContainers = document.querySelectorAll('.docyard-tabs');
+
+  tabsContainers.forEach(container => {
+    new TabsManager(container);
+  });
+}
+
+// Initialize on DOM ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeTabs);
+} else {
+  initializeTabs();
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { TabsManager };
+}