@pimaonline/pimaonline-themepack 2.1.6 → 2.1.8

package/dist/js/scripts2.js

@@ -1,61 +1,83 @@
 /// @description Main JS file for PimaOnline Themepack
 /// @dependencies jQuery 3.3.1 or later
 
-// Grid 
-if (document.getElementById("second-column") && document.getElementById("third-column")) {
-  document.getElementsByTagName("body")[0].id = "three-column";
-
-} else if (document.getElementById("second-column") && !document.getElementById("column-widget")) {
-  document.getElementsByTagName("body")[0].id = "two-column";
-
-} else if (document.getElementById("column-widget")) {
-  document.getElementsByTagName("body")[0].id = "two-col-widget";
-
-} else if (document.getElementById("video-wrapper")) {
-  document.getElementsByTagName("body")[0].id = "video-grid";
+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");
 
-} else {
-  document.getElementsByTagName("body")[0].id = "one-column";
-}
+// 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
-let cwAttrib = document.querySelector("#content-wrapper");
-cwAttrib.setAttribute("role", "main");
-
-if (document.querySelector("#second-column")) {
-  let scAttrib = document.querySelector("#second-column");
-  scAttrib.setAttribute("role", "region");
-  scAttrib.setAttribute("aria-label", "second column");
-}
-
-if (document.querySelector("#third-column")) {
-  let tcAttrib = document.querySelector("#third-column");
-  tcAttrib.setAttribute("role", "region");
-  tcAttrib.setAttribute("aria-label", "third column");
-}
-
-// Remove role="presentation" attr
-if (document.querySelectorAll('[role="presentation"]')) {
-  let rolePres = document.querySelectorAll('[role="presentation"]');
-  rolePres.forEach((roleElem) => roleElem.removeAttribute("role"));
-}
+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
-function initResponsiveTables() {
-  var tables = document.querySelectorAll(".display, .display-lg")
-
-  for (var t = 0; t < tables.length; t++) {
-
-    var headertext = [],
-      headers = tables[t].querySelectorAll(".display table th, table.display th, .display-lg table th, table.display-lg th"),
-      tablebody = tables[t].querySelector(".display table tbody, table.display tbody, .display-lg table tbody, table.display-lg tbody");
-
-    for (var i = 0; i < headers.length; i++) {
-      var current = headers[i];
+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 (var y = 0, row; row = tablebody.rows[y]; y++) {
-      for (var j = 0, col; col = row.cells[j]; j++) {
+    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]);
       }
     }
@@ -63,143 +85,224 @@ function initResponsiveTables() {
 }
 initResponsiveTables();
 
-// Remove inline CSS from tables
-const discardAttributes = (element, ...attributes) =>
-  attributes.forEach((attribute) => element.removeAttribute(attribute));
-
-document.querySelectorAll("table, thead, tbody, tr, th, td").forEach((elem) => {
-  // Function parameters: discardAttributes(element, attribute1, attribute2, attribute3, ...)
-  discardAttributes(elem, "cellspacing", "cellpadding", "width", "style");
-});
-
-// Append scripts-async.js to DOM
-const addScript = (script) => {
-  let newScript = document.createElement("script");
-  newScript.setAttribute("src", script);
-  
-  document.body.append(newScript);
-}
-
-if(document.querySelector("[onclick]")) {
-  addScript("https://d2l.pima.edu/shared/webdev/course-files/js/jumpTo.js");
-}
+// 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
-if(document.querySelector(".image-gallery")) {
-  const modalBox = document.querySelector('.modal-box'),
-  overlay = document.querySelector('.gallery-overlay'),
-  imgBoxes = document.querySelectorAll('.image-box'),
-  modalImg = document.querySelector('.modal-box--image img'),
-  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;
-    }
-  }
-
-  overlay.onclick = function () {
-    modalBox.classList.add('invisible');
+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);
   }
 
-  window.onkeydown = function (esc) {
-    if (esc.keyCode === 27) {
-      modalBox.classList.add('invisible');
+  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;
+      }
     }
