click-outside-modal - New feature (#7169)

Co-authored-by: Federico Brigante <[email protected]>

build/__snapshots__/features-meta.json

@@ -94,6 +94,11 @@
  "description": "Clears the PR merge commit message of clutter, leaving only deduplicated co-authors.",
  "screenshot": "https://user-images.githubusercontent.com/1402241/79257078-62b6fc00-7e89-11ea-8798-c06f33baa94b.png"
  },
+ {
+ "id": "click-outside-modal",
+ "description": "Closes checks list when clicking outside of modal.",
+ "screenshot": null
+ },
  {
  "id": "close-as-unplanned",
  "description": "Lets you \"close issue as unplanned\" in one click instead of three.",

build/__snapshots__/imported-features.txt

@@ -17,6 +17,7 @@ clean-repo-sidebar
 clean-repo-tabs
 clean-rich-text-editor
 clear-pr-merge-commit-message
+click-outside-modal
 close-as-unplanned
 close-out-of-view-modals
 closing-remarks

build/features.test.ts

@@ -24,6 +24,7 @@ const noScreenshotExceptions = new Set([
  'select-all-notifications-shortcut',
  'selection-in-new-tab',
  'submission-via-ctrl-enter-everywhere',
+ 'click-outside-modal',
 
  'hide-navigation-hover-highlight', // TODO: Add side-by-side gif
  'hide-inactive-deployments', // TODO: side-by-side png

readme.md

@@ -396,6 +396,7 @@ Thanks for contributing! 🦋🙌
 - [](# "prevent-comment-loss") [While writing/editing comments, open the preview links in new tab instead of navigating away from the page.](https://user-images.githubusercontent.com/17681399/282616531-2befcabe-5c80-4b9a-bfb5-7b9917847bb5.gif)
 - [](# "fix-no-pr-search") [Redirect to repo issue list when the search doesn‘t include `is:pr`.](https://user-images.githubusercontent.com/46634000/286579939-50122f02-dcfd-4510-b9e1-03d9985da2cd.gif)
 - [](# "clean-readme-url") [Drops redundant "readme-ov-file" parameter from repo URLs.](https://github.com/refined-github/refined-github/assets/1402241/73e96411-3314-4501-a9b6-d006af6fcc47)
+- [](# "click-outside-modal") [Closes checks list when clicking outside of modal.](https://github.com/refined-github/refined-github/issues/7157)
 
 <!-- Refer to style guide above. Keep this message between sections. -->
 

source/features/click-outside-modal.tsx

@@ -0,0 +1,36 @@
+import * as pageDetect from 'github-url-detection';
+import delegate, {DelegateEvent} from 'delegate-it';
+
+import features from '../feature-manager.js';
+
+function onButtonClick({delegateTarget: delegate, target}: DelegateEvent): void {
+ // Only close if clicking outside of modal
+ if (delegate === target) {
+ delegate.dispatchEvent(new KeyboardEvent('keydown', {bubbles: true, key: 'Escape', code: 'Escape'}));
+ }
+}
+
+function init(signal: AbortSignal): void {
+ delegate('[class*="Dialog__Backdrop-"]', 'click', onButtonClick, {signal});
+}
+
+void features.add(import.meta.url, {
+ include: [
+ pageDetect.isBranches,
+ pageDetect.isRepoCommitList,
+ pageDetect.isRepoTree,
+ pageDetect.isSingleFile,
+ ],
+ init,
+});
+
+/*
+
+## Test URLs
+
+- https://github.com/refined-github/refined-github
+- https://github.com/refined-github/refined-github/branches
+- https://github.com/refined-github/refined-github/commits/main/
+- https://github.com/refined-github/refined-github/blob/main/package.json
+
+*/

source/refined-github.ts

@@ -221,3 +221,4 @@ import './features/visit-tag.js';
 import './features/prevent-comment-loss.js';
 import './features/fix-no-pr-search.js';
 import './features/clean-readme-url.js';
+import './features/click-outside-modal.js';