Collection sort

Sort a collection of elements based on CSS selectors.

GCWeb implementation plan

• 2023-10 - Review and identify requirement to make this functionality enterprise ready.
• 2024-02 - Have this feature as provisional feature in GCWeb.

Todo and for future consideration

• Improve error handling
• Data attribute option for sort value
• Add tagfilter example

Sponsor: Donald McDill Sites management, Service Canada

Classes used

• collection-sort

Collection sort settings

"sort":[{"selector":".cssSelector", "type":"text", "order":"asc"}],
"section":".sort-collection",
"selector":".sort-item"

sort

"sort":[{"selector":".cssSelector", "type":"text", "order":"asc"}]

An array of objects defining the series of sorts to do.

selector

The value to base the sort on

type

"text" or "numeric" for sorting as text or numbers

order

"asc" ascending sort, or "desc" descending sort

section

"section":".sort-collection"

Selector defining the collection of items to be sorted.

selector

"selector":".sort-item"

Selector defining the items in the collection to be sorted.

Sort paragraphs by first sentence descending order

Original paragraphs

Mauris massa massa, porta euismod pellentesque ac, placerat eget purus. Mauris sit amet September 25, 2023 20230925 finibus ex. Ut fringilla sem ut faucibus aliquam. Morbi nec dolor mauris. Nam quis molestie odio.

Nulla sed risus et nunc ultrices luctus. Donec rutrum congue nunc, convallis fringilla velit finibus vitae. Donec massa lectus, consectetur September 3, 2023 20230903 nec consequat sit amet, rutrum at dui. Mauris eget nunc vel arcu pretium efficitur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc vulputate dui nec est ullamcorper, in sodales augue lobortis. Duis fermentum nibh ac risus sagittis malesuada. Quisque feugiat varius tellus, ut mattis nunc September 12, 2023 20230912.

Sorted paragraphs

Sort paragraphs with numeric sort option

Original paragraphs

Mauris massa massa, porta euismod pellentesque ac, placerat eget purus. Mauris sit amet September 25, 2023 20230925 finibus ex. Ut fringilla sem ut faucibus aliquam. Morbi nec dolor mauris. Nam quis molestie odio.

Nulla sed risus et nunc ultrices luctus. Donec rutrum congue nunc, convallis fringilla velit finibus vitae. Donec massa lectus, consectetur September 3, 2023 20230903 nec consequat sit amet, rutrum at dui. Mauris eget nunc vel arcu pretium efficitur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc vulputate dui nec est ullamcorper, in sodales augue lobortis. Duis fermentum nibh ac risus sagittis malesuada. Quisque feugiat varius tellus, ut mattis nunc September 12, 2023 20230912.

Sorted paragraphs

Sort simple list

Original list

• Orange
• Apple
• Pear
• Strawberry
• Peach

Sorted list

Sort simple list with multiple sorts

Original list

• 4 Orange
• 4 Apple
• 1 Pear
• 2 Strawberry
• 3 Peach

Sorted list - sort by term followed by count

Sorted list - sort by count followed by term

Sort multiple lists

Original lists

Sorted lists

Sort items spread across multiple lists

Original lists

Sorted lists