https://www.gemeinde-bokhorst.de/typo3conf/ext/communice_addresses…/communice_addresses.js?1678360362

1document.addEventListener('DOMContentLoaded', () => {
2
3  // document.querySelector('[data-remove-active]').addEventListener(el => {
4  //   el.classList.add('active');
5  //   document.querySelector(el.dataset.removeActive).classList.remove('active')
6  // })
7
8  //
9  // $('[data-toggle-show]').bind('click', function() {
10  //   $($(this).data('toggle-show')).show();
11  // });
12  //
13  // $('[data-toggle-hide]').bind('click', function() {
14  //   $($(this).data('toggle-hide')).hide();
15  // });
16  //
17  // $('[data-toggle-filter]').bind('click', function() {
18  //   $($(this).data('toggle-filter')).toggle();
19  //   $(this).toggleClass('active');
20  // });
21  //
22  // $('.address-vcard dt').click(function() {
23  //   $(this).toggleClass('active');
24  // });
25  //
26  // $('.show-addressgroup').click(function(event) {
27  //   event.preventDefault();
28  //   $('.addressgroups-tree li').removeClass('active');
29  //   $(this).parent('li').addClass('active');
30  // });
31
32  /**
33   * These functions are fully refactored from jQuery to Vanilla JS!
34   */
35  Array.prototype.forEach.call(document.querySelectorAll('.toggle-subgroups'), function(item) {
36    item.addEventListener('click', function(e) {
37      e.preventDefault();
38      var parent = e.target.parentElement;
39      var groupId = parent.dataset.addressgroup;
40      Array.prototype.forEach.call(parent.querySelectorAll('[data-child-of="' + groupId + '"]'), function(el) {
41        el.classList.toggle('open');
42      })
43    });
44  })
45
46  Array.prototype.forEach.call(document.querySelectorAll('.addressgroup-filter-dropdown'), function(el) {
47    var adrGrpId = el.dataset.cid;
48    var adrGrpContainer = document.querySelector('.addressgroup--grouped-list[data-cid="' + el.dataset.cid + '"]');
49
50    el.querySelectorAll('[data-filter]').forEach(function(link) {
51
52
53      link.addEventListener('click', function(e) {
54        e.preventDefault();
55
56        if (link.dataset.filter !== 'all') {
57          adrGrpContainer.classList.add('filtering');
58        } else {
59          adrGrpContainer.classList.remove('filtering');
60        }
61
62
63        // show/hide letters
64        adrGrpContainer.querySelectorAll('.addressgroup--grouped-list--letter').forEach(function(letter) {
65          if (link.dataset.filter === 'all') {
66            letter.style.display = 'block';
67          } else {
68            letter.style.display = 'none';
69          }
70        })
71
72        // show/hide addresses
73        adrGrpContainer.querySelectorAll('.address-group--item').forEach(function(el) {
74          el.style.display = 'none'
75          if (el.classList.contains(link.dataset.filter) || link.dataset.filter === 'all') {
76            el.style.display = 'block'
77          }
78        })
79      });
80    });
81  });
82});
83