basic searchbar functionality (it can't search dates); some documentation in the postSys.js file

Author: icaras84

blog.html

@@ -16,15 +16,16 @@
     <h2>Blog</h2>
     <ul id="blog-feed"></ul>
   </section>
-  <script src="./scripts/postSys.js"></script>
-  <script src="./scripts/blog.js"></script>
+   <!--Loader Script for the Header -->
+   <script src="scripts/load-header.js" defer></script>
+
+   <script src="./scripts/postSys.js"></script>
+   <script src="./scripts/blog.js"></script>
+   <script>
+     document.addEventListener("DOMContentLoaded", function() {
+       debugTestBlog(1); // or whatever number matches your file
+     });
+   </script>
 
-  <script>
-  document.addEventListener("DOMContentLoaded", function() {
-    debugTestBlog(1); // or whatever number matches your file
-  });
-</script>
-    <!--Loader Script for the Header -->
-  <script src="scripts/load-header.js" defer></script>
 </body>
 </html>

events.html

@@ -16,14 +16,16 @@
     <h2>Events</h2>
     <ul id="events-feed"></ul>
   </section>
-  <script src="./scripts/postSys.js"></script>
-  <script src="./scripts/events.js"></script>
-  <script>
-  document.addEventListener("DOMContentLoaded", function() {
-    debugTestEventsPost(1); // or whatever file number exists
-    });
-  </script>
-  <!--Loader Script for the Header -->
-  <script src="scripts/load-header.js" defer></script>
+
+   <!--Loader Script for the Header -->
+   <script src="scripts/load-header.js" defer></script>
+   <script src="./scripts/postSys.js"></script>
+   <script src="./scripts/events.js"></script>
+   <script>
+   document.addEventListener("DOMContentLoaded", function() {
+     debugTestEventsPost(1); // or whatever file number exists
+     });
+   </script>
+
 </body>
 </html>

header.txt

@@ -17,9 +17,9 @@
     </div>
 
      <!-- This form submits to the backend, replace with /search -->
-   <form onSubmit=search($event)>
-    <input type="text" name="q" placeholder="Search..." required>
-    <button type="submit">Go</button>
+   <form id="searchForm">
+    <input type="text" id="searchbar" name="q" placeholder="Search..." required>
+    <button id="searchSubmit" type="submit">Go</button>
   </form>
   </nav>
   <hr>

news.html

@@ -22,15 +22,15 @@ <h1>Announcements</h1>
         <h1>News</h1>
         <ul id="news-feed"></ul>
     </section>
+       <!--Loader Script for the Header -->
+       <script src="scripts/load-header.js"></script>
 
-    <script src="./scripts/postSys.js"></script>
-    <script src="./scripts/announcements.js"></script>
-    <script>
-  document.addEventListener("DOMContentLoaded", function() {
-    debugTestAnnouncements(2); // or 2, 3, etc., depending on your file
-      });
-    </script>
-  <!--Loader Script for the Header -->
-  <script src="scripts/load-header.js" defer></script>
+       <script src="./scripts/postSys.js"></script>
+       <script src="./scripts/announcements.js"></script>
+       <script>
+            document.addEventListener("DOMContentLoaded", function() {
+                debugTestAnnouncements(2); // or 2, 3, etc., depending on your file
+            });
+       </script>
 </body>
 </html>

scripts/announcements.js

@@ -34,4 +34,26 @@ function debugTestAnnouncements(idx){
         .catch(error => {
             console.error('Error fetching JSON:', error);
         });
-}
+}
+
+
+window.GO_HeaderLoaded.pushSubscribers([
+    () => {
+        let searchForm = document.getElementById('searchForm');
+        let searchbar = document.getElementById('searchbar');
+        searchForm.addEventListener('submit', (event) => {
+            event.preventDefault();
+
+            let searchIn = searchbar.value;
+            let searchQuery = new GO_SearchQuery();
+            searchQuery.titleRegex = new RegExp(searchIn, 'g');
+            searchQuery.contentRegex = new RegExp(searchIn, 'g');
+
+            announcementSys.searchQuery = searchQuery;
+            announcementSys.refreshPostsOntoHTML();
+
+            newsSys.searchQuery = searchQuery;
+            newsSys.refreshPostsOntoHTML();
+        })
+    }
+]);

scripts/events.js

@@ -53,3 +53,21 @@ function debugTestEventsPost(idx){
             console.error('Error fetching JSON:', error);
         });
 }
+
+window.GO_HeaderLoaded.pushSubscribers([
+    () => {
+        let searchForm = document.getElementById('searchForm');
+        let searchbar = document.getElementById('searchbar');
+        searchForm.addEventListener('submit', (event) => {
+            event.preventDefault();
+
+            let searchIn = searchbar.value;
+            let searchQuery = new GO_SearchQuery();
+            searchQuery.titleRegex = new RegExp(searchIn, 'g');
+            searchQuery.contentRegex = new RegExp(searchIn, 'g');
+
+            eventSys.searchQuery = searchQuery;
+            eventSys.refreshPostsOntoHTML();
+        })
+    }
+]);

scripts/hiking.js

@@ -52,3 +52,20 @@ function debugTestHikingTrails(idx){
             console.error('Error fetching JSON:', error);
         });
 }
