@pimaonline/pimaonline-themepack 2.4.1 → 3.0.0

package/dist/js/scripts2.js

@@ -1,361 +1,541 @@
-/// @description Main JS file for PimaOnline Themepack
-/// @dependencies jQuery 3.3.1 or later
-
-const courseBody = document.querySelector("body");
-const contentWrapper = document.querySelector("#content-wrapper");
-const secondColumn = document.querySelector("#second-column");
-const thirdColumn = document.querySelector("#third-column");
-const columnWidget = document.querySelector("#column-widget");
-const videoWrapper = document.querySelector("#video-wrapper");
-const rolePres = document.querySelectorAll('[role="presentation"]');
-const imageGallery = document.querySelector(".image-gallery");
-const vocabListWidget = document.querySelector("dl.vocab-list");
-const vocabTerms = document.querySelectorAll("dl.vocab-list dt");
-const vocabDefs = document.querySelectorAll("dl.vocab-list dd");
-const vocabCloseBtns = document.querySelectorAll("dl.vocab-list button");
-const vocabLists = document.querySelectorAll("dl[class^='vocab-list']");
-const mediaContainers = document.querySelectorAll(".media-container"); 
-const tabsWidgets = document.querySelectorAll(".tabs");
-const h5pIframes = document.querySelectorAll("iframe");
-const docHead = document.querySelector("head");
-const h5pResizerExists = docHead.querySelector("script[src='https://pima.h5p.com/js/h5p-resizer.js']");
-const h5pResizer = document.createElement("script");
-
-// Grid 
-const addGrid = () => {
-  if (secondColumn && thirdColumn) {
-    courseBody.id = "three-column";
-  } else if (secondColumn && !columnWidget) {
-      courseBody.id = "two-column";
-  } else if (columnWidget) {
-      courseBody.id = "two-col-widget";
-  } else if (videoWrapper) {
-      courseBody.id = "video-grid";
-  } else {
-      courseBody.id = "one-column";
-  }
-};
-addGrid();
-
-// JS to add role and aria-label to content-wrapper, second-column, and third-column
-const addAria = () => {
-  contentWrapper.setAttribute("role", "main");
-  if (secondColumn) {
-    secondColumn.setAttribute("role", "region");
-    secondColumn.setAttribute("aria-label", "Second column");
-  }
-  if (thirdColumn) {
-    thirdColumn.setAttribute("role", "region");
-    thirdColumn.setAttribute("aria-label", "Third column");
-  }
-};
-addAria();
-
-// Clean up HTML
-const cleanMarkup = () => {
-// Remove role="presentation" attr from any element that has it  
-  if (rolePres) {
-    rolePres.forEach((roleElem) => roleElem.removeAttribute("role"));
-  }  
-  // Set functino to remove atrributes from elements
-  const discardAttributes = (element, ...attributes) => { 
-    attributes.forEach((attribute) => element.removeAttribute(attribute)); 
-  }
-  // Remove attributes from tables
-  const tableElems = document.querySelectorAll("table, thead, tbody, tr, th, td");
-  tableElems.forEach((elem) => {
-    discardAttributes(elem, "cellspacing", "cellpadding", "width", "style");
-  });
-};
-cleanMarkup();
-
-// Helper JS for Responsive Tables
-const initResponsiveTables = () => {
-  const tables = document.querySelectorAll(".display, .display-lg")
-  for (let table = 0; table < tables.length; table++) {
-    let headertext = [],
-      headers = tables[table].querySelectorAll(".display table th, table.display th, .display-lg table th, table.display-lg th"),
-      tablebody = tables[table].querySelector(".display table tbody, table.display tbody, .display-lg table tbody, table.display-lg tbody");
-    for (let header = 0; header < headers.length; header++) {
-      let current = headers[header];
-      headertext.push(current.textContent.replace(/\r?\n|\r/, ""));
-    }
-    for (let y = 0, row; row = tablebody.rows[y]; y++) {
-      for (let j = 0, col; col = row.cells[j]; j++) {
-        col.setAttribute("data-th", headertext[j]);
-      }
-    }
-  }
-}
-initResponsiveTables();
-
-// This is called by anchor links via onlick="" in the HTML
-//  Added because default anchor links don't work on all browsers using D2L
-const jumpTo = (anchor) => {
-  document.getElementById(anchor).scrollIntoView();
-}  
-
-// Image gallery
-const callImageGallery = () => {
-  // Create link element with font-awesome cdn and append it to the <head>
-  const docHead = document.querySelector("head");
-  const fontAwesomeCdn = document.createElement("link");
-  fontAwesomeCdn.setAttribute("rel", "stylesheet");
-  fontAwesomeCdn.setAttribute("href", "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css");
-  docHead.appendChild(fontAwesomeCdn);
-  // Begin image gallery
-  const imgGalleries = document.querySelectorAll(".image-gallery"),
-    imgBoxes = document.querySelectorAll(".image-box"),
-    modalBoxContent = `<div class="modal-box invisible">
-        <div class="gallery-overlay"></div>
-        <figure class="modal-box--image"><i class="fa-solid fa-x close-img"></i> <img src="#" alt="image here" /><figcaption class="img-caption"></figcaption></figure>
-        </div>
-        <button class="hide-gallery">Hide</button>`;
-
-  //  createModalBox.innerHTML = modalBoxContent;
-  for (let imgGallery = 0; imgGallery < imgGalleries.length; imgGallery++) {
-    imgGalleries[imgGallery].insertAdjacentHTML("afterbegin", modalBoxContent);
-  }
-
-  if (document.querySelector(".modal-box")) {
-    const overlay = document.querySelector(".gallery-overlay"),
-      modalBox = document.querySelector(".modal-box"),
-      modalImg = document.querySelector(".modal-box--image img"),
-      modalCaption = document.querySelector(".img-caption"),
-      closeImg = document.querySelector(".close-img");
-
-    for (let imgBox = 0; imgBox < imgBoxes.length; imgBox++) {
-      imgBoxes[imgBox].onclick = function () {
-        modalBox.classList.remove("invisible");
-        let imgSrc = this.querySelector("img").src;
-        modalImg.src = imgSrc;
-        let imgCaption = this.querySelector("img").alt;
-        modalCaption.innerHTML = imgCaption;
-      }
-
-      // Make images tab-able
-      imgBoxes[imgBox].setAttribute("tabindex", "0");
-      imgBoxes[imgBox].addEventListener("keydown", function (enter) {
-        if (enter.key === "Enter") {
-          modalBox.classList.remove("invisible");
-          let imgSrc = this.querySelector("img").src;
-          modalImg.src = imgSrc;
-          let imgCaption = this.querySelector("img").alt;
-          modalCaption.innerHTML = imgCaption;
-        }
-      })
-    }
-    overlay.onclick = () => {
-      modalBox.classList.add("invisible");
-    }
-    window.onkeydown = (esc) => {
-      if (esc.keyCode === 27) {
-        modalBox.classList.add("invisible");
-      }
-    }
-
-    closeImg.onclick = () => {
-      modalBox.classList.add("invisible");
-    }
-    const hideGalleries = document.querySelectorAll(".hide-gallery");
-    for (let hideGallery = 0; hideGallery < hideGalleries.length; hideGallery++) {
-      hideGalleries[hideGallery].addEventListener("click", () => {
-        hideGalleries[hideGallery].nextElementSibling.classList.toggle("invisible");
-        if (hideGalleries[hideGallery].innerHTML === "Hide") {
-          hideGalleries[hideGallery].innerHTML = "Show";
-        } else {
-          hideGalleries[hideGallery].innerHTML = "Hide";
-        }
-      });
-    }
-  };
-}
-if (imageGallery) {
-  callImageGallery();
-}
-
-// Vocab list widget
-const callVocabList = () => {
-  if (vocabCloseBtns) {
-    for(let btn = 0; btn < vocabCloseBtns.length; btn++) {
-      vocabCloseBtns[btn].addEventListener("click", () => {
-        for(let node = 0; node < vocabLists[btn].children.length;node++) {
-          if(vocabLists[btn].children[node].tagName == "DD") {
-            vocabLists[btn].children[node].removeAttribute("style");
-          }
-          if(vocabLists[btn].children[node].tagName == "DT") {
-            vocabLists[btn].children[node].removeAttribute("class");
-          }
-        }});    
-    }
-  }  
-  for (let activeTerm = 0; activeTerm < vocabTerms.length; activeTerm++) {
-    vocabTerms[activeTerm].addEventListener("click", function() {
-      this.classList.toggle("active");
-      let termPanel = this.nextElementSibling;
-      if (termPanel.style.display === "block") { termPanel.removeAttribute("style"); } 
-      else { termPanel.style.display = "block"; }
-    });
-
-    vocabTerms[activeTerm].addEventListener("keydown", function(e) {
-      if(e.key === "Enter") {
-      this.classList.toggle("active");
-      let termPanel = this.nextElementSibling;
-      if (termPanel.style.display === "block") { termPanel.removeAttribute("style"); } 
-      else { termPanel.style.display = "block"; }
-      }
-    });
-  }
-}
-if (vocabListWidget) {callVocabList();}
-
-// Media Container
-const addMediaContainersAria = () => {
-  mediaContainers.forEach((eachContainer, index) => {
-    // loopID: find the current index value, convert it to its letter equivalent, then convert to lowercase
-    let loopId = String.fromCharCode(index + 65).toLowerCase();
-    let mediaObject = eachContainer.querySelector(".media-object");
-    let iframe = mediaObject.firstElementChild;
-    let mediaInfo = mediaObject.nextElementSibling;  
-
-    // If element DOES NOT have "aria-describedby" && it DOES have a sibling element.
-    if (!iframe.hasAttribute("aria-describedby") && mediaInfo != null) {
-      iframe.setAttribute("aria-describedby", `${loopId}`);
-      mediaInfo.id = `${[loopId]}`;
-    }
-  });
-}
-if (mediaContainers) {addMediaContainersAria();}
-
-//Tabs Widget
-const callTabsWidget = () => {
-
-  let tabsWidgetsNum = 0;
-
-  tabsWidgets.forEach((tab,index) => {
-    let tabInputs = tab.querySelectorAll("input")
-    let tabLabels = tab.querySelectorAll("label")
-    let tabDivs = tab.querySelectorAll("div")
-
-    let groupNum = index + 1;
-
-    //Add region and aria-label to parent div      
-    tab.setAttribute("role", "region");
-    tab.setAttribute("aria-label", `tab group ${groupNum}`)
-
-    for(tabIndex = 0; tabIndex < tabInputs.length; tabIndex++) {
-
-      let tabNum = tabsWidgetsNum + 1;
-
-      //Add class, id, name, and aria-described by for inputs
-      tabInputs[tabIndex].classList.add("tab-input");
-      tabInputs[tabIndex].setAttribute("type", "radio")
-      tabInputs[tabIndex].setAttribute("id", `tab${tabNum}`);
-      tabInputs[tabIndex].setAttribute("name", `hint-group-${groupNum}` )
-      tabInputs[tabIndex].setAttribute("aria-describedby", `tabHeading${tabNum}`)
-      //Add class and for for labels
-      tabLabels[tabIndex].classList.add("tab-header");
-      tabLabels[tabIndex].setAttribute("for", `tab${tabNum}`)
-      //Add class, tabindex, and id for divs
-      tabDivs[tabIndex].classList.add("tab-panel")
-      tabDivs[tabIndex].setAttribute("tabindex", 0)
-      tabDivs[tabIndex].setAttribute("id", `tabHeading${tabNum}`)
-      //Add attributes for hide tab
-      if(tabIndex + 1 == tabInputs.length) {
-        tabLabels[tabIndex].classList.add("hide-tab")
-        tabInputs[tabIndex].checked = true;
-        tabDivs[tabIndex].classList.add("hide-panel")
-      }
-      tabsWidgetsNum++;
-    }
-  })
-}
-if (tabsWidgets) {callTabsWidget();}
-
-// Toggle footnotes
-const toggleBtns = document.querySelectorAll(".toggle-btn, .toggle-footnotes");
-
-if (document.querySelector(".toggle-btn") || document.querySelector(".toggle-footnotes")) {
-  for (let toggleBtn = 0; toggleBtn < toggleBtns.length; toggleBtn++) {
-    // Add tabindex
-    toggleBtns[toggleBtn].setAttribute("tabindex", "0");
-
-    // Show/hide on click
-    toggleBtns[toggleBtn].addEventListener("click", () => {      
-      toggleBtns[toggleBtn].nextElementSibling.classList.toggle("show");      
-    })
-
-    // Show/hide on enter for users who use tab
-    toggleBtns[toggleBtn].addEventListener("keydown", (enter) => {
-      if (enter.keyCode === 13) {
-        toggleBtns[toggleBtn].nextElementSibling.classList.toggle("show");
-      }
-    })
-  }
-}
-
-// Change footnotes from 'show' to 'hide'
-const footnotes = document.querySelector(".toggle-footnotes");
-
-if(footnotes) {
-  footnotes.addEventListener("click", () => {
-    footnotes.innerHTML = (footnotes.innerHTML === "[Show Footnotes]") ? "[Hide Footnotes]" : "[Show Footnotes]";
-  })
-}
-
-// Animated border for HRS theme
-const hrsBorders = document.querySelectorAll(".hrs-border");
-
-if(hrsBorders) {
-  for (let hrsBorder = 0; hrsBorder < hrsBorders.length; hrsBorder++) {
-    const callAnimateBorder = new IntersectionObserver(entries => {
-      // Loop over the entries
-      entries.forEach(entry => {
-        // If the element is visible
-        if (entry.isIntersecting) {
-          // Add the animation class
-          entry.target.classList.add('animate-border');
-        }
-      });
-    });
-    callAnimateBorder.observe(hrsBorders[hrsBorder]);
-  }
-};
-
-// Add h5p resizer dynamically
-h5pResizer.setAttribute("src", "https://pima.h5p.com/js/h5p-resizer.js");
-h5pResizer.setAttribute("charset", "UTF-8");
-h5pResizer.setAttribute("defer", "");
-
-h5pIframes.forEach(function(h5pIframe) {
-  const src = h5pIframe.getAttribute("src");
-  if (src.includes("/d2l/common/dialogs/quickLink") || src.includes("https://pima.h5p.com/content") && !h5pResizerExists) {
-    docHead.appendChild(h5pResizer);
-  }
-});
-
-// Call function with jQuery scripts
-const callJquery = () => {
-  // Toggle Button's Arrow Right Points Down on Click
-  $('.arrow-right').on('click', function () {
-    $(this).toggleClass('arrow-down');
-  });
-  // TOOLTIP
-  //  Allows Screen readers to toggle a tooltip on click and to say if the tooltip is collapsed or expanded.
-  $(".tooltip").click(function () {
-    $(this).children(".tip-hover").toggle();
-    if ($(this).children(".tip-hover").is(':visible')) {
-      $(this).attr('aria-expanded', 'true');
-      $(this).removeClass('hidden');
-    } else {
-      $(this).attr('aria-expanded', 'false');
-      $(this).addClass('hidden');
-    }
-  });
-  let start = 999;
-  $('.tooltip').each(function (i) {
-    $(this).css('z-index', start--);
-  });
-  $(".tooltip .video-container").parent().css("width", "450px");
-}
-callJquery();
+/// @description Main JS file for PimaOnline Themepack
+/// @dependencies jQuery 3.3.1 or later
+
+const courseBody = document.querySelector("body");
+const contentWrapper = document.querySelector("#content-wrapper");
+const secondColumn = document.querySelector("#second-column");
+const thirdColumn = document.querySelector("#third-column");
+const columnWidget = document.querySelector("#column-widget");
+const videoWrapper = document.querySelector("#video-wrapper");
+const rolePres = document.querySelectorAll('[role="presentation"]');
+const imageGallery = document.querySelector(".image-gallery");
+const vocabListWidget = document.querySelector("dl.vocab-list");
+const vocabTerms = document.querySelectorAll("dl.vocab-list dt");
+const vocabDefs = document.querySelectorAll("dl.vocab-list dd");
+const vocabCloseBtns = document.querySelectorAll("dl.vocab-list button");
+const vocabLists = document.querySelectorAll("dl[class^='vocab-list']");
+const mediaContainers = document.querySelectorAll(".media-container");
+const tabsWidgets = document.querySelectorAll(".tabs");
+const h5pIframes = document.querySelectorAll("iframe");
+const docHead = document.querySelector("head");
+const h5pResizerExists = docHead.querySelector("script[src='https://pima.h5p.com/js/h5p-resizer.js']");
+const h5pResizer = document.createElement("script");
+const focusReaderTooltipText = "Highlight text as you scroll";
+
+// Grid 
+const addGrid = () => {
+  if (secondColumn && thirdColumn) {
+    courseBody.id = "three-column";
+  } else if (secondColumn && !columnWidget) {
+    courseBody.id = "two-column";
+  } else if (columnWidget) {
+    courseBody.id = "two-col-widget";
+  } else if (videoWrapper) {
+    courseBody.id = "video-grid";
+  } else {
+    courseBody.id = "one-column";
+  }
+};
+addGrid();
+
+// JS to add role and aria-label to content-wrapper, second-column, and third-column
+const addAria = () => {
+  contentWrapper.setAttribute("role", "main");
+  if (secondColumn) {
+    secondColumn.setAttribute("role", "region");
+    secondColumn.setAttribute("aria-label", "Second column");
+  }
+  if (thirdColumn) {
+    thirdColumn.setAttribute("role", "region");
+    thirdColumn.setAttribute("aria-label", "Third column");
+  }
+};
+addAria();
+
+// Clean up HTML
+const cleanMarkup = () => {
+  // Remove role="presentation" attr from any element that has it  
+  if (rolePres) {
+    rolePres.forEach((roleElem) => roleElem.removeAttribute("role"));
+  }
+  // Set functino to remove atrributes from elements
+  const discardAttributes = (element, ...attributes) => {
+    attributes.forEach((attribute) => element.removeAttribute(attribute));
+  }
+  // Remove attributes from tables
+  const tableElems = document.querySelectorAll("table, thead, tbody, tr, th, td");
+  tableElems.forEach((elem) => {
+    discardAttributes(elem, "cellspacing", "cellpadding", "width", "style");
+  });
+};
+cleanMarkup();
+
+// Helper JS for Responsive Tables
+const initResponsiveTables = () => {
+  const tables = document.querySelectorAll(".display, .display-lg")
+  for (let table = 0; table < tables.length; table++) {
+    let headertext = [],
+      headers = tables[table].querySelectorAll(".display table th, table.display th, .display-lg table th, table.display-lg th"),
+      tablebody = tables[table].querySelector(".display table tbody, table.display tbody, .display-lg table tbody, table.display-lg tbody");
+    for (let header = 0; header < headers.length; header++) {
+      let current = headers[header];
+      headertext.push(current.textContent.replace(/\r?\n|\r/, ""));
+    }
+    for (let y = 0, row; row = tablebody.rows[y]; y++) {
+      for (let j = 0, col; col = row.cells[j]; j++) {
+        col.setAttribute("data-th", headertext[j]);
+      }
+    }
+  }
+}
+initResponsiveTables();
+
+// This is called by anchor links via onlick="" in the HTML
+//  Added because default anchor links don't work on all browsers using D2L
+const jumpTo = (anchor) => {
+  document.getElementById(anchor).scrollIntoView();
+}
+
+// Image gallery
+const callImageGallery = () => {
+  // Create link element with font-awesome cdn and append it to the <head>
+  const docHead = document.querySelector("head");
+  const fontAwesomeCdn = document.createElement("link");
+  fontAwesomeCdn.setAttribute("rel", "stylesheet");
+  fontAwesomeCdn.setAttribute("href", "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css");
+  docHead.appendChild(fontAwesomeCdn);
+  // Begin image gallery
+  const imgGalleries = document.querySelectorAll(".image-gallery"),
+    imgBoxes = document.querySelectorAll(".image-box"),
+    modalBoxContent = `<div class="modal-box invisible">
+        <div class="gallery-overlay"></div>
+        <figure class="modal-box--image"><i class="fa-solid fa-x close-img"></i> <img src="#" alt="image here" /><figcaption class="img-caption"></figcaption></figure>
+        </div>
+        <button class="hide-gallery">Hide</button>`;
+
+  //  createModalBox.innerHTML = modalBoxContent;
+  for (let imgGallery = 0; imgGallery < imgGalleries.length; imgGallery++) {
+    imgGalleries[imgGallery].insertAdjacentHTML("afterbegin", modalBoxContent);
+  }
+
+  if (document.querySelector(".modal-box")) {
+    const overlay = document.querySelector(".gallery-overlay"),
+      modalBox = document.querySelector(".modal-box"),
+      modalImg = document.querySelector(".modal-box--image img"),
+      modalCaption = document.querySelector(".img-caption"),
+      closeImg = document.querySelector(".close-img");
+
+    for (let imgBox = 0; imgBox < imgBoxes.length; imgBox++) {
+      imgBoxes[imgBox].onclick = function () {
+        modalBox.classList.remove("invisible");
+        let imgSrc = this.querySelector("img").src;
+        modalImg.src = imgSrc;
+        let imgCaption = this.querySelector("img").alt;
+        modalCaption.innerHTML = imgCaption;
+      }
+
+      // Make images tab-able
+      imgBoxes[imgBox].setAttribute("tabindex", "0");
+      imgBoxes[imgBox].addEventListener("keydown", function (enter) {
+        if (enter.key === "Enter") {
+          modalBox.classList.remove("invisible");
+          let imgSrc = this.querySelector("img").src;
+          modalImg.src = imgSrc;
+          let imgCaption = this.querySelector("img").alt;
+          modalCaption.innerHTML = imgCaption;
+        }
+      })
+    }
+    overlay.onclick = () => {
+      modalBox.classList.add("invisible");
+    }
+    window.onkeydown = (esc) => {
+      if (esc.keyCode === 27) {
+        modalBox.classList.add("invisible");
+      }
+    }
+
+    closeImg.onclick = () => {
+      modalBox.classList.add("invisible");
+    }
+    const hideGalleries = document.querySelectorAll(".hide-gallery");
+    for (let hideGallery = 0; hideGallery < hideGalleries.length; hideGallery++) {
+      hideGalleries[hideGallery].addEventListener("click", () => {
+        hideGalleries[hideGallery].nextElementSibling.classList.toggle("invisible");
+        if (hideGalleries[hideGallery].innerHTML === "Hide") {
+          hideGalleries[hideGallery].innerHTML = "Show";
+        } else {
+          hideGalleries[hideGallery].innerHTML = "Hide";
+        }
+      });
+    }
+  };
+}
+if (imageGallery) {
+  callImageGallery();
+}
+
+// Vocab list widget
+const callVocabList = () => {
+  if (vocabCloseBtns) {
+    for (let btn = 0; btn < vocabCloseBtns.length; btn++) {
+      vocabCloseBtns[btn].addEventListener("click", () => {
+        for (let node = 0; node < vocabLists[btn].children.length; node++) {
+          if (vocabLists[btn].children[node].tagName == "DD") {
+            vocabLists[btn].children[node].removeAttribute("style");
+          }
+          if (vocabLists[btn].children[node].tagName == "DT") {
+            vocabLists[btn].children[node].removeAttribute("class");
+          }
+        }
+      });
+    }
+  }
+  for (let activeTerm = 0; activeTerm < vocabTerms.length; activeTerm++) {
+    vocabTerms[activeTerm].addEventListener("click", function () {
+      this.classList.toggle("active");
+      let termPanel = this.nextElementSibling;
+      if (termPanel.style.display === "block") { termPanel.removeAttribute("style"); }
+      else { termPanel.style.display = "block"; }
+    });
+
+    vocabTerms[activeTerm].addEventListener("keydown", function (e) {
+      if (e.key === "Enter") {
+        this.classList.toggle("active");
+        let termPanel = this.nextElementSibling;
+        if (termPanel.style.display === "block") { termPanel.removeAttribute("style"); }
+        else { termPanel.style.display = "block"; }
+      }
+    });
+  }
+}
+if (vocabListWidget) { callVocabList(); }
+
+// Media Container
+const addMediaContainersAria = () => {
+  mediaContainers.forEach((eachContainer, index) => {
+    // loopID: find the current index value, convert it to its letter equivalent, then convert to lowercase
+    let loopId = String.fromCharCode(index + 65).toLowerCase();
+    let mediaObject = eachContainer.querySelector(".media-object");
+    let iframe = mediaObject.firstElementChild;
+    let mediaInfo = mediaObject.nextElementSibling;
+
+    // If element DOES NOT have "aria-describedby" && it DOES have a sibling element.
+    if (!iframe.hasAttribute("aria-describedby") && mediaInfo != null) {
+      iframe.setAttribute("aria-describedby", `${loopId}`);
+      mediaInfo.id = `${[loopId]}`;
+    }
+  });
+}
+if (mediaContainers) { addMediaContainersAria(); }
+
+//Tabs Widget
+const callTabsWidget = () => {
+
+  let tabsWidgetsNum = 0;
+
+  tabsWidgets.forEach((tab, index) => {
+    let tabInputs = tab.querySelectorAll("input")
+    let tabLabels = tab.querySelectorAll("label")
+    let tabDivs = tab.querySelectorAll("div")
+
+    let groupNum = index + 1;
+
+    //Add region and aria-label to parent div      
+    tab.setAttribute("role", "region");
+    tab.setAttribute("aria-label", `tab group ${groupNum}`)
+
+    for (tabIndex = 0; tabIndex < tabInputs.length; tabIndex++) {
+
+      let tabNum = tabsWidgetsNum + 1;
+
+      //Add class, id, name, and aria-described by for inputs
+      tabInputs[tabIndex].classList.add("tab-input");
+      tabInputs[tabIndex].setAttribute("type", "radio")
+      tabInputs[tabIndex].setAttribute("id", `tab${tabNum}`);
+      tabInputs[tabIndex].setAttribute("name", `hint-group-${groupNum}`)
+      tabInputs[tabIndex].setAttribute("aria-describedby", `tabHeading${tabNum}`)
+      //Add class and for for labels
+      tabLabels[tabIndex].classList.add("tab-header");
+      tabLabels[tabIndex].setAttribute("for", `tab${tabNum}`)
+      //Add class, tabindex, and id for divs
+      tabDivs[tabIndex].classList.add("tab-panel")
+      tabDivs[tabIndex].setAttribute("tabindex", 0)
+      tabDivs[tabIndex].setAttribute("id", `tabHeading${tabNum}`)
+      //Add attributes for hide tab
+      if (tabIndex + 1 == tabInputs.length) {
+        tabLabels[tabIndex].classList.add("hide-tab")
+        tabInputs[tabIndex].checked = true;
+        tabDivs[tabIndex].classList.add("hide-panel")
+      }
+      tabsWidgetsNum++;
+    }
+  })
+}
+if (tabsWidgets) { callTabsWidget(); }
+
+// Toggle footnotes
+const toggleBtns = document.querySelectorAll(".toggle-btn, .toggle-footnotes");
+
+if (document.querySelector(".toggle-btn") || document.querySelector(".toggle-footnotes")) {
+  for (let toggleBtn = 0; toggleBtn < toggleBtns.length; toggleBtn++) {
+    // Add tabindex
+    toggleBtns[toggleBtn].setAttribute("tabindex", "0");
+
+    // Show/hide on click
+    toggleBtns[toggleBtn].addEventListener("click", () => {
+      toggleBtns[toggleBtn].nextElementSibling.classList.toggle("show");
+    })
+
+    // Show/hide on enter for users who use tab
+    toggleBtns[toggleBtn].addEventListener("keydown", (enter) => {
+      if (enter.keyCode === 13) {
+        toggleBtns[toggleBtn].nextElementSibling.classList.toggle("show");
+      }
+    })
+  }
+}
+
+// Change footnotes from 'show' to 'hide'
+const footnotes = document.querySelector(".toggle-footnotes");
+
+if (footnotes) {
+  footnotes.addEventListener("click", () => {
+    footnotes.innerHTML = (footnotes.innerHTML === "[Show Footnotes]") ? "[Hide Footnotes]" : "[Show Footnotes]";
+  })
+}
+
+// Animated border for HRS theme
+const hrsBorders = document.querySelectorAll(".hrs-border");
+
+if (hrsBorders) {
+  for (let hrsBorder = 0; hrsBorder < hrsBorders.length; hrsBorder++) {
+    const callAnimateBorder = new IntersectionObserver(entries => {
+      // Loop over the entries
+      entries.forEach(entry => {
+        // If the element is visible
+        if (entry.isIntersecting) {
+          // Add the animation class
+          entry.target.classList.add('animate-border');
+        }
+      });
+    });
+    callAnimateBorder.observe(hrsBorders[hrsBorder]);
+  }
+};
+
+// Add h5p resizer dynamically
+h5pResizer.setAttribute("src", "https://pima.h5p.com/js/h5p-resizer.js");
+h5pResizer.setAttribute("charset", "UTF-8");
+h5pResizer.setAttribute("defer", "");
+
+h5pIframes.forEach(function (h5pIframe) {
+  const src = h5pIframe.getAttribute("src");
+  if (src.includes("/d2l/common/dialogs/quickLink") || src.includes("https://pima.h5p.com/content") && !h5pResizerExists) {
+    docHead.appendChild(h5pResizer);
+  }
+});
+
+if (document.querySelector("body[focus-reader]")) {
+
+  // Initializations
+  let focusOn = false;
+
+  const fr_contentWrapper = document.querySelector("#content-wrapper");
+  const fr_thisBody = document.querySelector("body[focus-reader]");
+
+  // Add fontAwesome to header
+  const fr_pageHead = document.querySelector("head");
+  const fontAweLink = document.createElement("link");
+  fontAweLink.rel = "stylesheet";
+  fontAweLink.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css";
+  fr_pageHead.append(fontAweLink);
+
+  // add intersection observer to head tag
+  const observerScript = document.createElement("script");
+  observerScript.setAttribute("src", "https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver");
+  fr_pageHead.append(observerScript);
+
+  // Create Switches container
+  const fr_switchesContainer = document.createElement("div");
+  fr_switchesContainer.className = "focus-reader-switches";
+  fr_thisBody.append(fr_switchesContainer);
+
+  // Focus-text container
+  const fr_focusTextContainer = document.createElement("div");
+  fr_switchesContainer.append(fr_focusTextContainer);
+
+  // Focus-text Icon
+  const fr_focusTextIcon = document.createElement("p");
+  fr_focusTextIcon.innerHTML = "Focus Text"
+  fr_focusTextContainer.append(fr_focusTextIcon);
+
+  // info icon
+  const fr_infoIcon = document.createElement("i");
+  fr_infoIcon.classList.add("fa-solid");
+  fr_infoIcon.classList.add("fa-circle-info");
+  fr_focusTextContainer.append(fr_infoIcon);
+
+  // info tooltip
+  const fr_infoTooltip = document.createElement("span");
+  const focusReaderTooltipText = "Highlight text as you scroll";
+  fr_infoTooltip.classList.add("info-tooltip");
+  fr_infoTooltip.innerHTML = focusReaderTooltipText;
+  fr_infoIcon.append(fr_infoTooltip);
+
+  // Focus-text switch button
+  const fr_focusTextSwitch = document.createElement("button");
+  fr_focusTextSwitch.id = "focus-text";
+  fr_focusTextSwitch.innerHTML = (focusOn) ? `<i class="fas fa-toggle-on"></i>` : `<i class="fas fa-toggle-off"></i>`;
+  fr_focusTextContainer.append(fr_focusTextSwitch);
+
+  // Focus-text logic
+  fr_focusTextSwitch.addEventListener("click", () => {
+    if (focusOn) {
+      focusOn = !focusOn;
+      fr_contentWrapper.removeAttribute("on");
+      fr_focusTextSwitch.innerHTML = (focusOn) ? `<i class="fas fa-toggle-on"></i>` : `<i class="fas fa-toggle-off"></i>`;
+      removeSpans(fr_contentWrapper);
+    } else {
+      focusOn = !focusOn;
+      fr_contentWrapper.setAttribute("on", "");
+      fr_focusTextSwitch.innerHTML = (focusOn) ? `<i class="fas fa-toggle-on"></i>` : `<i class="fas fa-toggle-off"></i>`;
+      const elements = document.querySelectorAll("#content-wrapper .content-body :is(p, li, dd, dt, blockquote)");
+      elements.forEach(element => {
+        traverseAndWrapTextInSpans(element, focusText);
+      });
+    }
+  });
+
+  const options = {
+    root: null,
+    rootMargin: '-48.9% 0px',
+    threshold: 0.00
+  };
+
+  const focusText = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.closest("span").classList.add("focus-text");
+      } else {
+        entry.target.closest("span").classList.remove("focus-text");
+      }
+    });
+  }, options);
+
+
+}
+
+function traverseAndWrapTextInSpans(node, focusText) {
+  if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
+    // Split the text into words
+    const words = node.textContent.split(' ');
+
+    // Wrap each word in a span
+    words.forEach(word => {
+      if (word !== '') {
+        const span = document.createElement("span");
+        span.textContent = word + ' ';  // Add a space after the word to preserve spacing
+
+        // Observe the span
+        focusText.observe(span);
+
+        // Insert the span before the text node
+        node.parentNode.insertBefore(span, node);
+      }
+    });
+
+    // Remove the original text node
+    node.parentNode.removeChild(node);
+  } else if (node.nodeType === Node.ELEMENT_NODE) {
+    // Recursively process child nodes
+    Array.from(node.childNodes).forEach(childNode => {
+      traverseAndWrapTextInSpans(childNode, focusText);
+    });
+  }
+}
+
+function removeSpans(node) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    // If the node is a span with the class 'focus-text', an empty class attribute, is empty, or has no attributes, replace it with a text node
+    if (node.tagName === 'SPAN' && (node.className === 'focus-text' || node.className === '' || node.textContent.trim() === '' || node.attributes.length === 0)) {
+      const textNode = document.createTextNode(node.textContent);
+      node.parentNode.insertBefore(textNode, node);
+      node.parentNode.removeChild(node);
+    } else {
+      // Recursively process child nodes
+      Array.from(node.childNodes).forEach(childNode => {
+        removeSpans(childNode);
+      });
+    }
+  }
+}
+
+// Reset margin-top and padding-top for content bodies that don't have headings as the first child element
+const ecnStylesheet = document.querySelector("[href*='themes/ecn/styles.css']");
+const ecnContentBodies = document.querySelectorAll(".content-body");
+
+if (ecnStylesheet) {
+  ecnContentBodies.forEach((contentBody) => {
+    const firstChildHeading = contentBody.querySelector(":first-child");
+    if (firstChildHeading && firstChildHeading.tagName !== "H2" && firstChildHeading.tagName !== "H3") {
+      contentBody.style.marginTop = "unset";
+      contentBody.style.paddingTop = "15px";
+    }
+  })
+}
+
+
+// Call function with jQuery scripts
+const callJquery = () => {
+  // Toggle Button's Arrow Right Points Down on Click
+  $('.arrow-right').on('click', function () {
+    $(this).toggleClass('arrow-down');
+  });
+  // TOOLTIP
+  //  Allows Screen readers to toggle a tooltip on click and to say if the tooltip is collapsed or expanded.
+  $(".tooltip").click(function () {
+    $(this).children(".tip-hover").toggle();
+    if ($(this).children(".tip-hover").is(':visible')) {
+      $(this).attr('aria-expanded', 'true');
+      $(this).removeClass('hidden');
+    } else {
+      $(this).attr('aria-expanded', 'false');
+      $(this).addClass('hidden');
+    }
+  });
+  let start = 999;
+  $('.tooltip').each(function (i) {
+    $(this).css('z-index', start--);
+  });
+  $(".tooltip .video-container").parent().css("width", "450px");
+}
+callJquery();
+
+// Array for all themes that require theme specific js
+const customJsThemes = ["ss"];
+
+//Search links for theme styles
+const themeJsCheck = () => {
+
+  const links = document.querySelectorAll("link");
+
+  links.forEach((link) => {
+    const href = link.getAttribute("href");
+    customJsThemes.forEach((theme) => {
+      // If theme requires custom js, run addThemeScript()
+      if (href && href.includes(`/${theme}/styles.css`)) {
+        addThemeScript(theme);
+      }
+    });
+  });
+
+  // Adds a script to the head for that particular theme
+  function addThemeScript(theme) {
+    let themeScript = document.createElement("script");
+    themeScript.src = `../js/themes/${theme}.js`;
+    document.head.appendChild(themeScript);
+  }
+}
+
+themeJsCheck()