fix: search on mobile and make url relative (#172)

Fixes #171

* fix: search on mobile and make url relative

* fix: add checkInput() function for `scroll` listener too

Sometimes there are some unknown `scroll` events on mobile...

* Use contains()

* chore: relative-url.html doesn't expect file names starting with a slash

* fix: Only react to window resizes if nav toggle is no longer visible

* chore: Remove console.log() call

* refactor: replace resize listener with media query

* chore: update resources folder

Co-authored-by: Wladimir Palant <fqcgithub@palant.de>

assets/js/lunr-search.js

@@ -59,13 +59,21 @@
 
     function searchDone() {
         form.removeAttribute("data-running");
+
+        // A magic trick to make search field loses focus on mobile,
+        // which prevents the virtual keyboard from popping up.
+        const header = document.querySelector('.header');
+        if (header && header.classList.contains('fade')) {
+            input.blur();
+        }
+
         queuedTerm = null;
         queuedDoNotAddState = false;
     }
 
     function initIndex() {
         let request = new XMLHttpRequest();
-        request.open("GET", "{{ ((.Site.GetPage "").OutputFormats.Get "SearchIndex").RelPermalink }}");
+        request.open("GET", "{{ partial "utils/relative-url.html" (dict "Deliver" . "filename" (((.Site.GetPage "").OutputFormats.Get "SearchIndex").RelPermalink | strings.TrimPrefix "/")) }}");
         request.responseType = "json";
         request.addEventListener("load", function(event) {
             let documents = request.response;

assets/js/nav-toggle.js

@@ -50,29 +50,48 @@ navCurtain.addEventListener('animationend', (e) => {
 });
 
 
-// Close nav when window is scrolled or resized by user
-
 window.addEventListener(
     'scroll',
     throttle(function() {
-        closeNav();
+        // Close nav when window is scrolled by user
+        checkInput();
     }, delayTime)
 );
 
-window.addEventListener(
-    'resize',
-    throttle(function() {
-        closeNav();
-    }, delayTime)
-);
 
-function closeNav() {
+const maxWidth = window.getComputedStyle(document.documentElement, null).getPropertyValue('--max-width');
+let mediaQuery = window.matchMedia(`(max-width: ${maxWidth})`);
+
+mediaQuery.addEventListener('change', e => {
+    if (!e.matches) {
+        // We are no longer in responsive mode, close nav
+        closeNav(true);
+    }
+})
+
+
+function checkInput() {
+    // https://github.com/reuixiy/hugo-theme-meme/issues/171
+    const input = document.getElementById('search-input');
+    if (input && input === document.activeElement) {
+        return;
+    }
+
+    closeNav();
+}
+
+function closeNav(noFade) {
     if (navToggle.checked) {
         navToggle.checked = false;
 
         header.classList.remove('open');
         navToggleLabel.classList.remove('open');
 
-        header.classList.add('fade');
+        if (noFade) {
+            navCurtain.removeAttribute("style");
+        }
+        else {
+            header.classList.add('fade');
+        }
     }
 }

assets/scss/main.scss

@@ -441,6 +441,7 @@ $fofPoster: url({{ $fofPoster }});
     $enableLunrSearch: false;
 {{ end }}
 
+
 // Responsive
 
 @if ($postWidth > $listWidth) {
@@ -450,6 +451,9 @@ $fofPoster: url({{ $fofPoster }});
 }
 
 @import "base/max-width";
+:root {
+    --max-width: #{$maxWidth};
+}
 @import "base/responsive";