@pimaonline/pimaonline-themepack 2.4.1 → 3.10.11

package/dist/js/themes/ecn.js

@@ -0,0 +1,13 @@
+// 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";
+    }
+  })
+}

package/dist/js/themes/hrs.js

@@ -0,0 +1,19 @@
+// Animated border for HRS theme
+const borders = document.querySelectorAll(".border");
+
+if (borders) {
+  Array.from(borders).forEach((border) => {
+    border.classList.add("hrs-border");
+    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(border);
+  });
+ };

package/dist/js/themes/ss.js

@@ -0,0 +1,197 @@
+// JS specifically for the Social Sciences (SS) theme
+
+// Add items for the button 
+function replaceButtons() {
+  const buttons = document.querySelectorAll(".btn");
+  const vocabBtns = document.querySelectorAll(".vocab-list button");
+
+  vocabBtns.forEach(button => {
+    button.classList.add("blob-btn");
+
+    const innerSpan = document.createElement("span");
+    innerSpan.classList.add("blob-btn__inner");
+
+    const blobsSpan = document.createElement("span");
+    blobsSpan.classList.add("blob-btn__blobs");
+
+    for (let i = 0; i < 4; i++) {
+      const blob = document.createElement("span");
+      blob.classList.add("blob-btn__blob");
+      blobsSpan.appendChild(blob);
+    }
+
+    innerSpan.appendChild(blobsSpan);
+    button.appendChild(innerSpan);
+
+  })
+
+  buttons.forEach(button => {
+    // Create the elements for the new structure
+    const newButton = document.createElement("a");
+    newButton.classList.add("blob-btn");
+
+    // Create a new span element for the original button text
+    const originalTextSpan = document.createElement("span");
+    originalTextSpan.classList.add("original-text");
+    originalTextSpan.textContent = button.textContent;
+
+    // Copy the original button's href attribute
+    const hrefAttribute = button.getAttribute("href");
+
+    if (hrefAttribute) {
+      newButton.setAttribute("href", hrefAttribute);
+    }
+
+    const innerSpan = document.createElement("span");
+    innerSpan.classList.add("blob-btn__inner");
+
+    const blobsSpan = document.createElement("span");
+    blobsSpan.classList.add("blob-btn__blobs");
+
+    for (let i = 0; i < 4; i++) {
+      const blob = document.createElement("span");
+      blob.classList.add("blob-btn__blob");
+      blobsSpan.appendChild(blob);
+    }
+
+    innerSpan.appendChild(blobsSpan);
+    newButton.appendChild(originalTextSpan); // Add the original button text
+    newButton.appendChild(innerSpan);
+
+    // Replace the existing button with the new structure
+    button.parentNode.replaceChild(newButton, button);
+  });
+}
+
+replaceButtons();
+
+// Create and add the SVG to HTML document
+const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+svgElement.setAttribute("version", "1.1");
+svgElement.style.display = "none"; // Hide the SVG
+document.body.appendChild(svgElement);
+
+// Create and add the filter definition to the SVG
+const svgDefs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+svgElement.appendChild(svgDefs);
+
+const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
+filter.setAttribute("id", "goo");
+svgDefs.appendChild(filter);
+
+const feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");
+feGaussianBlur.setAttribute("in", "SourceGraphic");
+feGaussianBlur.setAttribute("result", "blur");
+feGaussianBlur.setAttribute("stdDeviation", "10");
+filter.appendChild(feGaussianBlur);
+
+const feColorMatrix = document.createElementNS("http://www.w3.org/2000/svg", "feColorMatrix");
+feColorMatrix.setAttribute("in", "blur");
+feColorMatrix.setAttribute("mode", "matrix");
+feColorMatrix.setAttribute("values", "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7");
+feColorMatrix.setAttribute("result", "goo");
+filter.appendChild(feColorMatrix);
+
+const feBlend = document.createElementNS("http://www.w3.org/2000/svg", "feBlend");
+feBlend.setAttribute("in2", "goo");
+feBlend.setAttribute("in", "SourceGraphic");
+feBlend.setAttribute("result", "mix");
+filter.appendChild(feBlend);
+
+// Add items for text container for header 
+const header = document.querySelector(".header");
+
+const root = document.documentElement; // Get the root element (HTML or :root)
+
+const colorPrimary = getComputedStyle(root).getPropertyValue('--color-primary');
+const colorSecondary = getComputedStyle(root).getPropertyValue('--color-secondary');
+const colorQuaternary = getComputedStyle(root).getPropertyValue('--color-quaternary');
+
+// Function to create and append an SVG element to a container with attributes and path content
+function appendSVG(container, width, height, viewBox, pathContent, fillColor, addedClass) {
+  // Create a new SVG element
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("width", width);
+  svg.setAttribute("height", height);
+  svg.setAttribute("viewBox", viewBox);
+  svg.classList.add(addedClass);
+
+  // Create the path element
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("fill", fillColor);
+  path.setAttribute("d", pathContent);
+
+  // Append the path to the SVG
+  svg.appendChild(path);
+
+  // Append the SVG to the container
+  container.appendChild(svg);
+}
+
+//Text container blobs
+const textContainerSmallBlobSVG = `
+<svg width="520" height="459" viewBox="0 0 520 459" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M518.747 292.757C511.163 363.898 440.15 404.891 377.856 437.098C326.398 463.702 270.615 462.018 214.356 450.131C145.576 435.598 67.8836 426.477 32.6383 364.155C-8.37421 291.635 -10.4849 197.618 30.2012 124.499C71.6254 50.0538 151.869 1.46188 235.136 0.237608C309.302 -0.852853 359.552 65.0224 411.778 118.889C461.313 169.98 526.413 220.85 518.747 292.757Z" fill="${colorPrimary}"/>
+</svg>`;
+
+const textContainerLargeBlobSVG = `<svg width="1024" height="285" viewBox="0 0 1024 285" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M514.156 49.6823C564.805 56.965 616.051 59.1393 668.904 64.096C762.93 72.9141 878.419 64.6177 944.009 89.9955C1015.02 117.472 1043.01 160.905 1010.6 196.305C978.193 231.716 875.223 252.546 780.388 268.761C697.795 282.883 602.567 289.866 514.156 281.188C436.033 273.519 409.15 238.597 337.375 225.273C243.966 207.934 105.924 223.16 41.923 193.526C-22.351 163.765 -2.11912 119.429 32.3376 84.0315C66.4424 48.9954 126.608 8.23296 229.425 0.903027C335.419 -6.65334 414.006 35.2816 514.156 49.6823Z" fill="${colorPrimary}"/>
+</svg>
+`;
+
+// SVG content for "small blob"
+const smallBlobSVG = `
+  M192.013 7.52222C214.383 27.4062 184.038 72.2918 203.388 95.132C223.515 118.891 277.432 95.6132 290.57 123.857C301.863 148.137 264.142 169.094 247.593 190.168C235.224 205.919 222.205 220.428 205.763 231.852C190.226 242.647 173.165 249.94 154.841 254.61C135.115 259.637 115.381 261.357 95.0731 260.059C68.3899 258.355 32.8537 267.757 17.5267 245.837C1.76764 223.3 31.5572 192.865 28.9319 165.469C26.5454 140.566 -8.77626 118.326 3.20184 96.3545C15.9424 72.984 56.4801 89.4153 78.5187 74.5108C97.6061 61.6021 97.8281 30.652 117.67 18.9405C139.648 5.96868 172.953 -9.4198 192.013 7.52222Z`;
+
+// SVG content for "tallBlob"
+const tallBlobSVG = `
+  M122.209 11.1194C145.616 1.52446 173.459 -9.48853 193.008 14.1527C212.611 37.8602 211.527 86.7738 217.321 126.143C222.085 158.521 224.726 190.244 223.825 223.561C222.835 260.165 222.737 297.625 211.823 329.361C199.641 364.788 182.152 396.846 159.319 411.148C135.807 425.875 109.654 420.299 85.5729 408.442C61.4883 396.583 36.8662 378.545 22.6348 343.846C8.88936 310.332 13.78 266.304 10.7226 225.942C7.72455 186.365 -7.70321 142.971 4.85214 109.093C17.6055 74.681 49.0013 82.3697 70.621 64.3208C89.0654 48.9228 102.197 19.3226 122.209 11.1194Z`;
+
+appendSVG(header, "293", "261", "0 0 293 261", smallBlobSVG, colorSecondary, "small-blob");
+appendSVG(header, "224", "420", "0 0 224 420", tallBlobSVG, colorQuaternary, "tall-blob");
+
+// Encode the textContainerBlobSVG as a data URI
+const encodedTextContainerSmallBlobSVG = 'url("data:image/svg+xml,' + encodeURIComponent(textContainerSmallBlobSVG) + '")';
+const encodedTextContainerLargeBlobSVG = 'url("data:image/svg+xml,' + encodeURIComponent(textContainerLargeBlobSVG) + '")';
+
+// Select your HTML element
+const textContainer = document.querySelector(".text-container");
+const hasLargeClass = header.classList.contains('large');
+
+
+// Apply the background image to the HTML element
+if (hasLargeClass) {
+  // The element has the 'large' class
+  textContainer.style.backgroundImage = encodedTextContainerLargeBlobSVG;
+} else {
+  // The element does not have the 'large' class
+  textContainer.style.backgroundImage = encodedTextContainerSmallBlobSVG;
+}
+
+//Media Queries for changing SVG background images via JS 
+// Function to handle viewport width changes
+function handleViewportChanges() {
+  const viewportWidth = window.innerWidth;
+
+  if (viewportWidth > 1000) {
+    if (hasLargeClass) {
+      // The element has the 'large' class
+      textContainer.style.backgroundImage = encodedTextContainerLargeBlobSVG;
+    } else {
+      // The element does not have the 'large' class
+      textContainer.style.backgroundImage = encodedTextContainerSmallBlobSVG;
+    }
+  }
+  if (viewportWidth <= 1000) {
+    textContainer.style.backgroundImage = encodedTextContainerLargeBlobSVG;
+  } else if (viewportWidth <= 768) {
+    textContainer.style.backgroundImage = "none";
+  }
+}
+
+// Initial check on page load
+handleViewportChanges();
+
+// Add event listener to track changes in viewport width
+window.addEventListener("resize", handleViewportChanges);