Merge pull request #133 from whitep4nth3r/fix-blog-index-cls

Make search box input and button static and not generated by JS
whitep4nth3r · Mar 8, 2024 · ce633c9 · ce633c9
2 parents a68452a + 77cd493
commit ce633c9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mk2-p4nth3rblog",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "My website and blog.",
   "scripts": {
     "watch:sass": "sass --watch ./src/_sass:src/_css",

diff --git a/src/_client_scripts/app_search.js b/src/_client_scripts/app_search.js
@@ -33,23 +33,12 @@ function formatDateForDisplay(dateString) {
   )} ${date.getFullYear()}`;
 }
 
-// Create a render function
-const renderSearchBox = (renderOptions, isFirstRender) => {
-  const { query, refine, clear, isSearchStalled, widgetParams } = renderOptions;
+const activateSearchElements = (renderOptions, isFirstRender) => {
+  const { refine, clear } = renderOptions;
 
   if (isFirstRender) {
-    const label = document.createElement("label");
-    label.setAttribute("for", "search");
-    label.classList = "ais__label";
-    label.innerText = "Search posts";
-
-    const input = document.createElement("input");
-    input.setAttribute("id", "search");
-    input.classList = "ais__input";
-
-    const button = document.createElement("button");
-    button.classList = "ais__reset";
-    button.textContent = "Clear";
+    const input = document.querySelector("[data-search-input]");
+    const button = document.querySelector("[data-search-clear]");
 
     input.addEventListener("input", (event) => {
       refine(event.target.value);
@@ -58,13 +47,7 @@ const renderSearchBox = (renderOptions, isFirstRender) => {
     button.addEventListener("click", () => {
       clear();
     });
-
-    widgetParams.container.appendChild(label);
-    widgetParams.container.appendChild(input);
-    widgetParams.container.appendChild(button);
   }
-
-  widgetParams.container.querySelector("input").value = query;
 };
 
 function initSearch({ appId, apiKey, indexName, latestPost }) {
@@ -76,8 +59,9 @@ function initSearch({ appId, apiKey, indexName, latestPost }) {
   });
 
   // create custom widget
-  const customSearchBox =
-    instantsearch.connectors.connectSearchBox(renderSearchBox);
+  const customSearchBox = instantsearch.connectors.connectSearchBox(
+    activateSearchElements,
+  );
 
   search.addWidgets([
     customSearchBox({

diff --git a/src/blog/index.11ty.js b/src/blog/index.11ty.js
@@ -53,7 +53,11 @@ exports.render = function (data) {
     <aside class="blog__searchAndCats">
       <div class="blog__searchBoxAndFilterToggle">
         <div id="autocomplete" class="ais">
-          <div id="searchbox" class="ais__searchbox"></div>
+          <div id="searchbox" class="ais__searchbox">
+            <label for="search" class="ais__label">Search posts</label>
+            <input id="search" data-search-input class="ais__input" type="text" />
+            <button class="ais__reset" data-search-clear type="button">Clear</button>
+          </div>
         </div>
         <!-- add aria stuff here -->
         <button type="button" class="blog__filterToggle" data-toggle>${FilterIcon()} Filters</button>