diff --git a/404.html b/404.html index 0996f43..970868d 100644 --- a/404.html +++ b/404.html @@ -7,13 +7,13 @@ Page Not Found | Shuffle.js - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/9beb87c2.4eeff665.js b/assets/js/9beb87c2.4eeff665.js new file mode 100644 index 0000000..fbb8c09 --- /dev/null +++ b/assets/js/9beb87c2.4eeff665.js @@ -0,0 +1 @@ +"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[80],{876:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>c});var i=n(2784);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 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 l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var d=i.createContext({}),p=function(e){var t=i.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=p(e.components);return i.createElement(d.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},u=i.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,d=e.parentName,m=o(e,["components","mdxType","originalType","parentName"]),u=p(n),c=a,k=u["".concat(d,".").concat(c)]||u[c]||s[c]||r;return n?i.createElement(k,l(l({ref:t},m),{},{components:n})):i.createElement(k,l({ref:t},m))}));function c(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,l=new Array(r);l[0]=u;var o={};for(var d in t)hasOwnProperty.call(t,d)&&(o[d]=t[d]);o.originalType=e,o.mdxType="string"==typeof e?e:a,l[1]=o;for(var p=2;p{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>s,frontMatter:()=>r,metadata:()=>o,toc:()=>p});var i=n(8427),a=(n(2784),n(876));const r={sidebar_position:15},l="Changelog (abbreviated)",o={unversionedId:"changelog",id:"changelog",title:"Changelog (abbreviated)",description:"For a more detailed changelog, visit the latest releases on GitHub.",source:"@site/docs/changelog.md",sourceDirName:".",slug:"/changelog",permalink:"/Shuffle/docs/changelog",draft:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/changelog.md",tags:[],version:"current",sidebarPosition:15,frontMatter:{sidebar_position:15},sidebar:"tutorialSidebar",previous:{title:"FAQs",permalink:"/Shuffle/docs/faqs"},next:{title:"List of demos",permalink:"/Shuffle/docs/demos"}},d={},p=[],m={toc:p};function s(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,i.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"changelog-abbreviated"},"Changelog (abbreviated)"),(0,a.kt)("p",null,"For a more detailed changelog, visit ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/Vestride/Shuffle/releases"},"the latest releases")," on GitHub."),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v6.1.0")," 2022-07-07 - Add ",(0,a.kt)("inlineCode",{parentName:"li"},"sideEffects: false")," and ",(0,a.kt)("a",{parentName:"li",href:"https://webpack.js.org/guides/package-exports/"},"exports-map")," to the ",(0,a.kt)("inlineCode",{parentName:"li"},"package.json"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v6.0.0")," 2022-02-14 - Drop IE 11, remove misspelled ",(0,a.kt)("inlineCode",{parentName:"li"},"delimeter")," option, remove ",(0,a.kt)("inlineCode",{parentName:"li"},"matches-selector")," package."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.4.1")," 2021-05-29 - Add ",(0,a.kt)("inlineCode",{parentName:"li"},"sortedItems")," property. Fix ",(0,a.kt)("inlineCode",{parentName:"li"},"getComputedStyle")," bug for Chrome on Windows."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.3.0")," 2021-03-23 - Add ",(0,a.kt)("inlineCode",{parentName:"li"},"isRTL")," option."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.2.3")," 2019-08-29 - Add missing inherited methods from ",(0,a.kt)("inlineCode",{parentName:"li"},"TinyEmitter")," to TypeScript definitions."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.2.2")," 2019-06-03 - Update TypeScript definitions."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.2.1")," 2018-12-01 - Change ","`","index.d.ts","`"," to use ","`","export default Shuffle","`"," (",(0,a.kt)("a",{parentName:"li",href:"https://github.com/Vestride/Shuffle/issues/214#issuecomment-441409237"},"#214"),"). Upgrade dev dependencies."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.2.0")," 2018-08-19 - Lazily test whether the browser's ",(0,a.kt)("inlineCode",{parentName:"li"},"getComputedStyle")," includes padding. This allows the bundled file to be imported in node for server side rendering."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.1.2")," 2018-03-26 - Fix misspelled ",(0,a.kt)("inlineCode",{parentName:"li"},"delimiter"),' option. Both "delimiter" and "delimeter" will continue to work for v5.'),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.1.1")," 2018-03-02 - Fix new item animation when there is an active filter."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.1.0")," 2018-02-20 - Add ",(0,a.kt)("inlineCode",{parentName:"li"},"compare")," option to sorter. Add ",(0,a.kt)("inlineCode",{parentName:"li"},"es")," build to package and ",(0,a.kt)("inlineCode",{parentName:"li"},'"module"')," field to ",(0,a.kt)("inlineCode",{parentName:"li"},"package.json"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.0.3")," 2017-10-30 - Fix rounding error."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.0.2")," 2017-09-23 - Update type definitions. Upgrade dev dependencies."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.0.1")," 2017-07-18 - Add ",(0,a.kt)("inlineCode",{parentName:"li"},"roundTransforms")," option."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.0.0")," 2017-07-18 - Change global export from ",(0,a.kt)("inlineCode",{parentName:"li"},"shuffle")," to ",(0,a.kt)("inlineCode",{parentName:"li"},"Shuffle"),". Remove bower support. Expect ES6 environment. Make Shuffle instances Event Emitters instead of dispatching ",(0,a.kt)("inlineCode",{parentName:"li"},"CustomEvent"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.2.0")," 2017-05-10 - Replace ",(0,a.kt)("inlineCode",{parentName:"li"},"webpack")," build with ",(0,a.kt)("inlineCode",{parentName:"li"},"rollup"),". Replace ",(0,a.kt)("inlineCode",{parentName:"li"},"jshint")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"jscs")," with ",(0,a.kt)("inlineCode",{parentName:"li"},"eslint"),". Add ",(0,a.kt)("inlineCode",{parentName:"li"},"filterMode")," option."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.1.1")," 2017-03-21 - the ",(0,a.kt)("inlineCode",{parentName:"li"},"before")," styles for a ",(0,a.kt)("inlineCode",{parentName:"li"},"ShuffleItem")," were not applied if the item didn\u2019t move."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.1.0")," 2017-01-30 - Use webpack-2 to bundle Shuffle."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.0.2")," 2016-09-15 - Update ",(0,a.kt)("inlineCode",{parentName:"li"},"custom-event-polyfill")," dependency."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.0.1")," 2016-07-30 - Fix ",(0,a.kt)("inlineCode",{parentName:"li"},"delimiter")," option."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.0.0")," 2016-04-20 - Rewrite in ES6 with babel. Remove jQuery and Modernizr dependencies. Remove support for IE<11. Docs improvements. Switch to gulp build system with webpack."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v3.1.0")," 2015-03-23 - Allow zero speed option (",(0,a.kt)("a",{parentName:"li",href:"https://github.com/Vestride/Shuffle/issues/64"},"#64"),") and cancel previous animations instead of ignoring new ones (",(0,a.kt)("a",{parentName:"li",href:"https://github.com/Vestride/Shuffle/issues/69"},"#69"),"). Handle non-integer columns better (",(0,a.kt)("a",{parentName:"li",href:"https://github.com/Vestride/Shuffle/issues/46"},"#46"),")"),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v3.0.4")," 2015-02-16 - Publish to NPM."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v3.0.2")," 2015-01-21 - Remove from jQuery plugins directory."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v3.0.1")," 2014-12-29 - Add CommonJS support."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v3.0.0")," 2014-10-06 - Refactored with improvements, added unit tests, more documentation. Removed some triggered events."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v2.1.2")," 2014-06-01 - Use ",(0,a.kt)("inlineCode",{parentName:"li"},"window.jQuery")," instead of ",(0,a.kt)("inlineCode",{parentName:"li"},"window.$")," to work better with noConflict. Fixed ",(0,a.kt)("a",{parentName:"li",href:"https://github.com/Vestride/Shuffle/issues/25"},"#25"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v2.1.1")," 2014-04-16 - Fix items with zero opacity overlapping visible ones in IE<10."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v2.1.0")," 2014-04-12 - Register with bower as ",(0,a.kt)("inlineCode",{parentName:"li"},"shufflejs"),"."),(0,a.kt)("li",{parentName:"ul"},"2014-04-10 - Add AMD support."),(0,a.kt)("li",{parentName:"ul"},"2014-04-08 - Separate Modernizr into its own file and custom Shuffle build."),(0,a.kt)("li",{parentName:"ul"},"2014-03-08 - Add Bootstrap 3 demo. Fixed issue with percentage width items."),(0,a.kt)("li",{parentName:"ul"},"2013-10-04 - Moved some Shuffle instance properties to constants. Converted from 4 to 2 space indentation. Added events enum and pulled out some strings to constants."),(0,a.kt)("li",{parentName:"ul"},"2013-08-30 - Added animate-in demo."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v2.0.0")," 2013-07-05 - Shuffle 2.0 with masonry, adding and removing, and more."),(0,a.kt)("li",{parentName:"ul"},"2012-11-03 - Replaced layout system with ",(0,a.kt)("a",{parentName:"li",href:"http://masonry.desandro.com/"},"masonry"),". Items can now be different sizes! Added addtional examples."),(0,a.kt)("li",{parentName:"ul"},"2012-10-24 - Better handling of grid item dimensions. Added a minimal markup page."),(0,a.kt)("li",{parentName:"ul"},"2012-09-20 - Added ",(0,a.kt)("inlineCode",{parentName:"li"},"destroy")," method"),(0,a.kt)("li",{parentName:"ul"},"2012-09-18 - Added sorting ability and made plugin responsive. Updated to Modernizr 2.6.2"),(0,a.kt)("li",{parentName:"ul"},"2012-07-21 - Rewrote plugin in more object oriented structure. Added custom events. Updated to Modernizr 2.6.1"),(0,a.kt)("li",{parentName:"ul"},"2012-07-03 - Removed dependency on the css file and now apply the css with javascript")))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/9beb87c2.dd9dad2a.js b/assets/js/9beb87c2.dd9dad2a.js deleted file mode 100644 index 5c88990..0000000 --- a/assets/js/9beb87c2.dd9dad2a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[80],{876:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>c});var i=n(2784);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 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 l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var d=i.createContext({}),p=function(e){var t=i.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=p(e.components);return i.createElement(d.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},u=i.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,d=e.parentName,m=o(e,["components","mdxType","originalType","parentName"]),u=p(n),c=a,k=u["".concat(d,".").concat(c)]||u[c]||s[c]||r;return n?i.createElement(k,l(l({ref:t},m),{},{components:n})):i.createElement(k,l({ref:t},m))}));function c(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,l=new Array(r);l[0]=u;var o={};for(var d in t)hasOwnProperty.call(t,d)&&(o[d]=t[d]);o.originalType=e,o.mdxType="string"==typeof e?e:a,l[1]=o;for(var p=2;p{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>s,frontMatter:()=>r,metadata:()=>o,toc:()=>p});var i=n(8427),a=(n(2784),n(876));const r={sidebar_position:15},l="Changelog (abbreviated)",o={unversionedId:"changelog",id:"changelog",title:"Changelog (abbreviated)",description:"For a more detailed changelog, visit the latest releases on GitHub.",source:"@site/docs/changelog.md",sourceDirName:".",slug:"/changelog",permalink:"/Shuffle/docs/changelog",draft:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/changelog.md",tags:[],version:"current",sidebarPosition:15,frontMatter:{sidebar_position:15},sidebar:"tutorialSidebar",previous:{title:"FAQs",permalink:"/Shuffle/docs/faqs"},next:{title:"List of demos",permalink:"/Shuffle/docs/demos"}},d={},p=[],m={toc:p};function s(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,i.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"changelog-abbreviated"},"Changelog (abbreviated)"),(0,a.kt)("p",null,"For a more detailed changelog, visit ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/Vestride/Shuffle/releases"},"the latest releases")," on GitHub."),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v6.0.0")," 2022-02-14 - Drop IE 11, remove misspelled ",(0,a.kt)("inlineCode",{parentName:"li"},"delimeter")," option, remove ",(0,a.kt)("inlineCode",{parentName:"li"},"matches-selector")," package."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.4.1")," 2021-05-29 - Add ",(0,a.kt)("inlineCode",{parentName:"li"},"sortedItems")," property. Fix ",(0,a.kt)("inlineCode",{parentName:"li"},"getComputedStyle")," bug for Chrome on Windows."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.3.0")," 2021-03-23 - Add ",(0,a.kt)("inlineCode",{parentName:"li"},"isRTL")," option."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.2.3")," 2019-08-29 - Add missing inherited methods from ",(0,a.kt)("inlineCode",{parentName:"li"},"TinyEmitter")," to TypeScript definitions."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.2.2")," 2019-06-03 - Update TypeScript definitions."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.2.1")," 2018-12-01 - Change ","`","index.d.ts","`"," to use ","`","export default Shuffle","`"," (",(0,a.kt)("a",{parentName:"li",href:"https://github.com/Vestride/Shuffle/issues/214#issuecomment-441409237"},"#214"),"). Upgrade dev dependencies."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.2.0")," 2018-08-19 - Lazily test whether the browser's ",(0,a.kt)("inlineCode",{parentName:"li"},"getComputedStyle")," includes padding. This allows the bundled file to be imported in node for server side rendering."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.1.2")," 2018-03-26 - Fix misspelled ",(0,a.kt)("inlineCode",{parentName:"li"},"delimiter"),' option. Both "delimiter" and "delimeter" will continue to work for v5.'),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.1.1")," 2018-03-02 - Fix new item animation when there is an active filter."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.1.0")," 2018-02-20 - Add ",(0,a.kt)("inlineCode",{parentName:"li"},"compare")," option to sorter. Add ",(0,a.kt)("inlineCode",{parentName:"li"},"es")," build to package and ",(0,a.kt)("inlineCode",{parentName:"li"},'"module"')," field to ",(0,a.kt)("inlineCode",{parentName:"li"},"package.json"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.0.3")," 2017-10-30 - Fix rounding error."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.0.2")," 2017-09-23 - Update type definitions. Upgrade dev dependencies."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.0.1")," 2017-07-18 - Add ",(0,a.kt)("inlineCode",{parentName:"li"},"roundTransforms")," option."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v5.0.0")," 2017-07-18 - Change global export from ",(0,a.kt)("inlineCode",{parentName:"li"},"shuffle")," to ",(0,a.kt)("inlineCode",{parentName:"li"},"Shuffle"),". Remove bower support. Expect ES6 environment. Make Shuffle instances Event Emitters instead of dispatching ",(0,a.kt)("inlineCode",{parentName:"li"},"CustomEvent"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.2.0")," 2017-05-10 - Replace ",(0,a.kt)("inlineCode",{parentName:"li"},"webpack")," build with ",(0,a.kt)("inlineCode",{parentName:"li"},"rollup"),". Replace ",(0,a.kt)("inlineCode",{parentName:"li"},"jshint")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"jscs")," with ",(0,a.kt)("inlineCode",{parentName:"li"},"eslint"),". Add ",(0,a.kt)("inlineCode",{parentName:"li"},"filterMode")," option."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.1.1")," 2017-03-21 - the ",(0,a.kt)("inlineCode",{parentName:"li"},"before")," styles for a ",(0,a.kt)("inlineCode",{parentName:"li"},"ShuffleItem")," were not applied if the item didn\u2019t move."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.1.0")," 2017-01-30 - Use webpack-2 to bundle Shuffle."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.0.2")," 2016-09-15 - Update ",(0,a.kt)("inlineCode",{parentName:"li"},"custom-event-polyfill")," dependency."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.0.1")," 2016-07-30 - Fix ",(0,a.kt)("inlineCode",{parentName:"li"},"delimiter")," option."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v4.0.0")," 2016-04-20 - Rewrite in ES6 with babel. Remove jQuery and Modernizr dependencies. Remove support for IE<11. Docs improvements. Switch to gulp build system with webpack."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v3.1.0")," 2015-03-23 - Allow zero speed option (",(0,a.kt)("a",{parentName:"li",href:"https://github.com/Vestride/Shuffle/issues/64"},"#64"),") and cancel previous animations instead of ignoring new ones (",(0,a.kt)("a",{parentName:"li",href:"https://github.com/Vestride/Shuffle/issues/69"},"#69"),"). Handle non-integer columns better (",(0,a.kt)("a",{parentName:"li",href:"https://github.com/Vestride/Shuffle/issues/46"},"#46"),")"),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v3.0.4")," 2015-02-16 - Publish to NPM."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v3.0.2")," 2015-01-21 - Remove from jQuery plugins directory."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v3.0.1")," 2014-12-29 - Add CommonJS support."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v3.0.0")," 2014-10-06 - Refactored with improvements, added unit tests, more documentation. Removed some triggered events."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v2.1.2")," 2014-06-01 - Use ",(0,a.kt)("inlineCode",{parentName:"li"},"window.jQuery")," instead of ",(0,a.kt)("inlineCode",{parentName:"li"},"window.$")," to work better with noConflict. Fixed ",(0,a.kt)("a",{parentName:"li",href:"https://github.com/Vestride/Shuffle/issues/25"},"#25"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v2.1.1")," 2014-04-16 - Fix items with zero opacity overlapping visible ones in IE<10."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v2.1.0")," 2014-04-12 - Register with bower as ",(0,a.kt)("inlineCode",{parentName:"li"},"shufflejs"),"."),(0,a.kt)("li",{parentName:"ul"},"2014-04-10 - Add AMD support."),(0,a.kt)("li",{parentName:"ul"},"2014-04-08 - Separate Modernizr into its own file and custom Shuffle build."),(0,a.kt)("li",{parentName:"ul"},"2014-03-08 - Add Bootstrap 3 demo. Fixed issue with percentage width items."),(0,a.kt)("li",{parentName:"ul"},"2013-10-04 - Moved some Shuffle instance properties to constants. Converted from 4 to 2 space indentation. Added events enum and pulled out some strings to constants."),(0,a.kt)("li",{parentName:"ul"},"2013-08-30 - Added animate-in demo."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"v2.0.0")," 2013-07-05 - Shuffle 2.0 with masonry, adding and removing, and more."),(0,a.kt)("li",{parentName:"ul"},"2012-11-03 - Replaced layout system with ",(0,a.kt)("a",{parentName:"li",href:"http://masonry.desandro.com/"},"masonry"),". Items can now be different sizes! Added addtional examples."),(0,a.kt)("li",{parentName:"ul"},"2012-10-24 - Better handling of grid item dimensions. Added a minimal markup page."),(0,a.kt)("li",{parentName:"ul"},"2012-09-20 - Added ",(0,a.kt)("inlineCode",{parentName:"li"},"destroy")," method"),(0,a.kt)("li",{parentName:"ul"},"2012-09-18 - Added sorting ability and made plugin responsive. Updated to Modernizr 2.6.2"),(0,a.kt)("li",{parentName:"ul"},"2012-07-21 - Rewrote plugin in more object oriented structure. Added custom events. Updated to Modernizr 2.6.1"),(0,a.kt)("li",{parentName:"ul"},"2012-07-03 - Removed dependency on the css file and now apply the css with javascript")))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.5d433e90.js b/assets/js/runtime~main.bbd99b38.js similarity index 97% rename from assets/js/runtime~main.5d433e90.js rename to assets/js/runtime~main.bbd99b38.js index c9fd477..abbb633 100644 --- a/assets/js/runtime~main.5d433e90.js +++ b/assets/js/runtime~main.bbd99b38.js @@ -1 +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(l=0;l=o)&&Object.keys(n.O).every((e=>n.O[e](r[c])))?r.splice(c--,1):(f=!1,o0&&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/"+({4:"9ed00105",53:"935f2afb",54:"9dd8a0d2",80:"9beb87c2",92:"6ff629d8",141:"d700bc26",162:"d589d3a7",192:"4777fd9a",202:"aa72d29b",207:"5fbc5cf1",211:"1ffdd7de",241:"164760aa",261:"828b0528",315:"2261bd48",456:"3475e39f",514:"1be78505",599:"e2d55573",879:"41eae919",918:"17896441",924:"e6a2d45a",943:"c4de80f8",947:"9348edec"}[e]||e)+"."+{4:"405aa924",6:"39f12220",53:"ef3e6d3e",54:"d173b61d",80:"dd9dad2a",92:"fe161ffa",141:"b3cab509",162:"7a5427e6",192:"12758554",202:"5bc9d489",207:"058121d7",211:"e0b78bc9",241:"629096f9",261:"0ab4cce1",315:"43398a4e",456:"89a2f11b",514:"c94b0e93",599:"fc48f741",879:"210a5d3c",918:"411154fa",924:"358c0842",943:"10734a73",947:"e9bad472"}[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{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:"918","9ed00105":"4","935f2afb":"53","9dd8a0d2":"54","9beb87c2":"80","6ff629d8":"92",d700bc26:"141",d589d3a7:"162","4777fd9a":"192",aa72d29b:"202","5fbc5cf1":"207","1ffdd7de":"211","164760aa":"241","828b0528":"261","2261bd48":"315","3475e39f":"456","1be78505":"514",e2d55573:"599","41eae919":"879",e6a2d45a:"924",c4de80f8:"943","9348edec":"947"}[e]||e,n.p+n.u(e)},(()=>{var e={303:0,532: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(/^(303|532)$/.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{"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=o)&&Object.keys(n.O).every((e=>n.O[e](r[c])))?r.splice(c--,1):(f=!1,o0&&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/"+({4:"9ed00105",53:"935f2afb",54:"9dd8a0d2",80:"9beb87c2",92:"6ff629d8",141:"d700bc26",162:"d589d3a7",192:"4777fd9a",202:"aa72d29b",207:"5fbc5cf1",211:"1ffdd7de",241:"164760aa",261:"828b0528",315:"2261bd48",456:"3475e39f",514:"1be78505",599:"e2d55573",879:"41eae919",918:"17896441",924:"e6a2d45a",943:"c4de80f8",947:"9348edec"}[e]||e)+"."+{4:"405aa924",6:"39f12220",53:"ef3e6d3e",54:"d173b61d",80:"4eeff665",92:"fe161ffa",141:"b3cab509",162:"7a5427e6",192:"12758554",202:"5bc9d489",207:"058121d7",211:"e0b78bc9",241:"629096f9",261:"0ab4cce1",315:"43398a4e",456:"89a2f11b",514:"c94b0e93",599:"fc48f741",879:"210a5d3c",918:"411154fa",924:"358c0842",943:"10734a73",947:"e9bad472"}[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{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:"918","9ed00105":"4","935f2afb":"53","9dd8a0d2":"54","9beb87c2":"80","6ff629d8":"92",d700bc26:"141",d589d3a7:"162","4777fd9a":"192",aa72d29b:"202","5fbc5cf1":"207","1ffdd7de":"211","164760aa":"241","828b0528":"261","2261bd48":"315","3475e39f":"456","1be78505":"514",e2d55573:"599","41eae919":"879",e6a2d45a:"924",c4de80f8:"943","9348edec":"947"}[e]||e,n.p+n.u(e)},(()=>{var e={303:0,532: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(/^(303|532)$/.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 Adding and removing items | Shuffle.js - +

