@pimaonline/pimaonline-themepack 3.12.1 → 5.0.0

package/dist/plugins/floating-particles/floating-particles.js

@@ -1,68 +1 @@
-// JavaScript Document
-window.addEventListener("DOMContentLoaded", function() {
-
-  let particleAmount = 75;
-  const get_body = document.querySelector("body");
-  
-  const canvas_elem = document.createElement("canvas");
-  const ctx = canvas_elem.getContext("2d");
-  
-  canvas_elem.id = "animated-bg";
-  canvas_elem.width = window.innerWidth;
-  canvas_elem.height = window.innerHeight;
-  get_body.prepend(canvas_elem);
-  
-  const particleArray = [];
-  let particleFill = "rgba(255, 255, 255, .08)";
-
-  window.addEventListener("resize", function () {
-    canvas_elem.width = window.innerWidth;
-    canvas_elem.height = window.innerHeight;
-  });
-
-  class Particle {
-    constructor() {
-		this.x = Math.random() * ( (canvas_elem.width - 5) - 5 ) + 5;
-		this.y = Math.random() * canvas_elem.height;
-		this.size = Math.random() * (30 - 10) + 10;
-		this.speedX = 0;
-		this.speedY = Math.random() * (5 - 2) + 2 ;
-    }
-    update() {
-      if (this.y + this.size > canvas_elem.height || this.y + this.size < 0) {
-        this.speedY = -this.speedY;
-      }
-      this.x += this.speedX;
-      this.y += this.speedY;
-    }
-    draw() {
-      ctx.fillStyle = particleFill;
-      ctx.beginPath();
-      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-      ctx.fill();
-    }
-  }
-
-  function init() {
-    for (let i = 0; i < particleAmount; i++) {
-      particleArray.push(new Particle());
-    }
-  }
-  init();
-
-  function handleParticles() {
-    for (let i = 0; i < particleArray.length; i++) {
-      particleArray[i].update();
-      particleArray[i].draw();
-    }
-  }
-
-  function animate() {
-    ctx.clearRect(0, 0, canvas_elem.width, canvas_elem.height);
-    handleParticles();
-    requestAnimationFrame(animate);
-  }
-  animate();  
-  
-// end event listener
-});
+window.addEventListener("DOMContentLoaded",(function(){const t=document.querySelector("body"),e=document.createElement("canvas"),i=e.getContext("2d");e.id="animated-bg",e.width=window.innerWidth,e.height=window.innerHeight,t.prepend(e);const n=[];window.addEventListener("resize",(function(){e.width=window.innerWidth,e.height=window.innerHeight}));class h{constructor(){this.x=Math.random()*(e.width-5-5)+5,this.y=Math.random()*e.height,this.size=20*Math.random()+10,this.speedX=0,this.speedY=3*Math.random()+2}update(){(this.y+this.size>e.height||this.y+this.size<0)&&(this.speedY=-this.speedY),this.x+=this.speedX,this.y+=this.speedY}draw(){i.fillStyle="rgba(255, 255, 255, .08)",i.beginPath(),i.arc(this.x,this.y,this.size,0,2*Math.PI),i.fill()}}!function(){for(let t=0;t<75;t++)n.push(new h)}(),function t(){i.clearRect(0,0,e.width,e.height),function(){for(let t=0;t<n.length;t++)n[t].update(),n[t].draw()}(),requestAnimationFrame(t)}()}));

package/dist/plugins/global-homepage-overrides/global-homepage-overrides.js

