Detail Nav: Section Links

import { mdiConsolidate } from "@mdi/js"

export const uolSectionNavDetailNavLocation = () => {

  const detailNavs = document.querySelectorAll('.uol-detail-nav')
  
  if (detailNavs.length != 0) {
    const courseContainer = document.querySelector('.uol-course__content')

    const sectionNavContainer = document.querySelector('.uol-side-nav-container')

    detailNavs.forEach( (detailNav) => {

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

        if (window.innerWidth >= 1024) {
          sectionNavContainer.classList.add('uol-side-nav-container--populated')
          sectionNavContainer.insertAdjacentElement('afterbegin', detailNav)
        } else {
          sectionNavContainer.classList.remove('uol-side-nav-container--populated')
          courseContainer.insertAdjacentElement('beforebegin', detailNav)
        }
      })

      if (typeof(Event) === 'function') {
        // modern browsers
        window.dispatchEvent(new Event('resize'));
      } else {
          // for IE and other old browsers
          // causes deprecation warning on modern browsers
          var evt = window.document.createEvent('UIEvents')
          evt.initUIEvent('resize', true, false, window, 0)
          window.dispatchEvent(evt)
      }
    })
  }

  
}

export const uolOnePageLinks = () => {
  
  // if composite page
  const compositePageContainer = document.getElementById("course-content");
  const detailNavs = document.querySelectorAll('.uol-detail-nav')

  if (compositePageContainer && detailNavs.length != 0) {
    const sectionContainer = document.querySelectorAll('.uol-course__content__section');
  
    if (sectionContainer) {
      
      // strip out refresh parameter if present so doesn't duplicate 
      if (window.location.href.includes("?refresh=yes")) {
        const newUrl =  window.location.href.replace("?refresh=yes", ""); 
        window.location.href = newUrl;
      }
      
      // on first load look at hash value from URL
      if (window.location.hash) {

        // if one is set go to that section
        let itemName = window.location.hash.replace("#", "");
        loadSection(itemName);
      } else {

        // if one is not set go to first section
        let firstSectionId = sectionContainer[0].id;
        let itemName = firstSectionId.replace("section-", "");
        loadSection(itemName);
      }

      // add event listeners to each link
      const sectionLinks = document.querySelectorAll('.uol-detail-nav__section-link')
      if (sectionLinks) {
        sectionLinks.forEach((sectionLink) => {
          let itemName = sectionLink.id.replace("link-", ""); 
          sectionLink.addEventListener("click", () => loadSection(itemName));
        })
      }

      // add event listeners to page nav items
      const pageNavs = document.querySelectorAll('.uol-course__content__page-nav-container')
      pageNavs.forEach((pageNav) => {
        
        // set section to scroll to if next or previous are clilcked
        const scrollToSection = document.getElementById("course-content");
        
        // previous and next page nav
        const pageNavPrevious = pageNav.querySelectorAll('.uol-page-nav__item--prev')
        const pageNavNext = pageNav.querySelectorAll('.uol-page-nav__item--next')
        
        if (pageNavPrevious[0]) {

          // change hash value and run function to show all elements on previous page
          let hashValue = pageNavPrevious[0].hash;
          let itemName = hashValue.replace("#", ""); 
          pageNavPrevious[0].addEventListener("click", () => loadSection(itemName));

          // scroll to top of section
          pageNavPrevious[0].addEventListener("click", () => scrollToSection.scrollIntoView());
        }
        
        if (pageNavNext[0]) {
          
          // change hash value and run function to show all elements on previous page
          let hashValue = pageNavNext[0].hash;
          let itemName = hashValue.replace("#", ""); 
          pageNavNext[0].addEventListener("click", () => loadSection(itemName));

          // scroll to top of section
          pageNavNext[0].addEventListener("click", () => scrollToSection.scrollIntoView());
        }   
      })

      // link clicked function
      function loadSection(itemName) {
        
        // hide all sections and remove active link styling
        const sections = document.querySelectorAll('.uol-course__content__section');
        for (let section of sections) {
          
          // get ids of all elements relating to the section we are on
          let sectionId = section.id;
          let linkId = sectionId.replace("section-", "link-");
          let pageNavId = sectionId.replace("section-", "nav-");
          let rankingsId = sectionId.replace("section-", "rankings-");
          let profileId = sectionId.replace("section-", "profile-");
          
          // hide all content initially
          (document.getElementById(sectionId)) && (document.getElementById(sectionId).style.display = "none");
          (document.getElementById(pageNavId)) && (document.getElementById(pageNavId).style.display = "none");
          (document.getElementById(rankingsId)) && (document.getElementById(rankingsId).style.display = "none");
          (document.getElementById(profileId)) && (document.getElementById(profileId).style.display = "none");
          
          // disable active link styline
          (document.getElementById(linkId)) && (document.getElementById(linkId).classList.remove("uol-detail__active-link"));
        }

        // show selected section and add styling to link 
        let sectionToShowId = "section-" + itemName;
        let linkToHighlightId = "link-" + itemName;
        let pageNavToShowId = "nav-" + itemName;
        let rankingsToShowId = "rankings-" + itemName;
        let profileToShowId = "profile-" + itemName;
        
        // show content for active link
        (document.getElementById(sectionToShowId)) && (document.getElementById(sectionToShowId).style.display = "block");
        (document.getElementById(pageNavToShowId)) && (document.getElementById(pageNavToShowId).style.display = "block");
        (document.getElementById(rankingsToShowId)) && (document.getElementById(rankingsToShowId).style.display = "block");
        (document.getElementById(profileToShowId)) && (document.getElementById(profileToShowId).style.display = "block");

        // enable active link styline
        (document.getElementById(linkToHighlightId)) && (document.getElementById(linkToHighlightId).classList.add("uol-detail__active-link"));
      }
    }
  }
}