BranchesTags

Repository files navigation

Build Statusnpm version

Launchy! 🚀

An accessible modal window!

Features include:

  • Easy to use and implement!
  • On launch, keyboard focus shifts to the modal window container
  • The modal window is described via optional modal heading
  • Traps the keyboard focus within the modal when active/visible
  • Closes the window on esc key press
  • Closes the window on overlay mouse click
  • Sets keyboard focus back to the launcher element on window close
  • Add your own custom close controls!
  • Add your own custom controls which send focus to somewhere else on the page!
  • Transparent border for Windows High Contrast themes

For more details on the accessibility of modal windows:

Demo

  • Check out the demo! 👈
  • Try your own HTML with the CodePen demo!

Usage

Launchy! is very easy to install and use:

HTML

Wherever you want to have a Launchy! control + window appear in your HTML content, simply wrap your content with a <div> and add the data-launchy attribute.

Example:

<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p></div>
  • Required: data-launchy -- Attribute is required but the value can be anything
  • Required: data-launchy-text -- This is the text that will be output to the launcher control
  • Optional: data-launchy-title -- The text which appears in the heading of the modal window, recommended for greater a11y context 👍
  • Optional: data-launchy-button -- If you'd rather have button elements instead of the default a elements as launcher and close controls

Custom Close Controls

You can add your own custom close controls to any Launchy! modal window!

  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-close attribute

Example:

<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-close="🔥">Ok!</a></div>

Clicking on the "Ok!" link will hide the modal window and send focus back to the launcher control!

Custom Refocus Controls

You can add your own custom "refocus" controls to any Launchy! modal window!

  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-refocus attribute
  3. Set the value of the data-launchy-refocus attribute to the id of the element you wish to send focus to

Example:

<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-refocus="post-title">Send me to the article headline!</a></div><!-- Somewhere else in your page… --><h1id="post-title" tabindex="-1">My perfect sundae…</h1>

Clicking on the "Send me to the article headline!" link will hide the modal window and shift keyboard focus to the <h1 id="post-title"/> element!

CSS

Launchy! has many CSS classes available on its generated elements for custom styles. Check out the style.scss file for class names and an example on how you might want to style your modal windows!

JavaScript

For any site, grab the /dist/launchy.js file and include it at the bottom of your HTML page/template:

<scriptsrc="js/launchy.js"></script>

Launchy! will run automatically and generate all the modal windows for you!

npm Package

Launchy! is also available as an npm package!

Install

npm i launchy-modal-window

Usage

Include the launchy.js directly in your app or site template.

<scriptsrc="node_modules/launchy-modal-window/launchy.js"></script>

Contributions

See the CONTRIBUTING file.

License

See the LICENSE file.

About

Launchy: An Accessible Modal Window

svinkle.github.io/launchy

Topics

a11yaccessibilitydialoghtmljavascriptmodal

Resources

Readme
MIT license

Contributing

Contributing
Activity

Stars

103 stars

Watchers

2 watching

Forks

9 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Build Statusnpm version
Launchy! 🚀
An accessible modal window!
Features include:
  • Easy to use and implement!
  • On launch, keyboard focus shifts to the modal window container
  • The modal window is described via optional modal heading
  • Traps the keyboard focus within the modal when active/visible
  • Closes the window on esc key press
  • Closes the window on overlay mouse click
  • Sets keyboard focus back to the launcher element on window close
  • Add your own custom close controls!
  • Add your own custom controls which send focus to somewhere else on the page!
  • Transparent border for Windows High Contrast themes
For more details on the accessibility of modal windows:
Demo
  • Check out the demo! 👈
  • Try your own HTML with the CodePen demo!
Usage
Launchy! is very easy to install and use:
HTML
Wherever you want to have a Launchy! control + window appear in your HTML content, simply wrap your content with a <div> and add the data-launchy attribute.
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p></div>
  • Required: data-launchy -- Attribute is required but the value can be anything
  • Required: data-launchy-text -- This is the text that will be output to the launcher control
  • Optional: data-launchy-title -- The text which appears in the heading of the modal window, recommended for greater a11y context 👍
  • Optional: data-launchy-button -- If you'd rather have button elements instead of the default a elements as launcher and close controls
