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
6.1 KiB
JavaScript
1 line
6.1 KiB
JavaScript
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[896],{5376:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>i,toc:()=>c});var r=n(1085),o=n(1184);const s={sidebar_position:7},a="Sorting",i={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,unlisted:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/sorting.md",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Advanced filters",permalink:"/Shuffle/docs/advanced-filters"},next:{title:"Events",permalink:"/Shuffle/docs/events"}},d={},c=[{value:"Filter and sort",id:"filter-and-sort",level:2},{value:"Advanced sorting",id:"advanced-sorting",level:2}];function l(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"sorting",children:"Sorting"}),"\n",(0,r.jsxs)(t.p,{children:["You can order the elements with a function you supply. In the demo above, each item has a ",(0,r.jsx)(t.code,{children:"data-date-created"})," and ",(0,r.jsx)(t.code,{children:"data-title"})," attribute which are used for sorting."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-html",children:'<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'})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"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"})}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"options"})," object can contain three properties:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"reverse"}),": a boolean which will reverse the resulting order."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"by"}),": a function with an element as the parameter. Above, we\u2019re returning the value of the ",(0,r.jsx)(t.code,{children:"data-date-created"})," or ",(0,r.jsx)(t.code,{children:"data-title"})," attribute."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"randomize"}),": Make the order random."]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["Returning ",(0,r.jsx)(t.code,{children:"undefined"})," from the ",(0,r.jsx)(t.code,{children:"by"})," function will reset the order to DOM order."]}),"\n",(0,r.jsx)(t.p,{children:"Calling sort with an empty object will reset the elements to DOM order."}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.p,{children:["Check out the homepage ",(0,r.jsx)(t.a,{href:"/",children:"demo"}),"."]})}),"\n",(0,r.jsx)(t.h2,{id:"filter-and-sort",children:"Filter and sort"}),"\n",(0,r.jsxs)(t.p,{children:["You can filter and sort at the same time by passing a sort object, which has the same shape as the ",(0,r.jsx)(t.code,{children:"sort"})," function above, as the second parameter."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"shuffleInstance.filter('space', {\n by: (element) => {\n return element.dataset.title.toLowerCase();\n },\n});\n"})}),"\n",(0,r.jsx)(t.h2,{id:"advanced-sorting",children:"Advanced sorting"}),"\n",(0,r.jsx)(t.p,{children:"You can provide the entire sort compare function if you need more control."}),"\n",(0,r.jsxs)(t.p,{children:["The parameters (",(0,r.jsx)(t.code,{children:"a"}),", ",(0,r.jsx)(t.code,{children:"b"}),") are ",(0,r.jsx)(t.code,{children:"ShuffleItem"})," instances and you'll probably only use the ",(0,r.jsx)(t.code,{children:"element"})," property. The ",(0,r.jsx)(t.code,{children:"reverse"})," option still works with the ",(0,r.jsx)(t.code,{children:"compare"})," function if you need it."]}),"\n",(0,r.jsxs)(t.p,{children:["For example, if you wanted to sort by the first group in ",(0,r.jsx)(t.code,{children:"data-groups"}),", then by ",(0,r.jsx)(t.code,{children:"data-age"}),", you could do this:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"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"})})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},1184:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(4041);const o={},s=r.createContext(o);function a(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); |