Moodlejs NPM | npm.io

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.

@infinitebrahmanuniverse/nolb-moo @everything-registry/sub-chunk-2203 @zalastax/nolb-moo

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago