Launchy! 🚀0.9.2

Change log:

npm now uses index.js file

• Authors can now import Launchy! 🚀using the industry standard method as a result of renaming the file from launchy.js to index.js.
• Note: This could be a breaking change so test before you update!!

Other changes

• Changed "bumper" elements from being focusable by default by setting tabindex to -1, then toggling to 0 on showModal & hideModal methods.
• Updated Babel preset from using babel-preset-es2015 to the new babel-preset-env package.
• Removed rogue console.log() statement.

📺 Video!

Check out the live stream video on YouTube I made while making these changes! Watch and laugh along when I struggle to understand how my own project works! 😅😭

Launchy! 🚀 v0.9.1

Change log:

button elements!

• Authors now have the option to use button elements instead of the default a elements. Just apply a data-launchy-button attribute to the content container!
• Addresses concerns in #9.

Other changes

• Removed unnecessary htmlElements object of strings which would never change anyway. 🤷‍♂️

Launchy! 🚀 v0.8.1

Change log:

inert polyfill

• Now uses the WICG inert polyfill attribute in order to remove all other focusable elements in the DOM from receiving focus.
• In order to successfully trap keyboard focus with inert, a new focusable div element is inserted into the DOM directly after the body element: #launchy-bumper
• Removes a bunch of code that was mimicking inert functionality
• Fixes #15.

Launchy! 🚀 v0.8.0

Change log:

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:

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

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

• Fixes #6.

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:

<div data-launchy data-launchy-text="Launch window!" data-launchy-title="My modal window">
    <p>This content will appear in the modal window.</p>
    <a href="#" data-launchy-refocus="post-title">Send me to the article headline!</a>
</div>

<!-- Somewhere else in your page… -->
<h1 id="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!

• Fixes #8.

Launchy! 🚀 v0.7.1

Change log:

• Fixed Safari modal window position bug. Closes #12.
• Adjusted responsive styling.
• Fixed potential bug where aria-hidden or tabindex may accidentally be removed from a DOM element when it shouldn't be removed. 😬
• Fixed up some spelling errors and minor branding adjustments.

Launchy! 🚀 v0.7.0

Change log:

• Added inertElements() method in order to hide all focusable elements not within the modal window content from screen readers. Still in discussion #13.
• Changed dependencies to devDependencies. Closes #7.
• Added aria-haspopup="dialog" to launcher control. Closes #11.
• Added aria-modal attribute. Closes #10.