@@ -1,53 +1 @@
-// This script uses a forEach loop to place a custom stylesheet into every shadow dom (#shadow-root) component,
-/// then while still in the loop runs scripts through each component
-
-window.parent.addEventListener("load", function () {
-
-  // Find all shadow-dom components and create an array
-  let sRoots = document.querySelectorAll("d2l-html-block");
-
-  // Loop through array
-  sRoots.forEach((each) => {
-
-    // Set the root element of each shadow component to a variable
-    let sRoot = each.shadowRoot.querySelector(".d2l-html-block-rendered");
-    
-    // Create link element
-    let link = document.createElement("link");
-    link.type = "text/css";
-    link.rel = "stylesheet";
-    link.href = "https://d2l.pima.edu/shared/webdev/course-files/plugins/global-homepage-overrides/global-homepage-overrides.css";
-    
-    // Append link element to root element
-    sRoot.append(link);
-
-    // BEGIN SCRIPTS *note: still going through forEach loop
-
-    // PCC Quicklinks
-    /// if the element has both scroll-right/left
-    if (each.shadowRoot.getElementById("pcc-ql-scroll-right") && each.shadowRoot.getElementById("pcc-ql-scroll-left"))  {
-
-      const buttonRight = each.shadowRoot.getElementById("pcc-ql-scroll-right");
-      const buttonLeft = each.shadowRoot.getElementById("pcc-ql-scroll-left");
-      const mediaQuery = window.matchMedia("(min-width: 413px)");
-    
-      buttonRight.onclick = function () {
-        if (mediaQuery.matches) {
-          each.shadowRoot.getElementById("pcc-ql-container").scrollLeft += 490;
-        } else {
-          each.shadowRoot.getElementById("pcc-ql-container").scrollLeft += 300;
-        }
-      };
-    
-      buttonLeft.onclick = function () {
-        if (mediaQuery.matches) {
-          each.shadowRoot.getElementById("pcc-ql-container").scrollLeft -= 490;
-        } else {
-          each.shadowRoot.getElementById("pcc-ql-container").scrollLeft -= 300;
-        }
-      };
-    };
-
-
-  }) 
-});
+window.parent.addEventListener("load",(function(){document.querySelectorAll("d2l-html-block").forEach((e=>{let t=e.shadowRoot.querySelector(".d2l-html-block-rendered"),o=document.createElement("link");if(o.type="text/css",o.rel="stylesheet",o.href="https://d2l.pima.edu/shared/webdev/course-files/plugins/global-homepage-overrides/global-homepage-overrides.css",t.append(o),e.shadowRoot.getElementById("pcc-ql-scroll-right")&&e.shadowRoot.getElementById("pcc-ql-scroll-left")){const t=e.shadowRoot.getElementById("pcc-ql-scroll-right"),o=e.shadowRoot.getElementById("pcc-ql-scroll-left"),l=window.matchMedia("(min-width: 413px)");t.onclick=function(){l.matches?e.shadowRoot.getElementById("pcc-ql-container").scrollLeft+=490:e.shadowRoot.getElementById("pcc-ql-container").scrollLeft+=300},o.onclick=function(){l.matches?e.shadowRoot.getElementById("pcc-ql-container").scrollLeft-=490:e.shadowRoot.getElementById("pcc-ql-container").scrollLeft-=300}}}))}));

package/dist/plugins/preview-banner/preview-banner.js

