https://janegoodall.be/ui/members-base-2023/droplets/filter/filter.js

1(function () {
2    'use strict';
3
4    define([], function () {
5        const elements = {};
6        const openClass = '--filterOpen';
7        let openState = false;
8        let isFilterActive = 0;
9
10        function initialize(selector, buttonText) {
11            elements.filter = document.getElementById(selector) || document.querySelector(selector);
12            if (!elements.filter) {
13                return;
14            }
15
16            elements.body = document.body;
17            elements.formToggle = document.createElement('div');
18            elements.searchForm = document.querySelector('.mmt-search');
19            elements.filterForm = elements.filter;
20
21            const filterTitle = elements.filter.previousElementSibling;
22            const isPostListFilter = (selector === 'postListFilter');
23
24            if (filterTitle) {
25                if (filterTitle.classList.contains('Article__title')) {
26                    elements.filter.prepend(filterTitle);
27                }
28            }
29
30            const filterFields = elements.filter.querySelectorAll('div.field');
31
32            // Collapse if more than one filter field
33            if (filterFields.length > 2 && isPostListFilter) {
34                elements.filterForm.classList.add('--isCollapsible');
35
36                for (let i = 0; filterFields.length > i; i++) {
37                    const label = filterFields[i].querySelector('label.field');
38                    /*if (label) {
39                        label.classList.add('fieldToggle', 'icon-chevron-down');
40                    }*/
41                    if (label) {
42                        label.classList.add('fieldToggle');
43                    }
44                    if (hasActiveFilter(filterFields[i])) {
45                        label.classList.add('label--hasOpenField');
46                        elements.formToggle.classList.add('--active');
47                        isFilterActive += 1;
48                    }
49                }
50            }
51
52            if (isFilterActive && isPostListFilter) {
53                elements.formToggle.classList.add('--hasFilterData');
54                elements.formToggle.setAttribute('data-filters', isFilterActive);
55            }
56
57            // Add some elements for show/hide @todo: Tidy up this code when the designer agrees to this solution
58            elements.formToggle.classList.add('filterForm__toggle');
59            elements.formToggle.innerHTML = '<span>Filter</span>';
60            if (elements.searchForm) {
61                elements.searchForm.prepend(elements.formToggle);
62            } else {
63                elements.filter.parentNode.prepend(elements.formToggle);
64            }
65
66            let toggleClone = elements.formToggle.cloneNode(true);
67            toggleClone.classList.add('--close');
68            elements.filter.prepend(toggleClone);
69            elements.formToggle.addEventListener('click', toggleForm);
70            toggleClone.addEventListener('click', toggleForm);
71
72            elements.filter.classList.add('filterForm');
73            elements.filter.addEventListener('click', handleFilterClick);
74            elements.submitButton = document.querySelector('.filterForm button');
75            if (elements.submitButton) {
76                elements.submitButton.innerText = buttonText;
77            }
78
79        }
80
81        function hasActiveFilter(field) {
82            let valuedInputs = field.querySelectorAll('.proFormText:not([value=""])');
83            let valuedDates = field.querySelectorAll('.proFormDate:not([value=""])');
84            let checkedInputs = field.querySelectorAll('.proFormCheckbox:checked');
85            let selectedOptions = field.querySelectorAll('option[selected="selected"]:not([value=""])');
86            return (valuedInputs.length > 0 || selectedOptions.length > 0 || valuedDates.length > 0 || checkedInputs.length > 0);
87        }
88
89        function handleFilterClick(event) {
90            let element = event.target;
91            if (element.classList.contains('fieldToggle')) {
92                element.classList.toggle('label--hasOpenField');
93            }
94        }
95
96        function toggleForm() {
97            if (!openState) {
98                elements.formToggle.classList.add(openClass);
99                elements.filterForm.classList.add(openClass);
100                elements.body.classList.add(openClass);
101                openState = true;
102            } else {
103                elements.formToggle.classList.remove(openClass);
104                elements.filterForm.classList.remove(openClass);
105                elements.body.classList.remove(openClass);
106                openState = false;

107            }
108        }
109
110        return {
111            initialize: initialize
112        };
113    });
114})();