Add a keyboard shortcut to focus the global search bar (CMD + K/CTRL + K) (#6893)

Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com>
Co-authored-by: Tim Jacomb <timjacomb1+github@gmail.com>
This commit is contained in:
Jan Faracik 2022-07-24 15:54:41 +01:00 committed by GitHub
parent 15ab27ce4d
commit b670529063
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 2 deletions

View File

@ -100,8 +100,8 @@ THE SOFTWARE.
<x:doctype name="html" />
<html>
<head data-rooturl="${rootURL}" data-resurl="${resURL}" data-imagesurl="${imagesURL}" resURL="${resURL}"
data-extensions-available="${extensionsAvailable}"
data-crumb-header="${h.getCrumbRequestField()}" data-crumb-value="${h.getCrumb(request)}"
data-extensions-available="${extensionsAvailable}"
data-crumb-header="${h.getCrumbRequestField()}" data-crumb-value="${h.getCrumb(request)}"
data-unit-test="${h.isUnitTest}">
${h.checkPermission(it,permission)}
${h.checkAnyPermission(it, permissions)}
@ -236,6 +236,8 @@ THE SOFTWARE.
</div>
</footer>
</j:if>
<script src="${resURL}/jsbundles/keyboard-shortcuts.js" type="text/javascript"/>
</body>
</html>
</l:view>

View File

@ -49,6 +49,7 @@
"@babel/preset-env": "7.18.9",
"babel-loader": "8.2.5",
"bootstrap": "3.4.1",
"hotkeys-js": "^3.9.4",
"jenkins-js-modules": "1.5.4",
"jquery": "3.6.0",
"lodash": "4.17.21",

View File

@ -0,0 +1,26 @@
import hotkeys from "hotkeys-js"
window.addEventListener("load", () => {
const searchBar = document.querySelector("#search-box")
searchBar.placeholder = searchBar.placeholder + ` (${translateModifierKeysForUsersPlatform("CMD+K")
.replace("CMD", "⌘")})`
hotkeys(translateModifierKeysForUsersPlatform("CMD+K"), () => {
searchBar.focus()
// Returning false stops the event and prevents default browser events
return false
})
})
/**
* Given a keyboard shortcut, e.g. CMD+K, replace any included modifier keys for the user's
* platform e.g. output will be CMD+K for macOS/iOS, CTRL+K for Windows/Linux
* @param {string} keyboardShortcut The shortcut to translate
*/
function translateModifierKeysForUsersPlatform(keyboardShortcut) {
const useCmdKey = navigator.platform.toUpperCase().indexOf("MAC") >= 0 ||
navigator.platform.toUpperCase() === "IPHONE" ||
navigator.platform.toUpperCase() === "IPAD"
return keyboardShortcut.replace(/CMD|CTRL/ig, useCmdKey ? "CMD" : "CTRL")
}

View File

@ -30,6 +30,7 @@ module.exports = (env, argv) => ({
path.join(__dirname, "src/main/js/config-tabbar.js"),
path.join(__dirname, "src/main/js/config-tabbar.less"),
],
"keyboard-shortcuts": [path.join(__dirname, "src/main/js/keyboard-shortcuts.js")],
"sortable-drag-drop": [path.join(__dirname, "src/main/js/sortable-drag-drop.js")],
"section-to-sidebar-items": [path.join(__dirname, "src/main/js/section-to-sidebar-items.js")],
"section-to-tabs": [path.join(__dirname, "src/main/js/section-to-tabs.js")],

View File

@ -3628,6 +3628,13 @@ __metadata:
languageName: node
linkType: hard
"hotkeys-js@npm:^3.9.4":
version: 3.9.4
resolution: "hotkeys-js@npm:3.9.4"
checksum: 98c3121d458f960c8804f5d8d6be02c4187aaeee5a0b7df28c8d99705e5f65f67b1140658d8128401892bb07b19d18c5e9ea9e84fe170fb06206b639ad53438b
languageName: node
linkType: hard
"html-tags@npm:^3.2.0":
version: 3.2.0
resolution: "html-tags@npm:3.2.0"
@ -3965,6 +3972,7 @@ __metadata:
eslint: 8.20.0
handlebars: ^3.0.8
handlebars-loader: 1.7.2
hotkeys-js: ^3.9.4
jenkins-js-modules: 1.5.4
jquery: 3.6.0
less: 4.1.3