Custom Close Controls
You can add your own custom close controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-close attribute
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-close="🔥">Ok!</a></div>
Clicking on the "Ok!" link will hide the modal window and send focus back to the launcher control!
Custom Refocus Controls
You can add your own custom "refocus" controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-refocus attribute
  3. Set the value of the data-launchy-refocus attribute to the id of the element you wish to send focus to
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-refocus="post-title">Send me to the article headline!</a></div><!-- Somewhere else in your page… --><h1id="post-title" tabindex="-1">My perfect sundae…</h1>
Clicking on the "Send me to the article headline!" link will hide the modal window and shift keyboard focus to the <h1 id="post-title"/> element!
CSS
Launchy! has many CSS classes available on its generated elements for custom styles. Check out the style.scss file for class names and an example on how you might want to style your modal windows!
JavaScript
For any site, grab the /dist/launchy.js file and include it at the bottom of your HTML page/template:
<scriptsrc="js/launchy.js"></script>
Launchy! will run automatically and generate all the modal windows for you!
npm Package
Launchy! is also available as an npm package!
Install
npm i launchy-modal-window
Usage
Include the launchy.js directly in your app or site template.
<scriptsrc="node_modules/launchy-modal-window/launchy.js"></script>
Contributions
See the CONTRIBUTING file.
License
See the LICENSE file.
About
Launchy: An Accessible Modal Window
svinkle.github.io/launchy
Topics
a11yaccessibilitydialoghtmljavascriptmodal
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
103 stars
Watchers
2 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Build Statusnpm version
Launchy! 🚀
An accessible modal window!
Features include:
  • Easy to use and implement!
  • On launch, keyboard focus shifts to the modal window container
  • The modal window is described via optional modal heading
  • Traps the keyboard focus within the modal when active/visible
  • Closes the window on esc key press
  • Closes the window on overlay mouse click
  • Sets keyboard focus back to the launcher element on window close
  • Add your own custom close controls!
  • Add your own custom controls which send focus to somewhere else on the page!
  • Transparent border for Windows High Contrast themes
For more details on the accessibility of modal windows:
Demo
  • Check out the demo! 👈
  • Try your own HTML with the CodePen demo!
Usage
Launchy! is very easy to install and use:
HTML
Wherever you want to have a Launchy! control + window appear in your HTML content, simply wrap your content with a <div> and add the data-launchy attribute.
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p></div>
  • Required: data-launchy -- Attribute is required but the value can be anything
  • Required: data-launchy-text -- This is the text that will be output to the launcher control
  • Optional: data-launchy-title -- The text which appears in the heading of the modal window, recommended for greater a11y context 👍
  • Optional: data-launchy-button -- If you'd rather have button elements instead of the default a elements as launcher and close controls
Custom Close Controls
You can add your own custom close controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-close attribute
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-close="🔥">Ok!</a></div>
Clicking on the "Ok!" link will hide the modal window and send focus back to the launcher control!
Custom Refocus Controls
You can add your own custom "refocus" controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-refocus attribute
  3. Set the value of the data-launchy-refocus attribute to the id of the element you wish to send focus to
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-refocus="post-title">Send me to the article headline!</a></div><!-- Somewhere else in your page… --><h1id="post-title" tabindex="-1">My perfect sundae…</h1>
Clicking on the "Send me to the article headline!" link will hide the modal window and shift keyboard focus to the <h1 id="post-title"/> element!
CSS
Launchy! has many CSS classes available on its generated elements for custom styles. Check out the style.scss file for class names and an example on how you might want to style your modal windows!
JavaScript
For any site, grab the /dist/launchy.js file and include it at the bottom of your HTML page/template:
<scriptsrc="js/launchy.js"></script>
Launchy! will run automatically and generate all the modal windows for you!
npm Package
Launchy! is also available as an npm package!
Install
npm i launchy-modal-window
Usage
Include the launchy.js directly in your app or site template.
<scriptsrc="node_modules/launchy-modal-window/launchy.js"></script>
Contributions
See the CONTRIBUTING file.
License
See the LICENSE file.
About
Launchy: An Accessible Modal Window
svinkle.github.io/launchy
Topics
a11yaccessibilitydialoghtmljavascriptmodal
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
103 stars
Watchers
2 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Build Statusnpm version
Launchy! 🚀
An accessible modal window!
Features include:
  • Easy to use and implement!
  • On launch, keyboard focus shifts to the modal window container
  • The modal window is described via optional modal heading
  • Traps the keyboard focus within the modal when active/visible
  • Closes the window on esc key press
  • Closes the window on overlay mouse click
  • Sets keyboard focus back to the launcher element on window close
  • Add your own custom close controls!
  • Add your own custom controls which send focus to somewhere else on the page!
  • Transparent border for Windows High Contrast themes
