From 63174792c2200f2600c6c1f12fbe7558aae82198 Mon Sep 17 00:00:00 2001
From: Guillaume Gomez <guillaume1.gomez@gmail.com>
Date: Mon, 29 Jul 2024 16:44:12 +0200
Subject: [PATCH] Add possibility to focus on search input using keyboard
---
util/gh-pages/index.html | 2 +-
util/gh-pages/script.js | 26 ++++++++++++++++++++++++++
2 files changed, 27 insertions(+), 1 deletion(-)
diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html
index 0c0f28e4fbd3..7f271ac83859 100644
--- a/util/gh-pages/index.html
+++ b/util/gh-pages/index.html
@@ -541,7 +541,7 @@ <h1>Clippy Lints</h1>
<div class="col-12 col-md-5 search-control">
<div class="input-group">
<label class="input-group-addon" id="filter-label" for="search-input">Filter:</label>
- <input type="text" class="form-control filter-input" placeholder="Keywords or search string" id="search-input"
+ <input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input"
ng-model="search" ng-blur="updatePath()" ng-keyup="$event.keyCode == 13 && updatePath()"
ng-model-options="{debounce: 50}" />
<span class="input-group-btn">
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js
index 661f80a6d346..ba13cc40cb1d 100644
--- a/util/gh-pages/script.js
+++ b/util/gh-pages/script.js
@@ -579,6 +579,32 @@ function setTheme(theme, store) {
}
}
+function handleShortcut(ev) {
+ if (ev.ctrlKey || ev.altKey || ev.metaKey) {
+ return;
+ }
+
+ if (document.activeElement.tagName === "INPUT") {
+ if (ev.key === "Escape") {
+ document.activeElement.blur();
+ }
+ } else {
+ switch (ev.key) {
+ case "s":
+ case "S":
+ case "/":
+ ev.preventDefault(); // To prevent the key to be put into the input.
+ document.getElementById("search-input").focus();
+ break;
+ default:
+ break;
+ }
+ }
+}
+
+document.addEventListener("keypress", handleShortcut);
+document.addEventListener("keydown", handleShortcut);
+
// loading the theme after the initial load
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
const theme = localStorage.getItem('clippy-lint-list-theme');