https://www.peakretreats.co.uk/Content/Scripts/Nxt/filtermanager/filters/plugins/MobileOptionListPlugin.js

1import { FilterPlugin } from '../FilterPlugin.js';
2
3/**
4 * Mobile option list plugin
5 * Handles mobile filter options with apply button
6 */
7export class MobileOptionListPlugin extends FilterPlugin {
8    static getPluginType() {
9        return 'mobile-option-list';
10    }
11
12    static getDomSelector() {
13        return '[data-set-filter]';
14    }
15
16    init() {
17        this.triggers = this.element.querySelectorAll('[data-set-filter][data-mobile-filter="true"]');
18        this.resetTriggers = this.element.querySelectorAll('[data-reset-filter][data-mobile-filter="true"]');
19        
20        this._bindEvents();
21        this._updateUIFromState();
22    }
23
24    _bindEvents() {
25        // Option click
26        this.triggers.forEach(trigger => {
27            trigger.addEventListener('click', (e) => {
28                e.preventDefault();
29                const value = trigger.dataset.setFilter.toString();
30                this._handleOptionClick(value);
31            });
32        });
33
34        // Reset click
35        this.resetTriggers.forEach(trigger => {
36            trigger.addEventListener('click', (e) => {
37                e.preventDefault();
38                this.resetFilter(false); // Don't apply immediately on mobile
39            });
40        });
41    }
42
43    _handleOptionClick(value) {
44        const currentValue = this.getCurrentValue();
45        
46        // Toggle behavior
47        const newValue = currentValue === value ? '' : value;
48        
49        this.updateFilter(newValue, false); // Don't apply immediately on mobile
50        this._updateUIFromState();
51    }
52
53    _updateUIFromState() {
54        const currentValue = this.getCurrentValue();
55        
56        // Remove all active states
57        this.triggers.forEach(el => el.classList.remove('active'));
58        this.resetTriggers.forEach(el => el.classList.remove('active'));
59        
60        if (currentValue === '') {
61            this.resetTriggers.forEach(el => el.classList.add('active'));
62        } else {
63            this.triggers.forEach(el => {
64                if (el.dataset.setFilter === currentValue) {
65                    el.classList.add('active');
66                }
67            });
68        }
69    }
70
71    updateUI(value) {
72        this._updateUIFromState();
73    }
74
75    destroy() {
76        // Events are automatically cleaned up when elements are removed
77    }
78}