blob: dc0857440ff4e270beb1e7b5152fcb11c8af5e0c (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
import './improve-shortcut-help.css';
import React from 'dom-chef';
import select from 'select-dom';
import features from '../libs/features';
function splitKeys(keys: string): DocumentFragment[] {
return keys.split(' ').map(key => <> <kbd>{key}</kbd></>);
}
function improveShortcutHelp(dialog: Element): void {
select('.Box-body .col-5 .Box:first-child', dialog)!.after(
<div className="Box Box--condensed m-4">
<div className="Box-header">
<h3 className="Box-title">Added by Refined GitHub</h3>
</div>
<ul>
{features.getShortcuts().map(({hotkey, description}) => (
<li className="Box-row d-flex flex-row">
<div className="flex-auto">{description}</div>
<div className="ml-2 no-wrap">
<kbd>{hotkey}</kbd>
</div>
</li>
))}
</ul>
</div>
);
}
function fixKeys(dialog: Element): void {
for (const key of select.all('kbd', dialog)) {
if (key.textContent!.includes(' ')) {
key.replaceWith(...splitKeys(key.textContent!));
}
}
}
const observer = new MutationObserver(([{target}]) => {
if (target instanceof Element && !select.exists('.js-details-dialog-spinner', target)) {
improveShortcutHelp(target);
fixKeys(target);
observer.disconnect();
}
});
function init(): void {
document.addEventListener('keypress', ({key}) => {
if (key === '?') {
observer.observe(select('.kb-shortcut-dialog')!, {childList: true});
}
});
}
features.add({
id: __featureName__,
description: 'Show Refined GitHub’s keyboard shortcuts in the help modal (`?` hotkey)',
screenshot: 'https://user-images.githubusercontent.com/29176678/36999174-9f07d33e-20bf-11e8-83e3-b3a9908a4b5f.png',
init
});
|
