vanilla-framework 4.34.1 → 4.34.2

package/templates/static/js/scripts.js

@@ -0,0 +1,418 @@
+// Setup toggling of side navigation drawer
+(function () {
+  // throttling function calls, by Remy Sharp
+  // http://remysharp.com/2010/07/21/throttling-function-calls/
+  const throttle = function (fn, delay) {
+    let timer = null;
+    return function () {
+      let context = this,
+        args = arguments;
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        fn.apply(context, args);
+      }, delay);
+    };
+  };
+
+  var expandedSidenavContainer = null;
+  var lastFocus = null;
+  var ignoreFocusChanges = false;
+  var focusAfterClose = null;
+
+  // Traps the focus within the currently expanded sidenav drawer
+  function trapFocus(event) {
+    if (ignoreFocusChanges || !expandedSidenavContainer) return;
+    // skip the focus trap if the sidenav is not in the expanded status (large screens)
+    if (!expandedSidenavContainer.classList.contains('is-drawer-expanded')) return;
+    var sidenavDrawer = expandedSidenavContainer.querySelector('.p-side-navigation__drawer');
+
+    if (sidenavDrawer.contains(event.target)) {
+      lastFocus = event.target;
+    } else {
+      focusFirstDescendant(sidenavDrawer);
+      if (lastFocus == document.activeElement) {
+        focusLastDescendant(sidenavDrawer);
+      }
+      lastFocus = document.activeElement;
+    }
+  }
+
+  // Attempts to focus given element
+  function attemptFocus(child) {
+    if (child.focus) {
+      ignoreFocusChanges = true;
+      child.focus();
+      ignoreFocusChanges = false;
+      return document.activeElement === child;
+    }
+
+    return false;
+  }
+
+  // Focuses first child element
+  function focusFirstDescendant(element) {
+    for (var i = 0; i < element.childNodes.length; i++) {
+      var child = element.childNodes[i];
+      if (attemptFocus(child) || focusFirstDescendant(child)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  // Focuses last child element
+  function focusLastDescendant(element) {
+    for (var i = element.childNodes.length - 1; i >= 0; i--) {
+      var child = element.childNodes[i];
+      if (attemptFocus(child) || focusLastDescendant(child)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+    Toggles the expanded/collapsed classes on side navigation element.
+
+    @param {HTMLElement} sideNavigation The side navigation element.
+    @param {Boolean} show Whether to show or hide the drawer.
+  */
+  function toggleDrawer(sideNavigation, show) {
+    expandedSidenavContainer = show ? sideNavigation : null;
+    const toggleButtonOutsideDrawer = sideNavigation.querySelector('.p-side-navigation__toggle, .js-drawer-toggle');
+    const toggleButtonInsideDrawer = sideNavigation.querySelector('.p-side-navigation__toggle--in-drawer');
+
+    if (sideNavigation) {
+      if (show) {
+        sideNavigation.classList.remove('is-drawer-collapsed');
+        sideNavigation.classList.add('is-drawer-expanded');
+
+        toggleButtonInsideDrawer.focus();
+        toggleButtonOutsideDrawer.setAttribute('aria-expanded', true);
+        toggleButtonInsideDrawer.setAttribute('aria-expanded', true);
+        focusFirstDescendant(sideNavigation);
+        focusAfterClose = toggleButtonOutsideDrawer;
+        document.addEventListener('focus', trapFocus, true);
+      } else {
+        sideNavigation.classList.remove('is-drawer-expanded');
+        sideNavigation.classList.add('is-drawer-collapsed');
+
+        toggleButtonOutsideDrawer.focus();
+        toggleButtonOutsideDrawer.setAttribute('aria-expanded', false);
+        toggleButtonInsideDrawer.setAttribute('aria-expanded', false);
+        if (focusAfterClose && focusAfterClose.focus) {
+          focusAfterClose.focus();
+        }
+        document.removeEventListener('focus', trapFocus, true);
+      }
+    }
+  }
+
+  /**
+    Attaches event listeners for the side navigation toggles
+    @param {HTMLElement} sideNavigation The side navigation element.
+  */
+  function setupSideNavigation(sideNavigation) {
+    var toggles = [].slice.call(sideNavigation.querySelectorAll('.js-drawer-toggle'));
+    var drawerEl = sideNavigation.querySelector('.p-side-navigation__drawer');
+
+    // hide navigation drawer on small screens
+    sideNavigation.classList.add('is-drawer-hidden');
+
+    // setup drawer element
+    drawerEl.addEventListener('animationend', () => {
+      if (!sideNavigation.classList.contains('is-drawer-expanded')) {
+        sideNavigation.classList.add('is-drawer-hidden');
+      }
+    });
+
+    window.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        toggleDrawer(sideNavigation, false);
+      }
+    });
+
+    // setup toggle buttons
+    toggles.forEach(function (toggle) {
+      toggle.addEventListener('click', function (event) {
+        event.preventDefault();
+
+        if (sideNavigation) {
+          sideNavigation.classList.remove('is-drawer-hidden');
+          toggleDrawer(sideNavigation, !sideNavigation.classList.contains('is-drawer-expanded'));
+        }
+      });
+    });
+
+    // hide side navigation drawer when screen is resized
+    window.addEventListener(
+      'resize',
+      throttle(function () {
+        toggles.forEach((toggle) => {
+          return toggle.setAttribute('aria-expanded', false);
+        });
+        // remove expanded/collapsed class names to avoid unexpected animations
+        sideNavigation.classList.remove('is-drawer-expanded');
+        sideNavigation.classList.remove('is-drawer-collapsed');
+        sideNavigation.classList.add('is-drawer-hidden');
+      }, 10),
+    );
+  }
+
+  /**
+    Attaches event listeners for all the side navigations in the document.
+    @param {String} sideNavigationSelector The CSS selector matching side navigation elements.
+  */
+  function setupSideNavigations(sideNavigationSelector) {
+    // Setup all side navigations on the page.
+    var sideNavigations = [].slice.call(document.querySelectorAll(sideNavigationSelector));
+
+    sideNavigations.forEach(setupSideNavigation);
+  }
+
+  setupSideNavigations('.p-side-navigation, [class*="p-side-navigation--"]');
+
+  // Add table of contents to side navigation on documentation pages
+  const sideNav = document.querySelector('.p-side-navigation, [class*="p-side-navigation--"]');
+
+  // Generate id from H2s content when it does not exist
+  document.querySelectorAll('main h2:not([id])').forEach(function (heading) {
+    // Only get direct text from h2 node, excluding any child nodes
+    var id = heading.childNodes[0].textContent
+      .trim()
+      .toLowerCase()
+      .replaceAll(/\s+/g, '-')
+      .replaceAll(/[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,./:;<=>?@[\]^`{|}~]/g, '');
+    heading.setAttribute('id', id);
+  });
+
+  // get all headings from page and add it to table of contents
+  var list = document.createElement('ul');
+  list.classList.add('p-table-of-contents__list');
+
+  var item = document.createElement('li');
+  item.classList.add('p-table-of-contents__item');
+
+  var anchor = document.createElement('a');
+  anchor.classList.add('p-table-of-contents__link');
+
+  // Add all H2s with IDs to the table of contents list
+  [].slice.call(document.querySelectorAll('main h2[id]')).forEach(function (heading) {
+    var thisItem = item.cloneNode();
+    var thisAnchor = anchor.cloneNode();
+    thisAnchor.setAttribute('href', '#' + heading.id);
+    // Only get direct text from h2 node, excluding any child nodes
+    thisAnchor.textContent = heading.childNodes[0].textContent.trim();
+    thisItem.appendChild(thisAnchor);
+    list.appendChild(thisItem);
+  });
+
+  // Add table of contents as nested list to side navigation
+  if (list.querySelectorAll('li').length > 0) {
+    var toc = document.querySelector('#toc');
+    if (toc) {
+      toc.appendChild(list);
+      toc.closest('.u-hide').classList.remove('u-hide');
+    }
+  }
+
+  // accordion side navigation
+  var currentPage = document.querySelector('.p-side-navigation__link[aria-current="page"]');
+  if (currentPage) {
+    var parentList = currentPage.parentNode.parentNode;
+    parentList.setAttribute('aria-expanded', true);
+    parentList.previousElementSibling.setAttribute('aria-expanded', true);
+  }
+
+  function setupSideNavigationExpandToggle(toggle) {
+    const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
+    if (!isExpanded) {
+      toggle.setAttribute('aria-expanded', isExpanded);
+    }
+    const item = toggle.closest('.p-side-navigation__item');
+    const link = item.querySelector('.p-side-navigation__link');
+    const nestedList = item.querySelector('.p-side-navigation__list');
+    if (!link?.hasAttribute('aria-expanded')) {
+      link.setAttribute('aria-expanded', isExpanded);
+    }
+    if (!nestedList?.hasAttribute('aria-expanded')) {
+      nestedList.setAttribute('aria-expanded', isExpanded);
+    }
+  }
+
+  function handleExpandToggle(event) {
+    const item = event.currentTarget.closest('.p-side-navigation__item');
+    const button = item.querySelector('.p-side-navigation__expand, .p-side-navigation__accordion-button');
+    const link = item.querySelector('.p-side-navigation__link');
+    const nestedList = item.querySelector('.p-side-navigation__list');
+
+    [button, link, nestedList].forEach((el) => {
+      el.setAttribute('aria-expanded', el.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');
+    });
+  }
+
+  function setupSideNavigationExpands() {
+    var expandToggles = document.querySelectorAll('.p-side-navigation__expand, .p-side-navigation__accordion-button');
+    expandToggles.forEach((toggle) => {
+      setupSideNavigationExpandToggle(toggle);
+      toggle.addEventListener('click', (e) => {
+        handleExpandToggle(e);
+      });
+    });
+  }
+
+  setupSideNavigationExpands();
+})();
+
+// scroll active side navigation item into view (without scrolling whole page)
+(function () {
+  var sideNav = document.querySelector('.p-side-navigation');
+  var currentItem = document.querySelector('.p-side-navigation__link[aria-current="page"]');
+
+  if (sideNav && currentItem) {
+    // calculate scroll by comparing top of side nav and top of active item
+    var currentItemOffset = currentItem.getBoundingClientRect().top;
+    var offset = currentItemOffset - sideNav.getBoundingClientRect().top;
+
+    // only scroll if active link is off screen or close to bottom of the window
+    if (currentItemOffset > window.innerHeight * 0.7) {
+      setTimeout(function () {
+        sideNav.scrollTop = offset;
+      }, 0);
+    }
+  }
+})();
+
+// Docs search functions
+(function () {
+  var searchDocsReset = document.getElementById('search-docs-reset');
+  var searchBox = document.getElementById('search-docs');
+
+  if (searchDocsReset) {
+    searchDocsReset.addEventListener('click', function (e) {
+      searchBox.value = '';
+      searchBox.focus();
+      e.preventDefault();
+    });
+  }
+})();
+
+(function () {
+  function initNavigationSearch(element) {
+    const searchButtons = element.querySelectorAll('.js-search-button');
+
+    searchButtons.forEach((searchButton) => {
+      searchButton.addEventListener('click', toggleSearch);
+    });
+
+    const menuButton = element.querySelector('.js-menu-button');
+    if (menuButton) {
+      menuButton.addEventListener('click', toggleMenu);
+    }
+
+    const overlay = element.querySelector('.p-navigation__search-overlay');
+    if (overlay) {
+      overlay.addEventListener('click', closeAll);
+    }
+
+    function toggleMenu(e) {
+      e.preventDefault();
+
+      var navigation = e.target.closest('.p-navigation');
+      if (navigation.classList.contains('has-menu-open')) {
+        closeAll();
+      } else {
+        closeAll();
+        openMenu(e);
+      }
+    }
+
+    function toggleSearch(e) {
+      e.preventDefault();
+
+      var navigation = e.target.closest('.p-navigation');
+      if (navigation.classList.contains('has-search-open')) {
+        closeAll();
+      } else {
+        closeAll();
+        openSearch(e);
+      }
+    }
+
+    function openSearch(e) {
+      e.preventDefault();
+      var navigation = e.target.closest('.p-navigation');
+      var nav = navigation.querySelector('.p-navigation__nav');
+
+      var searchInput = navigation.querySelector('.p-search-box__input');
+      var buttons = document.querySelectorAll('.js-search-button');
+
+      buttons.forEach((searchButton) => {
+        searchButton.setAttribute('aria-pressed', true);
+      });
+
+      navigation.classList.add('has-search-open');
+      searchInput.focus();
+      document.addEventListener('keyup', keyPressHandler);
+    }
+
+    function openMenu(e) {
+      e.preventDefault();
+      var navigation = e.target.closest('.p-navigation');
+      var nav = navigation.querySelector('.p-navigation__nav');
+
+      var buttons = document.querySelectorAll('.js-menu-button');
+
+      buttons.forEach((searchButton) => {
+        searchButton.setAttribute('aria-pressed', true);
+      });
+
+      navigation.classList.add('has-menu-open');
+      document.addEventListener('keyup', keyPressHandler);
+    }
+
+    function closeSearch() {
+      var navigation = document.querySelector('.p-navigation');
+      var nav = navigation.querySelector('.p-navigation__nav');
+
+      var banner = document.querySelector('.p-navigation__banner');
+      var buttons = document.querySelectorAll('.js-search-button');
+
+      buttons.forEach((searchButton) => {
+        searchButton.removeAttribute('aria-pressed');
+      });
+
+      navigation.classList.remove('has-search-open');
+      document.removeEventListener('keyup', keyPressHandler);
+    }
+
+    function closeMenu() {
+      var navigation = document.querySelector('.p-navigation');
+      var nav = navigation.querySelector('.p-navigation__nav');
+
+      var banner = document.querySelector('.p-navigation__banner');
+      var buttons = document.querySelectorAll('.js-menu-button');
+
+      buttons.forEach((searchButton) => {
+        searchButton.removeAttribute('aria-pressed');
+      });
+
+      navigation.classList.remove('has-menu-open');
+      document.removeEventListener('keyup', keyPressHandler);
+    }
+
+    function closeAll() {
+      closeSearch();
+      closeMenu();
+    }
+
+    function keyPressHandler(e) {
+      if (e.key === 'Escape') {
+        closeAll();
+      }
+    }
+  }
+
+  var navigation = document.querySelector('#navigation');
+  initNavigationSearch(navigation);
+})();

package/templates/static/js/tabs.js

@@ -0,0 +1,111 @@
+const keys = {
+  left: 'ArrowLeft',
+  right: 'ArrowRight',
+};
+
+const direction = {
+  ArrowLeft: -1,
+  ArrowRight: 1,
+};
+
+/**
+  Attaches a number of events that each trigger
+  the reveal of the chosen tab content
+  @param {Array} tabs an array of tabs within a container
+*/
+function attachEvents(tabs) {
+  tabs.forEach(function (tab, index) {
+    tab.addEventListener('keyup', function (e) {
+      if (e.code === keys.left || e.code === keys.right) {
+        switchTabOnArrowPress(e, tabs);
+      }
+    });
+
+    tab.addEventListener('click', function (e) {
+      e.preventDefault();
+      setActiveTab(tab, tabs);
+    });
+
+    tab.addEventListener('focus', function () {
+      setActiveTab(tab, tabs);
+    });
+
+    tab.index = index;
+  });
+}
+
+/**
+    Determine which tab to show when an arrow key is pressed
+    @param {KeyboardEvent} event
+    @param {Array} tabs an array of tabs within a container
+  */
+function switchTabOnArrowPress(event, tabs) {
+  var pressed = event.code;
+
+  if (direction[pressed]) {
+    var target = event.target;
+    if (target.index !== undefined) {
+      if (tabs[target.index + direction[pressed]]) {
+        tabs[target.index + direction[pressed]].focus();
+      } else if (pressed === keys.left) {
+        tabs[tabs.length - 1].focus();
+      } else if (pressed === keys.right) {
+        tabs[0].focus();
+      }
+    }
+  }
+}
+
+/**
+    Cycles through an array of tab elements and ensures 
+    only the target tab and its content are selected
+    @param {HTMLElement} tab the tab whose content will be shown
+    @param {Array} tabs an array of tabs within a container
+  */
+function setActiveTab(tab, tabs) {
+  tabs.forEach(function (tabElement) {
+    var tabContent = document.getElementById(tabElement.getAttribute('aria-controls'));
+
+    if (tabElement === tab) {
+      tabElement.setAttribute('aria-selected', true);
+      tabContent.removeAttribute('hidden');
+    } else {
+      tabElement.setAttribute('aria-selected', false);
+      tabContent.setAttribute('hidden', true);
+    }
+  });
+}
+
+/**
+  Attaches events to tab links within a given parent element,
+  and sets the active tab if the current hash matches the id
+  of an element controlled by a tab link
+  @param {String} selector class name of the element 
+  containing the tabs we want to attach events to
+*/
+export function initTabs(selector) {
+  const tabContainers = [].slice.call(document.querySelectorAll(selector));
+
+  tabContainers.forEach(function (tabContainer) {
+    const tabs = [].slice.call(tabContainer.querySelectorAll('[aria-controls]'));
+    attachEvents(tabs);
+  });
+}
+
+/**
+ * Auto-initialize tabs when DOM is loaded
+ * This maintains backward compatibility for existing implementations
+ */
+export function autoInit() {
+  document.addEventListener('DOMContentLoaded', function () {
+    initTabs('[role="tablist"]');
+  });
+}
+
+// Export individual functions for more granular usage
+export {attachEvents, switchTabOnArrowPress, setActiveTab};
+
+// Auto-initialize by default to maintain backward compatibility
+if (typeof document !== 'undefined') {
+  autoInit();
+}