deploy: b675ea56ca
github-actions[bot]
2 months ago
parent
825bb68d75
commit
b4844c37dd
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[189],{4218:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>d,contentTitle:()=>i,default:()=>l,frontMatter:()=>n,metadata:()=>u,toc:()=>p});var r=t(1085),o=t(1184);const n={sidebar_position:13},i="Supported browsers",u={id:"supported-browsers",title:"Supported browsers",description:"- Chrome",source:"@site/docs/supported-browsers.md",sourceDirName:".",slug:"/supported-browsers",permalink:"/Shuffle/docs/supported-browsers",draft:!1,unlisted:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/supported-browsers.md",tags:[],version:"current",sidebarPosition:13,frontMatter:{sidebar_position:13},sidebar:"tutorialSidebar",previous:{title:"Alternatives",permalink:"/Shuffle/docs/alternatives"},next:{title:"FAQs",permalink:"/Shuffle/docs/faqs"}},d={},p=[];function c(e){const s={h1:"h1",li:"li",p:"p",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.h1,{id:"supported-browsers",children:"Supported browsers"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Chrome"}),"\n",(0,r.jsx)(s.li,{children:"Firefox"}),"\n",(0,r.jsx)(s.li,{children:"Edge"}),"\n",(0,r.jsx)(s.li,{children:"Safari"}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"If you still need to support IE 11, you can use Shuffle v5. Did you know Microsoft 365 apps and services stopped supporting IE 11 in August 2021?"})]})}function l(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1184:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>u});var r=t(4041);const o={},n=r.createContext(o);function i(e){const s=r.useContext(n);return r.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function u(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),r.createElement(n.Provider,{value:s},e.children)}}}]);
|
||||
@ -1 +0,0 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[168],{3636:(e,r,t)=>{t.d(r,{Iu:()=>l,yg:()=>y});var n=t(5668);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function a(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?s(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function i(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},s=Object.keys(e);for(n=0;n<s.length;n++)t=s[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)t=s[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var p=n.createContext({}),u=function(e){var r=n.useContext(p),t=r;return e&&(t="function"==typeof e?e(r):a(a({},r),e)),t},l=function(e){var r=u(e.components);return n.createElement(p.Provider,{value:r},e.children)},c="mdxType",f={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},d=n.forwardRef((function(e,r){var t=e.components,o=e.mdxType,s=e.originalType,p=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),c=u(t),d=o,y=c["".concat(p,".").concat(d)]||c[d]||f[d]||s;return t?n.createElement(y,a(a({ref:r},l),{},{components:t})):n.createElement(y,a({ref:r},l))}));function y(e,r){var t=arguments,o=r&&r.mdxType;if("string"==typeof e||o){var s=t.length,a=new Array(s);a[0]=d;var i={};for(var p in r)hasOwnProperty.call(r,p)&&(i[p]=r[p]);i.originalType=e,i[c]="string"==typeof e?e:o,a[1]=i;for(var u=2;u<s;u++)a[u]=t[u];return n.createElement.apply(null,a)}return n.createElement.apply(null,t)}d.displayName="MDXCreateElement"},7528:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>p,contentTitle:()=>a,default:()=>f,frontMatter:()=>s,metadata:()=>i,toc:()=>u});var n=t(4359),o=(t(5668),t(3636));const s={sidebar_position:13},a="Supported browsers",i={unversionedId:"supported-browsers",id:"supported-browsers",title:"Supported browsers",description:"- Chrome",source:"@site/docs/supported-browsers.md",sourceDirName:".",slug:"/supported-browsers",permalink:"/Shuffle/docs/supported-browsers",draft:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/supported-browsers.md",tags:[],version:"current",sidebarPosition:13,frontMatter:{sidebar_position:13},sidebar:"tutorialSidebar",previous:{title:"Alternatives",permalink:"/Shuffle/docs/alternatives"},next:{title:"FAQs",permalink:"/Shuffle/docs/faqs"}},p={},u=[],l={toc:u},c="wrapper";function f(e){let{components:r,...t}=e;return(0,o.yg)(c,(0,n.c)({},l,t,{components:r,mdxType:"MDXLayout"}),(0,o.yg)("h1",{id:"supported-browsers"},"Supported browsers"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Chrome"),(0,o.yg)("li",{parentName:"ul"},"Firefox"),(0,o.yg)("li",{parentName:"ul"},"Edge"),(0,o.yg)("li",{parentName:"ul"},"Safari")),(0,o.yg)("p",null,"If you still need to support IE 11, you can use Shuffle v5. Did you know Microsoft 365 apps and services stopped supporting IE 11 in August 2021?"))}f.isMDXComponent=!0}}]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[816],{590:s=>{s.exports=JSON.parse('{"name":"docusaurus-plugin-content-pages","id":"default"}')}}]);
|
||||
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[806],{4061:s=>{s.exports=JSON.parse('{"name":"docusaurus-plugin-content-pages","id":"default"}')}}]);
|
||||
@ -1 +0,0 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[272],{2272:(e,t,a)=>{a.r(t),a.d(t,{default:()=>c});var l=a(5668),n=a(5976),o=a(9872),r=a(4592);function c(){return l.createElement(l.Fragment,null,l.createElement(o.U7,{title:(0,n.G)({id:"theme.NotFound.title",message:"Page Not Found"})}),l.createElement(r.c,null,l.createElement("main",{className:"container margin-vert--xl"},l.createElement("div",{className:"row"},l.createElement("div",{className:"col col--6 col--offset-3"},l.createElement("h1",{className:"hero__title"},l.createElement(n.c,{id:"theme.NotFound.title",description:"The title of the 404 page"},"Page Not Found")),l.createElement("p",null,l.createElement(n.c,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page"},"We could not find what you were looking for.")),l.createElement("p",null,l.createElement(n.c,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page"},"Please contact the owner of the site that linked you to the original URL and let them know their link is broken.")))))))}}}]);
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[699],{92:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>h});var i=t(1085),s=t(1184);const o={sidebar_position:3},l="How column widths work",r={id:"column-widths",title:"How column widths work",description:"There are 4 options for defining the width of the columns:",source:"@site/docs/column-widths.md",sourceDirName:".",slug:"/column-widths",permalink:"/Shuffle/docs/column-widths",draft:!1,unlisted:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/column-widths.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Getting started",permalink:"/Shuffle/docs/getting-started"},next:{title:"Configuring Shuffle",permalink:"/Shuffle/docs/configuration"}},c={},h=[];function d(e){const n={code:"code",h1:"h1",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"how-column-widths-work",children:"How column widths work"}),"\n",(0,i.jsx)(n.p,{children:"There are 4 options for defining the width of the columns:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["Use a ",(0,i.jsx)(n.strong,{children:"sizer"})," element. This is the easiest way to specify column and gutter widths. Add the sizer element and make it 1 column wide. Shuffle will measure the ",(0,i.jsx)(n.code,{children:"width"})," and ",(0,i.jsx)(n.code,{children:"margin-left"})," of this ",(0,i.jsx)(n.code,{children:"sizer"})," element each time the grid resizes. This is awesome for responsive or fluid grids where the width of a column is a percentage."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const shuffleInstance = new Shuffle(element, {\n itemSelector: '.picture-item',\n // highlight-next-line\n sizer: '.js-shuffle-sizer',\n});\n"})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["Use a ",(0,i.jsx)(n.strong,{children:"function"}),". When a function is used, its first parameter will be the width of the shuffle element. You need to return the column width for shuffle to use (in pixels)."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const shuffleInstance = new Shuffle(element, {\n itemSelector: '.picture-item',\n // highlight-next-line\n columnWidth: (containerWidth) => 0.18 * containerWidth,\n});\n"})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["A ",(0,i.jsx)(n.strong,{children:"number"}),". This will explicitly set the column width to your number (in pixels)."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const shuffleInstance = new Shuffle(element, {\n itemSelector: '.picture-item',\n // highlight-next-line\n columnWidth: 200,\n});\n"})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"By default, shuffle will use the width of the first item to calculate the column width."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const shuffleInstance = new Shuffle(element, {\n itemSelector: '.picture-item',\n});\n"})}),"\n"]}),"\n"]})]})}function u(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},1184:(e,n,t)=>{t.d(n,{R:()=>l,x:()=>r});var i=t(4041);const s={},o=i.createContext(s);function l(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]);
|
||||
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[712],{3026:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>o});var i=n(1085),s=n(1184);const r={sidebar_position:6},l="Advanced filters",a={id:"advanced-filters",title:"Advanced filters",description:"By passing a function to filter, you can fully customize filtering items. Shuffle will iterate over each item and give your function the element and the shuffle instance. Return true to keep the element or false to hide it.",source:"@site/docs/advanced-filters.md",sourceDirName:".",slug:"/advanced-filters",permalink:"/Shuffle/docs/advanced-filters",draft:!1,unlisted:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/advanced-filters.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Filters",permalink:"/Shuffle/docs/filters"},next:{title:"Sorting",permalink:"/Shuffle/docs/sorting"}},c={},o=[{value:"Example",id:"example",level:2},{value:"Searching",id:"searching",level:2}];function d(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"advanced-filters",children:"Advanced filters"}),"\n",(0,i.jsxs)(t.p,{children:["By passing a function to ",(0,i.jsx)(t.code,{children:"filter"}),", you can fully customize filtering items. Shuffle will iterate over each item and give your function the element and the shuffle instance. Return ",(0,i.jsx)(t.code,{children:"true"})," to keep the element or ",(0,i.jsx)(t.code,{children:"false"})," to hide it."]}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"// Filters elements with a data-title attribute with less than 10 characters\nshuffleInstance.filter((element) => element.dataset.title.length < 10);\n"})}),"\n",(0,i.jsx)(t.h2,{id:"searching",children:"Searching"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"// Add an event listener for key presses.\ndocument.querySelector('.js-shuffle-search').addEventListener('keyup', handleSearchKeyup);\n\n// Filter the shuffle instance by items with a title that matches the search input.\nfunction handleSearchKeyup(event) {\n const searchText = event.target.value.toLowerCase();\n\n shuffleInstance.filter((element, shuffle) => {\n const titleElement = element.querySelector('.picture-item__title');\n const titleText = titleElement.textContent.toLowerCase().trim();\n\n return titleText.includes(searchText);\n });\n}\n"})}),"\n",(0,i.jsxs)(t.p,{children:["In this example, when the user presses a key in the input, we call ",(0,i.jsx)(t.code,{children:"filter"})," on shuffle with a callback function. Inside the callback function, we return whether the current shuffle item contains the search text."]}),"\n",(0,i.jsx)(t.admonition,{type:"tip",children:(0,i.jsxs)(t.p,{children:["Check out the ",(0,i.jsx)(t.a,{href:"https://codepen.io/Vestride/details/qBVRKvx",children:"compounded filters demo"}),"."]})})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},1184:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>a});var i=n(4041);const s={},r=i.createContext(s);function l(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),i.createElement(r.Provider,{value:t},e.children)}}}]);
|
||||
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[436],{3636:(e,t,r)=>{r.d(t,{Iu:()=>u,yg:()=>d});var n=r(5668);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=n.createContext({}),c=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=c(e.components);return n.createElement(l.Provider,{value:t},e.children)},p="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=c(r),y=o,d=p["".concat(l,".").concat(y)]||p[y]||f[y]||a;return r?n.createElement(d,i(i({ref:t},u),{},{components:r})):n.createElement(d,i({ref:t},u))}));function d(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=y;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[p]="string"==typeof e?e:o,i[1]=s;for(var c=2;c<a;c++)i[c]=r[c];return n.createElement.apply(null,i)}return n.createElement.apply(null,r)}y.displayName="MDXCreateElement"},1552:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>f,frontMatter:()=>a,metadata:()=>s,toc:()=>c});var n=r(4359),o=(r(5668),r(3636));const a={sidebar_position:12},i="Alternatives",s={unversionedId:"alternatives",id:"alternatives",title:"Alternatives",description:"Shuffle won't fit every use case. There are also features I am not interested in implementing because of the level of effort it would take to write or they exist in other libraries.",source:"@site/docs/alternatives.md",sourceDirName:".",slug:"/alternatives",permalink:"/Shuffle/docs/alternatives",draft:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/alternatives.md",tags:[],version:"current",sidebarPosition:12,frontMatter:{sidebar_position:12},sidebar:"tutorialSidebar",previous:{title:"Custom styles",permalink:"/Shuffle/docs/custom-styles"},next:{title:"Supported browsers",permalink:"/Shuffle/docs/supported-browsers"}},l={},c=[],u={toc:c},p="wrapper";function f(e){let{components:t,...r}=e;return(0,o.yg)(p,(0,n.c)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.yg)("h1",{id:"alternatives"},"Alternatives"),(0,o.yg)("p",null,"Shuffle won't fit every use case. There are also features I am not interested in implementing because of the level of effort it would take to write or they exist in other libraries."),(0,o.yg)("p",null,"Shuffle likely will not grow much farther than the current feature set. If you need something with drag and drop, filling in gaps, more layout modes, etc., I suggest looking into ",(0,o.yg)("a",{parentName:"p",href:"http://packery.metafizzy.co/"},"packery")," or ",(0,o.yg)("a",{parentName:"p",href:"http://isotope.metafizzy.co/"},"isotope"),"."))}f.isMDXComponent=!0}}]);
|
||||
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[386],{3118:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>f,frontMatter:()=>o,metadata:()=>a,toc:()=>c});var s=r(1085),n=r(1184);const o={sidebar_position:12},i="Alternatives",a={id:"alternatives",title:"Alternatives",description:"Shuffle won't fit every use case. There are also features I am not interested in implementing because of the level of effort it would take to write or they exist in other libraries.",source:"@site/docs/alternatives.md",sourceDirName:".",slug:"/alternatives",permalink:"/Shuffle/docs/alternatives",draft:!1,unlisted:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/alternatives.md",tags:[],version:"current",sidebarPosition:12,frontMatter:{sidebar_position:12},sidebar:"tutorialSidebar",previous:{title:"Custom styles",permalink:"/Shuffle/docs/custom-styles"},next:{title:"Supported browsers",permalink:"/Shuffle/docs/supported-browsers"}},l={},c=[];function u(e){const t={a:"a",h1:"h1",p:"p",...(0,n.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"alternatives",children:"Alternatives"}),"\n",(0,s.jsx)(t.p,{children:"Shuffle won't fit every use case. There are also features I am not interested in implementing because of the level of effort it would take to write or they exist in other libraries."}),"\n",(0,s.jsxs)(t.p,{children:["Shuffle likely will not grow much farther than the current feature set. If you need something with drag and drop, filling in gaps, more layout modes, etc., I suggest looking into ",(0,s.jsx)(t.a,{href:"http://packery.metafizzy.co/",children:"packery"})," or ",(0,s.jsx)(t.a,{href:"http://isotope.metafizzy.co/",children:"isotope"}),"."]})]})}function f(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1184:(e,t,r)=>{r.d(t,{R:()=>i,x:()=>a});var s=r(4041);const n={},o=s.createContext(n);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]);
|
||||
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[647],{3063:(s,e,r)=>{r.r(e),r.d(e,{default:()=>d});r(4041);var u=r(4357),a=r(941),c=r(7917),l=r(8150),h=r(3632),o=r(1085);function d(s){return(0,o.jsx)(a.e3,{className:(0,u.A)(c.G.wrapper.docsPages),children:(0,o.jsx)(h.A,{children:(0,l.v)(s.route.routes)})})}}}]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[892],{5212:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>a,frontMatter:()=>d,metadata:()=>o,toc:()=>c});var s=i(1085),n=i(1184);const d={},r="List of demos",o={id:"demos",title:"List of demos",description:"Check out the CodePen collection here.",source:"@site/docs/demos.md",sourceDirName:".",slug:"/demos",permalink:"/Shuffle/docs/demos",draft:!1,unlisted:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/demos.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Changelog (abbreviated)",permalink:"/Shuffle/docs/changelog"}},l={},c=[];function h(e){const t={a:"a",h1:"h1",li:"li",p:"p",ul:"ul",...(0,n.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"list-of-demos",children:"List of demos"}),"\n",(0,s.jsxs)(t.p,{children:["Check out the CodePen collection ",(0,s.jsx)(t.a,{href:"https://codepen.io/collection/AWGLbd",children:"here"}),"."]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/qrjOpX",children:"basic layout"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/ZVWmMX",children:"homepage demo"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/qBVRKvx",children:"compound filters"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/podNGMR",children:"images"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/jOaVVdM",children:"image problems"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/yLParZL",children:"adding and removing"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/jOaMMYj",children:"animated viewport entry"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/xxPgzXq",children:"bootstrap 3 grid"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/weWbJQ",children:"bootstrap 4 grid"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/podNGMR",children:"flexbox grid"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/XWzNwjj",children:"with react"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/mdqrYbG",children:"ajax"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/Vestride/details/dvExbg",children:"Shuffle v5 with IE9"})}),"\n"]})]})}function a(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},1184:(e,t,i)=>{i.d(t,{R:()=>r,x:()=>o});var s=i(4041);const n={},d=s.createContext(n);function r(e){const t=s.useContext(d);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:r(e.components),s.createElement(d.Provider,{value:t},e.children)}}}]);
|
||||
@ -1 +0,0 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[760],{3636:(e,t,r)=>{r.d(t,{Iu:()=>d,yg:()=>f});var n=r(5668);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=n.createContext({}),s=function(e){var t=n.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},d=function(e){var t=s(e.components);return n.createElement(p.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},u=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,p=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),c=s(r),u=a,f=c["".concat(p,".").concat(u)]||c[u]||m[u]||o;return r?n.createElement(f,i(i({ref:t},d),{},{components:r})):n.createElement(f,i({ref:t},d))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=u;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[c]="string"==typeof e?e:a,i[1]=l;for(var s=2;s<o;s++)i[s]=r[s];return n.createElement.apply(null,i)}return n.createElement.apply(null,r)}u.displayName="MDXCreateElement"},6544:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>m,frontMatter:()=>o,metadata:()=>l,toc:()=>s});var n=r(4359),a=(r(5668),r(3636));const o={},i="List of demos",l={unversionedId:"demos",id:"demos",title:"List of demos",description:"Check out the CodePen collection here.",source:"@site/docs/demos.md",sourceDirName:".",slug:"/demos",permalink:"/Shuffle/docs/demos",draft:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/demos.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Changelog (abbreviated)",permalink:"/Shuffle/docs/changelog"}},p={},s=[],d={toc:s},c="wrapper";function m(e){let{components:t,...r}=e;return(0,a.yg)(c,(0,n.c)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,a.yg)("h1",{id:"list-of-demos"},"List of demos"),(0,a.yg)("p",null,"Check out the CodePen collection ",(0,a.yg)("a",{parentName:"p",href:"https://codepen.io/collection/AWGLbd"},"here"),"."),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/qrjOpX"},"basic layout")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/ZVWmMX"},"homepage demo")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/qBVRKvx"},"compound filters")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/podNGMR"},"images")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/jOaVVdM"},"image problems")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/yLParZL"},"adding and removing")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/jOaMMYj"},"animated viewport entry")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/xxPgzXq"},"bootstrap 3 grid")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/weWbJQ"},"bootstrap 4 grid")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/podNGMR"},"flexbox grid")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/XWzNwjj"},"with react")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/mdqrYbG"},"ajax")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://codepen.io/Vestride/details/dvExbg"},"Shuffle v5 with IE9"))))}m.isMDXComponent=!0}}]);
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[660],{1463:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>o,toc:()=>d});var n=t(1085),l=t(1184);const r={sidebar_position:5},i="Filters",o={id:"filters",title:"Filters",description:"Filter by a group",source:"@site/docs/filters.md",sourceDirName:".",slug:"/filters",permalink:"/Shuffle/docs/filters",draft:!1,unlisted:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/filters.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Configuring Shuffle",permalink:"/Shuffle/docs/configuration"},next:{title:"Advanced filters",permalink:"/Shuffle/docs/advanced-filters"}},c={},d=[{value:"Filter by a group",id:"filter-by-a-group",level:2},{value:"Filter by multiple groups",id:"filter-by-multiple-groups",level:2},{value:"Show all items",id:"show-all-items",level:2},{value:"Overrides",id:"overrides",level:2}];function a(e){const s={code:"code",em:"em",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,l.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.h1,{id:"filters",children:"Filters"}),"\n",(0,n.jsx)(s.h2,{id:"filter-by-a-group",children:"Filter by a group"}),"\n",(0,n.jsxs)(s.p,{children:["Use the ",(0,n.jsx)(s.code,{children:"filter()"})," method. If, for example, you wanted to show only items that match ",(0,n.jsx)(s.code,{children:'"space"'}),", you would do this:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"shuffleInstance.filter('space');\n"})}),"\n",(0,n.jsx)(s.h2,{id:"filter-by-multiple-groups",children:"Filter by multiple groups"}),"\n",(0,n.jsx)(s.p,{children:"Show multiple groups at once by using an array."}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"shuffleInstance.filter(['space', 'nature']);\n"})}),"\n",(0,n.jsxs)(s.p,{children:["By default, this will show items that match ",(0,n.jsx)(s.code,{children:"space"})," ",(0,n.jsx)(s.em,{children:"or"})," ",(0,n.jsx)(s.code,{children:"nature"}),". To show only groups that match ",(0,n.jsx)(s.code,{children:"space"})," ",(0,n.jsx)(s.em,{children:"and"})," ",(0,n.jsx)(s.code,{children:"nature"}),", set the ",(0,n.jsx)(s.code,{children:"filterMode"})," option to ",(0,n.jsx)(s.code,{children:"Shuffle.FilterMode.ALL"}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"show-all-items",children:"Show all items"}),"\n",(0,n.jsxs)(s.p,{children:["To go back to having no items filtered, you can call ",(0,n.jsx)(s.code,{children:"filter()"})," without a parameter, or use ",(0,n.jsx)(s.code,{children:"Shuffle.ALL_ITEMS"})," (which by default is the string ",(0,n.jsx)(s.code,{children:'"all"'}),")."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"shuffleInstance.filter(Shuffle.ALL_ITEMS); // or .filter()\n"})}),"\n",(0,n.jsx)(s.h2,{id:"overrides",children:"Overrides"}),"\n",(0,n.jsxs)(s.p,{children:["You can override both ",(0,n.jsx)(s.code,{children:"Shuffle.ALL_ITEMS"})," and ",(0,n.jsx)(s.code,{children:"Shuffle.FILTER_ATTRIBUTE_KEY"})," if you want."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"// Defaults\nShuffle.ALL_ITEMS = 'all';\nShuffle.FILTER_ATTRIBUTE_KEY = 'groups';\n\n// You can change them to something else.\nShuffle.ALL_ITEMS = 'any';\nShuffle.FILTER_ATTRIBUTE_KEY = 'categories';\n"})}),"\n",(0,n.jsxs)(s.p,{children:["Then you would have to use ",(0,n.jsx)(s.code,{children:"data-categories"})," attribute on your items instead of ",(0,n.jsx)(s.code,{children:"data-groups"}),"."]})]})}function h(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(a,{...e})}):a(e)}},1184:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>o});var n=t(4041);const l={},r=n.createContext(l);function i(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:i(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]);
|
||||
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[696],{5988:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Installation","href":"/Shuffle/docs/install","docId":"install"},{"type":"link","label":"Getting started","href":"/Shuffle/docs/getting-started","docId":"getting-started"},{"type":"link","label":"How column widths work","href":"/Shuffle/docs/column-widths","docId":"column-widths"},{"type":"link","label":"Configuring Shuffle","href":"/Shuffle/docs/configuration","docId":"configuration"},{"type":"link","label":"Filters","href":"/Shuffle/docs/filters","docId":"filters"},{"type":"link","label":"Advanced filters","href":"/Shuffle/docs/advanced-filters","docId":"advanced-filters"},{"type":"link","label":"Sorting","href":"/Shuffle/docs/sorting","docId":"sorting"},{"type":"link","label":"Events","href":"/Shuffle/docs/events","docId":"events"},{"type":"link","label":"Adding and removing items","href":"/Shuffle/docs/adding-removing","docId":"adding-removing"},{"type":"link","label":"API","href":"/Shuffle/docs/api","docId":"api"},{"type":"link","label":"Custom styles","href":"/Shuffle/docs/custom-styles","docId":"custom-styles"},{"type":"link","label":"Alternatives","href":"/Shuffle/docs/alternatives","docId":"alternatives"},{"type":"link","label":"Supported browsers","href":"/Shuffle/docs/supported-browsers","docId":"supported-browsers"},{"type":"link","label":"FAQs","href":"/Shuffle/docs/faqs","docId":"faqs"},{"type":"link","label":"Changelog (abbreviated)","href":"/Shuffle/docs/changelog","docId":"changelog"},{"type":"link","label":"List of demos","href":"/Shuffle/docs/demos","docId":"demos"}]},"docs":{"adding-removing":{"id":"adding-removing","title":"Adding and removing items","description":"You can add and remove elements from shuffle after it has been created. This also works for infinite scrolling.","sidebar":"tutorialSidebar"},"advanced-filters":{"id":"advanced-filters","title":"Advanced filters","description":"By passing a function to filter, you can fully customize filtering items. Shuffle will iterate over each item and give your function the element and the shuffle instance. Return true to keep the element or false to hide it.","sidebar":"tutorialSidebar"},"alternatives":{"id":"alternatives","title":"Alternatives","description":"Shuffle won\'t fit every use case. There are also features I am not interested in implementing because of the level of effort it would take to write or they exist in other libraries.","sidebar":"tutorialSidebar"},"api":{"id":"api","title":"API","description":"A list of the methods available to you and what they do.","sidebar":"tutorialSidebar"},"changelog":{"id":"changelog","title":"Changelog (abbreviated)","description":"For a more detailed changelog, visit the latest releases on GitHub.","sidebar":"tutorialSidebar"},"column-widths":{"id":"column-widths","title":"How column widths work","description":"There are 4 options for defining the width of the columns:","sidebar":"tutorialSidebar"},"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.","sidebar":"tutorialSidebar"},"custom-styles":{"id":"custom-styles","title":"Custom styles","description":"You can customize the default styles which are applied to Shuffle items upon initialization, before layout, after layout, before hiding, and after hidden.","sidebar":"tutorialSidebar"},"demos":{"id":"demos","title":"List of demos","description":"Check out the CodePen collection here.","sidebar":"tutorialSidebar"},"events":{"id":"events","title":"Events","description":"Shuffle is a subclass of TinyEmitter. It emits an event when a layout happens and when elements are removed. The event names are Shuffle.EventType.LAYOUT and Shuffle.EventType.REMOVED.","sidebar":"tutorialSidebar"},"faqs":{"id":"faqs","title":"FAQs","description":"Why Does Shuffle leave empty spaces?","sidebar":"tutorialSidebar"},"filters":{"id":"filters","title":"Filters","description":"Filter by a group","sidebar":"tutorialSidebar"},"getting-started":{"id":"getting-started","title":"Getting started","description":"HTML markup","sidebar":"tutorialSidebar"},"install":{"id":"install","title":"Installation","description":"Try it out on CodePen","sidebar":"tutorialSidebar"},"sorting":{"id":"sorting","title":"Sorting","description":"You can order the elements with a function you supply. In the demo above, each item has a data-date-created and data-title attribute which are used for sorting.","sidebar":"tutorialSidebar"},"supported-browsers":{"id":"supported-browsers","title":"Supported browsers","description":"- Chrome","sidebar":"tutorialSidebar"}}}')}}]);
|
||||
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[991],{6769:(e,t,i)=>{i.d(t,{A:()=>h});i(4041);var n=i(4357),o=i(1915),s=i(1527),a=i(1085);function h({className:e}){return(0,a.jsx)("main",{className:(0,n.A)("container margin-vert--xl",e),children:(0,a.jsx)("div",{className:"row",children:(0,a.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,a.jsx)(s.A,{as:"h1",className:"hero__title",children:(0,a.jsx)(o.A,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,a.jsx)("p",{children:(0,a.jsx)(o.A,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,a.jsx)("p",{children:(0,a.jsx)(o.A,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}},991:(e,t,i)=>{i.r(t),i.d(t,{default:()=>l});i(4041);var n=i(1915),o=i(941),s=i(3632),a=i(6769),h=i(1085);function l(){const e=(0,n.T)({id:"theme.NotFound.title",message:"Page Not Found"});return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(o.be,{title:e}),(0,h.jsx)(s.A,{children:(0,h.jsx)(a.A,{})})]})}}}]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[98],{4426:(n,s,e)=>{e.r(s),e.d(s,{default:()=>d});e(4041);var o=e(941),r=e(8041),t=e(1398),i=e(8150),c=e(4393),l=e(1085);function u(n){const{version:s}=n;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(c.A,{version:s.version,tag:(0,r.tU)(s.pluginId,s.version)}),(0,l.jsx)(o.be,{children:s.noIndex&&(0,l.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})]})}function a(n){const{version:s,route:e}=n;return(0,l.jsx)(o.e3,{className:s.className,children:(0,l.jsx)(t.n,{version:s,children:(0,i.v)(e.routes)})})}function d(n){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(u,{...n}),(0,l.jsx)(a,{...n})]})}}}]);
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[789],{2812:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var s=n(1085),i=n(1184);const o={sidebar_position:11},l="Custom styles",r={id:"custom-styles",title:"Custom styles",description:"You can customize the default styles which are applied to Shuffle items upon initialization, before layout, after layout, before hiding, and after hidden.",source:"@site/docs/custom-styles.md",sourceDirName:".",slug:"/custom-styles",permalink:"/Shuffle/docs/custom-styles",draft:!1,unlisted:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/custom-styles.md",tags:[],version:"current",sidebarPosition:11,frontMatter:{sidebar_position:11},sidebar:"tutorialSidebar",previous:{title:"API",permalink:"/Shuffle/docs/api"},next:{title:"Alternatives",permalink:"/Shuffle/docs/alternatives"}},a={},c=[];function d(e){const t={code:"code",h1:"h1",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"custom-styles",children:"Custom styles"}),"\n",(0,s.jsx)(t.p,{children:"You can customize the default styles which are applied to Shuffle items upon initialization, before layout, after layout, before hiding, and after hidden."}),"\n",(0,s.jsx)(t.p,{children:"Here are the defaults:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"ShuffleItem.Css = {\n INITIAL: {\n position: 'absolute',\n top: 0,\n visibility: 'visible',\n willChange: 'transform',\n },\n DIRECTION: {\n ltr: {\n left: 0,\n },\n rtl: {\n right: 0,\n },\n },\n VISIBLE: {\n before: {\n opacity: 1,\n visibility: 'visible',\n },\n after: {\n transitionDelay: '',\n },\n },\n HIDDEN: {\n before: {\n opacity: 0,\n },\n after: {\n visibility: 'hidden',\n transitionDelay: '',\n },\n },\n};\n\nShuffleItem.Scale = {\n VISIBLE: 1,\n HIDDEN: 0.001,\n};\n"})}),"\n",(0,s.jsx)(t.p,{children:"If you wanted to add a 50% red background to every item when they initialize, you could do this:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"Shuffle.ShuffleItem.Css.INITIAL.backgroundColor = 'rgba(255, 0, 0, 0.5)';\n"})}),"\n",(0,s.jsxs)(t.p,{children:["To set the text color to ",(0,s.jsx)(t.code,{children:"teal"})," after the item has finished moving:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"Shuffle.ShuffleItem.Css.VISIBLE.after.color = 'teal';\n"})}),"\n",(0,s.jsx)(t.p,{children:"You can also customize the scaling effect with visible or hidden items."}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"Shuffle.ShuffleItem.Scale.HIDDEN = 0.5;\n"})})]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},1184:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>r});var s=n(4041);const i={},o=s.createContext(i);function l(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]);
|
||||
@ -1 +0,0 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[848],{3636:(e,t,n)=>{n.d(t,{Iu:()=>c,yg:()=>d});var r=n(5668);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=r.createContext({}),u=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=u(e.components);return r.createElement(s.Provider,{value:t},e.children)},f="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},y=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),f=u(n),y=o,d=f["".concat(s,".").concat(y)]||f[y]||p[y]||a;return n?r.createElement(d,i(i({ref:t},c),{},{components:n})):r.createElement(d,i({ref:t},c))}));function d(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=y;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[f]="string"==typeof e?e:o,i[1]=l;for(var u=2;u<a;u++)i[u]=n[u];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}y.displayName="MDXCreateElement"},940:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>p,frontMatter:()=>a,metadata:()=>l,toc:()=>u});var r=n(4359),o=(n(5668),n(3636));const a={sidebar_position:11},i="Custom styles",l={unversionedId:"custom-styles",id:"custom-styles",title:"Custom styles",description:"You can customize the default styles which are applied to Shuffle items upon initialization, before layout, after layout, before hiding, and after hidden.",source:"@site/docs/custom-styles.md",sourceDirName:".",slug:"/custom-styles",permalink:"/Shuffle/docs/custom-styles",draft:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/custom-styles.md",tags:[],version:"current",sidebarPosition:11,frontMatter:{sidebar_position:11},sidebar:"tutorialSidebar",previous:{title:"API",permalink:"/Shuffle/docs/api"},next:{title:"Alternatives",permalink:"/Shuffle/docs/alternatives"}},s={},u=[],c={toc:u},f="wrapper";function p(e){let{components:t,...n}=e;return(0,o.yg)(f,(0,r.c)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.yg)("h1",{id:"custom-styles"},"Custom styles"),(0,o.yg)("p",null,"You can customize the default styles which are applied to Shuffle items upon initialization, before layout, after layout, before hiding, and after hidden."),(0,o.yg)("p",null,"Here are the defaults:"),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-js"},"ShuffleItem.Css = {\n INITIAL: {\n position: 'absolute',\n top: 0,\n visibility: 'visible',\n willChange: 'transform',\n },\n DIRECTION: {\n ltr: {\n left: 0,\n },\n rtl: {\n right: 0,\n },\n },\n VISIBLE: {\n before: {\n opacity: 1,\n visibility: 'visible',\n },\n after: {\n transitionDelay: '',\n },\n },\n HIDDEN: {\n before: {\n opacity: 0,\n },\n after: {\n visibility: 'hidden',\n transitionDelay: '',\n },\n },\n};\n\nShuffleItem.Scale = {\n VISIBLE: 1,\n HIDDEN: 0.001,\n};\n")),(0,o.yg)("p",null,"If you wanted to add a 50% red background to every item when they initialize, you could do this:"),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-js"},"Shuffle.ShuffleItem.Css.INITIAL.backgroundColor = 'rgba(255, 0, 0, 0.5)';\n")),(0,o.yg)("p",null,"To set the text color to ",(0,o.yg)("inlineCode",{parentName:"p"},"teal")," after the item has finished moving:"),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-js"},"Shuffle.ShuffleItem.Css.VISIBLE.after.color = 'teal';\n")),(0,o.yg)("p",null,"You can also customize the scaling effect with visible or hidden items."),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-js"},"Shuffle.ShuffleItem.Scale.HIDDEN = 0.5;\n")))}p.isMDXComponent=!0}}]);
|
||||
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[777],{2495:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>c});var s=n(1085),o=n(1184);const i={sidebar_position:1},l="Installation",r={id:"install",title:"Installation",description:"Try it out on CodePen",source:"@site/docs/install.md",sourceDirName:".",slug:"/install",permalink:"/Shuffle/docs/install",draft:!1,unlisted:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/install.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",next:{title:"Getting started",permalink:"/Shuffle/docs/getting-started"}},a={},c=[{value:"Try it out on CodePen",id:"try-it-out-on-codepen",level:2},{value:"Releases",id:"releases",level:2}];function d(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"installation",children:"Installation"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-shell",children:"npm install shufflejs\n"})}),"\n",(0,s.jsx)(t.h2,{id:"try-it-out-on-codepen",children:"Try it out on CodePen"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.a,{href:"http://codepen.io/pen?template=qrjOpX",children:"Start a CodePen with a Shuffle template"})}),"\n",(0,s.jsxs)(t.p,{children:["View the ",(0,s.jsx)(t.a,{href:"https://codepen.io/collection/AWGLbd",children:"Shuffle collection"})," on CodePen."]}),"\n",(0,s.jsx)(t.h2,{id:"releases",children:"Releases"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.a,{href:"https://github.com/Vestride/Shuffle/releases",children:"See the latest release"})})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},1184:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>r});var s=n(4041);const o={},i=s.createContext(o);function l(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]);
|
||||
@ -1 +0,0 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[224],{3636:(e,t,n)=>{n.d(t,{Iu:()=>p,yg:()=>y});var r=n(5668);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=r.createContext({}),c=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(s.Provider,{value:t},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=c(n),d=o,y=u["".concat(s,".").concat(d)]||u[d]||f[d]||a;return n?r.createElement(y,l(l({ref:t},p),{},{components:n})):r.createElement(y,l({ref:t},p))}));function y(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,l=new Array(a);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[u]="string"==typeof e?e:o,l[1]=i;for(var c=2;c<a;c++)l[c]=n[c];return r.createElement.apply(null,l)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},5364:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>f,frontMatter:()=>a,metadata:()=>i,toc:()=>c});var r=n(4359),o=(n(5668),n(3636));const a={sidebar_position:1},l="Installation",i={unversionedId:"install",id:"install",title:"Installation",description:"Try it out on CodePen",source:"@site/docs/install.md",sourceDirName:".",slug:"/install",permalink:"/Shuffle/docs/install",draft:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/install.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",next:{title:"Getting started",permalink:"/Shuffle/docs/getting-started"}},s={},c=[{value:"Try it out on CodePen",id:"try-it-out-on-codepen",level:2},{value:"Releases",id:"releases",level:2}],p={toc:c},u="wrapper";function f(e){let{components:t,...n}=e;return(0,o.yg)(u,(0,r.c)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,o.yg)("h1",{id:"installation"},"Installation"),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-shell"},"npm install shufflejs\n")),(0,o.yg)("h2",{id:"try-it-out-on-codepen"},"Try it out on CodePen"),(0,o.yg)("p",null,(0,o.yg)("a",{parentName:"p",href:"http://codepen.io/pen?template=qrjOpX"},"Start a CodePen with a Shuffle template")),(0,o.yg)("p",null,"View the ",(0,o.yg)("a",{parentName:"p",href:"https://codepen.io/collection/AWGLbd"},"Shuffle collection")," on CodePen."),(0,o.yg)("h2",{id:"releases"},"Releases"),(0,o.yg)("p",null,(0,o.yg)("a",{parentName:"p",href:"https://github.com/Vestride/Shuffle/releases"},"See the latest release")))}f.isMDXComponent=!0}}]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[360],{3636:(e,t,n)=>{n.d(t,{Iu:()=>c,yg:()=>m});var r=n(5668);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),p=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),d=a,m=u["".concat(l,".").concat(d)]||u[d]||f[d]||o;return n?r.createElement(m,i(i({ref:t},c),{},{components:n})):r.createElement(m,i({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,i[1]=s;for(var p=2;p<o;p++)i[p]=n[p];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},7132:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>f,frontMatter:()=>o,metadata:()=>s,toc:()=>p});var r=n(4359),a=(n(5668),n(3636));const o={sidebar_position:8},i="Events",s={unversionedId:"events",id:"events",title:"Events",description:"Shuffle is a subclass of TinyEmitter. It emits an event when a layout happens and when elements are removed. The event names are Shuffle.EventType.LAYOUT and Shuffle.EventType.REMOVED.",source:"@site/docs/events.md",sourceDirName:".",slug:"/events",permalink:"/Shuffle/docs/events",draft:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/events.md",tags:[],version:"current",sidebarPosition:8,frontMatter:{sidebar_position:8},sidebar:"tutorialSidebar",previous:{title:"Sorting",permalink:"/Shuffle/docs/sorting"},next:{title:"Adding and removing items",permalink:"/Shuffle/docs/adding-removing"}},l={},p=[{value:"Get notified when a layout happens",id:"get-notified-when-a-layout-happens",level:2},{value:"Do something when an item is removed",id:"do-something-when-an-item-is-removed",level:2}],c={toc:p},u="wrapper";function f(e){let{components:t,...n}=e;return(0,a.yg)(u,(0,r.c)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.yg)("h1",{id:"events"},"Events"),(0,a.yg)("p",null,"Shuffle is a subclass of ",(0,a.yg)("a",{parentName:"p",href:"https://www.npmjs.com/package/tiny-emitter"},"TinyEmitter"),". It emits an event when a layout happens and when elements are removed. The event names are ",(0,a.yg)("inlineCode",{parentName:"p"},"Shuffle.EventType.LAYOUT")," and ",(0,a.yg)("inlineCode",{parentName:"p"},"Shuffle.EventType.REMOVED"),"."),(0,a.yg)("h2",{id:"get-notified-when-a-layout-happens"},"Get notified when a layout happens"),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-js"},"shuffleInstance.on(Shuffle.EventType.LAYOUT, () => {\n console.log('Things finished moving!');\n});\n")),(0,a.yg)("h2",{id:"do-something-when-an-item-is-removed"},"Do something when an item is removed"),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-js"},"shuffleInstance.on(Shuffle.EventType.REMOVED, (data) => {\n console.log(this, data, data.collection, data.shuffle);\n});\n")),(0,a.yg)("admonition",{type:"tip"},(0,a.yg)("p",{parentName:"admonition"},"Check out the homepage ",(0,a.yg)("a",{parentName:"p",href:"/"},"demo"),". It adds these events and logs them to the console.")))}f.isMDXComponent=!0}}]);
|
||||
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[349],{3851:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>a,default:()=>c,frontMatter:()=>i,metadata:()=>d,toc:()=>h});var s=t(1085),o=t(1184);const i={sidebar_position:8},a="Events",d={id:"events",title:"Events",description:"Shuffle is a subclass of TinyEmitter. It emits an event when a layout happens and when elements are removed. The event names are Shuffle.EventType.LAYOUT and Shuffle.EventType.REMOVED.",source:"@site/docs/events.md",sourceDirName:".",slug:"/events",permalink:"/Shuffle/docs/events",draft:!1,unlisted:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/events.md",tags:[],version:"current",sidebarPosition:8,frontMatter:{sidebar_position:8},sidebar:"tutorialSidebar",previous:{title:"Sorting",permalink:"/Shuffle/docs/sorting"},next:{title:"Adding and removing items",permalink:"/Shuffle/docs/adding-removing"}},r={},h=[{value:"Get notified when a layout happens",id:"get-notified-when-a-layout-happens",level:2},{value:"Do something when an item is removed",id:"do-something-when-an-item-is-removed",level:2}];function l(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(n.p,{children:["Shuffle is a subclass of ",(0,s.jsx)(n.a,{href:"https://www.npmjs.com/package/tiny-emitter",children:"TinyEmitter"}),". It emits an event when a layout happens and when elements are removed. The event names are ",(0,s.jsx)(n.code,{children:"Shuffle.EventType.LAYOUT"})," and ",(0,s.jsx)(n.code,{children:"Shuffle.EventType.REMOVED"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"get-notified-when-a-layout-happens",children:"Get notified when a layout happens"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"shuffleInstance.on(Shuffle.EventType.LAYOUT, () => {\n console.log('Things finished moving!');\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"do-something-when-an-item-is-removed",children:"Do something when an item is removed"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"shuffleInstance.on(Shuffle.EventType.REMOVED, (data) => {\n console.log(this, data, data.collection, data.shuffle);\n});\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsxs)(n.p,{children:["Check out the homepage ",(0,s.jsx)(n.a,{href:"/",children:"demo"}),". It adds these events and logs them to the console."]})})]})}function c(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1184:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>d});var s=t(4041);const o={},i=s.createContext(o);function a(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);
|
||||
@ -1 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[332],{2080:s=>{s.exports=JSON.parse('{"name":"docusaurus-plugin-content-docs","id":"default"}')}}]);
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[879],{1966:s=>{s.exports=JSON.parse('{"name":"docusaurus-plugin-content-docs","id":"default"}')}}]);
|
||||
@ -0,0 +1 @@
|
||||
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[885],{5707:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>r,default:()=>m,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var i=t(1085),s=t(1184);const o={sidebar_position:9},r="Adding and removing items",d={id:"adding-removing",title:"Adding and removing items",description:"You can add and remove elements from shuffle after it has been created. This also works for infinite scrolling.",source:"@site/docs/adding-removing.md",sourceDirName:".",slug:"/adding-removing",permalink:"/Shuffle/docs/adding-removing",draft:!1,unlisted:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/adding-removing.md",tags:[],version:"current",sidebarPosition:9,frontMatter:{sidebar_position:9},sidebar:"tutorialSidebar",previous:{title:"Events",permalink:"/Shuffle/docs/events"},next:{title:"API",permalink:"/Shuffle/docs/api"}},a={},l=[{value:"Adding elements",id:"adding-elements",level:2},{value:"Removing elements",id:"removing-elements",level:2}];function h(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"adding-and-removing-items",children:"Adding and removing items"}),"\n",(0,i.jsx)(n.p,{children:"You can add and remove elements from shuffle after it has been created. This also works for infinite scrolling."}),"\n",(0,i.jsx)(n.h2,{id:"adding-elements",children:"Adding elements"}),"\n",(0,i.jsx)(n.p,{children:"Wherever you add the element in the DOM is where it will show up in the grid (assuming you\u2019re using the default sort-by-dom-order). With this in mind, you can append, prepend, or insert elements wherever you need to get them to show up in the right order."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"/**\n * Create some DOM elements, append them to the shuffle container, then notify\n * shuffle about the new items. You could also insert the HTML as a string.\n */\nonAppendBoxes() {\n const elements = this._getArrayOfElementsToAdd();\n\n elements.forEach((element) => {\n this.shuffle.element.appendChild(element);\n });\n\n // Tell shuffle elements have been appended.\n // It expects an array of elements as the parameter.\n this.shuffle.add(elements);\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"removing-elements",children:"Removing elements"}),"\n",(0,i.jsxs)(n.p,{children:["Shuffle will animate the element away and then remove it from the DOM once it's finished. It will then emit the ",(0,i.jsx)(n.code,{children:"Shuffle.EventType.REMOVED"})," event with the array of elements in ",(0,i.jsx)(n.code,{children:"event.collection"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"this.shuffle.remove([element1, element2]);\n"})}),"\n",(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsxs)(n.p,{children:["Check out the ",(0,i.jsx)(n.a,{href:"https://codepen.io/Vestride/details/yLParZL",children:"adding and removing demo"}),"."]})})]})}function m(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},1184:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>d});var i=t(4041);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
||||
(()=>{"use strict";var e,t,r,a,o,d={},f={};function n(e){var t=f[e];if(void 0!==t)return t.exports;var r=f[e]={id:e,loaded:!1,exports:{}};return d[e].call(r.exports,r,r.exports,n),r.loaded=!0,r.exports}n.m=d,n.c=f,e=[],n.O=(t,r,a,o)=>{if(!r){var d=1/0;for(l=0;l<e.length;l++){for(var[r,a,o]=e[l],f=!0,c=0;c<r.length;c++)(!1&o||d>=o)&&Object.keys(n.O).every((e=>n.O[e](r[c])))?r.splice(c--,1):(f=!1,o<d&&(d=o));if(f){e.splice(l--,1);var i=a();void 0!==i&&(t=i)}}return t}o=o||0;for(var l=e.length;l>0&&e[l-1][2]>o;l--)e[l]=e[l-1];e[l]=[r,a,o]},n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,n.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var o=Object.create(null);n.r(o);var d={};t=t||[null,r({}),r([]),r(r)];for(var f=2&a&&e;"object"==typeof f&&!~t.indexOf(f);f=r(f))Object.getOwnPropertyNames(f).forEach((t=>d[t]=()=>e[t]));return d.default=()=>e,n.d(o,d),o},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,r)=>(n.f[r](e,t),t)),[])),n.u=e=>"assets/js/"+({48:"9beb87c2",64:"1ffdd7de",86:"3475e39f",168:"164760aa",224:"c4de80f8",256:"5fbc5cf1",332:"e2d55573",360:"d700bc26",390:"9dd8a0d2",436:"4777fd9a",512:"9348edec",632:"6ff629d8",652:"9ed00105",656:"1be78505",696:"935f2afb",752:"17896441",760:"828b0528",814:"e6a2d45a",816:"2261bd48",840:"d589d3a7",848:"aa72d29b",972:"41eae919"}[e]||e)+"."+{48:"b65d0de0",64:"4e0de674",86:"58930d4f",168:"c6983a87",224:"b3e3ba1d",256:"d376259b",272:"6c4fa221",332:"c3be0306",360:"4fc6f319",390:"a6996556",436:"6304ee67",512:"9bcd806b",632:"ad207116",652:"01279899",656:"67755c29",696:"c387a812",752:"93668992",760:"97471e68",814:"cff6903e",816:"90d98c87",840:"4b1d4a84",848:"888d2217",972:"f24bb9a0"}[e]+".js",n.miniCssF=e=>{},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},o="shuffle-docs:",n.l=(e,t,r,d)=>{if(a[e])a[e].push(t);else{var f,c;if(void 0!==r)for(var i=document.getElementsByTagName("script"),l=0;l<i.length;l++){var u=i[l];if(u.getAttribute("src")==e||u.getAttribute("data-webpack")==o+r){f=u;break}}f||(c=!0,(f=document.createElement("script")).charset="utf-8",f.timeout=120,n.nc&&f.setAttribute("nonce",n.nc),f.setAttribute("data-webpack",o+r),f.src=e),a[e]=[t];var b=(t,r)=>{f.onerror=f.onload=null,clearTimeout(s);var o=a[e];if(delete a[e],f.parentNode&&f.parentNode.removeChild(f),o&&o.forEach((e=>e(r))),t)return t(r)},s=setTimeout(b.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=b.bind(null,f.onerror),f.onload=b.bind(null,f.onload),c&&document.head.appendChild(f)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.p="/Shuffle/",n.gca=function(e){return e={17896441:"752","9beb87c2":"48","1ffdd7de":"64","3475e39f":"86","164760aa":"168",c4de80f8:"224","5fbc5cf1":"256",e2d55573:"332",d700bc26:"360","9dd8a0d2":"390","4777fd9a":"436","9348edec":"512","6ff629d8":"632","9ed00105":"652","1be78505":"656","935f2afb":"696","828b0528":"760",e6a2d45a:"814","2261bd48":"816",d589d3a7:"840",aa72d29b:"848","41eae919":"972"}[e]||e,n.p+n.u(e)},(()=>{var e={296:0,176:0};n.f.j=(t,r)=>{var a=n.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(17|29)6$/.test(t))e[t]=0;else{var o=new Promise(((r,o)=>a=e[t]=[r,o]));r.push(a[2]=o);var d=n.p+n.u(t),f=new Error;n.l(d,(r=>{if(n.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var o=r&&("load"===r.type?"missing":r.type),d=r&&r.target&&r.target.src;f.message="Loading chunk "+t+" failed.\n("+o+": "+d+")",f.name="ChunkLoadError",f.type=o,f.request=d,a[1](f)}}),"chunk-"+t,t)}},n.O.j=t=>0===e[t];var t=(t,r)=>{var a,o,[d,f,c]=r,i=0;if(d.some((t=>0!==e[t]))){for(a in f)n.o(f,a)&&(n.m[a]=f[a]);if(c)var l=c(n)}for(t&&t(r);i<d.length;i++)o=d[i],n.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return n.O(l)},r=globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})()})();
|
||||
@ -0,0 +1 @@
|
||||
(()=>{"use strict";var e,t,r,a,o,d={},f={};function n(e){var t=f[e];if(void 0!==t)return t.exports;var r=f[e]={id:e,loaded:!1,exports:{}};return d[e].call(r.exports,r,r.exports,n),r.loaded=!0,r.exports}n.m=d,n.c=f,e=[],n.O=(t,r,a,o)=>{if(!r){var d=1/0;for(b=0;b<e.length;b++){for(var[r,a,o]=e[b],f=!0,c=0;c<r.length;c++)(!1&o||d>=o)&&Object.keys(n.O).every((e=>n.O[e](r[c])))?r.splice(c--,1):(f=!1,o<d&&(d=o));if(f){e.splice(b--,1);var i=a();void 0!==i&&(t=i)}}return t}o=o||0;for(var b=e.length;b>0&&e[b-1][2]>o;b--)e[b]=e[b-1];e[b]=[r,a,o]},n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,n.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var o=Object.create(null);n.r(o);var d={};t=t||[null,r({}),r([]),r(r)];for(var f=2&a&&e;"object"==typeof f&&!~t.indexOf(f);f=r(f))Object.getOwnPropertyNames(f).forEach((t=>d[t]=()=>e[t]));return d.default=()=>e,n.d(o,d),o},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,r)=>(n.f[r](e,t),t)),[])),n.u=e=>"assets/js/"+({48:"a94703ab",98:"a7bd4aaa",189:"164760aa",349:"d700bc26",386:"4777fd9a",401:"17896441",539:"9beb87c2",581:"935f2afb",617:"9dd8a0d2",624:"5fbc5cf1",647:"5e95c892",660:"9348edec",699:"3475e39f",712:"41eae919",777:"c4de80f8",782:"1ffdd7de",789:"aa72d29b",806:"2261bd48",873:"9ed00105",879:"e2d55573",885:"e6a2d45a",892:"828b0528",896:"6ff629d8",924:"d589d3a7"}[e]||e)+"."+{48:"27bb819d",98:"11a11cd9",189:"65c14f85",349:"9a9aa087",386:"c25f3b1b",401:"3118252a",539:"65473f07",581:"5b1e482f",617:"2aabb1f3",624:"33d854f7",647:"bd079741",660:"9dd019eb",699:"7b3e8e5e",712:"2cb7d7b3",777:"095c52df",782:"41f7e359",789:"7d0feb3b",806:"b96c6ddd",873:"64d7da40",879:"f9aac8cb",885:"70258a23",892:"12476665",896:"af9ff6f3",924:"9ad54ead",991:"c41d881b"}[e]+".js",n.miniCssF=e=>{},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},o="shuffle-docs:",n.l=(e,t,r,d)=>{if(a[e])a[e].push(t);else{var f,c;if(void 0!==r)for(var i=document.getElementsByTagName("script"),b=0;b<i.length;b++){var l=i[b];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==o+r){f=l;break}}f||(c=!0,(f=document.createElement("script")).charset="utf-8",f.timeout=120,n.nc&&f.setAttribute("nonce",n.nc),f.setAttribute("data-webpack",o+r),f.src=e),a[e]=[t];var u=(t,r)=>{f.onerror=f.onload=null,clearTimeout(s);var o=a[e];if(delete a[e],f.parentNode&&f.parentNode.removeChild(f),o&&o.forEach((e=>e(r))),t)return t(r)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=u.bind(null,f.onerror),f.onload=u.bind(null,f.onload),c&&document.head.appendChild(f)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.p="/Shuffle/",n.gca=function(e){return e={17896441:"401",a94703ab:"48",a7bd4aaa:"98","164760aa":"189",d700bc26:"349","4777fd9a":"386","9beb87c2":"539","935f2afb":"581","9dd8a0d2":"617","5fbc5cf1":"624","5e95c892":"647","9348edec":"660","3475e39f":"699","41eae919":"712",c4de80f8:"777","1ffdd7de":"782",aa72d29b:"789","2261bd48":"806","9ed00105":"873",e2d55573:"879",e6a2d45a:"885","828b0528":"892","6ff629d8":"896",d589d3a7:"924"}[e]||e,n.p+n.u(e)},(()=>{var e={354:0,869:0};n.f.j=(t,r)=>{var a=n.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(354|869)$/.test(t))e[t]=0;else{var o=new Promise(((r,o)=>a=e[t]=[r,o]));r.push(a[2]=o);var d=n.p+n.u(t),f=new Error;n.l(d,(r=>{if(n.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var o=r&&("load"===r.type?"missing":r.type),d=r&&r.target&&r.target.src;f.message="Loading chunk "+t+" failed.\n("+o+": "+d+")",f.name="ChunkLoadError",f.type=o,f.request=d,a[1](f)}}),"chunk-"+t,t)}},n.O.j=t=>0===e[t];var t=(t,r)=>{var a,o,[d,f,c]=r,i=0;if(d.some((t=>0!==e[t]))){for(a in f)n.o(f,a)&&(n.m[a]=f[a]);if(c)var b=c(n)}for(t&&t(r);i<d.length;i++)o=d[i],n.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return n.O(b)},r=globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})()})();
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue