on master help sign in
TAB hotkey added to put search input in focus when TAB is pressed when search is active
c64690cfriederjanmoerman
static/scripts.js+37−3
@@ -64,9 +64,13 @@ function initToggleSearchWindow() {
64 var searchOverlay = document.getElementById('search-overlay');
64 var searchOverlay = document.getElementById('search-overlay');
65 var searchWindow = document.getElementById('search-window');
65 var searchWindow = document.getElementById('search-window');
66 var searchActive = bodyEl.classList.contains('has-active-search-window');
66 var searchActive = bodyEl.classList.contains('has-active-search-window');
67+ var searchInput = document.getElementById('search');
67 if (toggleSearchWindow !== null) {
68 if (toggleSearchWindow !== null) {
68 toggleSearchWindow.onclick = function() {
69 toggleSearchWindow.onclick = function() {
70+ //activate search
69 bodyEl.classList.toggle('has-active-search-window');
71 bodyEl.classList.toggle('has-active-search-window');
72+ //put input in focus when activating search
73+ searchInput.focus();
70 }
74 }
71 searchOverlay.addEventListener('click', function(e){
75 searchOverlay.addEventListener('click', function(e){
72 if (!searchWindow.contains(e.target)){
76 if (!searchWindow.contains(e.target)){
@@ -80,15 +84,45 @@ function initToggleSearchWindow() {
80 // hotkeys
84 // hotkeys
81//
85//
82function initHotKeys() {
86function initHotKeys() {
83− document.onkeydown = function(evt) {
87+ /*document.onkeydown = function(evt) {
84 evt = evt || window.event;
88 evt = evt || window.event;
85− // ESC to close search window
89+ if (evt.keyCode == 27) {
90+ }
91+
92+ //when search is active TAB puts search input into focus
86 if (evt.keyCode == 27) {
93 if (evt.keyCode == 27) {
87 document.body.classList.remove('has-active-search-window');
94 document.body.classList.remove('has-active-search-window');
88 }
95 }
89− };
96+ };*/
97+
98+ var bodyEl = document.body;
99+ var searchInput = document.getElementById('search');
100+
101+ document.addEventListener('keyup', function (event) {
102+ if (event.defaultPrevented) {
103+ return;
104+ }
105+
106+ var key = event.key || event.keyCode;
107+
108+ // ESC to close search window
109+ if (key === 'Escape' || key === 'Esc' || key === 27) {
110+ document.body.classList.remove('has-active-search-window');
111+ }
112+
113+ //when search is active TAB puts search input into focus
114+ if (bodyEl.classList.contains('has-active-search-window')) {
115+ if (key === 'Tab' || key === 'Tab' || key === 9) {
116+ searchInput.focus();
117+ console.log('focus');
118+ }
119+ console.log('got here');
120+ }
121+ });
90};
122};
91
123
124+
125+
92//
126//
93 // search functionality
127 // search functionality
94//
128//