https://participationplaybook.org/themes/custom/matrushka_standard…/assets/js/universal_toggler.js?v=1.x

1/**
2 * Objetives:
3 * 1. the function will detect an HTML attribute data-toggle-list, with a list of classes to toggle the element at
4 * 2. if no attribute data-toggle-event is present, click() will be default
5 * 3. toggle-list will have a comma separated list,
6 *    a) If toggle list has only one class, it will toggle on and off on every event ocurrence.
7 *    b) If toggle list has multiple classes, it will compare the actual classes of the object and if any of the list is present, it will be used as an index point to define wich class will follow in the sequence to be added once the event is triggered.
8 *    c) If none of the classes from the toggle list is applied to the element, the firs class will be applied once the event is triggered.
9 *    d) If more than one class is applied on the object, them will be replaced independiently following their own sequence as defined by the toggle list on every event ocurrence.
10*/
11
12(function ($, Drupal, drupalSettings) {
13  Drupal.behaviors.universalToggler = {
14    attach: function (context, settings) {
15      once('universalTogglers', '[data-toggle-list]', context).forEach(function(el, index) {
16        var $el = $(el);
17        var toggleList = $el.data("toggle-list").replace(/ /g,"").split(",").filter(value => value != '');
18
19        // Get trigger event
20        var toggleOn = $el.data("toggle-on");
21        toggleOn = toggleOn ? toggleOn : "click";
22
23        setCurrentAndReplaceLists($el, toggleList);
24
25        // Get override others setting; if true, configured event will include the preventDefault() directive
26        var overrideBehavior = $el.data("toggle-override-action");
27        overrideBehavior = overrideBehavior ? overrideBehavior : false;
28
29        // Get unique setting; if true, parameters for toggling will be mirrored from matching siblings (baed on root classes)
30        var uniqueEnabled = $el.data("toggle-unique-among-siblings");
31        uniqueEnabled = uniqueEnabled ? uniqueEnabled : false;
32
33        $el.on(toggleOn, function(event) {
34          if(overrideBehavior) {
35            event.preventDefault();
36          }
37          if(uniqueEnabled) {
38            clearSiblings($el, toggleList);
39          }
40          $el.removeClass($el.data("current-list"));
41          $el.addClass($el.data("replace-list"));
42          setCurrentAndReplaceLists($el, toggleList);
43        });
44
45        // Clear siblings to remove the current set of toggling clsses if required
46        function clearSiblings($el, toggleList) {
47          let refferenceList = $el.attr('class').split(" ").filter(key => !toggleList.includes(key));
48          let selector = refferenceList.map(function(item){ return "." + item }).join(" ");
49          let selection = $(selector, context);
50
51          $el.data("toggler-axis", true);
52          selection = selection.filter(function() {return !$(this).data("toggler-axis")});
53          $el.removeData("toggler-axis");
54
55          selection.each(function(){
56            $(this).removeClass(toggleList);
57            setCurrentAndReplaceLists($(this), toggleList);
58          });
59        }
60

61        // Determine current and replace list based on object conditions
62        function setCurrentAndReplaceLists($el, toggleList) {
63          var currentList = [];
64          var replaceList = [];
65
66          // Check if toggle all is enabled or enable it if toggle list contains a single item
67          let toggleAll = $el.data("toggle-all");
68          toggleAll = toggleAll || toggleList.length == 1 ? true : false;
69
70          $.each(toggleList, function(index, value){
71            let exists = $el.hasClass(value);
72            if(exists) {
73              currentList.push(value);
74              var newIndex = index + 1;
75              if (newIndex >= toggleList.length) {
76                newIndex = 0;
77              }
78              replaceList.push(toggleList[newIndex]);
79            }
80          });
81
82          // If no class from toggle list was present, use first element
83          if(replaceList.length == 0) {
84            replaceList.push(toggleList[0]);
85          }
86
87          // console.log(toggleAll);
88          if(toggleAll) {
89            // Load complete toggle list in replace list
90            replaceList = toggleList;
91
92            // Filter present classes from the current list
93            replaceList = $.grep(replaceList, function(value, index){
94              return currentList.indexOf(value) > -1;
95            }, true);
96            // console.log(currentList);
97            // console.log(replaceList);
98          }
99
100          // Store current and replace lists on object
101          $el.data("current-list", currentList.join(" "));
102          $el.data("replace-list", replaceList.join(" "));
103        }
104
105      });
106    }
107  }
108})(jQuery, Drupal, drupalSettings);