Destinations Filter

Destinations-Search

Destinations filter operates on GET parameters. When no parameter is given, the component will assume no preselected topic filters and the maximum duration of 15 hours to display all available destinations.

To open a tab on load, set the class active on .DeFi--tab and the class open on the corresponding .DeFi--panel.
A GET parameter ?tab=duration is appended when the duration tab should be opened on a _page load, i.e. when the user disabled JS or for deep links (demo). Vice versa ?tab=topics should be used to indicate that the topics tab is opened.

To preselect the topic filters specified by the topics GET parameter, e.g. ?topics=offers,beach, add the class active to the corresponding filter elements .DeFi--filter.
The JS component determines active filters by the GET parameter only. Therefore the back end has to ensure that HTML and GET parameter are synchronized on _page load. (demo)

To preset a duration use the duration GET parameter (demo).

The filter operates on a JavaScript array destinations. This array consists of one object per destination. The code attribute is used to link the array with the associated HTML representation with id dest-code as well as map markers. The topics attribute consists of an array which specifies the associated topics of a destination. The link to the filter is done via data-filter-topic attributes on the filter links. In the same manner specifies the duration attribute the corresponding duration.

The back end has to apply a class hide on filtered destinations based on the given topics and duration GET parameters on _page load in order to enable filtering for JavaScript-less browsers.

This module can be combined with the destinations search module which operates on the same JS array.