Close filters (on page load) and display filter state on mobile

[jamieu]

[tobystokes]

The original intention was that the filters would only be visible by default if any were active. You may have decided against that, but it that still an option?

Was also thinking we need to indicate better on the control whether filters are active or not, probably changing the text on it if it is:

[jamieu]

Hi @tobystokes

• On mobile, they should only appear when a filter is selected.
• On desktop/tablet(?), they should always appear by default.

Can you make that happen in your markup or do you need a flag exposed / event triggered?

Like the idea of showing the active state and text works for me.

[tobystokes]

looks like currently 'active' class is being used to toggle visibility, but not related to whether filters are actually active, so yes we'll need to separate activeness and visibilty somehow.

[jamieu]

Hi @tobystokes - can you have a chat with @SimonLab on Slack to figure out what you need him to add in the backend to get this working?

[tobystokes]

This may need more thinking first... (I'm around @SimonLab if you want to slack) but I think:

it appears filters are marked as 'active' on page load - whether filters are filtering or not, because that is what toggles the visibility. it might be good to be separate out the -is-visible and the -is-filtering toggles (but i'm looking at other way of indicating that visually too)

First fix I think is to just un-activate it we are on a small screen on initial pageload. I don't think I'm exposing css breakpoints with js but if (getElementsByClassName(.filterpanel).style.position == "absolute") { // then we're on mobile layout }

[jamieu]

@tobystokes @Danwhy This seems to be working but in reverse?

Filter selected (closed on mobile) http://collection.sciencemuseum.org.uk/search/categories/Radio%20Communication

No filters selected (open on mobile) http://collection.sciencemuseum.org.uk/search

Should be the other way round, no?

(happy to make change if you can point me in the right direction)

[SimonLab]

As mention above (https://github.com/TheScienceMuseum/collectionsonline/issues/808#issuecomment-311983321) we can first check if the application is used on mobile by checking the value of the filter position. We can't use directly .style.position as the it will only returned the style directly applied to the html node and not the style computed via the stylesheet. To do that we can use window.getComputedStyle.

Then we can check if a filter is selected or not. If no filter is selected we hide the filters section by removing the "active" class (we can reuse the function trigger to toggle the filters). To know if a filter is selected on the front end we can check the ctx.canonicalPath value of pagejs.

[evancp87]

This is fixed. The issue was that it was only previously fixed for when there are no filters selected, but didn't include search queries made from the homepage, which cause the filters to open on the search results page on mobile.