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
3 months ago
|
"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.
|