+window.GO_HeaderLoaded.pushSubscribers([
+    () => {
+        let searchForm = document.getElementById('searchForm');
+        let searchbar = document.getElementById('searchbar');
+        searchForm.addEventListener('submit', (event) => {
+            event.preventDefault();
+
+            let searchIn = searchbar.value;
+            let searchQuery = new GO_SearchQuery();
+            searchQuery.titleRegex = new RegExp(searchIn, 'g');
+            searchQuery.contentRegex = new RegExp(searchIn, 'g');
+
+            eventSys.searchQuery = searchQuery;
+            eventSys.refreshPostsOntoHTML();
+        })
+    }
+]);

scripts/load-header.js

@@ -1,7 +1,30 @@
+class GO_HeaderLoaded{
+    subscribers = [];
+    constructor(){
+        this.subscribers = [];
+    }
+
+    pushSubscribers(subscribers){
+        for(let subscriber of subscribers){
+            this.subscribers.push(subscriber);
+        }
+    }
+
+    notifySubscribers(){
+        for(let subscriber of this.subscribers){
+            subscriber();
+        }
+    }
+}
+
+let headerLoadedEventManager = new GO_HeaderLoaded();
+window.GO_HeaderLoaded = headerLoadedEventManager;
+
 // js/load-header.js
 fetch('./header.txt')
   .then(r => r.text())
   .then(txt => {
       let header = document.getElementById('site-header');
       header.innerHTML = txt;
-  });
+      headerLoadedEventManager.notifySubscribers();
+  });

scripts/postSys.js

@@ -57,16 +57,20 @@ class GO_PostContent {
     }
 }
 
+// builder interprets a json and builds a model of the post
 class GO_PostBuilder {
+    // accepts a json obj and parses a post (main method to override for a custom builder with custom json)
     fromJsonObject(jsonObject) {
         return new GO_PostContent(jsonObject.title, jsonObject.timestamp, jsonObject.content);
     }
 
+    // accepts a json string and parses a post
     fromJsonString(jsonString) {
         return this.fromJsonObject(JSON.parse(jsonString));
     }
 }
 
+// a class to represent all the loaded posts and what the class should look for when parsing a json object to get the array of posts
 class GO_PostModel {
     loadedPosts = []
     jsonArrayVarName = "";
@@ -100,6 +104,7 @@ class GO_PostModel {
     }
 }
 
+// a class to control where the post is shown in the HTML
 class GO_PostView {
     htmlIDToLookup = "";
 
@@ -117,6 +122,7 @@ class GO_PostView {
     }
 }
 
+// a class to store a date interval
 class GO_DateRange {
     _beginDate;
     _endDate;
@@ -162,6 +168,7 @@ class GO_DateRange {
     }
 }
 
+// a class to store the regex required to complete a search
 class GO_SearchQuery {
     titleRegex = new RegExp('', 'g');
     timestampFilter = new GO_DateRange(new Date(), new Date());
@@ -180,6 +187,7 @@ class GO_SearchQuery {
         this.titleRegex = regex;
     }
 
+    // scoring function attributes a value to each post that is based on the number of matches within the post
     scoringFunc(post){
         // get title matches based on regex
         let titleRegexResult = post.title.matchAll(this.titleRegex);
@@ -206,6 +214,7 @@ class GO_SearchQuery {
         return [titleScore, contentScore, timestampScore[0], timestampScore[1]];
     }
 
+    // filter out posts that do and don't match the criterion
     filterFunc(post){
         let scores = this.scoringFunc(post);
         let titleResult = this.targetTitle ? scores[0] > 0 : true;
@@ -214,6 +223,7 @@ class GO_SearchQuery {
         return titleResult && contentResult && timestampResult;
     }
 
+    // sorting function to dictate order of which posts are shown in via score value
     compareFunc(postA, postB){
         let scoreA = this.scoringFunc(postA);
         let scoreB = this.scoringFunc(postB);
@@ -226,6 +236,7 @@ class GO_SearchQuery {
     }
 }
 
+// a class that acts as the controller for the model and view components (resulting in the MVC pattern)
 class GO_PostSystem {
     postModel = new GO_PostModel();
     postBuilder = new GO_PostBuilder();
@@ -253,23 +264,26 @@ class GO_PostSystem {
         this.postModel.removePoseOnIndices(indices);
     }
 
+    // filters and then sorts the intermediate posts (that should be rendered)
     filterPosts(searchQuery){
         this.intermediatePosts = this.postModel.loadedPosts.filter(post => searchQuery.filterFunc(post));
         this.intermediatePosts.sort((a, b) => this.searchQuery.compareFunc(a, b));
     }
 
+    // render intermediate posts unto the page dictated by the view
     refreshPostsOntoHTML(){
         this.filterPosts(this.searchQuery)
         this.postView.pasteOntoHTML(this.intermediatePosts);
     }
 
+    // wrapper method for loading the model from a json obj
     loadFromJson(jsonObj){
         this.postModel.loadFromJson(jsonObj);
     }
 }
 
 
-//export {PostContent, PostBuilder, PostModel, PostView, PostSystem};
+// bind the classes declared here to the window so they're in global scope instead of being file-specific
 window.GO_PostContent = GO_PostContent;
 window.GO_PostBuilder = GO_PostBuilder;