-  }
-
-  closeImg.onclick = function () {
-    modalBox.classList.add("invisible");
-  }
-  
-  const hideGallery = document.querySelector(".hide-gallery"),
-    galleryWrapper = document.querySelector(".gallery-wrapper");
-  
-  hideGallery.addEventListener("click", () => {
-    galleryWrapper.classList.toggle("invisible");
-  });
+    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 vocabListWidget = document.querySelector("dl.vocab-list");
-const vocabTerms = document.querySelectorAll("dl.vocab-list dt");
-const vocabDefs = document.querySelectorAll("dl.vocab-list dd");
-  
-if (vocabListWidget) {
-  const vocabCloseBtn = document.querySelector("dl.vocab-list button");
-
-  vocabCloseBtn.addEventListener("click", function() {
-    for (let def = 0; def < vocabDefs.length; def++) {
-      vocabDefs[def].removeAttribute("style");
-    }
-    
-    for (let term = 0; term < vocabTerms.length; term++) {
-      vocabTerms[term].removeAttribute("class");
+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();}
 
-// Show/Hide Toggle Button for Accordion
-$('.toggle-btn').on('click', function () {
-  $(this).next().slideToggle(200);
-});
-
-// Show/Hide for Footnotes and Footer
-$('.toggle-footnotes').on('click', function () {
-  $(this).next().slideToggle(200);
-  $(this).text($(this).text() == '[Hide Footnotes]' ? '[Show Footnotes]' : '[Hide Footnotes]');
-});
-
-// Toggle Button's Arrow Right Points Down on Click
-$('.arrow-right').on('click', function () {
-  $(this).toggleClass('arrow-down');
-});
-
-Fancybox
-$("[data-fancybox]").fancybox({
-  idleTime: false,
-  topRatio: 0.1,
-  helpers: {
-    title: {
-      type: 'inside'
-    },
-  }
-});
-
-/*------WIDGET SCRIPTS------ */
-/* TOOLTIP ------ */
-// Allows Screen readers to toggle a tooltip on click and to say if the tooltip is collapsed or expanded.
+// Toggle footnotes
+const toggleBtns = document.querySelectorAll(".toggle-btn, .toggle-footnotes");
 
-$(".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');
-  }
-});
+if (document.querySelector(".toggle-btn") || document.querySelector(".toggle-footnotes")) {
+  for (let toggleBtn = 0; toggleBtn < toggleBtns.length; toggleBtn++) {
+    // Add tabindex
+    toggleBtns[toggleBtn].setAttribute("tabindex", "0");
 
-var start = 999;
+    // Show/hide on click
+    toggleBtns[toggleBtn].addEventListener("click", () => {      
+      toggleBtns[toggleBtn].nextElementSibling.classList.toggle("show");      
+    })
 
-$('.tooltip').each(function (i) {
-  $(this).css('z-index', start--);
-});
+    // Show/hide on enter for users who use tab
+    toggleBtns[toggleBtn].addEventListener("keydown", (enter) => {
+      if (enter.keyCode === 13) {
+        toggleBtns[toggleBtn].nextElementSibling.classList.toggle("show");
+      }
+    })
+  }
+}
 
-$(".tooltip .video-container").parent().css("width", "450px");
+// Call function with jQuery scripts
+const callJquery = () => {
+  // Show/Hide Toggle Button for Accordion widget
+  $('.toggle-btn').on('click', function () {
+    $(this).next().slideToggle(200);
+  });
+  // 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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pimaonline/pimaonline-themepack",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "description": "A cloud based, course theme-pack for building courses efficiently within the D2L learning environment.",
   "main": "index.js",
   "files": [
@@ -16,6 +16,7 @@
   ],
   "scripts": {
     "gulp": "gulp",
+    "webdocs": "gulp pug-docs && gulp pug-index",
     "copy-assets": "gulp copy-js && gulp copy-imgs && gulp copy-plugins",
     "sass-main": "gulp sass-main",
     "sass-main-themes": "gulp sass-main-themes",