Inline shelf filtering for heavy organizers

This is one of the features I’ve been missing from Goodreads (along with batch editing :)) As an experiment I went ahead and implemented a little bookmarklet to add similar inline filtering:

If you want to try this yourself, you can drag the bookmarklet from this page to your bookmarks bar. After adding the Grouvee inline filters bookmarklet to your bookmarks bar, activate it on any Grouvee page listing games and the inline filter box will be added to each shelf toolbar.

@peter if you like this maybe you can include it in the site directly :wink: Original JavaScript source is here.

1 Like

Hmm, looks like the bookmarklet reference didn’t work in the post. I’ll put it on another page and post a link later tonight.

(edit: I’ve updated the original post with the link and instructions)

1 Like

I’m pretty sure Discourse filters out any Javascript posted.

That’s a really useful feature. I’ve got no issues including it on the site.

Now I just need to find the time to get those extra fields added to the export for you…

Thanks, no rush on the export :slight_smile: I decided to focus on moving my various notes and spreadsheet data into Grouvee first and work on the data viz stuff after more of my data is there. While building this extension I discovered that I have over 100 shelves so you can see why it is useful to me at least.

If people often have a small number of shelves, it might be helpful to only inject this if there are maybe 15 shelves or more.

Minor update: Checked shelves are now sorted to the top (when the menu is shown, so they don’t move around while it is open). Bookmarklet and code links above are updated.

I also put this into a Chrome extension (you have to use Developer mode in Chrome to load it): GrouveeEnhance Chrome extension zip

1 Like

I added your filter code into Grouvee today.

Let me know if you see anything funky. It seems to be working well!

It’s pretty awesome honestly. Thank you so much for the code.

Thanks, this is great! Now I can use it all the time on my iPhone without activating the bookmarklet on every page :slight_smile:

Not to mention no more Chrome nagging about developer mode extensions…

Hmm, actually I do see a couple things that aren’t quite working right:

  • Focus isn’t going into the filter textbox when you click the shelves button
  • After filtering and then closing the shelves, if you click the shelves button again, the filter textbox is empty but the previous filter is still being applied

I haven’t taken a look at your code for this but let me know if I can help.

1 Like

It looks a lot like yours :slight_smile: I actually only changed the section where it creates the text box in js since I do that in my templates and there’s some more logic to it.

  • The focus thing should be easy enough to fix
  • I’ll have to look at why it’s clearing the box out. It doesn’t seem like it should, but I’ll look at that code a little closer tonight.

Ok I realized these were probably the same issue and took a quick look at the Chrome console. The code in the setTimeout on the shelf button click is throwing because filterShelves function isn’t in scope. Should be easy to fix :slight_smile:


Oh and just to clarify, it was supposed to clear out the filter box – you’ll see in the code, I set the filter box value to empty string then call filterShelves to reset the shelves and finally set focus to the filter box. I don’t think it is helpful to remember the filter state after the shelf menu is closed (in fact I think that would be annoying).

It’s all fixed now.

Thanks for the help!

1 Like