wtc-modal-view
Version:
A simple, unopinionated modal class.
342 lines (303 loc) • 7.04 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Home</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Home</h1>
<h3> </h3>
<section>
<article><h1><a href="https://github.com/wethegit/wtc-modal-view#readme">wtc-modal-view</a> <em>3.4.0</em></h1>
<blockquote>
<p>A simple, unopinionated modal class.</p>
</blockquote>
<h3>src/wtc-modal-view.js</h3>
<h4>new Modal()</h4>
<p>A Modal class which can display programatically-generated content, or pull in content from an existing DOM node.</p>
<h5>Examples</h5>
<pre class="prettyprint source lang-javascript"><code>const myModal = new Modal();
const triggerButton = document.querySelector('trigger');
myModal.optionalClass = "modal--myModal";
myModal.content = '<p>Some sample content!</p>';
myModal.focusOnClose = triggerButton;
triggerButton.addEventListener('click', () => {
myModal.open();
});
</code></pre>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<h4>Modal.close()</h4>
<p>Closes modal.</p>
<p>If <code>onCloseStart</code>is defined that is called and waits for the callback.
Otherwise it removes content and optional class,
and shifts user focus back to triggering element, if specified.</p>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<h4>open()</h4>
<p>Opens modal, adds content and optional CSS class</p>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<h4>focusFirstElement()</h4>
<p>Shifts focus to the first element inside the content</p>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<h4>focusLastElement()</h4>
<p>Shifts focus to the last element inside the content</p>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<h4>focusOnClose()</h4>
<p>Gets the element that will be focused when the modal closes</p>
<h5>Returns</h5>
<ul>
<li><code>HTMLElement</code></li>
</ul>
<h4>focusOnClose(element)</h4>
<p>Sets the element that will be focused when the modal closes.<br>
Setter. Usage: <code>modalInstance.focusOnClose = myElement</code></p>
<h5>Parameters</h5>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>element</td>
<td><code>HTMLElement</code></td>
<td>Must be a focusable element</td>
<td> </td>
</tr>
</tbody>
</table>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<h4>onOpen()</h4>
<p>Gets the function that is called when the modal opens</p>
<h5>Returns</h5>
<ul>
<li><code>Function</code></li>
</ul>
<h4>onOpen(callback)</h4>
<p>Sets the function that is called when the modal opens.
The function gets called with the modals DOM element.
Setter. Usage: <code>modalInstance.onOpen = (modalElement) => {}</code></p>
<h5>Parameters</h5>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>callback</td>
<td><code>Function</code></td>
<td></td>
<td> </td>
</tr>
</tbody>
</table>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<h4>onClose()</h4>
<p>Get the function that is called when the modal closes</p>
<h5>Returns</h5>
<ul>
<li><code>Function</code></li>
</ul>
<h4>onClose(callback)</h4>
<p>Sets the function that is called when the modal closes.<br>
Setter. Usage: <code>modalInstance.onClose = myFunction</code></p>
<h5>Parameters</h5>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>callback</td>
<td><code>Function</code></td>
<td></td>
<td> </td>
</tr>
</tbody>
</table>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<h4>onCloseStart()</h4>
<p>Get the function that is called just before the modal closes</p>
<h5>Returns</h5>
<ul>
<li><code>Function</code></li>
</ul>
<h4>onCloseStart(callback)</h4>
<p>Sets the function that is called just before the modal closes.
If this is set, when modalInstance.close()` is called it will
run the set function with a the modal DOM element and a callback.
It will then wait for that callback to be run before completing
the close function and calling onClose.</p>
<p>Setter. Usage:
`modalInstance.onCloseStart = (modalElement, cb) => {
// do some animation with modalElement
cb();<br>
}</p>
<p>modalInstance.close();
`</p>
<h5>Parameters</h5>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>callback</td>
<td><code>Function</code></td>
<td></td>
<td> </td>
</tr>
</tbody>
</table>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<h4>optionalClass(className)</h4>
<p>Sets an optional class name on the modal for custom styling.<br>
Setter. Usage: <code>modalInstance.optionalClass = "modal--myclass"</code></p>
<h5>Parameters</h5>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td><code>String</code> <code>Array</code></td>
<td></td>
<td> </td>
</tr>
</tbody>
</table>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<h4>optionalClass()</h4>
<p>Gets the optional class name</p>
<h5>Returns</h5>
<ul>
<li><code>String</code> <code>Array</code> optionalClass</li>
</ul>
<h4>closeButtonContent(content)</h4>
<p>Sets the content of the close button, useful for localizing.<br>
Setter. Usage: <code>modalInstance.closeButtonContent = "<String of HTML!>"</code></p>
<h5>Parameters</h5>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td>
<td><code>string</code> <code>HTMLElement</code></td>
<td></td>
<td> </td>
</tr>
</tbody>
</table>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<h4>content(content)</h4>
<p>Sets the content of the modal.<br>
Setter. Usage: <code>modalInstance.content = MyHTMLElement</code></p>
<h5>Parameters</h5>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td>
<td><code>string</code> <code>HTMLElement</code></td>
<td></td>
<td> </td>
</tr>
</tbody>
</table>
<h5>Returns</h5>
<ul>
<li><code>Void</code></li>
</ul>
<p><em>Documentation generated with <a href="https://github.com/neogeek/doxdox">doxdox</a>.</em></p></article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Modal.html">Modal</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon Feb 07 2022 21:52:18 GMT+0000 (Coordinated Universal Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>