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/assets/js/9ed00105.405aa924.js

1 line
14 KiB
JavaScript

"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[4],{876:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>f});var i=n(2784);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e,t){if(null==e)return{};var n,i,l=function(e,t){if(null==e)return{};var n,i,l={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var u=i.createContext({}),s=function(e){var t=i.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},d=function(e){var t=s(e.components);return i.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},p=i.forwardRef((function(e,t){var n=e.components,l=e.mdxType,r=e.originalType,u=e.parentName,d=a(e,["components","mdxType","originalType","parentName"]),p=s(n),f=l,c=p["".concat(u,".").concat(f)]||p[f]||m[f]||r;return n?i.createElement(c,o(o({ref:t},d),{},{components:n})):i.createElement(c,o({ref:t},d))}));function f(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=n.length,o=new Array(r);o[0]=p;var a={};for(var u in t)hasOwnProperty.call(t,u)&&(a[u]=t[u]);a.originalType=e,a.mdxType="string"==typeof e?e:l,o[1]=a;for(var s=2;s<r;s++)o[s]=n[s];return i.createElement.apply(null,o)}return i.createElement.apply(null,n)}p.displayName="MDXCreateElement"},7334:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>o,default:()=>m,frontMatter:()=>r,metadata:()=>a,toc:()=>s});var i=n(8427),l=(n(2784),n(876));const r={sidebar_position:4},o="Configuring Shuffle",a={unversionedId:"configuration",id:"configuration",title:"Configuring Shuffle",description:"Here are the options you can change, as well as their defaults. The Shuffle.options property contains all the defaults.",source:"@site/docs/configuration.md",sourceDirName:".",slug:"/configuration",permalink:"/Shuffle/docs/configuration",draft:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/configuration.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"How column widths work",permalink:"/Shuffle/docs/column-widths"},next:{title:"Filters",permalink:"/Shuffle/docs/filters"}},u={},s=[{value:"Options",id:"options",level:2},{value:"<code>buffer</code> number",id:"buffer-number",level:3},{value:"<code>columnThreshold</code> number",id:"columnthreshold-number",level:3},{value:"<code>columnWidth</code> number | (conatinerWidth: number) => number",id:"columnwidth-number--conatinerwidth-number--number",level:3},{value:"<code>delimiter</code> string | null",id:"delimiter-string--null",level:3},{value:"<code>easing</code> string",id:"easing-string",level:3},{value:"<code>filterMode</code> Shuffle.FilterMode",id:"filtermode-shufflefiltermode",level:3},{value:"<code>group</code> string",id:"group-string",level:3},{value:"<code>gutterWidth</code> number | (conatinerWidth: number) => number",id:"gutterwidth-number--conatinerwidth-number--number",level:3},{value:"<code>initialSort</code> SortOptions | null",id:"initialsort-sortoptions--null",level:3},{value:"<code>isCentered</code> boolean",id:"iscentered-boolean",level:3},{value:"<code>isRTL</code> boolean",id:"isrtl-boolean",level:3},{value:"<code>itemSelector</code> string",id:"itemselector-string",level:3},{value:"<code>roundTransforms</code> boolean",id:"roundtransforms-boolean",level:3},{value:"<code>sizer</code> HTMLElement | string | null",id:"sizer-htmlelement--string--null",level:3},{value:"<code>speed</code> number",id:"speed-number",level:3},{value:"<code>staggerAmount</code> number",id:"staggeramount-number",level:3},{value:"<code>staggerAmountMax</code> number",id:"staggeramountmax-number",level:3},{value:"<code>useTransforms</code> boolean",id:"usetransforms-boolean",level:3},{value:"Sorting object",id:"sorting-object",level:2},{value:"<code>by</code> (element: HTMLElement) => any",id:"by-element-htmlelement--any",level:3},{value:"<code>compare</code> (a: Shuffle.ShuffleItem, b: Shuffle.ShuffleItem) => number",id:"compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number",level:3},{value:"<code>key</code> keyof Shuffle.ShuffleItem",id:"key-keyof-shuffleshuffleitem",level:3},{value:"<code>randomize</code> boolean",id:"randomize-boolean",level:3},{value:"<code>reverse</code> boolean",id:"reverse-boolean",level:3}],d={toc:s};function m(e){let{components:t,...n}=e;return(0,l.kt)("wrapper",(0,i.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"configuring-shuffle"},"Configuring Shuffle"),(0,l.kt)("p",null,"Here are the options you can change, as well as their defaults. The ",(0,l.kt)("inlineCode",{parentName:"p"},"Shuffle.options")," property contains all the defaults."),(0,l.kt)("p",null,"No options ",(0,l.kt)("em",{parentName:"p"},"need")," to be specified, but ",(0,l.kt)("inlineCode",{parentName:"p"},"itemSelector")," should be used. Other common options to change are ",(0,l.kt)("inlineCode",{parentName:"p"},"speed")," and ",(0,l.kt)("inlineCode",{parentName:"p"},"sizer"),"."),(0,l.kt)("h2",{id:"options"},"Options"),(0,l.kt)("h3",{id:"buffer-number"},(0,l.kt)("inlineCode",{parentName:"h3"},"buffer")," ","[number]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"0")),(0,l.kt)("p",null,"Useful for percentage based heights when they might not always be exactly the same (in pixels)."),(0,l.kt)("h3",{id:"columnthreshold-number"},(0,l.kt)("inlineCode",{parentName:"h3"},"columnThreshold")," ","[number]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"0.01")),(0,l.kt)("p",null,"Reading the width of elements isn't precise enough and can cause columns to jump between values."),(0,l.kt)("h3",{id:"columnwidth-number--conatinerwidth-number--number"},(0,l.kt)("inlineCode",{parentName:"h3"},"columnWidth")," ","[number | (conatinerWidth: number) => number]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"0")),(0,l.kt)("p",null,"A static number or function that returns a number which determines how wide the columns are (in pixels)."),(0,l.kt)("h3",{id:"delimiter-string--null"},(0,l.kt)("inlineCode",{parentName:"h3"},"delimiter")," ","[string | null]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"null")),(0,l.kt)("p",null,"A static number or function that returns a number which determines how wide the columns are (in pixels)."),(0,l.kt)("h3",{id:"easing-string"},(0,l.kt)("inlineCode",{parentName:"h3"},"easing")," ","[string]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"'cubic-bezier(0.4, 0.0, 0.2, 1)'")),(0,l.kt)("p",null,"CSS easing function to use."),(0,l.kt)("h3",{id:"filtermode-shufflefiltermode"},(0,l.kt)("inlineCode",{parentName:"h3"},"filterMode")," ","[Shuffle.FilterMode]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"Shuffle.FilterMode.ANY")),(0,l.kt)("p",null,"Affects using an array with filter. e.g. ",(0,l.kt)("inlineCode",{parentName:"p"},"filter(['one', 'two'])"),'. 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.'),(0,l.kt)("h3",{id:"group-string"},(0,l.kt)("inlineCode",{parentName:"h3"},"group")," ","[string]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"Shuffle.ALL_ITEMS")," (",(0,l.kt)("inlineCode",{parentName:"p"},'"all"'),")"),(0,l.kt)("p",null,"Initial filter group."),(0,l.kt)("h3",{id:"gutterwidth-number--conatinerwidth-number--number"},(0,l.kt)("inlineCode",{parentName:"h3"},"gutterWidth")," ","[number | (conatinerWidth: number) => number]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"0")),(0,l.kt)("p",null,"A static number or function that determines how wide the gutters between columns are (in pixels)."),(0,l.kt)("h3",{id:"initialsort-sortoptions--null"},(0,l.kt)("inlineCode",{parentName:"h3"},"initialSort")," ","[SortOptions | null]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"null")),(0,l.kt)("p",null,"Shuffle can be initialized with a sort object. It is the same object given to the sort method."),(0,l.kt)("h3",{id:"iscentered-boolean"},(0,l.kt)("inlineCode",{parentName:"h3"},"isCentered")," ","[boolean]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"false")),(0,l.kt)("p",null,"Whether to center grid items in the row with the leftover space."),(0,l.kt)("h3",{id:"isrtl-boolean"},(0,l.kt)("inlineCode",{parentName:"h3"},"isRTL")," ","[boolean]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"false")),(0,l.kt)("p",null,"Whether to align grid items to the right in the row."),(0,l.kt)("h3",{id:"itemselector-string"},(0,l.kt)("inlineCode",{parentName:"h3"},"itemSelector")," ","[string]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"'*'")),(0,l.kt)("p",null,"Query selector to find Shuffle items. e.g. '.picture-item'."),(0,l.kt)("h3",{id:"roundtransforms-boolean"},(0,l.kt)("inlineCode",{parentName:"h3"},"roundTransforms")," ","[boolean]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"true")),(0,l.kt)("p",null,"Whether to round pixel values used in translate(x, y). This usually avoids blurriness."),(0,l.kt)("h3",{id:"sizer-htmlelement--string--null"},(0,l.kt)("inlineCode",{parentName:"h3"},"sizer")," ","[HTMLElement | string | null]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"null")),(0,l.kt)("p",null,"Element or selector string. Use an element to determine the size of columns and gutters."),(0,l.kt)("h3",{id:"speed-number"},(0,l.kt)("inlineCode",{parentName:"h3"},"speed")," ","[number]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"250")),(0,l.kt)("p",null,"Transition/animation speed (milliseconds)."),(0,l.kt)("h3",{id:"staggeramount-number"},(0,l.kt)("inlineCode",{parentName:"h3"},"staggerAmount")," ","[number]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"15")),(0,l.kt)("p",null,"Transition delay offset for each item in milliseconds."),(0,l.kt)("h3",{id:"staggeramountmax-number"},(0,l.kt)("inlineCode",{parentName:"h3"},"staggerAmountMax")," ","[number]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"150")),(0,l.kt)("p",null,"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."),(0,l.kt)("h3",{id:"usetransforms-boolean"},(0,l.kt)("inlineCode",{parentName:"h3"},"useTransforms")," ","[boolean]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"false")),(0,l.kt)("p",null,"Whether to use absolute positioning instead of transforms."),(0,l.kt)("h2",{id:"sorting-object"},"Sorting object"),(0,l.kt)("h3",{id:"by-element-htmlelement--any"},(0,l.kt)("inlineCode",{parentName:"h3"},"by")," ","[(element: HTMLElement) => any]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"null")),(0,l.kt)("p",null,"Sorting function which gives you the element each shuffle item is using by default."),(0,l.kt)("p",null,"Returning ",(0,l.kt)("inlineCode",{parentName:"p"},"undefined")," from the ",(0,l.kt)("inlineCode",{parentName:"p"},"by")," function will reset the order to DOM order."),(0,l.kt)("h3",{id:"compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number"},(0,l.kt)("inlineCode",{parentName:"h3"},"compare")," ","[(a: Shuffle.ShuffleItem, b: Shuffle.ShuffleItem) => number]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"null")),(0,l.kt)("p",null,"Instead of using the simple ",(0,l.kt)("inlineCode",{parentName:"p"},"by")," function, you can use the ",(0,l.kt)("inlineCode",{parentName:"p"},"compare")," function provide a completely custom sorting function."),(0,l.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"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"}))),"tip")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"See ",(0,l.kt)("a",{parentName:"p",href:"/Shuffle/docs/sorting#advanced-sorting"},"Advanced sorting")," for usage."))),(0,l.kt)("h3",{id:"key-keyof-shuffleshuffleitem"},(0,l.kt)("inlineCode",{parentName:"h3"},"key")," ","[keyof Shuffle.ShuffleItem]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"'element'")),(0,l.kt)("p",null,"Determines which property of the ",(0,l.kt)("inlineCode",{parentName:"p"},"ShuffleItem")," instance is passed to the ",(0,l.kt)("inlineCode",{parentName:"p"},"by")," function."),(0,l.kt)("h3",{id:"randomize-boolean"},(0,l.kt)("inlineCode",{parentName:"h3"},"randomize")," ","[boolean]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"false")),(0,l.kt)("p",null,"If true, this will skip the sorting and return a randomized order in the array."),(0,l.kt)("h3",{id:"reverse-boolean"},(0,l.kt)("inlineCode",{parentName:"h3"},"reverse")," ","[boolean]"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"false")),(0,l.kt)("p",null,"Use array.reverse() to reverse the results of your sort."))}m.isMDXComponent=!0}}]);