vim_hotkeys.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. $(document).ready(function() {
  2. highlightResult('top')();
  3. $('.result').on('click', function() {
  4. highlightResult($(this))();
  5. });
  6. var vimKeys = {
  7. 27: {
  8. key: 'Escape',
  9. fun: removeFocus,
  10. des: 'remove focus from the focused input',
  11. cat: 'Control'
  12. },
  13. 73: {
  14. key: 'i',
  15. fun: searchInputFocus,
  16. des: 'focus on the search input',
  17. cat: 'Control'
  18. },
  19. 66: {
  20. key: 'b',
  21. fun: scrollPage(-window.innerHeight),
  22. des: 'scroll one page up',
  23. cat: 'Navigation'
  24. },
  25. 70: {
  26. key: 'f',
  27. fun: scrollPage(window.innerHeight),
  28. des: 'scroll one page down',
  29. cat: 'Navigation'
  30. },
  31. 85: {
  32. key: 'u',
  33. fun: scrollPage(-window.innerHeight / 2),
  34. des: 'scroll half a page up',
  35. cat: 'Navigation'
  36. },
  37. 68: {
  38. key: 'd',
  39. fun: scrollPage(window.innerHeight / 2),
  40. des: 'scroll half a page down',
  41. cat: 'Navigation'
  42. },
  43. 71: {
  44. key: 'g',
  45. fun: scrollPageTo(-document.body.scrollHeight, 'top'),
  46. des: 'scroll to the top of the page',
  47. cat: 'Navigation'
  48. },
  49. 86: {
  50. key: 'v',
  51. fun: scrollPageTo(document.body.scrollHeight, 'bottom'),
  52. des: 'scroll to the bottom of the page',
  53. cat: 'Navigation'
  54. },
  55. 75: {
  56. key: 'k',
  57. fun: highlightResult('up'),
  58. des: 'select previous search result',
  59. cat: 'Results'
  60. },
  61. 74: {
  62. key: 'j',
  63. fun: highlightResult('down'),
  64. des: 'select next search result',
  65. cat: 'Results'
  66. },
  67. 80: {
  68. key: 'p',
  69. fun: pageButtonClick(0),
  70. des: 'go to previous page',
  71. cat: 'Results'
  72. },
  73. 78: {
  74. key: 'n',
  75. fun: pageButtonClick(1),
  76. des: 'go to next page',
  77. cat: 'Results'
  78. },
  79. 79: {
  80. key: 'o',
  81. fun: openResult(false),
  82. des: 'open search result',
  83. cat: 'Results'
  84. },
  85. 84: {
  86. key: 't',
  87. fun: openResult(true),
  88. des: 'open the result in a new tab',
  89. cat: 'Results'
  90. },
  91. 82: {
  92. key: 'r',
  93. fun: reloadPage,
  94. des: 'reload page from the server',
  95. cat: 'Control'
  96. },
  97. 72: {
  98. key: 'h',
  99. fun: toggleHelp,
  100. des: 'toggle help window',
  101. cat: 'Other'
  102. }
  103. };
  104. $(document).keyup(function(e) {
  105. // check for modifiers so we don't break browser's hotkeys
  106. if (vimKeys.hasOwnProperty(e.keyCode)
  107. && !e.ctrlKey
  108. && !e.altKey
  109. && !e.shiftKey
  110. && !e.metaKey)
  111. {
  112. if (e.keyCode === 27) {
  113. if (e.target.tagName.toLowerCase() === 'input') {
  114. vimKeys[e.keyCode].fun();
  115. }
  116. } else {
  117. if (e.target === document.body) {
  118. vimKeys[e.keyCode].fun();
  119. }
  120. }
  121. }
  122. });
  123. function highlightResult(which) {
  124. return function() {
  125. var current = $('.result[data-vim-selected]');
  126. if (current.length === 0) {
  127. current = $('.result:first');
  128. if (current.length === 0) {
  129. return;
  130. }
  131. }
  132. var next;
  133. if (typeof which !== 'string') {
  134. next = which;
  135. } else {
  136. switch (which) {
  137. case 'visible':
  138. var top = $(window).scrollTop();
  139. var bot = top + $(window).height();
  140. var results = $('.result');
  141. for (var i = 0; i < results.length; i++) {
  142. next = $(results[i]);
  143. var etop = next.offset().top;
  144. var ebot = etop + next.height();
  145. if ((ebot <= bot) && (etop > top)) {
  146. break;
  147. }
  148. }
  149. break;
  150. case 'down':
  151. next = current.next('.result');
  152. if (next.length === 0) {
  153. next = $('.result:first');
  154. }
  155. break;
  156. case 'up':
  157. next = current.prev('.result');
  158. if (next.length === 0) {
  159. next = $('.result:last');
  160. }
  161. break;
  162. case 'bottom':
  163. next = $('.result:last');
  164. break;
  165. case 'top':
  166. default:
  167. next = $('.result:first');
  168. }
  169. }
  170. if (next) {
  171. current.removeAttr('data-vim-selected').removeClass('well well-sm');
  172. next.attr('data-vim-selected', 'true').addClass('well well-sm');
  173. scrollPageToSelected();
  174. }
  175. }
  176. }
  177. function reloadPage() {
  178. document.location.reload(false);
  179. }
  180. function removeFocus() {
  181. if (document.activeElement) {
  182. document.activeElement.blur();
  183. }
  184. }
  185. function pageButtonClick(num) {
  186. return function() {
  187. var buttons = $('div#pagination button[type="submit"]');
  188. if (buttons.length !== 2) {
  189. console.log('page navigation with this theme is not supported');
  190. return;
  191. }
  192. if (num >= 0 && num < buttons.length) {
  193. buttons[num].click();
  194. } else {
  195. console.log('pageButtonClick(): invalid argument');
  196. }
  197. }
  198. }
  199. function scrollPageToSelected() {
  200. var sel = $('.result[data-vim-selected]');
  201. if (sel.length !== 1) {
  202. return;
  203. }
  204. var wnd = $(window);
  205. var wtop = wnd.scrollTop();
  206. var etop = sel.offset().top;
  207. var offset = 30;
  208. if (wtop > etop) {
  209. wnd.scrollTop(etop - offset);
  210. } else {
  211. var ebot = etop + sel.height();
  212. var wbot = wtop + wnd.height();
  213. if (wbot < ebot) {
  214. wnd.scrollTop(ebot - wnd.height() + offset);
  215. }
  216. }
  217. }
  218. function scrollPage(amount) {
  219. return function() {
  220. window.scrollBy(0, amount);
  221. highlightResult('visible')();
  222. }
  223. }
  224. function scrollPageTo(position, nav) {
  225. return function() {
  226. window.scrollTo(0, position);
  227. highlightResult(nav)();
  228. }
  229. }
  230. function searchInputFocus() {
  231. $('input#q').focus();
  232. }
  233. function openResult(newTab) {
  234. return function() {
  235. var link = $('.result[data-vim-selected] .result_header a');
  236. if (link.length) {
  237. var url = link.attr('href');
  238. if (newTab) {
  239. window.open(url);
  240. } else {
  241. window.location.href = url;
  242. }
  243. }
  244. };
  245. }
  246. function toggleHelp() {
  247. var helpPanel = $('#vim-hotkeys-help');
  248. if (helpPanel.length) {
  249. helpPanel.toggleClass('hidden');
  250. return;
  251. }
  252. var categories = {};
  253. for (var k in vimKeys) {
  254. var key = vimKeys[k];
  255. categories[key.cat] = categories[key.cat] || [];
  256. categories[key.cat].push(key);
  257. }
  258. var sorted = Object.keys(categories).sort(function(a, b) {
  259. return categories[b].length - categories[a].length;
  260. });
  261. if (sorted.length === 0) {
  262. return;
  263. }
  264. var html = '<div id="vim-hotkeys-help" class="well vim-hotkeys-help">';
  265. html += '<div class="container-fluid">';
  266. html += '<div class="row">';
  267. html += '<div class="col-sm-12">';
  268. html += '<h3>How to navigate searx with Vim-like hotkeys</h3>';
  269. html += '</div>'; // col-sm-12
  270. html += '</div>'; // row
  271. for (var i = 0; i < sorted.length; i++) {
  272. var cat = categories[sorted[i]];
  273. var lastCategory = i === (sorted.length - 1);
  274. var first = i % 2 === 0;
  275. if (first) {
  276. html += '<div class="row dflex">';
  277. }
  278. html += '<div class="col-sm-' + (first && lastCategory ? 12 : 6) + ' dflex">';
  279. html += '<div class="panel panel-default iflex">';
  280. html += '<div class="panel-heading">' + cat[0].cat + '</div>';
  281. html += '<div class="panel-body">';
  282. html += '<ul class="list-unstyled">';
  283. for (var cj in cat) {
  284. html += '<li><kbd>' + cat[cj].key + '</kbd> ' + cat[cj].des + '</li>';
  285. }
  286. html += '</ul>';
  287. html += '</div>'; // panel-body
  288. html += '</div>'; // panel
  289. html += '</div>'; // col-sm-*
  290. if (!first || lastCategory) {
  291. html += '</div>'; // row
  292. }
  293. }
  294. html += '</div>'; // container-fluid
  295. html += '</div>'; // vim-hotkeys-help
  296. $('body').append(html);
  297. }
  298. });