|
1 | 1 | import {React} from 'dom-chef/react'; |
2 | 2 | import select from 'select-dom'; |
3 | | -import domify from '../libs/domify'; |
4 | 3 | import features from '../libs/features'; |
5 | | -import observeEl from '../libs/simplified-element-observer'; |
6 | | -import {isProject} from '../libs/page-detect'; |
7 | | - |
8 | | -/** |
9 | | - * A map of the shortcut group titles and their respective group IDs. |
10 | | - * The IDs can be used to register new shortcuts using `registerShortcut`. |
11 | | - */ |
12 | | -const groups = { |
13 | | - 'Site wide shortcuts': 'site', |
14 | | - Repositories: 'repos', |
15 | | - 'Source code browsing': 'source', |
16 | | - 'Pull request list': 'pr', |
17 | | - 'Pull request - Files changed tab': 'prFiles', |
18 | | - Issues: 'issues', |
19 | | - 'Browsing commits': 'commits', |
20 | | - 'Commit list': 'commitList', |
21 | | - Dashboards: 'dashboards', |
22 | | - Notifications: 'notifications', |
23 | | - 'Network Graph': 'networkGraph', |
24 | | - 'Moving a column': 'projectColumns', |
25 | | - 'Moving a card': 'projectCards' |
26 | | -}; |
27 | | -const shortcuts = new Map(); |
28 | | - |
29 | | -/** |
30 | | - * Registers a new shortcut to be displayed in the shortcut help modal. |
31 | | - * @param {String} groupId The ID of the group as defined in the `groups` map. |
32 | | - * @param {String} hotkey The hotkey with keys separated by spaces. |
33 | | - * @param {String} description What the shortcut does. |
34 | | - */ |
35 | | -export function registerShortcut(groupId, hotkey, description) { |
36 | | - shortcuts.set(hotkey, {groupId, hotkey, description}); |
37 | | -} |
38 | 4 |
|
39 | 5 | function splitKeys(keys) { |
40 | | - return keys.replace(/\S+/g, '<kbd>$&</kbd>'); |
| 6 | + return keys.split(' ').map(key => <>{' '}<kbd>{key}</kbd></>); |
41 | 7 | } |
42 | 8 |
|
43 | | -function improveShortcutHelp() { |
44 | | - // Remove redundant "Show All" button |
45 | | - select('.js-see-all-keyboard-shortcuts').remove(); |
46 | | - |
47 | | - // Close the modal with Esc |
48 | | - select('.js-facebox-close').dataset.hotkey = 'Escape'; |
49 | | - |
50 | | - const modal = select('.shortcuts'); |
51 | | - const groupElements = select.all('tbody', modal); |
52 | | - for (const groupElement of groupElements) { |
53 | | - const groupTitle = select('tr th:nth-child(2)', groupElement).textContent; |
54 | | - if (groupTitle in groups) { |
55 | | - const groupId = groups[groupTitle]; |
56 | | - |
57 | | - if (groupElement.style.display === 'none') { |
58 | | - if (groupId.startsWith('project') && !isProject()) { |
59 | | - // The "Projects"-related groups are quite big and not interesting to most users |
60 | | - groupElement.remove(); |
61 | | - } else { |
62 | | - // Reduce opacity of previously hidden groups |
63 | | - groupElement.removeAttribute('style'); |
64 | | - groupElement.classList.remove('js-hidden-pane'); |
65 | | - groupElement.classList.add('rgh-inactive-shortcut-group'); |
66 | | - } |
67 | | - } else { |
68 | | - // Push relevant (not hidden) groups to the top |
69 | | - groupElement.parentElement.prepend(groupElement); |
70 | | - } |
71 | | - |
72 | | - for (const {hotkey, description, groupId: thisGroupId} of shortcuts.values()) { |
73 | | - if (thisGroupId === groupId) { |
74 | | - groupElement.append( |
75 | | - <tr> |
76 | | - <td class="keys" dangerouslySetInnerHTML={{__html: splitKeys(hotkey)}}/> |
77 | | - <td> |
78 | | - {description} |
79 | | - <div |
80 | | - class="rgh-shortcut-circle tooltipped tooltipped-nw" |
81 | | - aria-label="Shortcut added by Refined GitHub" |
82 | | - /> |
83 | | - </td> |
84 | | - </tr> |
85 | | - ); |
86 | | - } |
87 | | - } |
88 | | - } |
89 | | - } |
| 9 | +function improveShortcutHelp(dialog) { |
| 10 | + select('.Box-body .col-5 .Box:first-child', dialog).after( |
| 11 | + <div class="Box Box--condensed m-4"> |
| 12 | + <div class="Box-header"> |
| 13 | + <h3 class="Box-title">Added by Refined GitHub</h3> |
| 14 | + </div> |
| 15 | + |
| 16 | + <ul> |
| 17 | + {features.getShortcuts().map(({hotkey, description}) => ( |
| 18 | + <li class="Box-row d-flex flex-row"> |
| 19 | + <div class="flex-auto">{description}</div> |
| 20 | + <div class="ml-2 no-wrap"> |
| 21 | + <kbd>{hotkey}</kbd> |
| 22 | + </div> |
| 23 | + </li> |
| 24 | + ))} |
| 25 | + </ul> |
| 26 | + </div> |
| 27 | + ); |
90 | 28 | } |
91 | 29 |
|
92 | | -function fixKeys() { |
93 | | - for (const key of select.all('.keys kbd')) { |
| 30 | +function fixKeys(dialog) { |
| 31 | + for (const key of select.all('kbd', dialog)) { |
94 | 32 | if (key.textContent.includes(' ')) { |
95 | | - key.replaceWith(domify(splitKeys(key.textContent))); |
| 33 | + key.replaceWith(...splitKeys(key.textContent)); |
96 | 34 | } |
97 | 35 | } |
98 | 36 | } |
99 | 37 |
|
| 38 | +const observer = new MutationObserver(([{target}]) => { |
| 39 | + if (!select.exists('.js-details-dialog-spinner', target as Element)) { |
| 40 | + improveShortcutHelp(target); |
| 41 | + fixKeys(target); |
| 42 | + observer.disconnect(); |
| 43 | + } |
| 44 | +}); |
| 45 | + |
100 | 46 | function init() { |
101 | | - observeEl('#facebox', records => { |
102 | | - if ([...records].some(record => record.target.matches('.shortcuts') && |
103 | | - [...record.removedNodes].some(element => element.matches('.facebox-loading')))) { |
104 | | - improveShortcutHelp(); |
105 | | - fixKeys(); |
| 47 | + document.addEventListener('keypress', ({key}) => { |
| 48 | + if (key === '?') { |
| 49 | + observer.observe(select('.kb-shortcut-dialog'), {childList: true}); |
106 | 50 | } |
107 | | - }, { |
108 | | - childList: true, |
109 | | - subtree: true |
110 | 51 | }); |
111 | 52 | } |
112 | 53 |
|
113 | 54 | features.add({ |
114 | 55 | id: 'improve-shortcut-help', |
115 | | - load: features.onDomReady, |
116 | 56 | init |
117 | 57 | }); |
0 commit comments