For more details on the accessibility of modal windows:
Demo
  • Check out the demo! 👈
  • Try your own HTML with the CodePen demo!
Usage
Launchy! is very easy to install and use:
HTML
Wherever you want to have a Launchy! control + window appear in your HTML content, simply wrap your content with a <div> and add the data-launchy attribute.
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p></div>
  • Required: data-launchy -- Attribute is required but the value can be anything
  • Required: data-launchy-text -- This is the text that will be output to the launcher control
  • Optional: data-launchy-title -- The text which appears in the heading of the modal window, recommended for greater a11y context 👍
  • Optional: data-launchy-button -- If you'd rather have button elements instead of the default a elements as launcher and close controls
Custom Close Controls
You can add your own custom close controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-close attribute
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-close="🔥">Ok!</a></div>
Clicking on the "Ok!" link will hide the modal window and send focus back to the launcher control!
Custom Refocus Controls
You can add your own custom "refocus" controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-refocus attribute
  3. Set the value of the data-launchy-refocus attribute to the id of the element you wish to send focus to
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-refocus="post-title">Send me to the article headline!</a></div><!-- Somewhere else in your page… --><h1id="post-title" tabindex="-1">My perfect sundae…</h1>
Clicking on the "Send me to the article headline!" link will hide the modal window and shift keyboard focus to the <h1 id="post-title"/> element!
CSS
Launchy! has many CSS classes available on its generated elements for custom styles. Check out the style.scss file for class names and an example on how you might want to style your modal windows!
JavaScript
For any site, grab the /dist/launchy.js file and include it at the bottom of your HTML page/template:
<scriptsrc="js/launchy.js"></script>
Launchy! will run automatically and generate all the modal windows for you!
npm Package
Launchy! is also available as an npm package!
Install
npm i launchy-modal-window
Usage
Include the launchy.js directly in your app or site template.
<scriptsrc="node_modules/launchy-modal-window/launchy.js"></script>
Contributions
See the CONTRIBUTING file.
License
See the LICENSE file.
About
Launchy: An Accessible Modal Window
svinkle.github.io/launchy
Topics
a11yaccessibilitydialoghtmljavascriptmodal
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
103 stars
Watchers
2 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Build Statusnpm version
Launchy! 🚀
An accessible modal window!
Features include:
  • Easy to use and implement!
  • On launch, keyboard focus shifts to the modal window container
  • The modal window is described via optional modal heading
  • Traps the keyboard focus within the modal when active/visible
  • Closes the window on esc key press
  • Closes the window on overlay mouse click
  • Sets keyboard focus back to the launcher element on window close
  • Add your own custom close controls!
  • Add your own custom controls which send focus to somewhere else on the page!
  • Transparent border for Windows High Contrast themes
For more details on the accessibility of modal windows:
Demo
  • Check out the demo! 👈
  • Try your own HTML with the CodePen demo!
Usage
Launchy! is very easy to install and use:
HTML
Wherever you want to have a Launchy! control + window appear in your HTML content, simply wrap your content with a <div> and add the data-launchy attribute.
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p></div>
  • Required: data-launchy -- Attribute is required but the value can be anything
  • Required: data-launchy-text -- This is the text that will be output to the launcher control
  • Optional: data-launchy-title -- The text which appears in the heading of the modal window, recommended for greater a11y context 👍
  • Optional: data-launchy-button -- If you'd rather have button elements instead of the default a elements as launcher and close controls
Custom Close Controls
You can add your own custom close controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-close attribute
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-close="🔥">Ok!</a></div>
Clicking on the "Ok!" link will hide the modal window and send focus back to the launcher control!
Custom Refocus Controls
You can add your own custom "refocus" controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-refocus attribute
  3. Set the value of the data-launchy-refocus attribute to the id of the element you wish to send focus to
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-refocus="post-title">Send me to the article headline!</a></div><!-- Somewhere else in your page… --><h1id="post-title" tabindex="-1">My perfect sundae…</h1>
Clicking on the "Send me to the article headline!" link will hide the modal window and shift keyboard focus to the <h1 id="post-title"/> element!
CSS
Launchy! has many CSS classes available on its generated elements for custom styles. Check out the style.scss file for class names and an example on how you might want to style your modal windows!
JavaScript
For any site, grab the /dist/launchy.js file and include it at the bottom of your HTML page/template:
<scriptsrc="js/launchy.js"></script>
Launchy! will run automatically and generate all the modal windows for you!
npm Package
Launchy! is also available as an npm package!
Install
npm i launchy-modal-window
Usage
Include the launchy.js directly in your app or site template.
<scriptsrc="node_modules/launchy-modal-window/launchy.js"></script>
Contributions
See the CONTRIBUTING file.
License
See the LICENSE file.
About
Launchy: An Accessible Modal Window
svinkle.github.io/launchy
Topics
a11yaccessibilitydialoghtmljavascriptmodal
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
103 stars
Watchers
2 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Build Statusnpm version
Launchy! 🚀
An accessible modal window!
Features include:
  • Easy to use and implement!
  • On launch, keyboard focus shifts to the modal window container
  • The modal window is described via optional modal heading
  • Traps the keyboard focus within the modal when active/visible
  • Closes the window on esc key press
  • Closes the window on overlay mouse click
  • Sets keyboard focus back to the launcher element on window close
  • Add your own custom close controls!
  • Add your own custom controls which send focus to somewhere else on the page!
  • Transparent border for Windows High Contrast themes
