Create blog-search.js (#449)

src/js/blog-search.js

@@ -0,0 +1,82 @@
+$(document).ready(function () {
+    // Elements
+    const modalTrigger = $('[data-el="modal-trigger"]');
+    const modal = $('[data-el="modal"]');
+    const modalTriggerClose = $('[data-el="modal-close"]');
+    const searchInput = $('[data-el="blog-search"]');
+    const moreResultsLink = $('[data-el="more-results"]');
+    const searchWrapper = $('.blog-search_collection-wrapper');
+    const searchLink = $('.link-underline');
+    const baseUrl = "/wip/blog-search-results"; // Base URL
+
+    let typingTimer;
+    const doneTypingInterval = 500; // Delay before updating query params
+
+    // Function to open the modal
+    function openModal() {
+        modal.css({ "display": "flex", "opacity": "0" });
+
+        setTimeout(() => {
+            modal.css("opacity", "1");
+            searchInput.focus(); // Auto-focus the input when modal opens
+        }, 100);
+    }
+
+    // Function to close the modal
+    function closeModal() {
+        modal.css("opacity", "0");
+
+        setTimeout(() => {
+            modal.css("display", "none");
+        }, 300);
+    }
+
+    // Function to handle typing in search input
+    function handleTyping() {
+        clearTimeout(typingTimer);
+
+        let queryValue = searchInput.val().trim();
+
+        if (queryValue.length > 0) {
+            // Remove "is-search-disabled" and set opacity to 1
+            searchWrapper.removeClass('is-search-disabled').css("opacity", "1");
+            searchLink.removeClass('is-search-disabled').css("opacity", "1");
+        } else {
+            // If input is empty, revert to initial state
+            searchWrapper.css("opacity", "0").addClass('is-search-disabled');
+            searchLink.css("opacity", "0").addClass('is-search-disabled');
+        }
+
+        typingTimer = setTimeout(() => {
+            let queryParams = window.location.search; // Get updated query params
+
+            if (queryParams) {
+                updateMoreResultsLink(queryParams);
+            }
+        }, doneTypingInterval);
+    }
+
+    // Function to update "More Results" link with query parameters
+    function updateMoreResultsLink(queryParams) {
+        moreResultsLink.attr("href", baseUrl + queryParams);
+    }
+
+    // Event Listeners
+    modalTrigger.on("click", openModal);
+    modalTriggerClose.on("click", closeModal);
+
+    // Close modal when clicking outside it
+    modal.on("click", function (event) {
+        if ($(event.target).is(modal)) closeModal();
+    });
+
+    // Close modal on Escape key press
+    $(document).on("keydown", function (event) {
+        if (event.key === "Escape" || event.keyCode === 27) {
+            closeModal();
+        }
+    });
+
+    // Detect typing in search input
+    searchInput.on('input', handleTyping);
+});

src/main.js

@@ -62,6 +62,7 @@ Webflow.push(function () {
          newScript('https://cdn.jsdelivr.net/npm/@finsweet/attributes-mirrorclick@1/mirrorclick.js','body',1);
      }
 
+
     // blog pages
     if (path.includes('/blog/')) {
         // [Attributes by Finsweet] Code Highlight
@@ -78,6 +79,7 @@ Webflow.push(function () {
         newStyle(scriptBase + '/src/css/blog'+minBase+'.css','body');
         newScript(scriptBase + '/src/js/blog'+minBase+'.js','body',1);
     }
+
     // product tour page
     if (path === '/product-tour'){
         newScript(scriptBase + '/src/js/producttour'+minBase+'.js','head',1)
@@ -170,5 +172,9 @@ Webflow.push(function () {
     if(path.includes('/enterprise')){
       newScript(scriptBase + '/src/js/enterprise'+minBase+'.js','head', 1);
     }
+
+    if (path.includes('/wip/blog')){
+      newScript(scriptBase + '/src/js/blog-search'+minBase+'.js','body', 1);
+    }
 })