fix: support google search modal for V3

xianmin · Nov 15, 2024 · 1e476cc · 1e476cc
1 parent b966d7f
commit 1e476cc
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 101 deletions.
diff --git a/assets/sass/_components/_search.scss b/assets/sass/_components/_search.scss
@@ -0,0 +1,25 @@
+.search-modal {
+  article {
+    background-color: #fff;
+
+    > header {
+      margin-bottom: var(--pico-block-spacing-vertical);
+      border-bottom: 2px #d4d4d4 solid;
+      border-top-right-radius: var(--pico-border-radius);
+      border-top-left-radius: var(--pico-border-radius);
+
+      padding: calc(var(--pico-block-spacing-vertical) * 0.66)
+        var(--pico-block-spacing-horizontal);
+      background-color: mix($slate-50, $white, 25%);
+
+      [data-theme='dark'] & {
+        background-color: mix($slate-900, $slate-850, 75%);
+      }
+    }
+
+    .modal-body {
+      min-height: 50vh;
+    }
+  }
+}
+
diff --git a/assets/sass/_partial/_search.scss b/assets/sass/_partial/_search.scss
diff --git a/assets/sass/jane.scss b/assets/sass/jane.scss
@@ -192,7 +192,6 @@ $mobile-breakpoint: 768px !default;
 // @import "_partial/categories";
 // @import "_partial/back-to-top";
 // @import "_partial/author_info";
-// @import "_partial/search";
 
 /**------------------------------------------------------------------------
  *                           page styles
@@ -205,6 +204,7 @@ $mobile-breakpoint: 768px !default;
  *                           components
  *------------------------------------------------------------------------**/
 @import "_components/card";
+@import "_components/search";
 
 /**------------------------------------------------------------------------
  *                           shortcodes

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -31,9 +31,9 @@
   {{ partial "photoswipe.html" . }}
   {{ end }} */}}
 
-  {{/* {{ if .Site.Params.search.google.enable }}
-  {{ partial "search_google.html" . }}
-  {{ end }} */}}
+  {{ if .Site.Params.search.google.enable }}
+    {{ partial "search_google.html" . }}
+  {{ end }}
 
 
 

diff --git a/layouts/partials/desktop_header.html b/layouts/partials/desktop_header.html
@@ -79,7 +79,7 @@
 
       {{ if .Site.Params.search.google.enable }}
       <li class="menu-item">
