feat: bootstrap Community Works Collaborative theme from starter

static/js/modules/GetHeaderHeight.js

@@ -0,0 +1,12 @@
+/**
+ * Get Header Height
+ * -
+ * Get header height and set CSS variable "--hgtHeader" to the header height.
+ */
+
+function getHeaderHeight() {
+  const headerHeight = document.querySelector('.header__nav-main').getBoundingClientRect().height;
+  document.documentElement.style.setProperty('--hgtHeader', `${headerHeight}px`);
+}
+
+export default getHeaderHeight;

static/js/modules/Navigation.js

@@ -0,0 +1,576 @@
+/**
+ * VDI Main Nav - All Main Navigation Functionality
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
+ */
+
+/**
+ * Navigation
+ *  Handles navigation logic
+ *
+ * @param {string} mobileMenuButtonId
+ * @param {string} dropDownClass
+ * @param {string} subMenuLinkClass
+ */
+class Navigation {
+  /**
+   * The main toggle element
+   *
+   * @type {HTMLElement}
+   * @link {https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties}
+   */
+  #mobileMenuButton;
+
+  /**
+   * List of sub dropdown buttons
+   *
+   * @type {NodeList}
+   * @link {https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties}
+   */
+  #dropdownButtons;
+
+  /**
+   * Class name to identify sub menu items (ul>li>a)
+   * @type {string}
+   */
+  #subMenuElementIdentifier;
+
+  /**
+   * Current navigation level in sliding viewport
+   * @type {number}
+   */
+  #currentLevel = 0;
+
+  /**
+   * Navigation stack for breadcrumb functionality
+   * @type {Array}
+   */
+  #navigationStack = [];
+
+  /**
+   * Whether sliding viewport mode is enabled
+   * @type {boolean}
+   */
+  #slidingViewportEnabled = false;
+
+
+
+  constructor(mobileMenuButtonId, dropDownClass, subMenuLinkClass = "sub-menu-item") {
+    this.#mobileMenuButton = document.getElementById(mobileMenuButtonId);
+    this.#dropdownButtons = document.querySelectorAll(dropDownClass); // Do not change this to getElementsByClassName, logic is iterating over non-live node list
+    this.#subMenuElementIdentifier = subMenuLinkClass;
+
+    this.handleEscapeKey();
+    
+    // Initialize sliding viewport immediately if styles are detected
+    this.initializeSlidingViewport();
+  }
+
+  /**
+   * Handles main mobile toggling
+   *  Adds an event listener to mobile menu dropdown
+   *  toggle button
+   */
+  mobileMenuToggle() {
+    this.#mobileMenuButton.addEventListener("click", (event) => {
+      this.toggleMobileMenu(event, this.#mobileMenuButton); // toggle submenu on mobile
+    });
+
+    this.closeOnBlur(this.#mobileMenuButton, { "navType": "desktop" }); // close submenu when user clicks outside
+    this.closeOnBlur(this.#mobileMenuButton, { "navType": "mobile" });
+  }
+
+  /**
+   * Handles dropdowns on desktop navigation
+   *  Loops over list of navigation dropdown buttons
+   *  and adds eventlisteners to toggle view
+   */
+  desktopMenuDropdowns() {
+    this.#dropdownButtons.forEach((button) => {
+      button.addEventListener("click", (event) => {
+        this.toggleDropdown(event, button);
+      });
+
+      this.closeOnBlur(button); // close menu when user clicks outside
+      this.handleFocus(button);  // close dropdown when user finishes tabbing submenu elements
+    });
+  }
+
+  /**
+   * Toggles desktop dropdowns
+   *
+   * @param {EventTarget} event
+   * @param {HTMLButtonElement} button
+   */
+  toggleDropdown(event, button) {
+    this.toggleAriaExpanded(event, button);
+  }
+
+  /**
+   * Toggles mobile menu
+   *
+   * @param {EventTarget} event
+   * @param {HTMLButtonElement} button
+   */
+  toggleMobileMenu(event, button) {
+    this.toggleAriaExpanded(event, button);
+    
+    const isExpanded = button.getAttribute("aria-expanded") === "true";
+    
+    if (!isExpanded) {
+      // Reset sliding navigation when menu is closed
+      if (this.#slidingViewportEnabled) {
+        this.resetSlidingNavigation();
+      }
+    }
+  }
+
+  /**
+   * Toggles aria-expanded attribute
+   *
+   * @param {EventTarget} event
+   * @param {HTMLButtonElement} button
+   */
+  toggleAriaExpanded(event, button) {
+    let isExpanded = event.currentTarget.getAttribute("aria-expanded") === "true"; // true is returned as string
+
+    // ... but open the targeted secondary nav
+    if (!isExpanded) {
+      // close all dropdowns...
+      this.closeAllDropDowns();
+      // then toggle targeted dropdown...
+      button.setAttribute("aria-expanded", true);
+    } else {
+      button.setAttribute("aria-expanded", false);
+    }
+  }
+
+  /**
+   * Close dropdown when user clicks anywhere else on the screen
+   *
+   * @param {HTMLButtonElement} button
+   * @link {https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event}
+   * @link {https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget}
+   */
+  closeOnBlur(button, args) {
+    if (args === undefined || args?.navType === "desktop") {
+      button.addEventListener("blur", (event) => {
+        if (event.relatedTarget == null) {
+          event.currentTarget.setAttribute("aria-expanded", false);
+        }
+      }, { passive: true });
+    }
+
+    //FIXME: Remove hardcoded literal
+    if (args?.navType === "mobile") {
+      document.getElementById("menu-container").addEventListener("blur", (event) => {
+        // Note: cannot group negation -1*-1*-1 != -(1*1*1)
+        const isNull = event.relatedTarget == null;
+        const isNotMenuItem = !isNull && !event.relatedTarget.classList.contains("menu-vdi__toggle")
+          && !event.relatedTarget.classList.contains("sub-menu-item") 
+          && !event.relatedTarget.classList.contains("menu-vdi__link")
+          && !event.relatedTarget.classList.contains("menu-vdi__back"); // Don't close on back button click
+
+        if (isNull || isNotMenuItem)
+          button.setAttribute("aria-expanded", false);
+      }, true)
+    }
+  }
+
+  /**
+   * Handles escape behaviour
+   *  Closes all dropdown when user hits
+   *  escape key
+   *
+   * @link {https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event}
+   */
+  handleEscapeKey() {
+    window.addEventListener("keyup", (event) => {
+      if (event.key === "Escape") {
+        this.#mobileMenuButton.setAttribute("aria-expanded", false);
+        this.closeAllDropDowns();
+        
+        // Reset sliding navigation on escape
+        if (this.#slidingViewportEnabled) {
+          this.resetSlidingNavigation();
+        }
+      }
+    }, { passive: true });
+  }
+
+  /**
+   * Close all dropdown menus
+   *  Sets aria expanded property by looping
+   *  over the list of dropdown button elements
+   *
+   * @link {https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded}
+   */
+  closeAllDropDowns() {
+    this.#dropdownButtons.forEach((button) => {
+      button.setAttribute("aria-expanded", false);
+    });
+  }
+
+  /**
+   * Handle focus
+   *  Watches blur event on submenu list container, if the next
+   *  focus element is not a submenu list item, closes the
+   *  dropdown.
+   *
+   *  Implemented for WCAG 2.2 compliance
+   *
+   * @param {htmlButtonElement} button
+   */
+  handleFocus(button) {
+    const subMenuListElement = button.closest("ul");
+
+    /**
+     * Ducking JavaScript, I am not sure why the blur event on submenu(ul)
+     * would bubble up to the button since the button and sub menu list element
+     * are siblings and not nested. This is a mystery to me.
+     *
+     * Here we are stopping any bubbling event that may be propagated to the
+     * top level buttons. This includes the bubbling event from sub menu list element.
+     *
+     * If anyone finds a better solution to this or can explain bubbling of focus event
+     * to next sibling, you time and effort would be much appreciated.
+     */
+    button.addEventListener("focusout", (event) => {
+      event.stopImmediatePropagation();
+    })
+
+    subMenuListElement.addEventListener("focusout", (event) => {
+      // blur event triggers when user clicks outside
+      const nextFocusElement = event.relatedTarget;
+
+      let isSubMenuElement;
+
+      if (nextFocusElement !== null) {
+        isSubMenuElement = nextFocusElement.classList.contains(this.#subMenuElementIdentifier);
+      } else {
+        isSubMenuElement = false; // close when user clicks outside
+      }
+
+      if (!isSubMenuElement) {
+        this.closeAllDropDowns();
+      }
+    });
+  }
+
+  /**
+   * Initialize sliding viewport navigation
+   * Detects if sliding viewport should be enabled and sets up the structure
+   */
+  initializeSlidingViewport() {
+    // Check if we should enable sliding viewport (could be based on screen size, user preference, etc.)
+    this.#slidingViewportEnabled = this.shouldEnableSlidingViewport();
+    
+    if (this.#slidingViewportEnabled) {
+      console.log('Sliding viewport enabled, setting up structure');
+      this.setupSlidingViewportStructure();
+    } else {
+      console.log('Sliding viewport not enabled');
+    }
+  }
+
+  /**
+   * Determine if sliding viewport should be enabled
+   * @returns {boolean}
+   */
+  shouldEnableSlidingViewport() {
+    // Check if sliding viewport styles are loaded by testing if the CSS rule exists
+    // This allows CSS-based switching between navigation styles
+    const isMobile = window.innerWidth <= 1000; // 62.5rem converted to px
+    
+    if (!isMobile) return false;
+    
+    // Check if sliding viewport CSS is loaded by testing a specific rule
+    // We need to test the element within the proper context (.nav-main)
+    try {
+      const navMain = document.querySelector('.nav-main');
+      if (!navMain) return false;
+      
+      const testElement = document.createElement('div');
+      testElement.className = 'menu-vdi--sliding';
+      testElement.style.position = 'absolute';
+      testElement.style.visibility = 'hidden';
+      testElement.style.height = '1px';
+      testElement.style.width = '1px';
+      
+      navMain.appendChild(testElement);
+      
+      // Get computed styles to check if sliding viewport CSS is active
+      const computedStyle = window.getComputedStyle(testElement);
+      const hasOverflowHidden = computedStyle.overflow === 'hidden';
+      
+      navMain.removeChild(testElement);
+      
+      return hasOverflowHidden;
+    } catch (error) {
+      console.warn('Error detecting sliding viewport styles:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Setup the HTML structure for sliding viewport navigation
+   */
+  setupSlidingViewportStructure() {
+    const menuContainer = document.getElementById('menu-container');
+    if (!menuContainer) {
+      console.warn('Menu container not found');
+      return;
+    }
+
+    // Don't set up if already configured
+    if (menuContainer.classList.contains('menu-vdi--sliding')) {
+      console.log('Sliding viewport already configured');
+      return;
+    }
+
+    console.log('Setting up sliding viewport structure');
+
+    // Add sliding class to enable sliding styles
+    menuContainer.classList.add('menu-vdi--sliding');
+
+    // Create viewport container
+    const viewport = document.createElement('div');
+    viewport.className = 'menu-vdi__viewport';
+    viewport.setAttribute('data-current-level', '0');
+
+    // Create main level
+    const mainLevel = document.createElement('div');
+    mainLevel.className = 'menu-vdi__level menu-vdi__level--main';
+    mainLevel.setAttribute('data-level', '0');
+
+    // Move existing menu items to main level
+    const existingItems = Array.from(menuContainer.children);
+    console.log('Moving', existingItems.length, 'existing items to main level');
+    
+    existingItems.forEach(item => {
+      mainLevel.appendChild(item);
+    });
+
+    // Setup click handlers for parent items in sliding mode
+    this.setupSlidingClickHandlers(mainLevel);
+
+    viewport.appendChild(mainLevel);
+    menuContainer.appendChild(viewport);
+    
+    console.log('Sliding viewport structure complete');
+  }
+
+  /**
+   * Setup click handlers for parent menu items in sliding mode
+   * @param {HTMLElement} level
+   */
+  setupSlidingClickHandlers(level) {
+    const parentButtons = level.querySelectorAll('.menu-vdi__toggle');
+    
+    parentButtons.forEach(button => {
+      button.addEventListener('click', (event) => {
+        if (this.#slidingViewportEnabled) {
+          event.preventDefault();
+          event.stopPropagation();
+          
+          const parentItem = button.closest('.menu-vdi__item--parent');
+          const submenu = parentItem.querySelector('.menu-vdi__submenu');
+          
+          if (submenu) {
+            this.navigateToLevel(button.textContent.trim(), submenu);
+          }
+        }
+      }, true); // Use capture phase to intercept before other handlers
+    });
+  }
+
+  /**
+   * Navigate to a specific navigation level
+   * @param {string} levelTitle
+   * @param {HTMLElement} submenuElement
+   */
+  navigateToLevel(levelTitle, submenuElement) {
+    const viewport = document.querySelector('.menu-vdi__viewport');
+    if (!viewport) return;
+
+    this.#currentLevel++;
+    this.#navigationStack.push({ title: levelTitle, level: this.#currentLevel });
+
+    // Create new level
+    const newLevel = document.createElement('div');
+    newLevel.className = 'menu-vdi__level';
+    newLevel.setAttribute('data-level', this.#currentLevel);
+
+    // Add back button
+    const backButton = this.createBackButton();
+    newLevel.appendChild(backButton);
+
+    // Add level title
+    const levelTitleEl = document.createElement('div');
+    levelTitleEl.className = 'menu-vdi__level-title';
+    levelTitleEl.textContent = levelTitle;
+    newLevel.appendChild(levelTitleEl);
+
+    // Clone and add submenu items
+    const submenuItems = submenuElement.cloneNode(true);
+    submenuItems.className = 'menu-vdi__level-items';
+    
+    // Convert submenu items to level items and ensure proper visibility
+    const items = submenuItems.querySelectorAll('.menu-vdi__item');
+    items.forEach(item => {
+      // Remove any nested classes that don't apply to sliding mode
+      item.classList.remove('menu-vdi__item--child', 'menu-vdi__item--grandchild');
+      
+      // Handle nested items if they exist
+      const nestedToggle = item.querySelector('.menu-vdi__toggle');
+      if (nestedToggle) {
+        nestedToggle.addEventListener('click', (event) => {
+          event.preventDefault();
+          // Could implement deeper nesting here if needed
+        });
+      }
+    });
+
+    // Remove any hidden submenu classes from nested elements to ensure visibility
+    const nestedSubmenus = submenuItems.querySelectorAll('.menu-vdi__submenu');
+    nestedSubmenus.forEach(nestedSubmenu => {
+      nestedSubmenu.classList.remove('menu-vdi__submenu');
+      nestedSubmenu.classList.add('menu-vdi__nested-items');
+    });
+
+    // Ensure all list items are visible in sliding mode
+    const allListItems = submenuItems.querySelectorAll('li');
+    allListItems.forEach(li => {
+      if (!li.classList.contains('menu-vdi__item')) {
+        li.classList.add('menu-vdi__item');
+      }
+    });
+
+    newLevel.appendChild(submenuItems);
+    viewport.appendChild(newLevel);
+
+    // Animate to new level
+    this.animateToLevel(this.#currentLevel);
+  }
+
+  /**
+   * Create a back button for navigation levels
+   * @returns {HTMLElement}
+   */
+  createBackButton() {
+    const backButton = document.createElement('button');
+    backButton.className = 'menu-vdi__back';
+    backButton.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+      </svg>
+      Back
+    `;
+
+    backButton.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.navigateBack();
+    });
+
+    return backButton;
+  }
+
+  /**
+   * Navigate back to previous level
+   */
+  navigateBack() {
+    if (this.#currentLevel > 0) {
+      this.#currentLevel--;
+      this.#navigationStack.pop();
+
+      // Remove the current level element
+      const viewport = document.querySelector('.menu-vdi__viewport');
+      const currentLevelEl = viewport.querySelector(`[data-level="${this.#currentLevel + 1}"]`);
+      if (currentLevelEl) {
+        currentLevelEl.remove();
+      }
+
+      // Animate back to previous level
+      this.animateToLevel(this.#currentLevel);
+      
+      // Ensure menu stays open after back navigation
+      setTimeout(() => {
+        if (this.#mobileMenuButton.getAttribute("aria-expanded") === "false") {
+          this.#mobileMenuButton.setAttribute("aria-expanded", "true");
+        }
+      }, 50);
+    }
+  }
+
+  /**
+   * Animate viewport to specific level
+   * @param {number} level
+   */
+  animateToLevel(level) {
+    const viewport = document.querySelector('.menu-vdi__viewport');
+    if (!viewport) return;
+
+    const translateX = -level * 100;
+    viewport.style.transform = `translateX(${translateX}%)`;
+    viewport.setAttribute('data-current-level', level);
+  }
+
+  /**
+   * Reset sliding navigation to main level
+   */
+  resetSlidingNavigation() {
+    const menuContainer = document.getElementById('menu-container');
+    if (!menuContainer) return;
+    
+    if (this.#slidingViewportEnabled) {
+      this.#currentLevel = 0;
+      this.#navigationStack = [];
+      
+      const viewport = document.querySelector('.menu-vdi__viewport');
+      if (viewport) {
+        // Remove all levels except main
+        const levels = viewport.querySelectorAll('.menu-vdi__level:not(.menu-vdi__level--main)');
+        levels.forEach(level => level.remove());
+        
+        // Reset position
+        this.animateToLevel(0);
+      }
+    } else {
+      // Clean up sliding structure and restore normal menu
+      this.cleanupSlidingStructure();
+    }
+  }
+
+  /**
+   * Clean up sliding viewport structure and restore normal menu
+   */
+  cleanupSlidingStructure() {
+    const menuContainer = document.getElementById('menu-container');
+    if (!menuContainer) return;
+
+    // Remove sliding class
+    menuContainer.classList.remove('menu-vdi--sliding');
+
+    // Find viewport and move items back to container
+    const viewport = menuContainer.querySelector('.menu-vdi__viewport');
+    if (viewport) {
+      const mainLevel = viewport.querySelector('.menu-vdi__level--main');
+      if (mainLevel) {
+        // Move all items back to menu container
+        const items = Array.from(mainLevel.children);
+        items.forEach(item => {
+          menuContainer.appendChild(item);
+        });
+      }
+      
+      // Remove viewport structure
+      viewport.remove();
+    }
+
+    console.log('Sliding structure cleaned up');
+  }
+}
+
+export default Navigation;

static/js/modules/TagExternalLinks.js

@@ -0,0 +1,39 @@
+
+/**
+ * Tags external links in the document with appropriate attributes and styling.
+ *
+ * This function identifies all anchor elements with href attributes and determines
+ * if they point to external domains. External links are enhanced with:
+ * - Accessibility label indicating they open in a new tab
+ * - target="_blank" to open in new tab
+ * - rel="noopener noreferrer" for security
+ * - Custom CSS class "extLink" for styling
+ *
+ * Links are considered external if their host differs from the current page's host.
+ * Malformed URLs are silently ignored.
+ *
+ * @function tagExternalLinks
+ * @returns {void}
+ */
+
+function tagExternalLinks() {
+    const currentHost = window.location.host;
+
+    document.querySelectorAll('a[href]').forEach(link => {
+        try {
+            const url = new URL(link.href, window.location.href);
+
+            // If the link's host is different from the current host, treat as external
+            if (url.host !== currentHost) {
+                link.setAttribute('aria-label', 'External link, opens in a new tab');
+                link.setAttribute('target', '_blank');
+                link.setAttribute('rel', 'noopener noreferrer'); // Security best practice
+                link.classList.add('extLink'); // Add a custom class for icons or other styling
+            }
+        } catch (e) {
+            // Ignore malformed URLs
+        }
+    });
+}
+
+export default tagExternalLinks;