npm - @pimaonline/pimaonline-themepack - Versions diffs - 2.1.5 - Mend

@pimaonline/pimaonline-themepack 2.1.5

Files changed (117) hide show

package/dist/plugins/preview-banner/preview-banner.css ADDED Viewed

@@ -0,0 +1,126 @@
+@charset "UTF-8";
+/* CSS Document */
+.header img {
+	border-bottom: 3px solid rgba(4,85,148,1);
+	width: 100%;
+}
+@media screen and (min-width:730px) {
+	.header img {
+		width: 100%;
+	}
+}
+.header{
+  position: relative;
+}
+.header .text-container {
+	background: rgba(4,85,148,.7);
+	padding: 1% 0;;
+	width: 100%;
+	z-index: 2;
+	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgba(4,85,148,1)' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
+}
+@media screen and (min-width: 730px) {
+	.header .text-container {
+		width: 100%;
+	}
+}
+@media screen and (min-width: 1048px) {
+	.header .text-container {
+		position: absolute;
+		left: 50%;
+  	top: 70%;
+		padding: 1% 0;
+		transform: translate(-50%, -50%)
+	}
+}
+.header .text-container h1,
+.header .text-container h2,
+.header .text-container h3,
+.header .text-container h4,
+.header .text-container p {
+	color: rgba(255,255,255,1);
+	padding-left: 1%;
+}
+@media screen and (min-width:730px) {
+	.header .text-container h1,
+	.header .text-container h2,
+	.header .text-container h3,
+	.header .text-container h4,
+	.header .text-container p {
+		padding: 0 1% 0 3%;
+	}
+}
+@media screen and (min-width:998px) {
+	.header .text-container h1,
+	.header .text-container h2,
+	.header .text-container h3,
+	.header .text-container h4,
+	.header .text-container p {
+		padding: 0 5% 0 10%;
+	}
+}
+/*/// FONT STYLLES ///*/
+.header .text-container h1,
+.header .text-container h2,
+.header .text-container h3,
+.header .text-container h4 {
+	font-size: 2em;
+	margin: 0 0 5px 0;
+}
+@media screen and (min-width:730px) {
+	.header .text-container h1,
+	.header .text-container h2,
+	.header .text-container h3,
+	.header .text-container h4 {
+		line-height: 1.1;
+	}
+}
+@media screen and (min-width:998px) {
+	.header .text-container h1,
+	.header .text-container h2,
+	.header .text-container h3,
+	.header .text-container h4 {
+		line-height: 1.155;
+	}
+}
+.header .text-container p {
+	margin: 0 0 5px 0;
+	font-size: 1.1em;
+}
+@media screen and (min-width:730px) {
+	.header .text-container p {
+		line-height: 1.155;
+		min-height: 44px;
+	}
+}
+/*Video Container*/
+.video-container {
+  height: 0;
+  margin: 30px 0;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  padding-top: 35px;
+  position: relative;
+}
+.video-container iframe {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}

package/dist/plugins/preview-banner/preview-banner.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script>
+      let parentDoc = window.parent.document;
+      let scriptIsLoaded = parentDoc.head.querySelectorAll("script[src='https://d2l.pima.edu/shared/webdev/course-files/plugins/preview-banner/preview-banner.js']").length > 0;
+      if (!scriptIsLoaded) {
+        let script = parentDoc.createElement("script");
+        script.type = "text/javascript";
+        script.src = "https://d2l.pima.edu/shared/webdev/course-files/plugins/preview-banner/preview-banner.js";
+        parentDoc.head.appendChild(script);
+      }
+    </script>
+  </head>
+  <body></body>
+</html>

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

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

package/package.json ADDED Viewed

@@ -0,0 +1,44 @@
+{
+  "name": "@pimaonline/pimaonline-themepack",
+  "version": "2.1.5",
+  "description": "A cloud based, course theme-pack for building courses efficiently within the D2L learning environment.",
+  "main": "index.js",
+  "files": [
+    "README.md",
+    "package.json",
+    "/dist/img",
+    "/dist/js",
+    "/dist/plugins",
+    "/dist/css/plugins",
+    "/dist/css/main.css",
+    "/dist/css/routes.css"
+  ],
+  "scripts": {
+    "gulp": "gulp",
+    "copy-assets": "gulp copy-js && gulp copy-imgs && gulp copy-plugins",
+    "sass-main": "gulp sass-main",
+    "sass-main-themes": "gulp sass-main-themes",
+    "pug-main-themes": "gulp pug-main-themes",
+    "pug-docs": "gulp pug-docs",
+    "sass-docs": "gulp sass-docs",
+    "js-docs": "gulp js-docs",
+    "img-docs": "gulp imgs-docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/frankiejrey/pimaonline-themepack"
+  },
+  "author": "Center for Learning Technology at Pima Community College",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/frankiejrey/pimaonline-themepack/issues"
+  },
+  "homepage": "https://github.com/frankiejrey/pimaonline-themepack",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-connect": "^5.7.0",
+    "gulp-pug": "^5.0.0",
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.49.9"
+  }
+}