keyboard.js 8.1 KB

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