keyboard.js 8.0 KB

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