Adding and removing items

You can add and remove elements from shuffle after it has been created. This also works for infinite scrolling.

Adding elements​

Wherever you add the element in the DOM is where it will show up in the grid (assuming you’re 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.

/**
 * Create some DOM elements, append them to the shuffle container, then notify
 * shuffle about the new items. You could also insert the HTML as a string.
 */
onAppendBoxes() {
  const elements = this._getArrayOfElementsToAdd();

  elements.forEach((element) => {
    this.shuffle.element.appendChild(element);
  });

  // Tell shuffle elements have been appended.
  // It expects an array of elements as the parameter.
  this.shuffle.add(elements);
}

Removing elements​

Shuffle will animate the element away and then remove it from the DOM once it's finished. It will then emit the Shuffle.EventType.REMOVED event with the array of elements in event.collection.

this.shuffle.remove([element1, element2]);
tip

Check out the adding and removing demo.

- + \ No newline at end of file diff --git a/docs/advanced-filters.html b/docs/advanced-filters.html index 24b5ee6..541bcd7 100644 --- a/docs/advanced-filters.html +++ b/docs/advanced-filters.html @@ -7,13 +7,13 @@ Advanced filters | Shuffle.js - +

Advanced filters

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.

Example​

// Filters elements with a data-title attribute with less than 10 characters
shuffleInstance.filter((element) => element.dataset.title.length < 10);

Searching​

// Add an event listener for key presses.
document.querySelector('.js-shuffle-search').addEventListener('keyup', handleSearchKeyup);

// Filter the shuffle instance by items with a title that matches the search input.
function handleSearchKeyup(event) {
  const searchText = event.target.value.toLowerCase();

  shuffleInstance.filter((element, shuffle) => {
    const titleElement = element.querySelector('.picture-item__title');
    const titleText = titleElement.textContent.toLowerCase().trim();

    return titleText.includes(searchText);
  });
}

In this example, when the user presses a key in the input, we call filter on shuffle with a callback function. Inside the callback function, we return whether the current shuffle item contains the search text.

tip

Check out the compounded filters demo.

- + \ No newline at end of file diff --git a/docs/alternatives.html b/docs/alternatives.html index 60891f7..ab4de45 100644 --- a/docs/alternatives.html +++ b/docs/alternatives.html @@ -7,13 +7,13 @@ Alternatives | Shuffle.js - +

Alternatives

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.

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 packery or isotope.

- + \ No newline at end of file diff --git a/docs/api.html b/docs/api.html index 225cfc6..37cb7e4 100644 --- a/docs/api.html +++ b/docs/api.html @@ -7,13 +7,13 @@ API | Shuffle.js - +

API

A list of the methods available to you and what they do.

filter(category?, sortObject?)​

Filters all the shuffle items and then sorts them.

  • category can be a string, array of strings, or a function. Learn more in filters.
  • The sortObject is optional, defaulting to the last-used sort object.

sort(sortObject?)​

Sorts the currently filtered shuffle items.

Calling sort with an empty object will reset the elements to DOM order.

See the SortOptions for the available properties.

update(options?)​

Repositions everything. Useful for when dimensions (like the window size) change.

You may provide an options object containing the following properties:

  • recalculateSizes: Whether to recalculate column, gutter, and container widths again. Defaults to true.
  • force: By default, update does nothing if the instance is disabled. Setting this to true forces the update to happen regardless.

layout()​

Use this instead of update() if you don't need the columns and gutters updated. Maybe an image inside shuffle loaded (and now has a height), which means calculations could be off.

add(newItems)​

New items have been appended to the shuffle container. newItems is an array of elements.

disable()​

Disables Shuffle from updating dimensions and layout on resize.

enable(isUpdateLayout?)​

Enables Shuffle again. If you pass false as the first parameter, you can tell Shuffle to skip the layout recalculation.

remove(elements)​

Remove one or more shuffle items. elements is an array containing one or more elements.

getItemByElement(element)​

Retrieve a ShuffleItem by its element.

destroy()​

Destroys Shuffle, removes events, styles, classes, and references.

- + \ No newline at end of file diff --git a/docs/changelog.html b/docs/changelog.html index ed4289f..96e642c 100644 --- a/docs/changelog.html +++ b/docs/changelog.html @@ -7,13 +7,13 @@ Changelog (abbreviated) | Shuffle.js - +
-

Changelog (abbreviated)

For a more detailed changelog, visit the latest releases on GitHub.

  • v6.0.0 2022-02-14 - Drop IE 11, remove misspelled delimeter option, remove matches-selector package.
  • v5.4.1 2021-05-29 - Add sortedItems property. Fix getComputedStyle bug for Chrome on Windows.
  • v5.3.0 2021-03-23 - Add isRTL option.
  • v5.2.3 2019-08-29 - Add missing inherited methods from TinyEmitter to TypeScript definitions.
  • v5.2.2 2019-06-03 - Update TypeScript definitions.
  • v5.2.1 2018-12-01 - Change `index.d.ts` to use `export default Shuffle` (#214). Upgrade dev dependencies.
  • v5.2.0 2018-08-19 - Lazily test whether the browser's getComputedStyle includes padding. This allows the bundled file to be imported in node for server side rendering.
  • v5.1.2 2018-03-26 - Fix misspelled delimiter option. Both "delimiter" and "delimeter" will continue to work for v5.
  • v5.1.1 2018-03-02 - Fix new item animation when there is an active filter.
  • v5.1.0 2018-02-20 - Add compare option to sorter. Add es build to package and "module" field to package.json.
  • v5.0.3 2017-10-30 - Fix rounding error.
  • v5.0.2 2017-09-23 - Update type definitions. Upgrade dev dependencies.
  • v5.0.1 2017-07-18 - Add roundTransforms option.
  • v5.0.0 2017-07-18 - Change global export from shuffle to Shuffle. Remove bower support. Expect ES6 environment. Make Shuffle instances Event Emitters instead of dispatching CustomEvent.
  • v4.2.0 2017-05-10 - Replace webpack build with rollup. Replace jshint and jscs with eslint. Add filterMode option.
  • v4.1.1 2017-03-21 - the before styles for a ShuffleItem were not applied if the item didn’t move.
  • v4.1.0 2017-01-30 - Use webpack-2 to bundle Shuffle.
  • v4.0.2 2016-09-15 - Update custom-event-polyfill dependency.
  • v4.0.1 2016-07-30 - Fix delimiter option.
  • v4.0.0 2016-04-20 - Rewrite in ES6 with babel. Remove jQuery and Modernizr dependencies. Remove support for IE<11. Docs improvements. Switch to gulp build system with webpack.
  • v3.1.0 2015-03-23 - Allow zero speed option (#64) and cancel previous animations instead of ignoring new ones (#69). Handle non-integer columns better (#46)
  • v3.0.4 2015-02-16 - Publish to NPM.
  • v3.0.2 2015-01-21 - Remove from jQuery plugins directory.
  • v3.0.1 2014-12-29 - Add CommonJS support.
  • v3.0.0 2014-10-06 - Refactored with improvements, added unit tests, more documentation. Removed some triggered events.
  • v2.1.2 2014-06-01 - Use window.jQuery instead of window.$ to work better with noConflict. Fixed #25.
  • v2.1.1 2014-04-16 - Fix items with zero opacity overlapping visible ones in IE<10.
  • v2.1.0 2014-04-12 - Register with bower as shufflejs.
  • 2014-04-10 - Add AMD support.
  • 2014-04-08 - Separate Modernizr into its own file and custom Shuffle build.
  • 2014-03-08 - Add Bootstrap 3 demo. Fixed issue with percentage width items.
  • 2013-10-04 - Moved some Shuffle instance properties to constants. Converted from 4 to 2 space indentation. Added events enum and pulled out some strings to constants.
  • 2013-08-30 - Added animate-in demo.
  • v2.0.0 2013-07-05 - Shuffle 2.0 with masonry, adding and removing, and more.
  • 2012-11-03 - Replaced layout system with masonry. Items can now be different sizes! Added addtional examples.
  • 2012-10-24 - Better handling of grid item dimensions. Added a minimal markup page.
  • 2012-09-20 - Added destroy method
  • 2012-09-18 - Added sorting ability and made plugin responsive. Updated to Modernizr 2.6.2
  • 2012-07-21 - Rewrote plugin in more object oriented structure. Added custom events. Updated to Modernizr 2.6.1
  • 2012-07-03 - Removed dependency on the css file and now apply the css with javascript
- +

Changelog (abbreviated)

For a more detailed changelog, visit the latest releases on GitHub.

  • v6.1.0 2022-07-07 - Add sideEffects: false and exports-map to the package.json.
  • v6.0.0 2022-02-14 - Drop IE 11, remove misspelled delimeter option, remove matches-selector package.
  • v5.4.1 2021-05-29 - Add sortedItems property. Fix getComputedStyle bug for Chrome on Windows.
  • v5.3.0 2021-03-23 - Add isRTL option.
  • v5.2.3 2019-08-29 - Add missing inherited methods from TinyEmitter to TypeScript definitions.
  • v5.2.2 2019-06-03 - Update TypeScript definitions.
  • v5.2.1 2018-12-01 - Change `index.d.ts` to use `export default Shuffle` (#214). Upgrade dev dependencies.
  • v5.2.0 2018-08-19 - Lazily test whether the browser's getComputedStyle includes padding. This allows the bundled file to be imported in node for server side rendering.
  • v5.1.2 2018-03-26 - Fix misspelled delimiter option. Both "delimiter" and "delimeter" will continue to work for v5.
  • v5.1.1 2018-03-02 - Fix new item animation when there is an active filter.
  • v5.1.0 2018-02-20 - Add compare option to sorter. Add es build to package and "module" field to package.json.
  • v5.0.3 2017-10-30 - Fix rounding error.
  • v5.0.2 2017-09-23 - Update type definitions. Upgrade dev dependencies.
  • v5.0.1 2017-07-18 - Add roundTransforms option.
  • v5.0.0 2017-07-18 - Change global export from shuffle to Shuffle. Remove bower support. Expect ES6 environment. Make Shuffle instances Event Emitters instead of dispatching CustomEvent.
  • v4.2.0 2017-05-10 - Replace webpack build with rollup. Replace jshint and jscs with eslint. Add filterMode option.
  • v4.1.1 2017-03-21 - the before styles for a ShuffleItem were not applied if the item didn’t move.
  • v4.1.0 2017-01-30 - Use webpack-2 to bundle Shuffle.
  • v4.0.2 2016-09-15 - Update custom-event-polyfill dependency.
  • v4.0.1 2016-07-30 - Fix delimiter option.
  • v4.0.0 2016-04-20 - Rewrite in ES6 with babel. Remove jQuery and Modernizr dependencies. Remove support for IE<11. Docs improvements. Switch to gulp build system with webpack.
  • v3.1.0 2015-03-23 - Allow zero speed option (#64) and cancel previous animations instead of ignoring new ones (#69). Handle non-integer columns better (#46)
  • v3.0.4 2015-02-16 - Publish to NPM.
  • v3.0.2 2015-01-21 - Remove from jQuery plugins directory.
  • v3.0.1 2014-12-29 - Add CommonJS support.
  • v3.0.0 2014-10-06 - Refactored with improvements, added unit tests, more documentation. Removed some triggered events.
  • v2.1.2 2014-06-01 - Use window.jQuery instead of window.$ to work better with noConflict. Fixed #25.
  • v2.1.1 2014-04-16 - Fix items with zero opacity overlapping visible ones in IE<10.
  • v2.1.0 2014-04-12 - Register with bower as shufflejs.
  • 2014-04-10 - Add AMD support.
  • 2014-04-08 - Separate Modernizr into its own file and custom Shuffle build.
  • 2014-03-08 - Add Bootstrap 3 demo. Fixed issue with percentage width items.
  • 2013-10-04 - Moved some Shuffle instance properties to constants. Converted from 4 to 2 space indentation. Added events enum and pulled out some strings to constants.
  • 2013-08-30 - Added animate-in demo.
  • v2.0.0 2013-07-05 - Shuffle 2.0 with masonry, adding and removing, and more.
  • 2012-11-03 - Replaced layout system with masonry. Items can now be different sizes! Added addtional examples.
  • 2012-10-24 - Better handling of grid item dimensions. Added a minimal markup page.
  • 2012-09-20 - Added destroy method
  • 2012-09-18 - Added sorting ability and made plugin responsive. Updated to Modernizr 2.6.2
  • 2012-07-21 - Rewrote plugin in more object oriented structure. Added custom events. Updated to Modernizr 2.6.1
  • 2012-07-03 - Removed dependency on the css file and now apply the css with javascript
+ \ No newline at end of file diff --git a/docs/column-widths.html b/docs/column-widths.html index 7a7899c..b2758df 100644 --- a/docs/column-widths.html +++ b/docs/column-widths.html @@ -7,13 +7,13 @@ How column widths work | Shuffle.js - +

How column widths work

There are 4 options for defining the width of the columns:

  1. Use a 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 width and margin-left of this sizer element each time the grid resizes. This is awesome for responsive or fluid grids where the width of a column is a percentage.

    const shuffleInstance = new Shuffle(element, {
      itemSelector: '.picture-item',
      sizer: '.js-shuffle-sizer',
    });

  2. Use a 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).

    const shuffleInstance = new Shuffle(element, {
      itemSelector: '.picture-item',
      columnWidth: (containerWidth) => 0.18 * containerWidth,
    });

  3. A number. This will explicitly set the column width to your number (in pixels).

    const shuffleInstance = new Shuffle(element, {
      itemSelector: '.picture-item',
      columnWidth: 200,
    });

  4. By default, shuffle will use the width of the first item to calculate the column width.

    const shuffleInstance = new Shuffle(element, {
      itemSelector: '.picture-item',
    });
- + \ No newline at end of file diff --git a/docs/configuration.html b/docs/configuration.html index 744a929..bd2f0f8 100644 --- a/docs/configuration.html +++ b/docs/configuration.html @@ -7,13 +7,13 @@ Configuring Shuffle | Shuffle.js - +

Configuring Shuffle

Here are the options you can change, as well as their defaults. The Shuffle.options property contains all the defaults.

No options need to be specified, but itemSelector should be used. Other common options to change are speed and sizer.

Options​

buffer [number]​

Default: 0

Useful for percentage based heights when they might not always be exactly the same (in pixels).

columnThreshold [number]​

Default: 0.01

Reading the width of elements isn't precise enough and can cause columns to jump between values.

columnWidth [number | (conatinerWidth: number) => number]​

Default: 0

A static number or function that returns a number which determines how wide the columns are (in pixels).

delimiter [string | null]​

Default: null

A static number or function that returns a number which determines how wide the columns are (in pixels).

easing [string]​

Default: 'cubic-bezier(0.4, 0.0, 0.2, 1)'

CSS easing function to use.

filterMode [Shuffle.FilterMode]​

Default: Shuffle.FilterMode.ANY

Affects using an array with filter. e.g. 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.

group [string]​

Default: Shuffle.ALL_ITEMS ("all")

Initial filter group.

gutterWidth [number | (conatinerWidth: number) => number]​

Default: 0

A static number or function that determines how wide the gutters between columns are (in pixels).

initialSort [SortOptions | null]​

Default: null

Shuffle can be initialized with a sort object. It is the same object given to the sort method.

isCentered [boolean]​

Default: false

Whether to center grid items in the row with the leftover space.

isRTL [boolean]​

Default: false

Whether to align grid items to the right in the row.

itemSelector [string]​

Default: '*'

Query selector to find Shuffle items. e.g. '.picture-item'.

roundTransforms [boolean]​

Default: true

Whether to round pixel values used in translate(x, y). This usually avoids blurriness.

sizer [HTMLElement | string | null]​

Default: null

Element or selector string. Use an element to determine the size of columns and gutters.

speed [number]​

Default: 250

Transition/animation speed (milliseconds).

staggerAmount [number]​

Default: 15

Transition delay offset for each item in milliseconds.

staggerAmountMax [number]​

Default: 150

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.

useTransforms [boolean]​

Default: false

Whether to use absolute positioning instead of transforms.

Sorting object​

by [(element: HTMLElement) => any]​

Default: null

Sorting function which gives you the element each shuffle item is using by default.

Returning undefined from the by function will reset the order to DOM order.

compare [(a: Shuffle.ShuffleItem, b: Shuffle.ShuffleItem) => number]​

Default: null

Instead of using the simple by function, you can use the compare function provide a completely custom sorting function.

tip

See Advanced sorting for usage.

key [keyof Shuffle.ShuffleItem]​

Default: 'element'

Determines which property of the ShuffleItem instance is passed to the by function.

randomize [boolean]​

Default: false

If true, this will skip the sorting and return a randomized order in the array.

reverse [boolean]​

Default: false

Use array.reverse() to reverse the results of your sort.

- + \ No newline at end of file diff --git a/docs/custom-styles.html b/docs/custom-styles.html index 7431780..f9da4b5 100644 --- a/docs/custom-styles.html +++ b/docs/custom-styles.html @@ -7,13 +7,13 @@ Custom styles | Shuffle.js - +

Custom styles

You can customize the default styles which are applied to Shuffle items upon initialization, before layout, after layout, before hiding, and after hidden.

Here are the defaults:

ShuffleItem.Css = {
  INITIAL: {
    position: 'absolute',
    top: 0,
    visibility: 'visible',
    willChange: 'transform',
  },
  DIRECTION: {
    ltr: {
      left: 0,
    },
    rtl: {
      right: 0,
    },
  },
  VISIBLE: {
    before: {
      opacity: 1,
      visibility: 'visible',
    },
    after: {
      transitionDelay: '',
    },
  },
  HIDDEN: {
    before: {
      opacity: 0,
    },
    after: {
      visibility: 'hidden',
      transitionDelay: '',
    },
  },
};

ShuffleItem.Scale = {
  VISIBLE: 1,
  HIDDEN: 0.001,
};

If you wanted to add a 50% red background to every item when they initialize, you could do this:

Shuffle.ShuffleItem.Css.INITIAL.backgroundColor = 'rgba(255, 0, 0, 0.5)';

To set the text color to teal after the item has finished moving:

Shuffle.ShuffleItem.Css.VISIBLE.after.color = 'teal';

You can also customize the scaling effect with visible or hidden items.

Shuffle.ShuffleItem.Scale.HIDDEN = 0.5;
- + \ No newline at end of file diff --git a/docs/demos.html b/docs/demos.html index 029b421..e57373e 100644 --- a/docs/demos.html +++ b/docs/demos.html @@ -7,13 +7,13 @@ List of demos | Shuffle.js - +
- + \ No newline at end of file diff --git a/docs/events.html b/docs/events.html index 1f1cc33..c16ad91 100644 --- a/docs/events.html +++ b/docs/events.html @@ -7,13 +7,13 @@ Events | Shuffle.js - +

Events

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.

Get notified when a layout happens​

shuffleInstance.on(Shuffle.EventType.LAYOUT, () => {
  console.log('Things finished moving!');
});

Do something when an item is removed​

shuffleInstance.on(Shuffle.EventType.REMOVED, (data) => {
  console.log(this, data, data.collection, data.shuffle);
});
tip

Check out the homepage demo. It adds these events and logs them to the console.

- + \ No newline at end of file diff --git a/docs/faqs.html b/docs/faqs.html index 720531d..e388bf2 100644 --- a/docs/faqs.html +++ b/docs/faqs.html @@ -7,13 +7,13 @@ FAQs | Shuffle.js - +

FAQs

Why Does Shuffle leave empty spaces?​

The algorithm used to place items does not keep track of empty space nor try to fill them. If you require this functionality, I suggest packery.

Why are images overlapping?​

If the size of your items are dependent on images, they can overlap if shuffle is initialized before all the images have loaded. Check out this demo to see how to fix it.

What’s the difference between Shuffle and Isotope?​

Isotope:

  • more layout modes
  • more options
  • community of users
  • commercial use requires a license

Shuffle:

  • robust filtering
  • slightly smaller
  • responsive by default
  • sizer element (which packery also has)

They are very similar, but I think Shuffle's filtering and sorting are easier to customize, which is the main reason I created this library. Isotope has a much larger community, is battle-tested, and has many stackoverflow answers.

Padding isn’t working on the shuffle element​

The padding is ignored by Shuffle because it creates complexities with absolute positioning the shuffle-items when they have a percentage width as well as setting the height of the shuffle container because of box-sizing. To fix this, wrap the shuffle element in another element which has the padding on it.

Can I center the layout?​

Yes. Use the isCentered option.

It’s not working with Boostrap 4​

Bootstrap 4 uses flexbox for grids, so your main shuffle container element must be a .row and the items inside the row (shuffle items) should all be columns. See the Bootstrap 4 grid demo.

Didn't find an answer?

Try browsing the CodePen collection or searching the issues on GitHub.

- + \ No newline at end of file diff --git a/docs/filters.html b/docs/filters.html index cf4a81d..a7111d2 100644 --- a/docs/filters.html +++ b/docs/filters.html @@ -7,13 +7,13 @@ Filters | Shuffle.js - +

Filters

Filter by a group​

Use the filter() method. If, for example, you wanted to show only items that match "space", you would do this:

shuffleInstance.filter('space');

Filter by multiple groups​

Show multiple groups at once by using an array.

shuffleInstance.filter(['space', 'nature']);

By default, this will show items that match space or nature. To show only groups that match space and nature, set the filterMode option to Shuffle.FilterMode.ALL.

Show all items​

To go back to having no items filtered, you can call filter() without a parameter, or use Shuffle.ALL_ITEMS (which by default is the string "all").

shuffleInstance.filter(Shuffle.ALL_ITEMS); // or .filter()

Overrides​

You can override both Shuffle.ALL_ITEMS and Shuffle.FILTER_ATTRIBUTE_KEY if you want.

// Defaults
Shuffle.ALL_ITEMS = 'all';
Shuffle.FILTER_ATTRIBUTE_KEY = 'groups';

// You can change them to something else.
Shuffle.ALL_ITEMS = 'any';
Shuffle.FILTER_ATTRIBUTE_KEY = 'categories';

Then you would have to use data-categories attribute on your items instead of data-groups.

- + \ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index 90a80da..b465f10 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -7,13 +7,13 @@ Getting started | Shuffle.js - +

Getting started

HTML markup​

Shuffle operates on a group of items, giving you the ability to filter or sort them.

<div id="photo-gallery">
  <div class="picture-item">…</div>
  <div class="picture-item">…</div>
  <div class="picture-item">…</div>
  <div class="picture-item">…</div>
</div>

The easiest way to use Shuffle is to add a data-groups attribute to each of the items in your grid as a valid JSON array of strings.

<figure class="picture-item" data-groups='["nature","city"]'>
  <img src="central-park.jpg" alt="Aerial view of Central Park" />
  <figcaption>Looking down on central park and the surrounding builds from the Rockefellar Center</figcaption>
</figure>

Alternatively, you can set the delimiter option to a comma (delimiter: ',') and the data-groups attribute will be split on that character.

<figure class="picture-item" data-groups="nature,city">
  <img src="central-park.jpg" alt="Aerial view of Central Park" />
  <figcaption>Looking down on central park and the surrounding builds from the Rockefellar Center</figcaption>
</figure>

If you were using Bootstrap v4 grids, you could use the col-* classes like this.

<div class="row" id="photo-gallery">
  <figure class="col-3 picture-item" data-groups='["animal"]'>
    <div class="aspect">
      <img src="crocodile.jpg" alt="A close, profile view of a crocodile looking directly into the camera" />
    </div>
    <figcaption>Crocodile</figcaption>
  </figure>
  <figure class="col-3 picture-item" data-groups='["city"]'>
    <div class="aspect">
      <img src="crossroads.jpg" alt="A multi-level highway stack interchange in Puxi, Shanghai" />
    </div>
    <figcaption>Crossroads</figcaption>
  </figure>
  <figure class="col-3 picture-item" data-groups='["nature","city"]'>
    <div class="aspect">
      <img
        src="central-park.jpg"
        alt="Looking down on central park and the surrounding builds from the Rockefellar Center"
      />
    </div>
    <figcaption>Central Park</figcaption>
  </figure>
  <div class="col-1 js-shuffle-sizer"></div>
</div>

JavaScript​

Once the markup is ready, initialize Shuffle by giving it the container element and an optional options object.

const Shuffle = window.Shuffle; // Assumes you're using the UMD version of Shuffle (for example, from unpkg.com).
const element = document.getElementById('photo-gallery');
const sizer = element.querySelector('.js-shuffle-sizer');

const shuffleInstance = new Shuffle(element, {
  itemSelector: '.picture-item',
  sizer: sizer, // could also be a selector: '.js-shuffle-sizer'
});
- + \ No newline at end of file diff --git a/docs/install.html b/docs/install.html index 716cc46..60aba69 100644 --- a/docs/install.html +++ b/docs/install.html @@ -7,13 +7,13 @@ Installation | Shuffle.js - +
- + \ No newline at end of file diff --git a/docs/sorting.html b/docs/sorting.html index 8e63005..b226a89 100644 --- a/docs/sorting.html +++ b/docs/sorting.html @@ -7,13 +7,13 @@ Sorting | Shuffle.js - +

Sorting

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.

<figure class="picture-item" data-groups='["city"]' data-date-created="2016-06-09" data-title="Crossroads">…</figure>

<select class="sort-options">
  <option value="">Default</option>
  <option value="title">Title</option>
  <option value="date-created">Date Created</option>
</select>
addSorting() {
  document.querySelector('.sort-options').addEventListener('change', this._handleSortChange.bind(this));
}

_handleSortChange(event) {
  const value = event.target.value;

  function sortByDate(element) {
    return element.dataset.created;
  }

  function sortByTitle(element) {
    return element.dataset.title.toLowerCase();
  }

  let options;
  if (value === 'date-created') {
    options = {
      reverse: true,
      by: sortByDate,
    };
  } else if (value === 'title') {
    options = {
      by: sortByTitle,
    };
  } else {
    options = {};
  }

  this.shuffle.sort(options);
}

The options object can contain three properties:

  • reverse: a boolean which will reverse the resulting order.
  • by: a function with an element as the parameter. Above, we’re returning the value of the data-date-created or data-title attribute.
  • randomize: Make the order random.

Returning undefined from the by function will reset the order to DOM order.

Calling sort with an empty object will reset the elements to DOM order.

tip

Check out the homepage demo.

Filter and sort​

You can filter and sort at the same time by passing a sort object, which has the same shape as the sort function above, as the second parameter.

shuffleInstance.filter('space', {
  by: (element) => {
    return element.dataset.title.toLowerCase();
  },
});

Advanced sorting​

You can provide the entire sort compare function if you need more control.

The parameters (a, b) are ShuffleItem instances and you'll probably only use the element property. The reverse option still works with the compare function if you need it.

For example, if you wanted to sort by the first group in data-groups, then by data-age, you could do this:

shuffleInstance.sort({
  compare: (a, b) => {
    // Sort by first group, then by age.
    const groupA = JSON.parse(a.element.dataset.groups)[0];
    const groupB = JSON.parse(b.element.dataset.groups)[0];
    if (groupA > groupB) {
      return 1;
    }
    if (groupA < groupB) {
      return -1;
    }

    // At this point, the group strings are the exact same. Test the age.
    const ageA = parseInt(a.element.dataset.age, 10);
    const ageB = parseInt(b.element.dataset.age, 10);
    return ageA - ageB;
  },
});
- + \ No newline at end of file diff --git a/docs/supported-browsers.html b/docs/supported-browsers.html index 3618941..a51e38d 100644 --- a/docs/supported-browsers.html +++ b/docs/supported-browsers.html @@ -7,13 +7,13 @@ Supported browsers | Shuffle.js - +

Supported browsers

  • Chrome
  • Firefox
  • Edge
  • Safari

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?

- + \ No newline at end of file diff --git a/index.html b/index.html index 6ff7376..ae2560d 100644 --- a/index.html +++ b/index.html @@ -7,13 +7,13 @@ Home | Shuffle.js - +

Shuffle.js

Categorize, sort, and filter a responsive grid of items

Get started with Shuffle

Responsive design

Shuffle was built to make responsive design easy. Quickly update items in the grid by adding a class.

Powerful filters

Let your users find what they’re looking for with groups and custom filters.

Smooth animations

Transitions are all handled by the CSS, which lets the browser optimize them for the user’s device.

- + \ No newline at end of file