No notes defined.

{% if detail_nav.links.length %}

<nav class="uol-detail-nav">
    {% if detail_nav.heading %}
  <h2 class="uol-detail-nav__title">
    <span class="uol-detail-nav__title__intro">{{ detail_nav.heading.intro}}</span>
    <span class="uol-detail-nav__title__text">{{ detail_nav.heading.text}}</span>
  </h2>
  {% endif %}
  <ul class="uol-detail-nav__list">
    {% for link in detail_nav.links %}
      <li class="uol-detail-nav__list-item">
      {% if link.section_link %}
        <a id="link-{{ link.id }}" class="uol-detail-nav__list-link uol-detail-nav__section-link" href="#{{ link.id }}">{{ link.title }}</a>
      {% else %}
        <a class="uol-detail-nav__list-link {% if link.current %}uol-detail-nav__active-link{% endif %}" href="{{ link.url }}" {% if link.current %}aria-current="page"{% endif %}>{{ link.title }}</a>
      {% endif %}
      </li>
    {% endfor %}
  </ul>
</nav>
{% endif %}
<nav class="uol-detail-nav">

    <h2 class="uol-detail-nav__title">
        <span class="uol-detail-nav__title__intro">In this section</span>
        <span class="uol-detail-nav__title__text">Undergraduate</span>
    </h2>

    <ul class="uol-detail-nav__list">

        <li class="uol-detail-nav__list-item">

            <a id="link-overview" class="uol-detail-nav__list-link uol-detail-nav__section-link" href="#overview">Course overview</a>

        </li>

        <li class="uol-detail-nav__list-item">

            <a id="link-content" class="uol-detail-nav__list-link uol-detail-nav__section-link" href="#content">Course details</a>

        </li>

        <li class="uol-detail-nav__list-item">

            <a id="link-entry" class="uol-detail-nav__list-link uol-detail-nav__section-link" href="#entry">Entry requirements</a>

        </li>

        <li class="uol-detail-nav__list-item">

            <a id="link-fees" class="uol-detail-nav__list-link uol-detail-nav__section-link" href="#fees">Fees</a>

        </li>

        <li class="uol-detail-nav__list-item">

            <a id="link-apply" class="uol-detail-nav__list-link uol-detail-nav__section-link" href="#apply">Applying</a>

        </li>

    </ul>
</nav>
  • Content:
    .uol-detail-nav {
        padding: $spacing-4 0 $spacing-4;
    
        @include media(">=uol-media-s") {
            margin-left: calc(100% / 12 + #{$spacing-1 / 4});
            
            // spans 7 columns (hence 5 columns right margin plus column spacing) 
            margin-right: calc(100% / 12 * 5 + #{$spacing-2});
        }
    
        @include media(">=uol-media-l") {
            margin: 0;
        }
    }
    
    .uol-detail-nav__title {
    
      @include media(">=uol-media-l") {
        margin-left: calc(100% / 12 + #{$spacing-1 / 4});
        margin-right: calc(100% / 12 + #{$spacing-1 / 4});
      }
    
      @include media(">=uol-media-l") {
        margin: 0;
      }
      .uol-detail-nav__title__intro {
        display: block;
        font-size: 0.5rem;
        margin-bottom: $spacing-2;
      }
    
      .uol-detail-nav__title__intro {
        display: block;
        font-size: 1rem;
      }
    }
    
        .uol-detail-nav__list {
            border-left: $spacing-1 solid $color-brand;
            padding: 0 0 0 2.25rem;
            list-style: none;
        }
    
            .uol-detail-nav__list-item {
                margin-bottom: $spacing-5;
    
                &:last-child {
                    margin-bottom: 0;
                }
            }
    
            .uol-detail-nav__list-link {
                text-decoration: none;
                font-size: 1.125rem;
    
                &:hover,
                &:focus {
                  outline: 2px dotted transparent;
                  text-decoration: underline;
                  text-underline-offset: 6px;
                  text-decoration-color: $color-brand;
                  text-decoration-thickness: 4px;
                }
    
                &:focus-visible {
                  background-color: $color-brand--faded;
                }
    
                &[aria-current] {
                  &:not(:focus) {
                    color: $color-brand;
    
                    &:not(:hover) {
                      text-decoration: underline;
                    }
                  }
                }
            }
    
            .uol-detail__active-link {
              color: $color-brand;
              text-decoration: underline;
            }
    
    
    
  • URL: /components/raw/uol-detail-nav/_detail-nav.scss
  • Filesystem Path: src/library/02-components/detail-nav/_detail-nav.scss
  • Size: 1.9 KB
  • Content:
    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"));
          }
        }
      }
    }
    
  • URL: /components/raw/uol-detail-nav/detail-nav.module.js
  • Filesystem Path: src/library/02-components/detail-nav/detail-nav.module.js
  • Size: 6.6 KB
{
  "detail_nav": {
    "heading": {
      "intro": "In this section",
      "text": "Undergraduate"
    },
    "links": [
      {
        "id": "overview",
        "title": "Course overview",
        "section_link": true
      },
      {
        "id": "content",
        "title": "Course details",
        "section_link": true
      },
      {
        "id": "entry",
        "title": "Entry requirements",
        "section_link": true
      },
      {
        "id": "fees",
        "title": "Fees",
        "section_link": true
      },
      {
        "id": "apply",
        "title": "Applying",
        "section_link": true
      }
    ]
  }
}