git.iko.soy/urbit.org
on master help sign in
input and search results lil' header now clearing quitting and reinvoking the search window
db880c6friederjanmoerman
static/scripts.js+29−37
compare with master
unifiedsplit
@@ -58,42 +58,11 @@ if (toggleContentNav !== null) {
58 });
58 });
59}*/
59}*/
60
60
61−function initToggleSearchWindow() {
62− var toggleSearchWindow = document.getElementById('js-search-window-toggle');
63− var bodyEl = document.body;
64− var searchOverlay = document.getElementById('search-overlay');
65− var searchWindow = document.getElementById('search-window');
66− var searchActive = bodyEl.classList.contains('has-active-search-window');
67− var searchInput = document.getElementById('search');
68− if (toggleSearchWindow !== null) {
69− toggleSearchWindow.onclick = function() {
70− //activate search
71− bodyEl.classList.toggle('has-active-search-window');
72− //put input in focus when activating search
73− searchInput.focus();
74− }
75− searchOverlay.addEventListener('click', function(e){
76− if (!searchWindow.contains(e.target)){
77− bodyEl.classList.toggle('has-active-search-window');
78− }
79− })
80− }
81−}
82−
83//
61//
84 // hotkeys
62 // hotkeys
85//
63//
86−function initHotKeys() {
87− /*document.onkeydown = function(evt) {
88− evt = evt || window.event;
89− if (evt.keyCode == 27) {
90− }
91
64
92− //when search is active TAB puts search input into focus
65+function initHotKeys() {
93− if (evt.keyCode == 27) {
94− document.body.classList.remove('has-active-search-window');
95− }
96− };*/
97
66
98 var bodyEl = document.body;
67 var bodyEl = document.body;
99 var searchInput = document.getElementById('search');
68 var searchInput = document.getElementById('search');
@@ -114,9 +83,7 @@ function initHotKeys() {
114 if (bodyEl.classList.contains('has-active-search-window')) {
83 if (bodyEl.classList.contains('has-active-search-window')) {
115 if (key === 'Tab' || key === 'Tab' || key === 9) {
84 if (key === 'Tab' || key === 'Tab' || key === 9) {
116 searchInput.focus();
85 searchInput.focus();
117− console.log('focus');
118 }
86 }
119− console.log('got here');
120 }
87 }
121 });
88 });
122};
89};
@@ -288,6 +255,7 @@ function formatSearchResultItem(item, terms) {
288
255
289function initSearch() {
256function initSearch() {
290 var searchInput = document.getElementById("search");
257 var searchInput = document.getElementById("search");
258+
291 if (!searchInput) {
259 if (!searchInput) {
292 return;
260 return;
293 }
261 }
@@ -297,8 +265,6 @@ function initSearch() {
297 var searchResultsItems = document.querySelector(".search-results__items");
265 var searchResultsItems = document.querySelector(".search-results__items");
298 var MAX_ITEMS = 200;
266 var MAX_ITEMS = 200;
299
267
300− searchResultsHeader.value='';
301−
302 var options = {
268 var options = {
303 bool: "AND",
269 bool: "AND",
304 fields: {
270 fields: {
@@ -309,7 +275,34 @@ function initSearch() {
309 var currentTerm = "";
275 var currentTerm = "";
310 var index = elasticlunr.Index.load(window.searchIndex);
276 var index = elasticlunr.Index.load(window.searchIndex);
311
277
278+ // toggle search window
279+ var toggleSearchWindow = document.getElementById('js-search-window-toggle');
280+ var bodyEl = document.body;
281+ var searchOverlay = document.getElementById('search-overlay');
282+ var searchWindow = document.getElementById('search-window');
283+ var searchActive = bodyEl.classList.contains('has-active-search-window');
284+ if (toggleSearchWindow !== null) {
285+ toggleSearchWindow.onclick = function() {
286+ //activate search
287+ bodyEl.classList.toggle('has-active-search-window');
288+ //put input in focus when activating search
289+ searchInput.focus();
290+ searchInput.value = "";
291+ searchResultsHeader.value = "";
292+ searchResults.style.display = searchInput.value.trim() === "" ? "none" : "block";
293+ }
294+ searchOverlay.addEventListener('click', function(e){
295+ if (!searchWindow.contains(e.target)){
296+ bodyEl.classList.toggle('has-active-search-window');
297+ }
298+ })
299+ }
300+
301+ // when typing
312 searchInput.addEventListener("keyup", debounce(function() {
302 searchInput.addEventListener("keyup", debounce(function() {
303+
304+ searchResultsHeader.value = "";
305+
313 var term = searchInput.value.trim();
306 var term = searchInput.value.trim();
314
307
315 if (term === currentTerm || !index) {
308 if (term === currentTerm || !index) {
@@ -347,7 +340,6 @@ if (document.readyState === "complete" ||
347 initToggleSearchWindow();
340 initToggleSearchWindow();
348} else {
341} else {
349 document.addEventListener("DOMContentLoaded", function () {
342 document.addEventListener("DOMContentLoaded", function () {
350− initToggleSearchWindow();
351 initSearch();
343 initSearch();
352 initHotKeys();
344 initHotKeys();
353 });
345 });