on master help sign in
Merge pull request #262 from urbit/chore/search-shortcuts
22526f1Matilde Park
static/scripts.js+13−14
@@ -15,11 +15,13 @@ function initHotKeys() {
15 document.body.classList.remove('has-active-search-window');
15 document.body.classList.remove('has-active-search-window');
16 }
16 }
17
17
18− // / to close toggle window
18+ // / to open toggle window
19 if (key === '/' || key === 'Period' || key === 58) {
19 if (key === '/' || key === 'Period' || key === 58) {
20− event.preventDefault();
21− document.body.classList.toggle('has-active-search-window');
22 if (bodyEl.classList.contains('has-active-search-window')) {
20 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');
23 searchInput.focus();
25 searchInput.focus();
24 }
26 }
25 }
27 }
@@ -30,6 +32,14 @@ function initHotKeys() {
30 searchInput.focus();
32 searchInput.focus();
31 }
33 }
32 }
34 }
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+ }
33 });
43 });
34};
44};
35
45
@@ -242,17 +252,6 @@ function initSearch() {
242 })
252 })
243 }
253 }
244
254
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−
256 searchInput.addEventListener("keyup", debounce(function() {
255 searchInput.addEventListener("keyup", debounce(function() {
257 inputReset.style.display="block";
256 inputReset.style.display="block";
258 glossaryResults.style.display="none";
257 glossaryResults.style.display="none";
templates/partials/search-overlay.html+9−7
@@ -7,15 +7,17 @@
7 <form id="search-form" class="w-100"><input id="search" autocomplete="off" type="search" class="search-bar__input bw0 black" placeholder="Go to..."></form>
7 <form id="search-form" class="w-100"><input id="search" autocomplete="off" type="search" class="search-bar__input bw0 black" placeholder="Go to..."></form>
8 <a id="search-reset" class="f6 pr3 gray3 no-underline pointer:hover">&#57503;</a>
8 <a id="search-reset" class="f6 pr3 gray3 no-underline pointer:hover">&#57503;</a>
9 </div>
9 </div>
10+ <div id="full-results">
10− <div id="glossary-results" class="glossary-results bt b--gray3 w-100">
11+ <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__header mv1 gray3 f6">
12− <div class="glossary-results__item">
13+ <div class="glossary-results__item">
14+ </div>
13 </div>
15 </div>
14 </div>
16 </div>
15− </div>
16− <div id="search-results" class="search-results bt b--gray3 w-100">
17+ <div id="search-results" class="search-results bt b--gray3 w-100">
17− <div class="search-results__header ml3 mv2 gray3 f6"></div>
18+ <div class="search-results__header ml3 mv2 gray3 f6"></div>
18− <ul class="list search-results__items"></ul>
19+ <ul class="list search-results__items"></ul>
20+ </div>
19 </div>
21 </div>
20 </div>
22 </div>
21 </div>
23 </div>