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.
Vestride_Shuffle/docs/api.html

47 lines
20 KiB
HTML

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-api" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.1.1">
<title data-rh="true">API | Shuffle.js</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://vestride.github.io/Shuffle/img/shuffle-open-graph.png"><meta data-rh="true" name="twitter:image" content="https://vestride.github.io/Shuffle/img/shuffle-open-graph.png"><meta data-rh="true" property="og:url" content="https://vestride.github.io/Shuffle/docs/api"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="API | Shuffle.js"><meta data-rh="true" name="description" content="A list of the methods available to you and what they do."><meta data-rh="true" property="og:description" content="A list of the methods available to you and what they do."><link data-rh="true" rel="icon" href="/Shuffle/img/favicon.png"><link data-rh="true" rel="canonical" href="https://vestride.github.io/Shuffle/docs/api"><link data-rh="true" rel="alternate" href="https://vestride.github.io/Shuffle/docs/api" hreflang="en"><link data-rh="true" rel="alternate" href="https://vestride.github.io/Shuffle/docs/api" hreflang="x-default"><link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-39355642-1","auto"),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script><link rel="stylesheet" href="/Shuffle/assets/css/styles.1588031a.css">
<script src="/Shuffle/assets/js/runtime~main.64e1e2fb.js" defer="defer"></script>
<script src="/Shuffle/assets/js/main.010b286e.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_G6ar" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/Shuffle/"><div class="navbar__logo"><img src="/Shuffle/img/favicon.svg" alt="Shuffle.js Logo" class="themedComponent_DHUr themedComponent--light_DIHH" height="24" width="24"><img src="/Shuffle/img/favicon.svg" alt="Shuffle.js Logo" class="themedComponent_DHUr themedComponent--dark_Bv2M" height="24" width="24"></div><b class="navbar__title text--truncate">Shuffle.js</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/Shuffle/docs/install">Docs</a></div><div class="navbar__items navbar__items--right"><a href="https://www.buymeacoffee.com/glen.cheney" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Buy me a coffee<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_awgD"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/Vestride/Shuffle" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_awgD"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_OLSw colorModeToggle_Hg9V"><button class="clean-btn toggleButton_wYmb toggleButtonDisabled_vaDU" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_Sxwe"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_Yem1"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_bmvg"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_UyTV"><div class="docsWrapper_XLvK"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_z1FD" type="button"></button><div class="docRoot_HciC"><aside class="theme-doc-sidebar-container docSidebarContainer_e5ai"><div class="sidebarViewport_N8x0"><div class="sidebar_vJCc"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_qiME"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/install">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/getting-started">Getting started</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/column-widths">How column widths work</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/configuration">Configuring Shuffle</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/filters">Filters</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/advanced-filters">Advanced filters</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/sorting">Sorting</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/events">Events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/adding-removing">Adding and removing items</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/Shuffle/docs/api">API</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/custom-styles">Custom styles</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/alternatives">Alternatives</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/supported-browsers">Supported browsers</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/faqs">FAQs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/changelog">Changelog (abbreviated)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/demos">List of demos</a></li></ul></nav></div></div></aside><main class="docMainContainer_namt"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_YAwJ"><div class="docItemContainer_Rv5Z"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_zCmv" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/Shuffle/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_JFrk"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">API</span><meta itemprop="position" content="1"></li></ul></nav><div class="tocCollapsible_O_Qc theme-doc-toc-mobile tocMobile_tjDr"><button type="button" class="clean-btn tocCollapsibleButton_htYj">On this page</button></div><div class="theme-doc-markdown markdown"><h1>API</h1>
<p>A list of the methods available to you and what they do.</p>
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="filtercategory-sortobject"><code>filter(category?, sortObject?)</code><a href="#filtercategory-sortobject" class="hash-link" aria-label="Direct link to filtercategory-sortobject" title="Direct link to filtercategory-sortobject"></a></h2>
<p>Filters all the shuffle items and then sorts them.</p>
<ul>
<li><code>category</code> can be a string, array of strings, or a function. Learn more in <a href="/Shuffle/docs/filters">filters</a>.</li>
<li>The <code>sortObject</code> is optional, defaulting to the last-used sort object.</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="sortsortobject"><code>sort(sortObject?)</code><a href="#sortsortobject" class="hash-link" aria-label="Direct link to sortsortobject" title="Direct link to sortsortobject"></a></h2>
<p>Sorts the currently filtered shuffle items.</p>
<p>Calling sort with an empty object will reset the elements to DOM order.</p>
<p>See the <a href="/Shuffle/docs/configuration#sorting-object">SortOptions</a> for the available properties.</p>
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="updateoptions"><code>update(options?)</code><a href="#updateoptions" class="hash-link" aria-label="Direct link to updateoptions" title="Direct link to updateoptions"></a></h2>
<p>Repositions everything. Useful for when dimensions (like the window size) change.</p>
<p>You may provide an options object containing the following properties:</p>
<ul>
<li><code>recalculateSizes</code>: Whether to recalculate column, gutter, and container widths again. Defaults to <code>true</code>.</li>
<li><code>force</code>: By default, <code>update</code> does nothing if the instance is disabled. Setting this to true forces the update to happen regardless.</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="layout"><code>layout()</code><a href="#layout" class="hash-link" aria-label="Direct link to layout" title="Direct link to layout"></a></h2>
<p>Use this instead of <code>update()</code> if you don&#x27;t need the columns and gutters updated. Maybe an image inside <code>shuffle</code> loaded (and now has a height), which means calculations could be off.</p>
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="addnewitems"><code>add(newItems)</code><a href="#addnewitems" class="hash-link" aria-label="Direct link to addnewitems" title="Direct link to addnewitems"></a></h2>
<p>New items have been appended to the shuffle container. <code>newItems</code> is an array of elements.</p>
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="disable"><code>disable()</code><a href="#disable" class="hash-link" aria-label="Direct link to disable" title="Direct link to disable"></a></h2>
<p>Disables Shuffle from updating dimensions and layout on resize.</p>
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="enableisupdatelayout"><code>enable(isUpdateLayout?)</code><a href="#enableisupdatelayout" class="hash-link" aria-label="Direct link to enableisupdatelayout" title="Direct link to enableisupdatelayout"></a></h2>
<p>Enables Shuffle again. If you pass <code>false</code> as the first parameter, you can tell Shuffle to skip the layout recalculation.</p>
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="removeelements"><code>remove(elements)</code><a href="#removeelements" class="hash-link" aria-label="Direct link to removeelements" title="Direct link to removeelements"></a></h2>
<p>Remove one or more shuffle items. <code>elements</code> is an array containing one or more elements.</p>
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="getitembyelementelement"><code>getItemByElement(element)</code><a href="#getitembyelementelement" class="hash-link" aria-label="Direct link to getitembyelementelement" title="Direct link to getitembyelementelement"></a></h2>
<p>Retrieve a <code>ShuffleItem</code> by its element.</p>
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="destroy"><code>destroy()</code><a href="#destroy" class="hash-link" aria-label="Direct link to destroy" title="Direct link to destroy"></a></h2>
<p>Destroys Shuffle, removes events, styles, classes, and references.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/api.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_UohW" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_T23F"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/Shuffle/docs/adding-removing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Adding and removing items</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/Shuffle/docs/custom-styles"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Custom styles</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_TN1Q thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#filtercategory-sortobject" class="table-of-contents__link toc-highlight"><code>filter(category?, sortObject?)</code></a></li><li><a href="#sortsortobject" class="table-of-contents__link toc-highlight"><code>sort(sortObject?)</code></a></li><li><a href="#updateoptions" class="table-of-contents__link toc-highlight"><code>update(options?)</code></a></li><li><a href="#layout" class="table-of-contents__link toc-highlight"><code>layout()</code></a></li><li><a href="#addnewitems" class="table-of-contents__link toc-highlight"><code>add(newItems)</code></a></li><li><a href="#disable" class="table-of-contents__link toc-highlight"><code>disable()</code></a></li><li><a href="#enableisupdatelayout" class="table-of-contents__link toc-highlight"><code>enable(isUpdateLayout?)</code></a></li><li><a href="#removeelements" class="table-of-contents__link toc-highlight"><code>remove(elements)</code></a></li><li><a href="#getitembyelementelement" class="table-of-contents__link toc-highlight"><code>getItemByElement(element)</code></a></li><li><a href="#destroy" class="table-of-contents__link toc-highlight"><code>destroy()</code></a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/Shuffle/docs/install">Installation</a></li><li class="footer__item"><a class="footer__link-item" href="/Shuffle/docs/faqs">FAQs</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://twitter.com/Vestride" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_awgD"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://stackoverflow.com/search?q=shuffle+js" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_awgD"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/Vestride/Shuffle" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_awgD"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="http://codepen.io/pen?template=qrjOpX" target="_blank" rel="noopener noreferrer" class="footer__link-item">CodePen template<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_awgD"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2024 Glen Cheney. Built with Docusaurus.</div></div></div></footer></div>
</body>
</html>