|
|
<!doctype html>
|
|
|
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-configuration" data-has-hydrated="false">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="generator" content="Docusaurus v3.1.1">
|
|
|
<title data-rh="true">Configuring Shuffle | 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/configuration"><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="Configuring Shuffle | Shuffle.js"><meta data-rh="true" name="description" content="Here are the options you can change, as well as their defaults. The Shuffle.options property contains all the defaults."><meta data-rh="true" property="og:description" content="Here are the options you can change, as well as their defaults. The Shuffle.options property contains all the defaults."><link data-rh="true" rel="icon" href="/Shuffle/img/favicon.png"><link data-rh="true" rel="canonical" href="https://vestride.github.io/Shuffle/docs/configuration"><link data-rh="true" rel="alternate" href="https://vestride.github.io/Shuffle/docs/configuration" hreflang="en"><link data-rh="true" rel="alternate" href="https://vestride.github.io/Shuffle/docs/configuration" 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 menu__link--active" aria-current="page" 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" 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">Configuring Shuffle</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>Configuring Shuffle</h1>
|
|
|
<p>Here are the options you can change, as well as their defaults. The <code>Shuffle.options</code> property contains all the defaults.</p>
|
|
|
<p>No options <em>need</em> to be specified, but <code>itemSelector</code> should be used. Other common options to change are <code>speed</code> and <code>sizer</code>.</p>
|
|
|
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="options">Options<a href="#options" class="hash-link" aria-label="Direct link to Options" title="Direct link to Options"></a></h2>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="buffer-number"><code>buffer</code> [number]<a href="#buffer-number" class="hash-link" aria-label="Direct link to buffer-number" title="Direct link to buffer-number"></a></h3>
|
|
|
<p>Default: <code>0</code></p>
|
|
|
<p>Useful for percentage based heights when they might not always be exactly the same (in pixels).</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="columnthreshold-number"><code>columnThreshold</code> [number]<a href="#columnthreshold-number" class="hash-link" aria-label="Direct link to columnthreshold-number" title="Direct link to columnthreshold-number"></a></h3>
|
|
|
<p>Default: <code>0.01</code></p>
|
|
|
<p>Reading the width of elements isn't precise enough and can cause columns to jump between values.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="columnwidth-number--containerwidth-number--number"><code>columnWidth</code> [number | (containerWidth: number) => number]<a href="#columnwidth-number--containerwidth-number--number" class="hash-link" aria-label="Direct link to columnwidth-number--containerwidth-number--number" title="Direct link to columnwidth-number--containerwidth-number--number"></a></h3>
|
|
|
<p>Default: <code>0</code></p>
|
|
|
<p>A static number or function that returns a number which determines how wide the columns are (in pixels).</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="delimiter-string--null"><code>delimiter</code> [string | null]<a href="#delimiter-string--null" class="hash-link" aria-label="Direct link to delimiter-string--null" title="Direct link to delimiter-string--null"></a></h3>
|
|
|
<p>Default: <code>null</code></p>
|
|
|
<p>Set a delimiter to parse the <code>data-groups</code> attribute with using <code>String.prototype.split()</code>, instead of using <code>JSON.parse()</code>. For example, if your HTML was <code>data-groups="nature,city"</code>, you could set <code>delimiter: ','</code>.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="easing-string"><code>easing</code> [string]<a href="#easing-string" class="hash-link" aria-label="Direct link to easing-string" title="Direct link to easing-string"></a></h3>
|
|
|
<p>Default: <code>'cubic-bezier(0.4, 0.0, 0.2, 1)'</code></p>
|
|
|
<p>CSS easing function to use.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="filtermode-shufflefiltermode"><code>filterMode</code> [Shuffle.FilterMode]<a href="#filtermode-shufflefiltermode" class="hash-link" aria-label="Direct link to filtermode-shufflefiltermode" title="Direct link to filtermode-shufflefiltermode"></a></h3>
|
|
|
<p>Default: <code>Shuffle.FilterMode.ANY</code></p>
|
|
|
<p>Affects using an array with filter. e.g. <code>filter(['one', 'two'])</code>. With "any", the element passes the test if any of its groups are in the array. With "all", the element only passes if all groups are in the array.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="group-string"><code>group</code> [string]<a href="#group-string" class="hash-link" aria-label="Direct link to group-string" title="Direct link to group-string"></a></h3>
|
|
|
<p>Default: <code>Shuffle.ALL_ITEMS</code> (<code>"all"</code>)</p>
|
|
|
<p>Initial filter group.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="gutterwidth-number--containerwidth-number--number"><code>gutterWidth</code> [number | (containerWidth: number) => number]<a href="#gutterwidth-number--containerwidth-number--number" class="hash-link" aria-label="Direct link to gutterwidth-number--containerwidth-number--number" title="Direct link to gutterwidth-number--containerwidth-number--number"></a></h3>
|
|
|
<p>Default: <code>0</code></p>
|
|
|
<p>A static number or function that determines how wide the gutters between columns are (in pixels).</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="initialsort-sortoptions--null"><code>initialSort</code> [SortOptions | null]<a href="#initialsort-sortoptions--null" class="hash-link" aria-label="Direct link to initialsort-sortoptions--null" title="Direct link to initialsort-sortoptions--null"></a></h3>
|
|
|
<p>Default: <code>null</code></p>
|
|
|
<p>Shuffle can be initialized with a sort object. It is the same object given to the sort method.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="iscentered-boolean"><code>isCentered</code> [boolean]<a href="#iscentered-boolean" class="hash-link" aria-label="Direct link to iscentered-boolean" title="Direct link to iscentered-boolean"></a></h3>
|
|
|
<p>Default: <code>false</code></p>
|
|
|
<p>Whether to center grid items in the row with the leftover space.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="isrtl-boolean"><code>isRTL</code> [boolean]<a href="#isrtl-boolean" class="hash-link" aria-label="Direct link to isrtl-boolean" title="Direct link to isrtl-boolean"></a></h3>
|
|
|
<p>Default: <code>false</code></p>
|
|
|
<p>Whether to align grid items to the right in the row.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="itemselector-string"><code>itemSelector</code> [string]<a href="#itemselector-string" class="hash-link" aria-label="Direct link to itemselector-string" title="Direct link to itemselector-string"></a></h3>
|
|
|
<p>Default: <code>'*'</code></p>
|
|
|
<p>Query selector to find Shuffle items. e.g. '.picture-item'.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="roundtransforms-boolean"><code>roundTransforms</code> [boolean]<a href="#roundtransforms-boolean" class="hash-link" aria-label="Direct link to roundtransforms-boolean" title="Direct link to roundtransforms-boolean"></a></h3>
|
|
|
<p>Default: <code>true</code></p>
|
|
|
<p>Whether to round pixel values used in translate(x, y). This usually avoids blurriness.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="sizer-htmlelement--string--null"><code>sizer</code> [HTMLElement | string | null]<a href="#sizer-htmlelement--string--null" class="hash-link" aria-label="Direct link to sizer-htmlelement--string--null" title="Direct link to sizer-htmlelement--string--null"></a></h3>
|
|
|
<p>Default: <code>null</code></p>
|
|
|
<p>Element or selector string. Use an element to determine the size of columns and gutters.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="speed-number"><code>speed</code> [number]<a href="#speed-number" class="hash-link" aria-label="Direct link to speed-number" title="Direct link to speed-number"></a></h3>
|
|
|
<p>Default: <code>250</code></p>
|
|
|
<p>Transition/animation speed (milliseconds).</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="staggeramount-number"><code>staggerAmount</code> [number]<a href="#staggeramount-number" class="hash-link" aria-label="Direct link to staggeramount-number" title="Direct link to staggeramount-number"></a></h3>
|
|
|
<p>Default: <code>15</code></p>
|
|
|
<p>Transition delay offset for each item in milliseconds.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="staggeramountmax-number"><code>staggerAmountMax</code> [number]<a href="#staggeramountmax-number" class="hash-link" aria-label="Direct link to staggeramountmax-number" title="Direct link to staggeramountmax-number"></a></h3>
|
|
|
<p>Default: <code>150</code></p>
|
|
|
<p>Maximum stagger delay in milliseconds. This caps the stagger amount so that it does not exceed the given value. Since the transition delay is incremented for each item in the grid, this is useful for large grids of items.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="usetransforms-boolean"><code>useTransforms</code> [boolean]<a href="#usetransforms-boolean" class="hash-link" aria-label="Direct link to usetransforms-boolean" title="Direct link to usetransforms-boolean"></a></h3>
|
|
|
<p>Default: <code>false</code></p>
|
|
|
<p>Whether to use absolute positioning instead of transforms.</p>
|
|
|
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="sorting-object">Sorting object<a href="#sorting-object" class="hash-link" aria-label="Direct link to Sorting object" title="Direct link to Sorting object"></a></h2>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="by-element-htmlelement--any"><code>by</code> [(element: HTMLElement) => any]<a href="#by-element-htmlelement--any" class="hash-link" aria-label="Direct link to by-element-htmlelement--any" title="Direct link to by-element-htmlelement--any"></a></h3>
|
|
|
<p>Default: <code>null</code></p>
|
|
|
<p>Sorting function which gives you the element each shuffle item is using by default.</p>
|
|
|
<p>Returning <code>undefined</code> from the <code>by</code> function will reset the order to DOM order.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number"><code>compare</code> [(a: Shuffle.ShuffleItem, b: Shuffle.ShuffleItem) => number]<a href="#compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number" class="hash-link" aria-label="Direct link to compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number" title="Direct link to compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number"></a></h3>
|
|
|
<p>Default: <code>null</code></p>
|
|
|
<p>Instead of using the simple <code>by</code> function, you can use the <code>compare</code> function provide a completely custom sorting function.</p>
|
|
|
<div class="theme-admonition theme-admonition-tip admonition_IZjC alert alert--success"><div class="admonitionHeading_uVvU"><span class="admonitionIcon_HiR3"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_bl22"><p>See <a href="/Shuffle/docs/sorting#advanced-sorting">Advanced sorting</a> for usage.</p></div></div>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="key-keyof-shuffleshuffleitem"><code>key</code> [keyof Shuffle.ShuffleItem]<a href="#key-keyof-shuffleshuffleitem" class="hash-link" aria-label="Direct link to key-keyof-shuffleshuffleitem" title="Direct link to key-keyof-shuffleshuffleitem"></a></h3>
|
|
|
<p>Default: <code>'element'</code></p>
|
|
|
<p>Determines which property of the <code>ShuffleItem</code> instance is passed to the <code>by</code> function.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="randomize-boolean"><code>randomize</code> [boolean]<a href="#randomize-boolean" class="hash-link" aria-label="Direct link to randomize-boolean" title="Direct link to randomize-boolean"></a></h3>
|
|
|
<p>Default: <code>false</code></p>
|
|
|
<p>If true, this will skip the sorting and return a randomized order in the array.</p>
|
|
|
<h3 class="anchor anchorWithStickyNavbar_fF9Z" id="reverse-boolean"><code>reverse</code> [boolean]<a href="#reverse-boolean" class="hash-link" aria-label="Direct link to reverse-boolean" title="Direct link to reverse-boolean"></a></h3>
|
|
|
<p>Default: <code>false</code></p>
|
|
|
<p>Use array.reverse() to reverse the results of your sort.</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/configuration.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/column-widths"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">How column widths work</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/Shuffle/docs/filters"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Filters</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="#options" class="table-of-contents__link toc-highlight">Options</a><ul><li><a href="#buffer-number" class="table-of-contents__link toc-highlight"><code>buffer</code> [number]</a></li><li><a href="#columnthreshold-number" class="table-of-contents__link toc-highlight"><code>columnThreshold</code> [number]</a></li><li><a href="#columnwidth-number--containerwidth-number--number" class="table-of-contents__link toc-highlight"><code>columnWidth</code> [number | (containerWidth: number) => number]</a></li><li><a href="#delimiter-string--null" class="table-of-contents__link toc-highlight"><code>delimiter</code> [string | null]</a></li><li><a href="#easing-string" class="table-of-contents__link toc-highlight"><code>easing</code> [string]</a></li><li><a href="#filtermode-shufflefiltermode" class="table-of-contents__link toc-highlight"><code>filterMode</code> [Shuffle.FilterMode]</a></li><li><a href="#group-string" class="table-of-contents__link toc-highlight"><code>group</code> [string]</a></li><li><a href="#gutterwidth-number--containerwidth-number--number" class="table-of-contents__link toc-highlight"><code>gutterWidth</code> [number | (containerWidth: number) => number]</a></li><li><a href="#initialsort-sortoptions--null" class="table-of-contents__link toc-highlight"><code>initialSort</code> [SortOptions | null]</a></li><li><a href="#iscentered-boolean" class="table-of-contents__link toc-highlight"><code>isCentered</code> [boolean]</a></li><li><a href="#isrtl-boolean" class="table-of-contents__link toc-highlight"><code>isRTL</code> [boolean]</a></li><li><a href="#itemselector-string" class="table-of-contents__link toc-highlight"><code>itemSelector</code> [string]</a></li><li><a href="#roundtransforms-boolean" class="table-of-contents__link toc-highlight"><code>roundTransforms</code> [boolean]</a></li><li><a href="#sizer-htmlelement--string--null" class="table-of-contents__link toc-highlight"><code>sizer</code> [HTMLElement | string | null]</a></li><li><a href="#speed-number" class="table-of-contents__link toc-highlight"><code>speed</code> [number]</a></li><li><a href="#staggeramount-number" class="table-of-contents__link toc-highlight"><code>staggerAmount</code> [number]</a></li><li><a href="#staggeramountmax-number" class="table-of-contents__link toc-highlight"><code>staggerAmountMax</code> [number]</a></li><li><a href="#usetransforms-boolean" class="table-of-contents__link toc-highlight"><code>useTransforms</code> [boolean]</a></li></ul></li><li><a href="#sorting-object" class="table-of-contents__link toc-highlight">Sorting object</a><ul><li><a href="#by-element-htmlelement--any" class="table-of-contents__link toc-highlight"><code>by</code> [(element: HTMLElement) => any]</a></li><li><a href="#compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number" class="table-of-contents__link toc-highlight"><code>compare</code> [(a: Shuffle.ShuffleItem, b: Shuffle.ShuffleItem) => number]</a></li><li><a href="#key-keyof-shuffleshuffleitem" class="table-of-contents__link toc-highlight"><code>key</code> [keyof Shuffle.ShuffleItem]</a></li><li><a href="#randomize-boolean" class="table-of-contents__link toc-highlight"><code>randomize</code> [boolean]</a></li><li><a href="#reverse-boolean" class="table-of-contents__link toc-highlight"><code>reverse</code> [boolean]</a></li></ul></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> |