Global Quicklinks

const svgRightArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
</svg>`

export const globalQuicklinks = () => {

  // Utility getSiblings()
  const getSiblings = (element) => {
    return Array.prototype.filter.call(element.parentNode.children, function (sibling) {
      return sibling !== element;
    });
  };

  // Utility isDescendant()
  const isDescendant = (el, parent) => {
    let isChild = false

    if (el === parent) { //is this the element itself?
      isChild = true
    }

    while (el = el.parentNode) {
      if (el == parent) {
        isChild = true
      }
    }

    return isChild
  }

  const groupButtons = (quicklinksContainer) => {
    // Add buttons to link group parents

    // const groupTitles = quicklinksContainer.querySelectorAll('.uol-quicklinks__group--title-container')
    const groups = quicklinksContainer.querySelectorAll('.uol-quicklinks__group')

    groups.forEach( (group) => {
      const title = group.firstChild.textContent.trim()

      group.firstChild.remove()

      const button = document.createElement('button')
      button.classList.add('uol-quicklinks__button')
      button.innerHTML = `${title}<span class="uol-quicklinks__button__icon"></span>`
      button.setAttribute('aria-expanded', 'false')
      group.prepend(button)
    })
  }

  const moreWrap = (quicklinksContainer) => {
      // If buttons are too wide for container wrap overflowing groups in "More"

      const quicklinksGroups = quicklinksContainer.querySelectorAll('.uol-quicklinks__group')
      const containerWidth = quicklinksContainer.clientWidth

      let groupsWidth = 0

      let moreStart = null

      let moreItems = document.createElement('li')
      moreItems.classList.add('uol-quicklinks__group')
      moreItems.classList.add('uol-quicklinks__group--more')
      moreItems.innerHTML = `
        <button class="uol-quicklinks__button uol-quicklinks__button--more" aria-expanded="false">More<span class="uol-quicklinks__button__icon"></span></button>
      `

      let moreItemsList = document.createElement('ul')
      moreItemsList.classList.add('uol-quicklinks__more-list')

      quicklinksGroups.forEach( (quicklinksGroup, i) => {

        const groupWidth = quicklinksGroup.offsetWidth

        groupsWidth += groupWidth

        if (groupsWidth > containerWidth) {

          if (!moreStart) {
            moreStart = true
            let prevGroup = quicklinksGroups[i - 1]
            let prevGroupClone = prevGroup.cloneNode(true)
            // Remove button
            const newHeadingPrev = document.createTextNode(prevGroupClone.querySelector('button').innerText)
            prevGroupClone.querySelector('button').remove()
            prevGroupClone.prepend(newHeadingPrev)
            moreItemsList.appendChild(prevGroupClone)
            prevGroup.remove()
          }

          const itemClone = quicklinksGroup.cloneNode(true)
          // Remove button
          const newHeading = document.createTextNode(itemClone.querySelector('button').innerText)
          itemClone.querySelector('button').remove()
          itemClone.prepend(newHeading)
          moreItemsList.appendChild(itemClone)
          quicklinksGroup.remove()
        }

      })

      if (moreStart) {
        moreItems.appendChild(moreItemsList)
        quicklinksContainer.querySelector('.uol-quicklinks__list').append(moreItems)
      }

  }

  const buttonAction = (quicklinksContainer) => {
    const buttons = quicklinksContainer.querySelectorAll('.uol-quicklinks__button')

    buttons.forEach( (button) => {
      button.onclick = () => {

        let expanded = button.getAttribute('aria-expanded') === 'true' || false

        const siblings = getSiblings(button.parentElement)
        const containerParent = quicklinksContainer.parentNode

        siblings.forEach( (sibling) => {
          sibling.classList.remove('uol-quicklinks__group--expanded')
        })

        button.setAttribute('aria-expanded', !expanded)

        if (!expanded) {

          button.parentNode.classList.add('uol-quicklinks__group--expanded')

          // Alter siblings
          siblings.forEach( (sibling) => {
            sibling.classList.add('uol-quicklinks__group--sibling-expanded')
            sibling.querySelector('button').setAttribute('aria-expanded', 'false')
          })

          // Alter containerParent parent to hide container's siblings
          if (containerParent.classList.contains('uol-global-masthead')) {
            containerParent.classList.add('uol-global-masthead--quicklinks-expanded')
          }
        } else {

          button.parentNode.classList.remove('uol-quicklinks__group--expanded')

          // Alter siblings
          siblings.forEach( (sibling) => {
            sibling.classList.remove('uol-quicklinks__group--sibling-expanded')
          })

          // Alter containerParent parent to show container's siblings
          if (containerParent.classList.contains('uol-global-masthead')) {
            containerParent.classList.remove('uol-global-masthead--quicklinks-expanded')
          }
        }

      }
    })
  }

  const focusListener = (quicklinksContainer) => {

    const subLists = quicklinksContainer.querySelectorAll('.uol-quicklinks__group')
    const moreList = quicklinksContainer.querySelector('.uol-quicklinks__more-list')

    const buttons = quicklinksContainer.querySelectorAll('.uol-quicklinks__button')

    subLists.forEach((subList) => {

      subList.addEventListener('focusout', (event) => {

        if (event.relatedTarget) {

          if ( !isDescendant(event.relatedTarget, subList) && !isDescendant(event.relatedTarget, moreList) ) {

            quicklinksContainer.parentNode.classList.remove('uol-global-masthead--quicklinks-expanded')
            buttons.forEach( (button) => {
              button.parentNode.classList.remove('uol-quicklinks__group--expanded')
              button.parentNode.classList.remove('uol-quicklinks__group--sibling-expanded')
              button.setAttribute('aria-expanded', 'false')
            })
          }
        }

      })
    })

  }

  const linkArrows = (quicklinksContainer) => {

        const subNavItems = quicklinksContainer.querySelectorAll('.uol-quicklinks__group__link')
        // Add arrows to subnav links
        subNavItems.forEach( (item) => {

          // Split text to array
          const innerTextArray = item.innerText.trim().split(' ')

          // Wrap last word and svg in no-wrap span to avoid wrapping
          item.innerHTML = innerTextArray.slice(0, -1).join(' ') + ' <span class="no-wrap">' + innerTextArray[innerTextArray.length - 1] + '' + svgRightArrow + '</span>'
        })
  }

  const quicklinksContainers = document.querySelectorAll('.uol-quicklinks');

  quicklinksContainers.forEach( (quicklinksContainer) => {

    // Store original HTML
    const quicklinksContainerClone = quicklinksContainer.cloneNode(true)

    // Initialise
    groupButtons(quicklinksContainer)
    moreWrap(quicklinksContainer)
    buttonAction(quicklinksContainer)
    focusListener(quicklinksContainer)
    linkArrows(quicklinksContainer)


    // Reset on resize

    let windowWidth = false

    window.addEventListener('resize', () => {

      setTimeout(() => {

        // Has the width changed?
        if (!windowWidth || window.innerWidth != windowWidth) {

          // Reset to original HTML
          quicklinksContainer.innerHTML = quicklinksContainerClone.innerHTML
          // Rerun
          groupButtons(quicklinksContainer)
          moreWrap(quicklinksContainer)
          buttonAction(quicklinksContainer)
          focusListener(quicklinksContainer)
          linkArrows(quicklinksContainer)

          windowWidth = window.innerWidth

        }

      }, 100);

    })

    // Close on click outside

    document.addEventListener("click", (evt) => {

      let targetElement = evt.target; // clicked element

      do {
          if (targetElement == quicklinksContainer) {
              // This is a click inside. Do nothing, just return.
              return;
          }
          // Go up the DOM
          targetElement = targetElement.parentNode;
      } while (targetElement)

      // This is a click outside.
      const buttons = quicklinksContainer.querySelectorAll('.uol-quicklinks__button')

      quicklinksContainer.parentNode.classList.remove('uol-global-masthead--quicklinks-expanded')
      buttons.forEach( (button) => {
        button.parentNode.classList.remove('uol-quicklinks__group--expanded')
        button.parentNode.classList.remove('uol-quicklinks__group--sibling-expanded')
        button.setAttribute('aria-expanded', 'false')
      })
    })

    // Close on escape

    window.addEventListener("keydown", function(event) {

      if (event.key === 'Escape' || event.keyCode === 27) {
        const buttons = quicklinksContainer.querySelectorAll('.uol-quicklinks__button')

        quicklinksContainer.parentNode.classList.remove('uol-global-masthead--quicklinks-expanded')
        buttons.forEach( (button) => {
          button.parentNode.classList.remove('uol-quicklinks__group--expanded')
          button.parentNode.classList.remove('uol-quicklinks__group--sibling-expanded')
          button.setAttribute('aria-expanded', 'false')
        })
      }

    }, true);

  })

}