❤
npm
Sign UpSign In

moodlejs

1.0.6 • Public • Published

Travis Build Status

MoodleJS

An accessible modal that follows the WebAim standards.

Features

  • Uses a keyboard trap when user has selected open modal
  • When you get to the last focusable element it will go back to the first
  • When you shift + tab and you're on the first focusable element you will go to the last
  • Uses aria-labelledby & aria-describedby for title and text fields.
  • Sets focus on first focuable element when opened.
  • Resets focus on the previous element when closing the modal.

Usage

This is the basic example for having multiple products working with one modal.

<!doctype html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello World Heading.</h1>
        <a href="" data-product data-modal-button="">
            <h2 data-product-heading>Product One</h2>
            <p data-product-detail>Product one detail</p>
        </a>
        <a href="" data-product data-modal-button="">
            <h2 data-product-heading>Product Two</h2>
            <p data-product-detail>Product Two detail</p>
        </a>
 
        <div class="modal" data-modal="" aria-labelledby="modalTitle" aria-describedby="modalText" role="dialog" tabindex="-1">
            <h2 id="modalTitle" data-modal-title=""></h2>
            <p id="modalText" data-modal-intro=""></p>
            <div data-modal-body=""></div>
            <button data-modal-close="">Close</button>
        </div>
        <div class="modal__overlay" data-modal-overlay></div>
    </body>
</html>
 

CSS

Here is just the baseline to having the modal sit infront of the content & the overlay to sit behind.

.modal__overlay {
    background: rgba(0, 0, 0, 0.5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
}
 
.modal--open .modal,
.modal--open .modal__overlay {
    display: block;
}
 
.modal {
    background: white;
    border-radius: 5px;
    display: none;
    left: 50%;
    padding: 20px;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    z-index: 3;
}

JS

To create the modal all the have to do is use the new Moodle(); and the modal will handle the rest. For example:

(function() {
    var modal = new Moodle();
    var buttons = document.querySelectorAll('[data-modal-button]');
 
    function showProductModal(event) {
        event.preventDefault();
        var currentElement = event.currentTarget;
        var heading = currentElement.querySelectorAll('[data-product-heading]')[0].textContent;
        var detail = currentElement.querySelectorAll('[data-product-detail]')[0].textContent;
        var html = '';
 
        modal.show(heading, detail, html);
    }
 
    buttons[1].addEventListener('click', showProductModal, false);
    buttons[2].addEventListener('click', showProductModal, false);
}());

Using with webpack

If you are using the module with webpack or some other bundler then you can do the following:

npm i moodlejs --save

Then in your js file you will have to require the module.

(function() {
 
var modal = require('moodlejs');
 
// Products example
 
var buttons = document.querySelectorAll('[data-modal-button]');
 
function showProductModal(event) {
    event.preventDefault();
    var currentElement = event.currentTarget;
    var heading = currentElement.querySelectorAll('[data-product-heading]')[0].textContent;
    var detail = currentElement.querySelectorAll('[data-product-detail]')[0].textContent;
    var html = '';
 
    modal.show(heading, detail, html);
}
 
buttons[1].addEventListener('click', showProductModal, false);
buttons[2].addEventListener('click', showProductModal, false);
}());

Contributing

Feel free to suggest any ideas or improvments to the plugin. If you have any issues using it feel free to submit an issue.

Readme

Keywords

none

Package Sidebar

Install

npm i moodlejs

Repository

github.com/code-mattclaffey/moodlejs

Homepage

github.com/code-mattclaffey/moodlejs#readme

Weekly Downloads

2

Version

1.0.6

License

ISC

Last publish

Collaborators

  • matthewclaffey
Try on RunKit
Report malware