I am sharing a bit of javascript that I wrote. It allows filtering content across different criteria simultaneously, for example tags, content types, authors etc.
This was originally written to filter hugo themes using multiple tags, which I posted about here: https://discourse.gohugo.io/t/filterable-hugo-themes/
but I have spun this off into its own repo to be reusable inside hugo projects.
I am trying to use it on my site, and notice a minor bug.
This is expected and current behaviour:
Click Tag A, posts with Tag A are shown
Click Tag B, posts with Tag A and Tag B are shown
Click Tag A again, posts with Tag B are shown only
Click Tag B again, all posts are shown
But when the order for the second click is different from the first, the behaviour is different from what I would expect, eg:
Click Tag A, posts with Tag A are shown
Click Tag B, posts with Tag A and Tag B are shown - Click Tag B again, posts with Tag B are shown only - Click Tag A again, posts with Tag B and Tag A are shown
I’m having a go at fixing it but have not made any progress. I think it must be something in the showCheck function, but I haven’t managed to figure it out. Would be grateful if it was easy for you to point me in the right direction and I can have a go fixing it.
Hi @pointyfar, haven’t made the pull request above yet, but have found another bug:
When I click Tag A, posts with Tag A are shown.
And then when I click Author B, zero posts are shown instead of expected behaviour where posts with Tag A and Author B are shown.
I’ll have a go and see why this is happening.
Edit: ignore this comment, brain fart, the behaviour I expected didn’t make sense.
When I click Tag A, posts with Tag A are shown.
And then when I click Author B, posts which satisfy Tag A AND Author B are shown, and if there are no posts meeting that criteria, zero posts are correctly shown.
Currently (OR within a filter set) + (AND between filter sets)
Well in my case I was interested in the AND behavior within a filter set. Here is the checkVisibility modified function:
{
key: 'checkVisibility',
value: function checkVisibility(list, dataAttr) {
/* Returns TRUE if list is empty or every element of attribute is included in the list */
if (list.length > 0) {
var matches = 0;
for (var v = 0; v < list.length; v++) {
var arr = dataAttr.split(" ").filter(function (el) {return el.length > 0;});
if (arr.indexOf(list[v]) >= 0) {
matches++;
}
}
return matches == list.length;
} else {
return true;
}
}
}
This way it checks that every tag we selected (the dataAttr) is in the list of tags (the list variable) of that page.
Hope it helps someone.
Hi sorry for the thread necromancy, but I’m wondering if/how this can work in tandem with pagination? Like if I have a page with All Posts and then a select dropdown to filter the posts by category, but there are still enough posts to be paginated, does this affect how Hugo does the pagination? Would I just use JS to paginate this?
Also, super thanks for your work on this @pointyfar
N.B. We discourage reviving old topics because people who participated in those discussions of yesteryear are usually not here anymore and they rarely reply to questions. It is best to open a new topic rather than bumping an old one.