@@ -1,57 +1 @@
-// This script uses a forEach loop to place a custom stylesheet into every shadow dom (#shadow-root) component
-
-window.parent.addEventListener("load", function () {
-
-  // Find all shadow-dom components and create an array
-  let sRoots = document.querySelectorAll("d2l-html-block");
-
-  // Loop through the array
-  sRoots.forEach((each) => {
-
-    // Set the root-element of each shadow-component to a variable
-    let sRoot = each.shadowRoot.querySelector(".d2l-html-block-rendered");
-    
-    // Create link element
-    let link = document.createElement("link");
-    link.type = "text/css";
-    link.rel = "stylesheet";
-    link.href = "https://d2l.pima.edu/shared/webdev/course-files/plugins/preview-banner/preview-banner.css";
-    
-    // Append link element to root element
-    sRoot.append(link);
-
-  });
-
-});
-
-// Click any of the left navigation links to rerun script above.
-// This is done to refresh the CSS inserted into the shadow component
-let refresh = document.querySelectorAll(".d2l-le-TreeAccordionItem-anchor");
-
-refresh.forEach((each_) => {
-  each_.addEventListener("click", () => {
-
-    setTimeout(() => {
-      let d2lBlock = document.querySelectorAll("d2l-html-block");
-
-      // Loop through the array
-      d2lBlock.forEach((_each) => {
-
-        // Set the root-element of each shadow-component to a variable
-        let innerD2lBlock = _each.shadowRoot.querySelector(".d2l-html-block-rendered");
-        
-        // Create link element
-        let _link = document.createElement("link");
-        _link.type = "text/css";
-        _link.rel = "stylesheet";
-        _link.href = "https://d2l.pima.edu/shared/webdev/course-files/plugins/preview-banner/preview-banner.css";
-        
-        // Append link element to root element
-        innerD2lBlock.append(_link);
-
-      });      
-
-    }, 1000);
-
-  })
-});
+!function(){let e,r=()=>{document.querySelectorAll("d2l-html-block").forEach((e=>{let r=e.shadowRoot.querySelector(".d2l-html-block-rendered");if(r.querySelector('link[href="https://d2l.pima.edu/shared/webdev/course-files/plugins/preview-banner/preview-banner.css"]'))return;let t=document.createElement("link");t.type="text/css",t.rel="stylesheet",t.href="https://d2l.pima.edu/shared/webdev/course-files/plugins/preview-banner/preview-banner.css",r.append(t)}))};window.parent.addEventListener("load",(function(){clearInterval(e),r(),e=setInterval(r,500)}))}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pimaonline/pimaonline-themepack",
-  "version": "3.12.1",
+  "version": "5.0.0",
   "description": "A cloud based, course theme-pack for building courses efficiently within the D2L learning environment.",
   "main": "index.js",
   "files": [
@@ -16,18 +16,14 @@
     "/dist/css/routes.css"
   ],
   "scripts": {
-    "dev": "gulp build-dev && gulp connect-watch",
-    "build": "gulp build",
-    "build-dev": "gulp build-dev",
+    "build": "concurrently \"npm run sass\" \"npm run webpack\"",
+    "dev": "concurrently \"npm run sass:watch\" \"npm run webpack:watch\" \"npm run serve\"",
     "docs": "docsify serve docs",
-    "ts": "webpack",
-    "ts:watch": "webpack --watch",
     "sass": "sass --no-source-map --style=compressed src/scss:dist/css",
     "sass:watch": "sass --watch --no-source-map --style=compressed src/scss:dist/css",
-    "pug": "gulp pug-main-themes",
-    "build:beta": "npm run pug && npm run sass && npm run ts",
-    "serve:beta": "webpack serve",
-    "dev:beta": "concurrently \"npm run sass:watch\" \"npm run ts:watch\" \"npm run serve:beta\""
+    "serve": "webpack serve",
+    "webpack": "webpack",
+    "webpack:watch": "webpack --watch"
   },
   "repository": {
     "type": "git",
@@ -40,17 +36,17 @@
   },
   "homepage": "https://github.com/franreyn/pimaonline-themepack",
   "devDependencies": {
+    "@types/react": "^18.2.76",
+    "@types/react-dom": "^18.2.25",
     "concurrently": "^8.2.2",
     "copy-webpack-plugin": "^12.0.2",
-    "gulp": "^4.0.2",
-    "gulp-concat": "^2.6.1",
-    "gulp-connect": "^5.7.0",
-    "gulp-pug": "^5.0.0",
-    "gulp-sass": "^5.1.0",
+    "html-webpack-plugin": "^5.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.49.9",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.3",
-    "webpack": "^5.90.1",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   }

package/dist/js/jumpTo.js

@@ -1,4 +0,0 @@
-const jumpTo = async (anchor) => {
-  document.getElementById(anchor).scrollIntoView();
-}
-console.log("jumpTo loaded");

package/dist/js/scripts-ts.js

