content/static: add keyboard shortcut '/' to focus search box
This change allows a user to press the '/' key to focus the search
box, but only in the documentation view.
Fixes golang/go#36805
Change-Id: I59af717438729e4411c5bc06fd614940475b3796
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/240297
Reviewed-by: Andrew Bonventre <andybons@golang.org>
diff --git a/content/static/html/helpers/_search_bar.tmpl b/content/static/html/helpers/_search_bar.tmpl
index 1b1b130..dd7a6cc 100644
--- a/content/static/html/helpers/_search_bar.tmpl
+++ b/content/static/html/helpers/_search_bar.tmpl
@@ -8,7 +8,7 @@
<div class="SearchForm-container{{if (.Experiments.IsActive "autocomplete")}} Experiment-autoComplete{{end}}">
<form class="SearchForm" action="/search" role="search" id="AutoComplete-parent" aria-owns="AutoComplete-list">
<div class="SearchForm-firstRow">
- <input class="SearchForm-input"
+ <input class="SearchForm-input js-autoComplete"
id="AutoComplete"
role="textbox"
aria-controls="AutoComplete-list"
@@ -37,7 +37,7 @@
<div class="Header-searchForm-container{{if (.Experiments.IsActive "autocomplete")}} Experiment-autoComplete{{end}}">
<form class="Header-searchForm" action="/search" role="search" id="AutoComplete-parent" aria-owns="AutoComplete-list">
<div class="SearchForm-firstRow">
- <input class="Header-searchFormInput"
+ <input class="Header-searchFormInput js-autoComplete"
id="AutoComplete"
role="textbox"
aria-controls="AutoComplete-list"
diff --git a/content/static/html/pages/pkg_doc.tmpl b/content/static/html/pages/pkg_doc.tmpl
index 81aa73a..ace5e3b 100644
--- a/content/static/html/pages/pkg_doc.tmpl
+++ b/content/static/html/pages/pkg_doc.tmpl
@@ -33,6 +33,7 @@
<table>
<tbody>
<tr><td class="ShortcutsDialog-key"><b>?</b></td><td> : This menu</td></tr>
+ <tr><td class="ShortcutsDialog-key"><b>/</b></td><td> : Search site</td></tr>
<tr><td class="ShortcutsDialog-key"><b>f</b> or <b>F</b></td><td> : Jump to identifier</td></tr>
</tbody>
</table>
diff --git a/content/static/js/jump.js b/content/static/js/jump.js
index d53e03e..bf094ac 100644
--- a/content/static/js/jump.js
+++ b/content/static/js/jump.js
@@ -26,6 +26,7 @@
const jumpBody = jumpDialog.querySelector('.JumpDialog-body');
const jumpList = jumpDialog.querySelector('.JumpDialog-list');
const jumpFilter = jumpDialog.querySelector('.JumpDialog-input');
+const searchInput = document.querySelector('.js-autoComplete');
if (!jumpDialog.showModal) {
dialogPolyfill.registerDialog(jumpDialog);
@@ -249,16 +250,25 @@
}
// Keyboard shortcuts:
+// - Pressing '/' focuses the search box
// - Pressing 'f' or 'F' opens the jump-to-identifier dialog.
// - Pressing '?' opens up the shortcut dialog.
// Ignore a keypress if a dialog is already open, or if it is pressed on a
// component that wants to consume it.
document.addEventListener('keypress', function (e) {
- if (jumpDialog.open || shortcutsDialog.open) return;
+ if (jumpDialog.open || shortcutsDialog.open) {
+ return;
+ }
const t = e.target.tagName;
- if (t == 'INPUT' || t == 'SELECT' || t == 'TEXTAREA') return;
- if (e.target.contentEditable && e.target.contentEditable == 'true') return;
- if (e.metaKey || e.ctrlKey) return;
+ if (t == 'INPUT' || t == 'SELECT' || t == 'TEXTAREA') {
+ return;
+ }
+ if (e.target.contentEditable && e.target.contentEditable == 'true') {
+ return;
+ }
+ if (e.metaKey || e.ctrlKey) {
+ return;
+ }
const ch = String.fromCharCode(e.which);
switch (ch) {
case 'f':
@@ -271,5 +281,9 @@
case '?':
shortcutsDialog.showModal();
break;
+ case '/':
+ e.preventDefault();
+ searchInput.focus();
+ break;
}
});
diff --git a/content/static/js/jump.min.js b/content/static/js/jump.min.js
index 1bb9f90..962d942 100644
--- a/content/static/js/jump.min.js
+++ b/content/static/js/jump.min.js
@@ -25,7 +25,7 @@
(this.zIndexHigh_-this.zIndexLow_)/2-1)return!1;1===this.pendingDialogStack.unshift(a)&&this.blockDocument();this.updateStacking();return!0};f.DialogManager.prototype.removeDialog=function(a){a=this.pendingDialogStack.indexOf(a);-1!==a&&(this.pendingDialogStack.splice(a,1),0===this.pendingDialogStack.length&&this.unblockDocument(),this.updateStacking())};f.dm=new f.DialogManager;f.formSubmitter=null;f.useValue=null;if(void 0===window.HTMLDialogElement){var k=document.createElement("form");k.setAttribute("method",
"dialog");if("dialog"!==k.method&&(k=Object.getOwnPropertyDescriptor(HTMLFormElement.prototype,"method"))){var n=k.get;k.get=function(){return d(this)?"dialog":n.call(this)};var p=k.set;k.set=function(a){return"string"===typeof a&&"dialog"===a.toLowerCase()?this.setAttribute("method",a):p.call(this,a)};Object.defineProperty(HTMLFormElement.prototype,"method",k)}document.addEventListener("click",function(a){f.formSubmitter=null;f.useValue=null;if(!a.defaultPrevented){var b=a.target;if(b&&d(b.form)){if(!("submit"===
b.type&&-1<["button","input"].indexOf(b.localName))){if("input"!==b.localName||"image"!==b.type)return;f.useValue=a.offsetX+","+a.offsetY}c(b)&&(f.formSubmitter=b)}}},!1);var q=HTMLFormElement.prototype.submit;HTMLFormElement.prototype.submit=function(){if(!d(this))return q.call(this);var a=c(this);a&&a.close()};document.addEventListener("submit",function(a){if(!a.defaultPrevented){var b=a.target;if(d(b)&&(a.preventDefault(),a=c(b))){var e=f.formSubmitter;e&&e.form===b?a.close(f.useValue||e.value):
-a.close();f.formSubmitter=null}}},!1)}return f});var jumpDialog=document.querySelector(".JumpDialog"),jumpBody=jumpDialog.querySelector(".JumpDialog-body"),jumpList=jumpDialog.querySelector(".JumpDialog-list"),jumpFilter=jumpDialog.querySelector(".JumpDialog-input");jumpDialog.showModal||dialogPolyfill.registerDialog(jumpDialog);var jumpListItems;
+a.close();f.formSubmitter=null}}},!1)}return f});var jumpDialog=document.querySelector(".JumpDialog"),jumpBody=jumpDialog.querySelector(".JumpDialog-body"),jumpList=jumpDialog.querySelector(".JumpDialog-list"),jumpFilter=jumpDialog.querySelector(".JumpDialog-input"),searchInput=document.querySelector(".js-autoComplete");jumpDialog.showModal||dialogPolyfill.registerDialog(jumpDialog);var jumpListItems;
function collectJumpListItems(){for(var b=[],c=document.querySelector(".Documentation"),e=$jscomp.makeIterator(c.querySelectorAll("[data-kind]")),d=e.next();!d.done;d=e.next())b.push(newJumpListItem(d.value));0==b.length&&(b=collectJumpListItemsFallback(c));c=$jscomp.makeIterator(b);for(e=c.next();!e.done;e=c.next())e.value.link.addEventListener("click",function(){jumpDialog.close()});b.sort(function(b,c){return b.lower.localeCompare(c.lower)});return b}
function collectJumpListItemsFallback(b){var c=[],e={};b=$jscomp.makeIterator(b.querySelectorAll("*[id]"));for(var d=b.next();!d.done;d=b.next()){d=d.value;var g=d.getAttribute("id");!e[g]&&/^[^_][^-]*$/.test(g)&&(e[g]=!0,c.push(newJumpListItem(d)))}return c}
function newJumpListItem(b){var c=document.createElement("a"),e=b.getAttribute("id");c.setAttribute("href","#"+e);c.setAttribute("tabindex","-1");var d=b.getAttribute("data-kind");d||(d=guessKind(b));return{link:c,name:e,kind:d,lower:e.toLowerCase()}}
@@ -34,4 +34,4 @@
0;0<jumpList.children.length&&setActiveJumpItem(0)}function setActiveJumpItem(b){var c=jumpList.children;0<=activeJumpItem&&c[activeJumpItem].classList.remove("JumpDialog-active");b>=c.length&&(b=c.length-1);if(0<=b){c[b].classList.add("JumpDialog-active");var e=c[b].offsetTop-c[0].offsetTop;c=e+c[b].clientHeight;e<jumpBody.scrollTop?jumpBody.scrollTop=e:c>jumpBody.scrollTop+jumpBody.clientHeight&&(jumpBody.scrollTop=c-jumpBody.clientHeight)}activeJumpItem=b}
function incActiveJumpItem(b){0>activeJumpItem||(b=activeJumpItem+b,0>b&&(b=0),setActiveJumpItem(b))}jumpFilter.addEventListener("keyup",function(b){jumpFilter.value.toUpperCase()!=lastFilterValue.toUpperCase()&&updateJumpList(jumpFilter.value)});jumpFilter.addEventListener("keydown",function(b){switch(b.which){case 38:incActiveJumpItem(-1);b.preventDefault();break;case 40:incActiveJumpItem(1);b.preventDefault();break;case 13:0<=activeJumpItem&&jumpList.children[activeJumpItem].click()}});
var shortcutsDialog=document.querySelector(".ShortcutsDialog");shortcutsDialog.showModal||dialogPolyfill.registerDialog(shortcutsDialog);
-document.addEventListener("keypress",function(b){if(!jumpDialog.open&&!shortcutsDialog.open){var c=b.target.tagName;if("INPUT"!=c&&"SELECT"!=c&&"TEXTAREA"!=c&&!(b.target.contentEditable&&"true"==b.target.contentEditable||b.metaKey||b.ctrlKey))switch(String.fromCharCode(b.which)){case "f":case "F":b.preventDefault();jumpFilter.value="";jumpDialog.showModal();updateJumpList("");break;case "?":shortcutsDialog.showModal()}}});
+document.addEventListener("keypress",function(b){if(!jumpDialog.open&&!shortcutsDialog.open){var c=b.target.tagName;if("INPUT"!=c&&"SELECT"!=c&&"TEXTAREA"!=c&&!(b.target.contentEditable&&"true"==b.target.contentEditable||b.metaKey||b.ctrlKey))switch(String.fromCharCode(b.which)){case "f":case "F":b.preventDefault();jumpFilter.value="";jumpDialog.showModal();updateJumpList("");break;case "?":shortcutsDialog.showModal();break;case "/":b.preventDefault(),searchInput.focus()}}});
