diff options
author | 2019-01-17 19:57:53 +0700 | |
---|---|---|
committer | 2019-01-17 19:57:53 +0700 | |
commit | 11b927189bab258a226e251c1bd87504feee51f4 (patch) | |
tree | 89b3cf4ba9e6b49afd65b8f9a59a7ca33e46efe3 /source/features/upload-button.tsx | |
parent | f25483fa128d9dcc8e1e74fcf2d2751d604fe11f (diff) | |
download | refined-github-11b927189bab258a226e251c1bd87504feee51f4.tar.gz refined-github-11b927189bab258a226e251c1bd87504feee51f4.tar.zst refined-github-11b927189bab258a226e251c1bd87504feee51f4.zip |
Drop Babel in favor of esm and TypeScript (#1726)
To get some meaningful errors during feature development, I thought it'd be useful to use TypeScript on `features.js` only, hoping to keep it contained to that file.
@sindresorhus suggested we just extend it the whole extension and maybe that can be done incrementally, without having to necessarily use types on everything.
Diffstat (limited to 'source/features/upload-button.tsx')
-rw-r--r-- | source/features/upload-button.tsx | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/source/features/upload-button.tsx b/source/features/upload-button.tsx new file mode 100644 index 00000000..02f08cb9 --- /dev/null +++ b/source/features/upload-button.tsx @@ -0,0 +1,66 @@ +import {React} from 'dom-chef/react'; +import select from 'select-dom'; +import delegate from 'delegate'; +import onetime from 'onetime'; +import features from '../libs/features'; +import observeEl from '../libs/simplified-element-observer'; +import {metaKey} from '../libs/utils'; +import * as icons from '../libs/icons'; + +function addButtons() { + for (const toolbar of select.all('form:not(.rgh-has-upload-field) markdown-toolbar')) { + const form = toolbar.closest('form'); + if (!select.exists('.js-manual-file-chooser[type=file]', form)) { + continue; + } + observeEl(toolbar, function () { + const toolbarGroup = select('.toolbar-group:last-child', toolbar); + if (toolbarGroup) { + toolbarGroup.append( + <button type="button" class="toolbar-item rgh-upload-btn tooltipped tooltipped-nw" aria-label="Upload attachments"> + {icons.cloudUpload()} + </button> + ); + form.classList.add('rgh-has-upload-field'); + this.disconnect(); + } + }); + } +} + +function triggerUploadUI({target}) { + target + .closest('form') + .querySelector('.js-manual-file-chooser') // Find <input [type=file]> + .click(); // Open UI +} + +function handleKeydown(event) { + if (event[metaKey] && event.key === 'u') { + triggerUploadUI(event); + event.preventDefault(); + } +} + +const listenOnce = onetime(() => { + delegate('.rgh-has-upload-field', 'keydown', handleKeydown); + delegate('.rgh-upload-btn', 'click', triggerUploadUI); +}); + +function init() { + addButtons(); + listenOnce(); +} + +features.add({ + id: 'upload-button', + include: [ + features.isPR, + features.isIssue, + features.isNewIssue, + features.isCompare, + features.isCommit + ], + load: features.onAjaxedPages, + init +}); |