You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
8.5 KiB
JavaScript
1 line
8.5 KiB
JavaScript
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[92],{876:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>m});var r=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 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 l(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 s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),u=p(n),m=a,h=u["".concat(s,".").concat(m)]||u[m]||c[m]||o;return n?r.createElement(h,i(i({ref:t},d),{},{components:n})):r.createElement(h,i({ref:t},d))}));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]=u;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var p=2;p<o;p++)i[p]=n[p];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}u.displayName="MDXCreateElement"},7158:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>c,frontMatter:()=>o,metadata:()=>l,toc:()=>p});var r=n(8427),a=(n(2784),n(876));const o={sidebar_position:6},i="Sorting",l={unversionedId:"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.",source:"@site/docs/sorting.md",sourceDirName:".",slug:"/sorting",permalink:"/Shuffle/docs/sorting",draft:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/sorting.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Advanced filters",permalink:"/Shuffle/docs/advanced-filters"},next:{title:"Events",permalink:"/Shuffle/docs/events"}},s={},p=[{value:"Filter and sort",id:"filter-and-sort",level:2},{value:"Advanced sorting",id:"advanced-sorting",level:2}],d={toc:p};function c(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"sorting"},"Sorting"),(0,a.kt)("p",null,"You can order the elements with a function you supply. In the demo above, each item has a ",(0,a.kt)("inlineCode",{parentName:"p"},"data-date-created")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"data-title")," attribute which are used for sorting."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},'<figure class="picture-item" data-groups=\'["city"]\' data-date-created="2016-06-09" data-title="Crossroads">\u2026</figure>\n\n<select class="sort-options">\n <option value="">Default</option>\n <option value="title">Title</option>\n <option value="date-created">Date Created</option>\n</select>\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"addSorting() {\n document.querySelector('.sort-options').addEventListener('change', this._handleSortChange.bind(this));\n}\n\n_handleSortChange(event) {\n const value = event.target.value;\n\n function sortByDate(element) {\n return element.dataset.created;\n }\n\n function sortByTitle(element) {\n return element.dataset.title.toLowerCase();\n }\n\n let options;\n if (value === 'date-created') {\n options = {\n reverse: true,\n by: sortByDate,\n };\n } else if (value === 'title') {\n options = {\n by: sortByTitle,\n };\n } else {\n options = {};\n }\n\n this.shuffle.sort(options);\n}\n")),(0,a.kt)("p",null,"The ",(0,a.kt)("inlineCode",{parentName:"p"},"options")," object can contain three properties:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"reverse"),": a boolean which will reverse the resulting order."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"by"),": a function with an element as the parameter. Above, we\u2019re returning the value of the ",(0,a.kt)("inlineCode",{parentName:"li"},"data-date-created")," or ",(0,a.kt)("inlineCode",{parentName:"li"},"data-title")," attribute."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"randomize"),": Make the order random.")),(0,a.kt)("p",null,"Returning ",(0,a.kt)("inlineCode",{parentName:"p"},"undefined")," from the ",(0,a.kt)("inlineCode",{parentName:"p"},"by")," function will reset the order to DOM order."),(0,a.kt)("p",null,"Calling sort with an empty object will reset the elements to DOM order."),(0,a.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,a.kt)("div",{parentName:"div",className:"admonition-heading"},(0,a.kt)("h5",{parentName:"div"},(0,a.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,a.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,a.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"tip")),(0,a.kt)("div",{parentName:"div",className:"admonition-content"},(0,a.kt)("p",{parentName:"div"},"Check out the homepage ",(0,a.kt)("a",{parentName:"p",href:"/"},"demo"),"."))),(0,a.kt)("h2",{id:"filter-and-sort"},"Filter and sort"),(0,a.kt)("p",null,"You can filter and sort at the same time by passing a sort object, which has the same shape as the ",(0,a.kt)("inlineCode",{parentName:"p"},"sort")," function above, as the second parameter."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"shuffleInstance.filter('space', {\n by: (element) => {\n return element.dataset.title.toLowerCase();\n },\n});\n")),(0,a.kt)("h2",{id:"advanced-sorting"},"Advanced sorting"),(0,a.kt)("p",null,"You can provide the entire sort compare function if you need more control."),(0,a.kt)("p",null,"The parameters (",(0,a.kt)("inlineCode",{parentName:"p"},"a"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"b"),") are ",(0,a.kt)("inlineCode",{parentName:"p"},"ShuffleItem")," instances and you'll probably only use the ",(0,a.kt)("inlineCode",{parentName:"p"},"element")," property. The ",(0,a.kt)("inlineCode",{parentName:"p"},"reverse")," option still works with the ",(0,a.kt)("inlineCode",{parentName:"p"},"compare")," function if you need it."),(0,a.kt)("p",null,"For example, if you wanted to sort by the first group in ",(0,a.kt)("inlineCode",{parentName:"p"},"data-groups"),", then by ",(0,a.kt)("inlineCode",{parentName:"p"},"data-age"),", you could do this:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"shuffleInstance.sort({\n compare: (a, b) => {\n // Sort by first group, then by age.\n const groupA = JSON.parse(a.element.dataset.groups)[0];\n const groupB = JSON.parse(b.element.dataset.groups)[0];\n if (groupA > groupB) {\n return 1;\n }\n if (groupA < groupB) {\n return -1;\n }\n\n // At this point, the group strings are the exact same. Test the age.\n const ageA = parseInt(a.element.dataset.age, 10);\n const ageB = parseInt(b.element.dataset.age, 10);\n return ageA - ageB;\n },\n});\n")))}c.isMDXComponent=!0}}]); |