For more details on the accessibility of modal windows:
Demo
  • Check out the demo! 👈
  • Try your own HTML with the CodePen demo!
Usage
Launchy! is very easy to install and use:
HTML
Wherever you want to have a Launchy! control + window appear in your HTML content, simply wrap your content with a <div> and add the data-launchy attribute.
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p></div>
  • Required: data-launchy -- Attribute is required but the value can be anything
  • Required: data-launchy-text -- This is the text that will be output to the launcher control
  • Optional: data-launchy-title -- The text which appears in the heading of the modal window, recommended for greater a11y context 👍
  • Optional: data-launchy-button -- If you'd rather have button elements instead of the default a elements as launcher and close controls
Custom Close Controls
You can add your own custom close controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-close attribute
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-close="🔥">Ok!</a></div>
Clicking on the "Ok!" link will hide the modal window and send focus back to the launcher control!
Custom Refocus Controls
You can add your own custom "refocus" controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-refocus attribute
  3. Set the value of the data-launchy-refocus attribute to the id of the element you wish to send focus to
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-refocus="post-title">Send me to the article headline!</a></div><!-- Somewhere else in your page… --><h1id="post-title" tabindex="-1">My perfect sundae…</h1>
Clicking on the "Send me to the article headline!" link will hide the modal window and shift keyboard focus to the <h1 id="post-title"/> element!
CSS
Launchy! has many CSS classes available on its generated elements for custom styles. Check out the style.scss file for class names and an example on how you might want to style your modal windows!
JavaScript
For any site, grab the /dist/launchy.js file and include it at the bottom of your HTML page/template:
<scriptsrc="js/launchy.js"></script>
Launchy! will run automatically and generate all the modal windows for you!
npm Package
Launchy! is also available as an npm package!
Install
npm i launchy-modal-window
Usage
Include the launchy.js directly in your app or site template.
<scriptsrc="node_modules/launchy-modal-window/launchy.js"></script>
Contributions
See the CONTRIBUTING file.
License
See the LICENSE file.
About
Launchy: An Accessible Modal Window
svinkle.github.io/launchy
Topics
a11yaccessibilitydialoghtmljavascriptmodal
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
103 stars
Watchers
2 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Build Statusnpm version
Launchy! 🚀
An accessible modal window!
Features include:
  • Easy to use and implement!
  • On launch, keyboard focus shifts to the modal window container
  • The modal window is described via optional modal heading
  • Traps the keyboard focus within the modal when active/visible
  • Closes the window on esc key press
  • Closes the window on overlay mouse click
  • Sets keyboard focus back to the launcher element on window close
  • Add your own custom close controls!
  • Add your own custom controls which send focus to somewhere else on the page!
  • Transparent border for Windows High Contrast themes
For more details on the accessibility of modal windows:
Demo
  • Check out the demo! 👈
  • Try your own HTML with the CodePen demo!
Usage
Launchy! is very easy to install and use:
HTML
Wherever you want to have a Launchy! control + window appear in your HTML content, simply wrap your content with a <div> and add the data-launchy attribute.
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p></div>
  • Required: data-launchy -- Attribute is required but the value can be anything
  • Required: data-launchy-text -- This is the text that will be output to the launcher control
  • Optional: data-launchy-title -- The text which appears in the heading of the modal window, recommended for greater a11y context 👍
  • Optional: data-launchy-button -- If you'd rather have button elements instead of the default a elements as launcher and close controls
