Merge pull request #36 from noriyotcp/set-focus-on-search-input

Set focus on search input by hotkey

_includes/hotkeys_popover.html

@@ -1,4 +1,3 @@
-
 <div id="hotkeys-popover" popover>
  <div class="popover-content">
  <span id="hotkeys-popover-close-icon" class="close-icon">&times;</span>
@@ -12,11 +11,16 @@ <h4 class="nav__title"><i class="fa-solid fa-sitemap"></i> Side-wide</h4>
  </header>
  <ul class="toc__menu">
  <li>
- <pre class="unset">Open search form - <code class="language-plaintext highlighter-rouge">cmd/ctrl k</code></pre>
+ <pre
+ class="unset">Open search form - <code class="language-plaintext highlighter-rouge">cmd/ctrl k</code></pre>
  </li>
  <li>
  <pre class="unset">Open this popover - <code class="language-plaintext highlighter-rouge">?</code></pre>
  </li>
+ <li>
+ <pre
+ class="unset">Close this popover - <code class="language-plaintext highlighter-rouge">esc</code></pre>
+ </li>
  </ul>
  <header>
  <h4 class="nav__title"><i class="fas fa-file-alt"></i> Posts page</h4>
@@ -30,22 +34,15 @@ <h4 class="nav__title"><i class="fas fa-file-alt"></i> Posts page</h4>
  </li>
  </ul>
  <header>
- <h4 class="nav__title"><i class="fa-solid fa-rectangle-xmark"></i> This popover</h4>
+ <h4 class="nav__title"><i class="fa-brands fa-searchengin"></i> On Search</h4>
  </header>
  <ul class="toc__menu">
  <li>
- <pre class="unset">Close - <code class="language-plaintext highlighter-rouge">esc</code></pre>
- </li>
- </ul>
- <header>
- <h4 class="nav__title"><i class="fa-solid fa-arrow-up"></i> Back To...</h4>
- </header>
- <ul class="toc__menu">
- <li>
- <pre class="unset">Back Top - <code class="language-plaintext highlighter-rouge">b t</code></pre>
+ <pre
+ class="unset">Focus search input - <code class="language-plaintext highlighter-rouge">cmd/ctrl k</code></pre>
  </li>
  <li>
- <pre class="unset">Back to YYYY-mm - <code class="language-plaintext highlighter-rouge">b YYYYmm</code></pre>
+ <pre class="unset">Close search form - <code class="language-plaintext highlighter-rouge">esc</code></pre>
  </li>
  </ul>
  </nav>
@@ -65,13 +62,16 @@ <h4 class="nav__title"><i class="fa-solid fa-arrow-right"></i> Go to Posts</h4>
  <pre class="unset">Go Home - <code class="language-plaintext highlighter-rouge">g h</code></pre>
  </li>
  <li>
- <pre class="unset">Go to Posts by Year - <code class="language-plaintext highlighter-rouge">g y</code></pre>
+ <pre
+ class="unset">Go to Posts by Year - <code class="language-plaintext highlighter-rouge">g y</code></pre>
  </li>
  <li>
- <pre class="unset">Go to Posts by Tag - <code class="language-plaintext highlighter-rouge">g t</code></pre>
+ <pre
+ class="unset">Go to Posts by Tag - <code class="language-plaintext highlighter-rouge">g t</code></pre>
  </li>
  <li>
- <pre class="unset">Go to Posts by Category - <code class="language-plaintext highlighter-rouge">g c</code></pre>
+ <pre
+ class="unset">Go to Posts by Category - <code class="language-plaintext highlighter-rouge">g c</code></pre>
  </li>
  </ul>
  <header>
@@ -94,6 +94,18 @@ <h4 class="nav__title"><i class="fa-solid fa-arrows-left-right"></i> Pagination<
  <pre class="unset">Go to Next - <code class="language-plaintext highlighter-rouge">g n</code></pre>
  </li>
  </ul>
+ <header>
+ <h4 class="nav__title"><i class="fa-solid fa-arrow-up"></i> Back To...</h4>
+ </header>
+ <ul class="toc__menu">
+ <li>
+ <pre class="unset">Back Top - <code class="language-plaintext highlighter-rouge">b t</code></pre>
+ </li>
+ <li>
+ <pre
+ class="unset">Back to YYYY-mm - <code class="language-plaintext highlighter-rouge">b YYYYmm</code></pre>
+ </li>
+ </ul>
  </nav>
  </div>
  </div>

assets/js/setupSearchHotkeys.js

@@ -4,6 +4,7 @@ const openSearchForm = (searchIcon) => {
  ?.classList.contains("is--visible");
 
  if (isSearchOpen) {
+ document.getElementById("search").focus();
  return false;
  }