keyboard.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. import { ReactiveCache } from '/imports/reactiveCache';
  2. // XXX There is no reason to define these shortcuts globally, they should be
  3. // attached to a template (most of them will go in the `board` template).
  4. window.addEventListener('keydown', (e) => {
  5. // Only handle event if coming from body
  6. if (e.target !== document.body) return;
  7. // Only handle event if it's in another language
  8. if (String.fromCharCode(e.which).toLowerCase() === e.key) return;
  9. // Trigger the corresponding action
  10. Mousetrap.handleKey(String.fromCharCode(e.which).toLowerCase(), [], {type: "keypress"});
  11. });
  12. // Overwrite the stopCallback to allow for more keyboard shortcut customizations
  13. Mousetrap.stopCallback = (event, element) => {
  14. // Are shortcuts enabled for the user?
  15. if (ReactiveCache.getCurrentUser() && !ReactiveCache.getCurrentUser().isKeyboardShortcuts())
  16. return true;
  17. // Always handle escape
  18. if (event.keyCode === 27)
  19. return false;
  20. // Make sure there are no selected characters
  21. if (window.getSelection().type === "Range")
  22. return true;
  23. // Decide what the current element is
  24. const currentElement = event.target || document.activeElement;
  25. // If the current element is editable, we don't want to trigger an event
  26. if (currentElement.isContentEditable)
  27. return true;
  28. // Make sure we are not in an input element
  29. if (currentElement instanceof HTMLInputElement || currentElement instanceof HTMLSelectElement || currentElement instanceof HTMLTextAreaElement)
  30. return true;
  31. // We can trigger events!
  32. return false;
  33. }
  34. function getHoveredCardId() {
  35. const card = $('.js-minicard:hover').get(0);
  36. if (!card) return null;
  37. return Blaze.getData(card)._id;
  38. }
  39. function getSelectedCardId() {
  40. return Session.get('currentCard') || Session.get('selectedCard') || getHoveredCardId();
  41. }
  42. Mousetrap.bind('?', () => {
  43. FlowRouter.go('shortcuts');
  44. });
  45. Mousetrap.bind('w', () => {
  46. if (Sidebar.isOpen() && Sidebar.getView() === 'home') {
  47. Sidebar.toggle();
  48. } else {
  49. Sidebar.setView();
  50. }
  51. });
  52. Mousetrap.bind('q', () => {
  53. const currentBoardId = Session.get('currentBoard');
  54. const currentUserId = Meteor.userId();
  55. if (currentBoardId && currentUserId) {
  56. Filter.members.toggle(currentUserId);
  57. }
  58. });
  59. Mousetrap.bind('a', () => {
  60. const currentBoardId = Session.get('currentBoard');
  61. const currentUserId = Meteor.userId();
  62. if (currentBoardId && currentUserId) {
  63. Filter.assignees.toggle(currentUserId);
  64. }
  65. });
  66. Mousetrap.bind('x', () => {
  67. if (Filter.isActive()) {
  68. Filter.reset();
  69. }
  70. });
  71. Mousetrap.bind('f', () => {
  72. if (Sidebar.isOpen() && Sidebar.getView() === 'filter') {
  73. Sidebar.toggle();
  74. } else {
  75. Sidebar.setView('filter');
  76. }
  77. });
  78. Mousetrap.bind('/', () => {
  79. if (Sidebar.isOpen() && Sidebar.getView() === 'search') {
  80. Sidebar.toggle();
  81. } else {
  82. Sidebar.setView('search');
  83. }
  84. });
  85. Mousetrap.bind(['down', 'up'], (evt, key) => {
  86. if (!Utils.getCurrentCardId()) {
  87. return;
  88. }
  89. const nextFunc = key === 'down' ? 'next' : 'prev';
  90. const nextCard = $('.js-minicard.is-selected')
  91. [nextFunc]('.js-minicard')
  92. .get(0);
  93. if (nextCard) {
  94. const nextCardId = Blaze.getData(nextCard)._id;
  95. Utils.goCardId(nextCardId);
  96. }
  97. });
  98. numbArray = _.range(1,10).map(x => 'shift+'+String(x))
  99. Mousetrap.bind(numbArray, (evt, key) => {
  100. num = parseInt(key.substr(6, key.length));
  101. const currentUserId = Meteor.userId();
  102. if (currentUserId === null) {
  103. return;
  104. }
  105. const currentBoardId = Session.get('currentBoard');
  106. board = ReactiveCache.getBoard(currentBoardId);
  107. labels = board.labels;
  108. if(MultiSelection.isActive())
  109. {
  110. const cardIds = MultiSelection.getSelectedCardIds();
  111. for (const cardId of cardIds)
  112. {
  113. card = Cards.findOne(cardId);
  114. if(num <= board.labels.length)
  115. {
  116. card.removeLabel(labels[num-1]["_id"]);
  117. }
  118. }
  119. }
  120. });
  121. numArray = _.range(1,10).map(x => String(x))
  122. Mousetrap.bind(numArray, (evt, key) => {
  123. num = parseInt(key);
  124. const currentUserId = Meteor.userId();
  125. const currentBoardId = Session.get('currentBoard');
  126. if (currentUserId === null) {
  127. return;
  128. }
  129. board = ReactiveCache.getBoard(currentBoardId);
  130. labels = board.labels;
  131. if(MultiSelection.isActive() && ReactiveCache.getCurrentUser().isBoardMember())
  132. {
  133. const cardIds = MultiSelection.getSelectedCardIds();
  134. for (const cardId of cardIds)
  135. {
  136. card = Cards.findOne(cardId);
  137. if(num <= board.labels.length)
  138. {
  139. card.addLabel(labels[num-1]["_id"]);
  140. }
  141. }
  142. return;
  143. }
  144. const cardId = getSelectedCardId();
  145. if (!cardId) {
  146. return;
  147. }
  148. if (ReactiveCache.getCurrentUser().isBoardMember()) {
  149. const card = Cards.findOne(cardId);
  150. if(num <= board.labels.length)
  151. {
  152. card.toggleLabel(labels[num-1]["_id"]);
  153. }
  154. }
  155. });
  156. Mousetrap.bind(_.range(1, 10).map(x => `ctrl+alt+${x}`), (evt, key) => {
  157. // Make sure the current user is defined
  158. if (!ReactiveCache.getCurrentUser())
  159. return;
  160. // Make sure the current user is a board member
  161. if (!ReactiveCache.getCurrentUser().isBoardMember())
  162. return;
  163. const memberIndex = parseInt(key.split("+").pop()) - 1;
  164. const currentBoard = Utils.getCurrentBoard();
  165. const validBoardMembers = currentBoard.memberUsers().filter(member => member.isBoardMember());
  166. if (memberIndex >= validBoardMembers.length)
  167. return;
  168. const memberId = validBoardMembers[memberIndex]._id;
  169. if (MultiSelection.isActive()) {
  170. for (const cardId of MultiSelection.getSelectedCardIds())
  171. Cards.findOne(cardId).toggleAssignee(memberId);
  172. } else {
  173. const cardId = getSelectedCardId();
  174. if (!cardId)
  175. return;
  176. Cards.findOne(cardId).toggleAssignee(memberId);
  177. }
  178. });
  179. Mousetrap.bind('m', evt => {
  180. const cardId = getSelectedCardId();
  181. if (!cardId) {
  182. return;
  183. }
  184. const currentUserId = Meteor.userId();
  185. if (currentUserId === null) {
  186. return;
  187. }
  188. if (ReactiveCache.getCurrentUser().isBoardMember()) {
  189. const card = Cards.findOne(cardId);
  190. card.toggleAssignee(currentUserId);
  191. // We should prevent scrolling in card when spacebar is clicked
  192. // This should do it according to Mousetrap docs, but it doesn't
  193. evt.preventDefault();
  194. }
  195. });
  196. Mousetrap.bind('space', evt => {
  197. const cardId = getSelectedCardId();
  198. if (!cardId) {
  199. return;
  200. }
  201. const currentUserId = Meteor.userId();
  202. if (currentUserId === null) {
  203. return;
  204. }
  205. if (ReactiveCache.getCurrentUser().isBoardMember()) {
  206. const card = Cards.findOne(cardId);
  207. card.toggleMember(currentUserId);
  208. // We should prevent scrolling in card when spacebar is clicked
  209. // This should do it according to Mousetrap docs, but it doesn't
  210. evt.preventDefault();
  211. }
  212. });
  213. const archiveCard = evt => {
  214. const cardId = getSelectedCardId();
  215. if (!cardId) {
  216. return;
  217. }
  218. const currentUserId = Meteor.userId();
  219. if (currentUserId === null) {
  220. return;
  221. }
  222. if (Utils.canModifyBoard()) {
  223. const card = Cards.findOne(cardId);
  224. card.archive();
  225. // We should prevent scrolling in card when spacebar is clicked
  226. // This should do it according to Mousetrap docs, but it doesn't
  227. evt.preventDefault();
  228. }
  229. };
  230. // Archive card has multiple shortcuts
  231. Mousetrap.bind('c', archiveCard);
  232. Mousetrap.bind('-', archiveCard);
  233. // Same as above, this time for Persian keyboard.
  234. // https://github.com/wekan/wekan/pull/5589#issuecomment-2516776519
  235. Mousetrap.bind('÷', archiveCard);
  236. Mousetrap.bind('n', evt => {
  237. const cardId = getSelectedCardId();
  238. if (!cardId) {
  239. return;
  240. }
  241. const currentUserId = Meteor.userId();
  242. if (currentUserId === null) {
  243. return;
  244. }
  245. if (Utils.canModifyBoard()) {
  246. // Find the current hovered card
  247. const card = Cards.findOne(cardId);
  248. // Find the button and click it
  249. $(`#js-list-${card.listId} .list-body .minicards .open-minicard-composer`).click();
  250. // We should prevent scrolling in card when spacebar is clicked
  251. // This should do it according to Mousetrap docs, but it doesn't
  252. evt.preventDefault();
  253. }
  254. });
  255. Template.keyboardShortcuts.helpers({
  256. mapping: [
  257. {
  258. keys: ['w'],
  259. action: 'shortcut-toggle-sidebar',
  260. },
  261. {
  262. keys: ['q'],
  263. action: 'shortcut-filter-my-cards',
  264. },
  265. {
  266. keys: ['a'],
  267. action: 'shortcut-filter-my-assigned-cards',
  268. },
  269. {
  270. keys: ['n'],
  271. action: 'add-card-to-bottom-of-list',
  272. },
  273. {
  274. keys: ['f'],
  275. action: 'shortcut-toggle-filterbar',
  276. },
  277. {
  278. keys: ['/'],
  279. action: 'shortcut-toggle-searchbar',
  280. },
  281. {
  282. keys: ['x'],
  283. action: 'shortcut-clear-filters',
  284. },
  285. {
  286. keys: ['?'],
  287. action: 'shortcut-show-shortcuts',
  288. },
  289. {
  290. keys: ['ESC'],
  291. action: 'shortcut-close-dialog',
  292. },
  293. {
  294. keys: ['@'],
  295. action: 'shortcut-autocomplete-members',
  296. },
  297. {
  298. keys: ['SPACE'],
  299. action: 'shortcut-add-self',
  300. },
  301. {
  302. keys: ['m'],
  303. action: 'shortcut-assign-self',
  304. },
  305. {
  306. keys: ['c', '÷', '-'],
  307. action: 'archive-card',
  308. },
  309. {
  310. keys: ['number keys 1-9'],
  311. action: 'toggle-labels'
  312. },
  313. {
  314. keys: ['shift + number keys 1-9'],
  315. action: 'remove-labels-multiselect'
  316. },
  317. {
  318. keys: ['ctrl + alt + number keys 1-9'],
  319. action: 'toggle-assignees'
  320. },
  321. ],
  322. });