wtc-modal-view
Version:
A simple, unopinionated modal class.
1,371 lines (248 loc) • 14.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: Modal</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">Class: Modal</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>Modal<span class="signature">()</span><span class="type-signature"></span></h2>
<div class="class-description"><p>A Modal class which can display programatically-generated content, or pull in content from an existing DOM node.</p></div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="Modal"><span class="type-signature"></span>new Modal<span class="signature">()</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line17">line 17</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><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>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id=".hash"><span class="type-signature">(static) </span>hash<span class="type-signature"></span></h4>
<div class="description">
<p>Get current url hash</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line148">line 148</a>
</li></ul></dd>
</dl>
<h4 class="name" id="closeButtonContent"><span class="type-signature"></span>closeButtonContent<span class="type-signature"></span></h4>
<div class="description">
<p>Sets the content of the close button, useful for localizing.<br>
Setter. Usage: <code>modalInstance.closeButtonContent = "<String of HTML!>"</code></p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line361">line 361</a>
</li></ul></dd>
</dl>
<h4 class="name" id="content"><span class="type-signature"></span>content<span class="type-signature"></span></h4>
<div class="description">
<p>Sets the content of the modal.<br>
Setter. Usage: <code>modalInstance.content = MyHTMLElement</code></p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line382">line 382</a>
</li></ul></dd>
</dl>
<h4 class="name" id="focusOnClose"><span class="type-signature"></span>focusOnClose<span class="type-signature"></span></h4>
<div class="description">
<p>Gets the element that will be focused when the modal closes</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line240">line 240</a>
</li></ul></dd>
</dl>
<h4 class="name" id="focusOnClose"><span class="type-signature"></span>focusOnClose<span class="type-signature"></span></h4>
<div class="description">
<p>Sets the element that will be focused when the modal closes.<br>
Setter. Usage: <code>modalInstance.focusOnClose = myElement</code></p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line250">line 250</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onClose"><span class="type-signature"></span>onClose<span class="type-signature"></span></h4>
<div class="description">
<p>Get the function that is called when the modal closes</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line287">line 287</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onClose"><span class="type-signature"></span>onClose<span class="type-signature"></span></h4>
<div class="description">
<p>Sets the function that is called when the modal closes.<br>
Setter. Usage: <code>modalInstance.onClose = myFunction</code></p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line297">line 297</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onCloseStart"><span class="type-signature"></span>onCloseStart<span class="type-signature"></span></h4>
<div class="description">
<p>Get the function that is called just before the modal closes</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line307">line 307</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onCloseStart"><span class="type-signature"></span>onCloseStart<span class="type-signature"></span></h4>
<div class="description">
<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>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line329">line 329</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onOpen"><span class="type-signature"></span>onOpen<span class="type-signature"></span></h4>
<div class="description">
<p>Gets the function that is called when the modal opens</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line266">line 266</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onOpen"><span class="type-signature"></span>onOpen<span class="type-signature"></span></h4>
<div class="description">
<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>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line277">line 277</a>
</li></ul></dd>
</dl>
<h4 class="name" id="optionalClass"><span class="type-signature"></span>optionalClass<span class="type-signature"></span></h4>
<div class="description">
<p>Sets an optional class name on the modal for custom styling.<br>
Setter. Usage: <code>modalInstance.optionalClass = "modal--myclass"</code></p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line340">line 340</a>
</li></ul></dd>
</dl>
<h4 class="name" id="optionalClass"><span class="type-signature"></span>optionalClass<span class="type-signature"></span></h4>
<div class="description">
<p>Gets the optional class name</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line351">line 351</a>
</li></ul></dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="close"><span class="type-signature"></span>close<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<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>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line90">line 90</a>
</li></ul></dd>
</dl>
<h4 class="name" id="focusFirstElement"><span class="type-signature"></span>focusFirstElement<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Shifts focus to the first element inside the content</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line205">line 205</a>
</li></ul></dd>
</dl>
<h4 class="name" id="focusLastElement"><span class="type-signature"></span>focusLastElement<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Shifts focus to the last element inside the content</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line221">line 221</a>
</li></ul></dd>
</dl>
<h4 class="name" id="open"><span class="type-signature"></span>open<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Opens modal, adds content and optional CSS class</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="wtc-modal-view.js.html">wtc-modal-view.js</a>, <a href="wtc-modal-view.js.html#line160">line 160</a>
</li></ul></dd>
</dl>
</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>