Make catalogue grid sortable

[egardner]

As of 0cbeab4d9c0d0f25111670ca86824d947e3ed181 the card grid now outputs a series of data- attributes which can be used for sorting. Right now the available attributes are:

• typology
• region
• group

Others could be added (but some, like Date, would need to be normalized first). The idea is to have one or more drop-downs which allow users to sort by these values, or exclude all entries except for a subset (show only heads, for example").

[egardner]

Possible libraries to use for this:

• Isotope.js
• Shuffle.js
• ShapeShift.js
• Masonry.js
• Gridster.js

Maybe others...

[egardner]

Basic implementation of this is now working. Will make some improvements in coming days.

[geealbers]

Nice! You may already have this in mind, but for the locations, I think it should reflect and reinforce the catalogue organization as it's seen in the TOC. So, I'd change the label from "Region" to "Location" and then have the dropdown options something like:

• South Italy (cat. 1–50)
  • Taranto and Surrounding Areas (cat. 1–37)
  • Canosa (cat. 38–46)
  • Medma (cat. 47–48)
  • Other (cat. 49–50)
• Sicily (cat. 51–60)

Not necessarily a nested list, but styled in some way to suggest this structure.

[geealbers]

And can we add something to indicate the results of the sort? A label that changes with the sort: "37 of 60 Objects", "4 of 60 Objects", etc.? Or a simple visual representation could be cool. It just felt off to me whenever I would sort and nothing visually changed (because it was happening lower).

[egardner]

I was thinking about this – I'll look into adding a result counter or otherwise indicating things have changed with some kind of animation.

Also currently the filters are not cumulative, so I need to make them aware of one another...

[egardner]

As of f01e66b326098c75288a2118d27fe527d13fdfbe basic features are now working.

Things to add:

• [x] Count of current items
• [x] "Empty States" design – User should see something telling them that no results have been returned. - [ ] Animation/transition to indicate when things change (otherwise user may not realize that view has changed below their current scroll level)

This code could probably also be re-factored into a more object-oriented pattern (a catalogue object that has a selection property to manage state, a render method, etc. – instead of scattering these into separate functions).

[egardner]

I'm going to treat animation as an added feature and look into ways to add that later. For now this component is working.