https://www.ewtn.com/assets/controllers/selector_controller-fbea2b…70513f8e5ee2915d9cb5976af40551edfe4472d8.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  refreshControls(selector, item) {
5    if (selector.dataset.selType == 'scroll') {
6      let values = selector.dataset.selValues.split(',');
7      selector.querySelectorAll(':scope [data-sel-control]').forEach(el => el.classList.remove('hidden'));
8      if (item == values[0]) selector.querySelectorAll(':scope [data-sel-control="prev"]').forEach(el => el.classList.add('hidden'));
9      else if (item == values[values.length - 1]) selector.querySelectorAll(':scope [data-sel-control="next"]').forEach(el => el.classList.add('hidden'));
10    } else {
11      selector.querySelectorAll(':scope [data-sel-control].active').forEach(el => el.classList.remove('active'));
12      selector.querySelectorAll(':scope [data-sel-control][data-sel-item="' + item + '"]').forEach(el => el.classList.add('active'));
13    }
14  }
15
16  change(e) {
17    e.stopPropagation();
18    let control = e.currentTarget,
19      selector = control.closest('[data-sel-type]'),
20      selectorClass = selector.dataset.selClass,
21      selectorType = selector.dataset.selType,
22      item = control.dataset.selItem;
23    if ('dropdown' == selectorType) {
24      if (selector.classList.contains('hovering')) {
25        selector.classList.remove('hovering'); // desktop: drop-down open, close it and process selection
26      } else {
27        selector.classList.add('hovering'); // mobile: drop-down closed, open it
28        return;
29      }
30    }
31    if (control.classList.contains('active')) return;
32    if (selector.dataset.selUrl) {
33      this.refreshControls(selector, item);
34      window.location = selector.dataset.selUrl + '/' + item;
35    } else {
36      if ('scroll' == selectorType) {
37        let values = selector.dataset.selValues.split(','),
38            currentItem = document.querySelector('[data-sel-item].current').dataset.selItem.toString(),
39            currentIndex = values.indexOf(currentItem),
40            nextIndex = currentIndex + (control.dataset.selControl == 'prev' ? -1 : 1);
41        document.querySelectorAll('[data-sel-item]').forEach(el => el.classList.remove('current'));
42        item = values[nextIndex];
43        document.querySelectorAll('[data-sel-item="' + item + '"]').forEach(el => el.classList.add('current'));
44      } else {
45        document.querySelectorAll('[data-sel-item]').forEach(el => el.classList.remove('current'));
46        let selected = '__all__' == item ? '[data-sel-item]' : '[data-sel-item="' + item + '"]';
47        document.querySelectorAll(selected).forEach(el => el.classList.add('current'));
48      }
49      document.querySelectorAll('[data-sel-class="' + selectorClass + '"]').forEach(sel => this.refreshControls(sel, item));
50    }
51  }
52
53  connect() {
54    if (!(window.navigator.maxTouchPoints || 'ontouchstart' in document)) {
55      document.querySelectorAll('[data-sel-type="dropdown"]').forEach(dropdown => {
56        dropdown.onmouseenter = e => e.currentTarget.classList.add('hovering');
57        dropdown.onmouseleave = e => e.currentTarget.classList.remove('hovering');
58      });
59    }
60    document.querySelectorAll('[data-sel-control]').forEach(control => control.onclick = e => this.change(e));
61  }
62
63};