@@ -1 +0,0 @@
-(()=>{"use strict";var e={592:(e,o)=>{Object.defineProperty(o,"__esModule",{value:!0}),o.discardAttributes=void 0,o.discardAttributes=(e,...o)=>{o.forEach((o=>e.removeAttribute(o)))}},92:(e,o,t)=>{Object.defineProperty(o,"__esModule",{value:!0});const n=t(256);[{class:"bi-",cdn:new URL("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css")},{class:"ri-",cdn:new URL("https://cdn.jsdelivr.net/npm/remixicon@4.0.1/fonts/remixicon.css")}].forEach((e=>{var o;if(document.querySelector(`[class*='${e.class}']`)){const t=null!==(o=null===n.docHead||void 0===n.docHead?void 0:n.docHead.querySelector("meta[name='viewport']"))&&void 0!==o?o:null;t||console.warn("Document error: could not find viewport meta tag");const r=document.createElement("link");r.setAttribute("href",e.cdn.toString()),r.setAttribute("rel","stylesheet"),t&&(null===n.docHead||void 0===n.docHead||n.docHead.insertBefore(r,t.nextSibling))}}))},340:(e,o,t)=>{Object.defineProperty(o,"__esModule",{value:!0});const n=t(256);n.contentWrapper?n.contentWrapper.setAttribute("role","main"):n.contentWrapper||console.log("Document error: does not contain #content-wrapper."),n.secondColumn&&(n.secondColumn.setAttribute("role","region"),n.secondColumn.setAttribute("aria-label","Second column")),n.thirdColumn&&(n.thirdColumn.setAttribute("role","region"),n.thirdColumn.setAttribute("aria-label","Third column"))},452:(e,o,t)=>{Object.defineProperty(o,"__esModule",{value:!0}),o.cleanMarkup=void 0;const n=t(256),r=t(592);o.cleanMarkup=()=>{n.rolePres&&n.rolePres.forEach((e=>e.removeAttribute("role"))),document.querySelectorAll("table, thead, tbody, tr, th, td").forEach((e=>{(0,r.discardAttributes)(e,"cellspacing","cellpadding","width","style")}))},(0,o.cleanMarkup)()},100:()=>{if(document.querySelector("body[focus-reader]")){let t=!1;const n=document.querySelector("#content-wrapper"),r=document.querySelector("body[focus-reader]"),l=document.querySelector("head"),c=document.createElement("link");c.rel="stylesheet",c.href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css",l&&l.append(c);const i=document.createElement("script");i.src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver",l&&l.append(i);const a=document.createElement("div");a.className="focus-reader-switches",r&&r.append(a);const d=document.createElement("div");a.append(d);const s=document.createElement("p");s.innerHTML="Focus Text",d.append(s);const u=document.createElement("i");u.classList.add("fa-solid"),u.classList.add("fa-circle-info"),d.append(u);const m=document.createElement("span");m.classList.add("info-tooltip"),m.innerHTML="Highlight text as you scroll",u.append(m);const p=document.createElement("button");p.id="focus-text",p.innerHTML=t?'<i class="fas fa-toggle-on"></i>':'<i class="fas fa-toggle-off"></i>',d.append(p),p.addEventListener("click",(()=>{t?(t=!t,n&&(n.removeAttribute("on"),p.innerHTML=t?'<i class="fas fa-toggle-on"></i>':'<i class="fas fa-toggle-off"></i>',o(n))):(t=!t,n&&(n.setAttribute("on",""),p.innerHTML=t?'<i class="fas fa-toggle-on"></i>':'<i class="fas fa-toggle-off"></i>',document.querySelectorAll("#content-wrapper .content-body :is(p, li, dd, dt, blockquote)").forEach((o=>{e({node:o,focusText:f})}))))}));const f=new IntersectionObserver((e=>{e.forEach((e=>{var o,t;e.isIntersecting?null===(o=e.target.closest("span"))||void 0===o||o.classList.add("focus-text"):null===(t=e.target.closest("span"))||void 0===t||t.classList.remove("focus-text")}))}),{root:null,rootMargin:"-48.9% 0px",threshold:0})}function e({node:o,focusText:t}){var n,r;o.nodeType===Node.TEXT_NODE&&""!==(null===(n=o.textContent)||void 0===n?void 0:n.trim())?(o.textContent.split(" ").forEach((e=>{var n;if(""!==e){const r=document.createElement("span");r.textContent=e+" ",t.observe(r),null===(n=o.parentNode)||void 0===n||n.insertBefore(r,o)}})),null===(r=o.parentNode)||void 0===r||r.removeChild(o)):o.nodeType===Node.ELEMENT_NODE&&Array.from(o.childNodes).forEach((o=>{e({node:o,focusText:t})}))}function o(e){var t,n,r;if(e.nodeType===Node.ELEMENT_NODE){const l=e;if(l instanceof HTMLElement&&"SPAN"===l.tagName&&("focus-text"===l.className||""===l.className||!(null===(t=l.textContent)||void 0===t?void 0:t.trim())||0===l.attributes.length)){const e=document.createTextNode(l.textContent||"");null===(n=l.parentNode)||void 0===n||n.insertBefore(e,l),null===(r=l.parentNode)||void 0===r||r.removeChild(l)}else Array.from(l.childNodes).forEach((e=>{o(e)}))}}},568:(e,o,t)=>{Object.defineProperty(o,"__esModule",{value:!0});const n=t(256);(()=>{if(null!==n.courseBody){n.contentWrapper&&n.secondColumn&&n.thirdColumn?n.courseBody.id="three-column":n.contentWrapper&&n.secondColumn&&!n.columnWidget?n.courseBody.id="two-column":n.contentWrapper&&n.secondColumn&&n.columnWidget?n.courseBody.id="two-col-widget":n.contentWrapper&&n.videoWrapper?n.courseBody.id="video-grid":!n.contentWrapper||n.secondColumn||n.thirdColumn||n.columnWidget||n.videoWrapper?n.contentWrapper&&!n.secondColumn&&(n.thirdColumn||n.columnWidget)?console.log("Document error: <body> is missing id because #second-column doesn't exist."):console.log("Document error: unable to determine the page layout for setting <body> id."):n.courseBody.id="one-column";const e=document.body.children;let o=!1;for(let t=0;t<e.length;t++){const n=e[t];if("content-wrapper"!==n.id&&"second-column"!==n.id&&"third-column"!==n.id&&"column-widget"!==n.id&&"HEADER"!==n.tagName&&"FOOTER"!==n.tagName&&"SCRIPT"!==n.tagName&&"loom-companion-mv3"!==n.id&&"focus-reader-switches"!==n.className){o=!0;break}}o&&console.log("Document error: Additional content outside #content-wrapper, #second-column, #third-column, or footer.")}else console.log("Document error: no <body> element found.")})()},584:(e,o,t)=>{Object.defineProperty(o,"__esModule",{value:!0});const n=t(256),r=document.querySelectorAll(".gallery-wrapper"),l=document.querySelectorAll(".image-box"),c=document.querySelectorAll(".image-gallery");r.length>0&&r.forEach((e=>{const o=e.parentNode;o instanceof Element&&o.classList.contains("image-gallery")||console.warn("Document error: parent of .gallery-wrapper does not have the .image-gallery class.")})),l.length>0&&l.forEach((e=>{const o=e.parentNode;o instanceof Element&&o.classList.contains("gallery-wrapper")||console.log("Document error: parent of .image-box does not have the .gallery-wrapper class.")})),r.length>0&&r.forEach((e=>{Array.from(e.children).every((e=>e instanceof HTMLElement&&e.classList.contains("image-box")))||console.warn("Document error: not all direct children of .gallery-wrapper have the .image-box class.")}));c.length>0&&((()=>{const e=document.createElement("link");e.rel="stylesheet",e.href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css",null===n.docHead||void 0===n.docHead||n.docHead.appendChild(e)})(),(()=>{c.forEach((e=>{e.insertAdjacentHTML("afterbegin",'<div class="modal-box invisible">\n    <div class="gallery-overlay"></div>\n    <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>\n    </div>\n    <button class="hide-gallery">Hide</button>')}));const e=document.querySelector(".gallery-overlay"),o=document.querySelector(".modal-box"),t=document.querySelector(".modal-box--image img"),n=document.querySelector(".img-caption"),r=document.querySelector(".close-img"),i=document.querySelectorAll(".hide-gallery"),a=e=>{null==o||o.classList.remove("invisible"),t&&(t.src=e.imgSrc),n&&(n.innerHTML=e.imgCaption)},d=()=>{null==o||o.classList.add("invisible")};l.forEach((e=>{e.addEventListener("click",(function(){var e,o;a({imgSrc:(null===(e=this.querySelector("img"))||void 0===e?void 0:e.src)||"",imgCaption:(null===(o=this.querySelector("img"))||void 0===o?void 0:o.alt)||""})})),e.setAttribute("tabindex","0"),e.addEventListener("keydown",(function(e){var o,t;"Enter"===e.key&&a({imgSrc:(null===(o=this.querySelector("img"))||void 0===o?void 0:o.src)||"",imgCaption:(null===(t=this.querySelector("img"))||void 0===t?void 0:t.alt)||""})}))})),e&&(e.onclick=d),window.onkeydown=e=>{27===e.keyCode&&d()},r&&(r.onclick=d),i.forEach((e=>{e.addEventListener("click",(()=>{var o;null===(o=e.nextElementSibling)||void 0===o||o.classList.toggle("invisible"),e.innerHTML="Hide"===e.innerHTML?"Show":"Hide"}))}))})())},315:()=>{const e=document.querySelectorAll(".media-container");e.length>0&&e.forEach(((e,o)=>{let t=String.fromCharCode(o+65).toLowerCase(),n=e.querySelector(".media-object"),r=e.querySelector("iframe"),l=e.querySelector(".media-info");r||console.warn("Document error: no iframe found for media container"),n||console.warn("Document error: no media object found for media container"),r&&!r.hasAttribute("aria-describedby")&&l&&(r.setAttribute("aria-describedby",`${t}`),l.id=`${[t]}`)}))},832:()=>{const e=document.querySelectorAll(".display, .display-lg");e.length>0&&(console.log("Fantastic"),[...e].forEach((e=>{const o=e.querySelectorAll(".display table th, table.display th, .display-lg table th, table.display-lg th"),t=e.querySelector(".display table tbody, table.display tbody, .display-lg table tbody, table.display-lg tbody"),n=[...o].map((e=>{var o;return(null===(o=e.textContent)||void 0===o?void 0:o.replace(/\r?\n|\r/,""))||""}));t&&[...t.rows].forEach((e=>{[...e.cells].forEach(((e,o)=>{e.setAttribute("data-th",n[o])}))}))})))},256:(e,o)=>{Object.defineProperty(o,"__esModule",{value:!0}),o.videoWrapper=o.rolePres=o.thirdColumn=o.secondColumn=o.docHead=o.courseBody=o.contentWrapper=o.columnWidget=void 0,o.columnWidget=document.querySelector("#column-widget"),o.contentWrapper=document.querySelector("#content-wrapper"),o.courseBody=document.querySelector("body"),o.docHead=document.querySelector("head"),o.secondColumn=document.querySelector("#second-column"),o.thirdColumn=document.querySelector("#third-column"),o.rolePres=document.querySelectorAll('[role="presentation"]'),o.videoWrapper=document.querySelector("#video-wrapper")}},o={};function t(n){var r=o[n];if(void 0!==r)return r.exports;var l=o[n]={exports:{}};return e[n](l,l.exports,t),l.exports}t(92),t(340),t(452),t(100),t(568),t(584),t(315),t(832)})();

package/dist/js/scripts.js

@@ -1,327 +0,0 @@
-/// @description Main JS file for PimaOnline Themepack
-/// @dependencies jQuery 3.3.1 or later
-
-window.addEventListener("DOMContentLoaded", () => {
-
-  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");
-  
-  // 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 addScript = (script) => {
-    let newScript = document.createElement("script");
-    newScript.setAttribute("src", script);
-    
-    document.body.append(newScript);
-  }
-  
-  if(document.querySelector("[onclick]")) {
-    addScript("https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/js/jumpTo.js");
-  }
-  
-  // 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;
-        }
-      }
-      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();}
-  
-  // 
-  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");
-        }
-      })
-    }
-  }
-
-  // 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();
-
-  // Fancybox
-  if (document.querySelector(".fancybox")) {
-    $("[data-fancybox]").fancybox({
-      idleTime: false,
-      topRatio: 0.1,
-      helpers: {
-        title: {
-          type: 'inside'
-        },
-      }
-    });
-  }
-});