working on adding events system

geo-smart · Oct 2, 2023 · e85b585 · e85b585
1 parent a4b6ae4
commit e85b585
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 45 deletions.
diff --git a/codeweek.html b/codeweek.html
@@ -113,10 +113,10 @@ <h2 class="heading">Building and Supporting ML GeoScience Communities</h2>
   </div>
   <!-- END MAIN PAGE CONTENT -->
 
-  <a id="toast" class="rich-text" href="https://geosmart.hackweek.io/" target="_blank">
+  <a id="toast" class="rich-text" data-event="event-0" target="_blank">
     <img src="assets/info-icon.svg"/>
     <p>
-      There is a hackweek event happening Oct 23-27th! 
+      There is <span class="event-name"></span> happening in <span class="event-time"></span>! 
       Click to learn more.
     </p>
   </a>
@@ -140,6 +140,7 @@ <h2 class="heading">Building and Supporting ML GeoScience Communities</h2>
   <!-- %END FOOTER -->
 
   <script src="js/index.js" type="text/javascript"></script>
+  <script type="module" src="js/events.js"></script>
 </body>
 
 </html>
diff --git a/js/blog.js b/js/blog.js
@@ -1,6 +1,5 @@
-import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js"
-import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js"
 import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js";
+import { db } from "./firebase.js";
 
 "use strict";
 (function () {
@@ -14,17 +13,6 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f
   // Otherwise, the autoscroll feature will break.
 
   // PRE INIT SETUP
-  const firebaseConfig = {
-    apiKey: "AIzaSyDtv_mjLaZQImF4KoKy6s-moer6TtOVJiI",
-    authDomain: "geosmart-uw.firebaseapp.com",
-    projectId: "geosmart-uw",
-    storageBucket: "geosmart-uw.appspot.com",
-    messagingSenderId: "244030791746",
-    appId: "1:244030791746:web:f6c34ef4b145ab7d1a8ddb",
-    measurementId: "G-9L9TCCS7HD"
-  };
-  const app = initializeApp(firebaseConfig);
-
   const cachedPosts = localStorage.getItem("cachedPosts");
   if (cachedPosts) {
     blogPosts = JSON.parse(cachedPosts);
@@ -35,8 +23,10 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f
     if (cachedTime && timeDifferenceInHours(new Date(cachedTime)) > 1) localStorage.clear();
   } else loadPosts();
 
-  // This function handles everything that needs to occur after the window
-  // has fully loaded, meaning in this case event listeners.
+  /**
+   * This function handles everything that needs to occur after the window
+   * has fully loaded, meaning in this case event listeners.
+   */
   function init() {
     addAccessibleClickListener(document.getElementById("blog-post-return"), showBlogList);
 
@@ -66,11 +56,12 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f
     addEventListener("posts-loaded", onPostsLoaded);
   }
 
-  // Querys the firebase backend for all documents in the posts collection,
-  // stores them to local storage and broadcasts a "posts-loaded" event.
+  /**
+   * Querys the firebase backend for all documents in the posts collection,
+   * stores them to local storage and broadcasts a "posts-loaded" event.
+   */
   async function loadPosts() {
     console.log("Loading posts from server...");
-    const db = getFirestore(app);
     const querySnapshot = await getDocs(collection(db, "posts"));
 
     const posts = [];
@@ -86,8 +77,10 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f
     console.log(`Loaded ${blogPosts.length} posts from server.`);
   }
 
-  // Helper function for hiding the loader, populating the blog list and 
-  // loading from hash given the global blogPosts variable contains data.
+  /**
+   * Helper function for hiding the loader, populating the blog list and 
+   * loading from hash given the global blogPosts variable contains data.
+   */
   function onPostsLoaded() {
     console.log("Populating with loaded posts...");
     const loader = document.getElementById("blog-loader");
@@ -100,8 +93,8 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f
   /**
    * Takes a list of post objects, of the form described below, and
    * creates from the template in the html a node for each of them.
-   * Interface "post" format:
-   * {
+   * 
+   * interface post {
    *    title: string
    *    body: string
    *    link: string
@@ -169,17 +162,25 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f
     document.getElementById("blog-post").classList.toggle("hidden");
   }
 
-  // In firefox there is a bug and scrolling immediately after modifying
-  // the dom (in a way that affects document height) won't work.
+  /**
+   * In firefox there is a bug and scrolling immediately after modifying
+   * the dom (in a way that affects document height) won't work.
+   * 
+   * @param {number} scrollY 
+   * @param {"smooth" | "instant"} scrollBehavior 
+   */
   function scrollToWithDelay(scrollY, scrollBehavior) {
     scrollBehavior = scrollBehavior || "instant";
     setTimeout(() => {
       window.scrollTo({ top: scrollY, behavior: scrollBehavior });
     }, 1);
   }
 
-  // Creates an intersection observer which triggers animations for
-  // some elements when they scroll onto the page by modifying their class.
+  /**
+   * Creates an intersection observer which triggers animations for 
+   * some elements when they scroll onto the page by modifying their class.
+   * @param {Element[]} animated_items 
+   */
   function addAnimationObserver(animated_items) {
     const options = {
       root: null,
@@ -198,8 +199,12 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f
     animated_items.forEach((element) => observer.observe(element));
   }
 
-  // Adds the given function as both a click event listener
-  // and a keydown event listener for accessiblity reasons.
+  /**
+   * Adds the given function as both a click event listener 
+   * and a keydown event listener for accessiblity reasons.
+   * @param {Element} elem 
+   * @param {(event) => void} func 
+   */
   function addAccessibleClickListener(elem, func) {
     elem.addEventListener("click", func);
     elem.addEventListener("keydown", function (event) {

diff --git a/js/events.js b/js/events.js
@@ -0,0 +1,49 @@
+import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js";
+import { db } from "./firebase.js";
+
+"use strict";
+(function () {
+
+  window.addEventListener("load", init);
+
+  /**
+   * Initialization function that should handle anything that needs to occur
+   * on page load (include changing from one page to another).
+   */
+  function init() {
+    setUpToastContent();
+    setUpToastOnClick();
+  }
+
+  function setUpToastOnClick() {
+    const toast = document.getElementById("toast");
+    if (!toast) return;
+
+    toast.addEventListener("click", (evt) => {
+      evt.preventDefault();
+      toast.classList.add("hide");
+      setTimeout(() => {
+        const link = toast.getAttribute("href");
+        window.open(link, "_blank");
+      }, 500); // match to toast hide animation
+    });
+  }
+
+  async function getEventContent() {
+    console.log("Loading event from server...");
+    const querySnapshot = await getDocs(collection(db, "posts"));
+
+    const posts = [];
+    querySnapshot.forEach((doc) => {
+      posts.push(doc.data()); // doc.data() is never undefined for query doc snapshots
+    });
+    posts.reverse();
+    blogPosts = posts;
+
+    localStorage.setItem("cachedPosts", JSON.stringify(posts));
+    localStorage.setItem("cachedTime", new Date().toISOString());
+    window.dispatchEvent(new Event("posts-loaded"));
+    console.log(`Loaded ${blogPosts.length} posts from server.`);
+  }
+
+})();
diff --git a/js/firebase.js b/js/firebase.js
@@ -0,0 +1,15 @@
+import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js"
+import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js"
+
+export const firebaseConfig = {
+  apiKey: "AIzaSyDtv_mjLaZQImF4KoKy6s-moer6TtOVJiI",
+  authDomain: "geosmart-uw.firebaseapp.com",
+  projectId: "geosmart-uw",
+  storageBucket: "geosmart-uw.appspot.com",
+  messagingSenderId: "244030791746",
+  appId: "1:244030791746:web:f6c34ef4b145ab7d1a8ddb",
+  measurementId: "G-9L9TCCS7HD"
+}
+
+export const app = initializeApp(firebaseConfig);
+export const db = getFirestore(app);
diff --git a/js/index.js b/js/index.js
@@ -11,7 +11,6 @@
     setNavbarHighlight(document.URL);
     constructPageNavigation();
     addAnimationObserver();
-    setUpToast();
 
     const menu_btn = document.getElementById("menu-button");
     const menu = document.getElementById("w-nav-overlay-0");
@@ -232,18 +231,4 @@
     animated_items.forEach((element) => mobileObserver.observe(element));
   }
 
-  function setUpToast() {
-    const toast = document.getElementById("toast");
-    if (!toast) return;
-
-    toast.addEventListener("click", (evt) => {
-      evt.preventDefault();
-      toast.classList.add("hide");
-      setTimeout(() => {
-        const link = toast.getAttribute("href");
-        window.open(link, "_blank");
-      }, 500); // match to toast hide animation
-    });
-  }
-
 })();