-        <a id="openSearch" class="menu-item-link menu-item-search" href="#">
+        <a class="menu-item-link" data-target="search-modal" onclick="toggleModal(event)" href="#">
           {{ partial "icons/icon" (dict
           "path" "icons/header/search.svg"
           "className" "icon--search"

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -243,24 +243,85 @@
 </script>
 {{ end }}
 
-{{/*  {{ if .Site.Params.search.google.enable }}
+{{ if .Site.Params.search.google.enable }}
   <script>
-    $("#openSearch, #openSearchMobile").click(function(){
-      $(".modal-dialog").addClass("visible");
-    });
+  /*
+   * Modal
+   *
+   * Pico.css - https://picocss.com
+   * Copyright 2019-2024 - Licensed under MIT
+   */
 
-    $("#closeSearch").click(function(){
-      $(".modal-dialog").removeClass("visible");
-    });
+  // Config
+  const isOpenClass = "modal-is-open";
+  const openingClass = "modal-is-opening";
+  const closingClass = "modal-is-closing";
+  const scrollbarWidthCssVar = "--pico-scrollbar-width";
+  const animationDuration = 400; // ms
+  let visibleModal = null;
 
-    $(document).click(function(event) {
-    //if you click on anything except the modal itself or the "open modal" link, close the modal
-      if (!$(event.target).closest(".modal-content, #openSearch, #openSearchMobile").length) {
-        $("body").find(".modal-dialog").removeClass("visible");
-      }
-    });
+  // Toggle modal
+  const toggleModal = (event) => {
+    event.preventDefault();
+    const modal = document.getElementById(event.currentTarget.dataset.target);
+    if (!modal) return;
+    modal && (modal.open ? closeModal(modal) : openModal(modal));
+  };
+
+  // Open modal
+  const openModal = (modal) => {
+    const { documentElement: html } = document;
+    const scrollbarWidth = getScrollbarWidth();
+    if (scrollbarWidth) {
+      html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`);
+    }
+    html.classList.add(isOpenClass, openingClass);
+    setTimeout(() => {
+      visibleModal = modal;
+      html.classList.remove(openingClass);
+    }, animationDuration);
+    modal.showModal();
+  };
+
+  // Close modal
+  const closeModal = (modal) => {
+    visibleModal = null;
+    const { documentElement: html } = document;
+    html.classList.add(closingClass);
+    setTimeout(() => {
+      html.classList.remove(closingClass, isOpenClass);
+      html.style.removeProperty(scrollbarWidthCssVar);
+      modal.close();
+    }, animationDuration);
+  };
+
+  // Close with a click outside
+  document.addEventListener("click", (event) => {
+    if (visibleModal === null) return;
+    const modalContent = visibleModal.querySelector("article");
+    const isClickInside = modalContent.contains(event.target);
+    !isClickInside && closeModal(visibleModal);
+  });
+
+  // Close with Esc key
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && visibleModal) {
+      closeModal(visibleModal);
+    }
+  });
+
+  // Get scrollbar width
+  const getScrollbarWidth = () => {
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    return scrollbarWidth;
+  };
+
+  // Is scrollbar visible
+  const isScrollbarVisible = () => {
+    return document.body.scrollHeight > screen.height;
+  };
   </script>
-{{ end }}  */}}
+{{ end }}
 
 <!-- custom js -->
 {{ range .Site.Params.customJS }}

diff --git a/layouts/partials/search_google.html b/layouts/partials/search_google.html
@@ -1,32 +1,35 @@
 <!-- Google Search Modal -->
-<div class="modal-dialog">
+<div class="pico">
+  <dialog class="search-modal" id="search-modal">
     <!-- Modal content-->
-    <div class="modal-content">
-      <div id="closeSearch" title="Close" class="close">X</div>
-      <div class="modal-header">
-        <div class="modal-title">
+    <article>
+      <header>
+        <button aria-label="Close" rel="prev" data-target="search-modal" onclick="toggleModal(event)"></button>
+        <p>
           {{- if $.Site.Params.search.google.title -}}
-            {{ $.Site.Params.search.google.title }}
+          {{ $.Site.Params.search.google.title }}
           {{- else -}}
-            Search
+          Search
           {{- end -}}
-        </div>
-      </div>
+        </p>
+      </header>
+
       <div class="modal-body">
-          <script>
-            (function() {
-              var cx = '{{ .Site.Params.search.google.id }}';
-              var gcse = document.createElement('script');
-              gcse.type = 'text/javascript';
-              gcse.async = true;
-              gcse.src = (document.location.protocol == 'https:' ? 'https:' :
-                  'http:') +
-                '//cse.google.com/cse.js?cx=' + cx;
-              var s = document.getElementsByTagName('script')[0];
-              s.parentNode.insertBefore(gcse, s);
-            })();
-          </script>
-          <gcse:search></gcse:search>
+        <script>
+          (function () {
+            var cx = '{{ .Site.Params.search.google.id }}';
+            var gcse = document.createElement('script');
+            gcse.type = 'text/javascript';
+            gcse.async = true;
+            gcse.src = (document.location.protocol == 'https:' ? 'https:' :
+              'http:') +
+              '//cse.google.com/cse.js?cx=' + cx;
+            var s = document.getElementsByTagName('script')[0];
+            s.parentNode.insertBefore(gcse, s);
+          })();
+        </script>
+        <gcse:search></gcse:search>
       </div>
-    </div>
+    </article>
+  </dialog>
 </div>