Custom Close Controls
You can add your own custom close controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-close attribute
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-close="🔥">Ok!</a></div>
Clicking on the "Ok!" link will hide the modal window and send focus back to the launcher control!
Custom Refocus Controls
You can add your own custom "refocus" controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-refocus attribute
  3. Set the value of the data-launchy-refocus attribute to the id of the element you wish to send focus to
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-refocus="post-title">Send me to the article headline!</a></div><!-- Somewhere else in your page… --><h1id="post-title" tabindex="-1">My perfect sundae…</h1>
Clicking on the "Send me to the article headline!" link will hide the modal window and shift keyboard focus to the <h1 id="post-title"/> element!
CSS
Launchy! has many CSS classes available on its generated elements for custom styles. Check out the style.scss file for class names and an example on how you might want to style your modal windows!
JavaScript
For any site, grab the /dist/launchy.js file and include it at the bottom of your HTML page/template:
<scriptsrc="js/launchy.js"></script>
Launchy! will run automatically and generate all the modal windows for you!
npm Package
Launchy! is also available as an npm package!
Install
npm i launchy-modal-window
Usage
Include the launchy.js directly in your app or site template.
<scriptsrc="node_modules/launchy-modal-window/launchy.js"></script>
Contributions
See the CONTRIBUTING file.
License
See the LICENSE file.
About
Launchy: An Accessible Modal Window
svinkle.github.io/launchy
Topics
a11yaccessibilitydialoghtmljavascriptmodal
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
103 stars
Watchers
2 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Build Statusnpm version
Launchy! 🚀
An accessible modal window!
Features include:
  • Easy to use and implement!
  • On launch, keyboard focus shifts to the modal window container
  • The modal window is described via optional modal heading
  • Traps the keyboard focus within the modal when active/visible
  • Closes the window on esc key press
  • Closes the window on overlay mouse click
  • Sets keyboard focus back to the launcher element on window close
  • Add your own custom close controls!
  • Add your own custom controls which send focus to somewhere else on the page!
  • Transparent border for Windows High Contrast themes
For more details on the accessibility of modal windows:
Demo
  • Check out the demo! 👈
  • Try your own HTML with the CodePen demo!
Usage
Launchy! is very easy to install and use:
HTML
Wherever you want to have a Launchy! control + window appear in your HTML content, simply wrap your content with a <div> and add the data-launchy attribute.
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p></div>
  • Required: data-launchy -- Attribute is required but the value can be anything
  • Required: data-launchy-text -- This is the text that will be output to the launcher control
  • Optional: data-launchy-title -- The text which appears in the heading of the modal window, recommended for greater a11y context 👍
  • Optional: data-launchy-button -- If you'd rather have button elements instead of the default a elements as launcher and close controls
Custom Close Controls
You can add your own custom close controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-close attribute
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-close="🔥">Ok!</a></div>
Clicking on the "Ok!" link will hide the modal window and send focus back to the launcher control!
Custom Refocus Controls
You can add your own custom "refocus" controls to any Launchy! modal window!
  1. Add the HTML element you wish to use for the control within your content
  2. Apply the data-launchy-refocus attribute
  3. Set the value of the data-launchy-refocus attribute to the id of the element you wish to send focus to
Example:
<divdata-launchydata-launchy-text="Launch window!" data-launchy-title="My modal window"><p>This content will appear in the modal window.</p><ahref="#" data-launchy-refocus="post-title">Send me to the article headline!</a></div><!-- Somewhere else in your page… --><h1id="post-title" tabindex="-1">My perfect sundae…</h1>
Clicking on the "Send me to the article headline!" link will hide the modal window and shift keyboard focus to the <h1 id="post-title"/> element!
CSS
Launchy! has many CSS classes available on its generated elements for custom styles. Check out the style.scss file for class names and an example on how you might want to style your modal windows!
JavaScript
For any site, grab the /dist/launchy.js file and include it at the bottom of your HTML page/template:
<scriptsrc="js/launchy.js"></script>
Launchy! will run automatically and generate all the modal windows for you!
npm Package
Launchy! is also available as an npm package!
Install
npm i launchy-modal-window
Usage
Include the launchy.js directly in your app or site template.
<scriptsrc="node_modules/launchy-modal-window/launchy.js"></script>
Contributions
See the CONTRIBUTING file.
License
See the LICENSE file.
About
Launchy: An Accessible Modal Window
svinkle.github.io/launchy
Topics
a11yaccessibilitydialoghtmljavascriptmodal
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
103 stars
Watchers
2 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages