You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
22 lines
1.2 KiB
HTML
22 lines
1.2 KiB
HTML
<h2>Events<a href="#events"></a></h2>
|
|
<p>Shuffle emits an event when a layout happens and when elements are removed. The event names are <code class="language-javascript">Shuffle.EventType.LAYOUT</code> and <code class="language-javascript">Shuffle.EventType.REMOVED</code>.</p>
|
|
<p>Shuffle uses the global <code>CustomEvent</code> to <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent">create events</a>. A polyfill for IE<=11 is bundled with Shuffle.</p>
|
|
|
|
<h3>Get notified when a layout happens</h3>
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">element.addEventListener(Shuffle.EventType.LAYOUT, function () {
|
|
console.log('Things finished moving!');
|
|
});</code></pre>
|
|
</div>
|
|
|
|
|
|
<h3>Do something when an item is removed</h3>
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">element.addEventListener(Shuffle.EventType.REMOVED, function (evt) {
|
|
var detail = evt.detail;
|
|
console.log(this, evt, detail.collection, detail.shuffle);
|
|
});</code></pre>
|
|
</div>
|
|
|
|
<p class="demo-link-container">Check out the <a href="#demo">demo</a> at the top of the page, or its <a href="/js/demos/homepage.js">JavaScript file.</a></p>
|