on master help sign in
Merge pull request #262 from urbit/chore/search-shortcuts

search: revise keyboard shortcuts

commit22526f1c938cba3075acb72e2b033e55bcca5016 authorMatilde Park <matilde@tlon.io> dateWed 30 Oct 2019, 15:56 (7 years ago) parent8f3f3c0d27b7f9
2 files changed+22−21
static/scripts.js+13−14 templates/partials/search-overlay.html+9−7
static/scripts.js+13−14
@@ -15,11 +15,13 @@ function initHotKeys() {
1515 document.body.classList.remove('has-active-search-window');
1616 }
1717
18− // / to close toggle window
18+ // / to open toggle window
1919 if (key === '/' || key === 'Period' || key === 58) {
20− event.preventDefault();
21− document.body.classList.toggle('has-active-search-window');
2220 if (bodyEl.classList.contains('has-active-search-window')) {
21+ // if it's already open don't do anything!
22+ } else {
23+ event.preventDefault();
24+ document.body.classList.add('has-active-search-window');
2325 searchInput.focus();
2426 }
2527 }
@@ -30,6 +32,14 @@ function initHotKeys() {
3032 searchInput.focus();
3133 }
3234 }
35+
36+ if (bodyEl.classList.contains('has-active-search-window')) {
37+ if (key === 'Enter' || key === 'Return' || key === 13) {
38+ event.preventDefault();
39+ let firstresult = document.querySelectorAll("div#full-results a")[0];
40+ firstresult.click();
41+ }
42+ }
3343 });
3444};
3545
@@ -242,17 +252,6 @@ function initSearch() {
242252 })
243253 }
244254
245− // Don't refresh the page on enter
246− searchInput.addEventListener('keydown', function(event){
247− var key = event.key || event.keyCode;
248−
249− if (key === 13 || key === "Enter") {
250− event.preventDefault();
251− return false;
252− }
253− })
254−
255−
256255 searchInput.addEventListener("keyup", debounce(function() {
257256 inputReset.style.display="block";
258257 glossaryResults.style.display="none";
templates/partials/search-overlay.html+9−7
@@ -7,15 +7,17 @@
77 <form id="search-form" class="w-100"><input id="search" autocomplete="off" type="search" class="search-bar__input bw0 black" placeholder="Go to..."></form>
88 <a id="search-reset" class="f6 pr3 gray3 no-underline pointer:hover">&#57503;</a>
99 </div>
10− <div id="glossary-results" class="glossary-results bt b--gray3 w-100">
11− <div class="glossary-results__header mv1 gray3 f6">
12− <div class="glossary-results__item">
10+ <div id="full-results">
11+ <div id="glossary-results" class="glossary-results bt b--gray3 w-100">
12+ <div class="glossary-results__header mv1 gray3 f6">
13+ <div class="glossary-results__item">
14+ </div>
1315 </div>
1416 </div>
15− </div>
16− <div id="search-results" class="search-results bt b--gray3 w-100">
17− <div class="search-results__header ml3 mv2 gray3 f6"></div>
18− <ul class="list search-results__items"></ul>
17+ <div id="search-results" class="search-results bt b--gray3 w-100">
18+ <div class="search-results__header ml3 mv2 gray3 f6"></div>
19+ <ul class="list search-results__items"></ul>
20+ </div>
1921 </div>
2022 </div>
2123 </div>