https://www.dnsstuff.com/wp-content/themes/dnsstuff/dev/js/search.js

1(function () {
2  var block = document.querySelector(".dns-search-results");
3  if (!block) {
4    return;
5  }
6
7  function text_search_init() {
8    let sw_search = document.querySelector(".dns-search-results input.search");
9    let sw_search_container = sw_search.closest(".search-bar");
10
11    if (sw_search.value && sw_search.value !== "") {
12      sw_search_container.classList.add("active");
13    }
14
15    sw_search.addEventListener("input", (e) => {
16      if (e.target.value !== "") {
17        sw_search_container.classList.add("active");
18      } else {
19        sw_search_container.classList.remove("active");
20      }
21    });
22
23    let clear_button = sw_search_container.querySelector(".clear-button");
24    clear_button.addEventListener("click", (e) => {
25      e.preventDefault();
26      e.stopPropagation();
27      sw_search.value = "";
28      sw_search_container.classList.remove("active");
29    });
30  }
31
32  function filter_dropdown_init(filter) {
33    var text_input = filter.querySelector('input[type="text"]');
34    var locations = filter.querySelector(".items");
35    var label = filter.querySelector(".selected-label");
36
37    text_input.addEventListener("input", function (e) {
38      var search = text_input.value.toLowerCase();
39      locations.classList.add("selected");
40      locations.querySelectorAll("p").forEach(function (checkbox) {
41        var is_empty = text_input.value === "";
42        var location = checkbox.querySelector("input").value.toLowerCase();
43        var is_match = location.indexOf(search) != -1;
44        if (is_empty || is_match) {
45          checkbox.classList.remove("hidden");
46        } else {
47          checkbox.classList.add("hidden");
48        }
49      });
50    });
51
52    function close_cat(e) {
53      if (locations.contains(e.target)) {
54        return;
55      }
56
57      if (text_input.contains(e.target)) {
58        return;
59      }
60
61      if (label.contains(e.target)) {
62        return;
63      }
64
65      locations.classList.remove("selected");
66      if (
67        e.target.classList.contains("filter-selection") ||
68        e.target.tagName == "INPUT"
69      ) {
70        document.removeEventListener("click", close_cat);
71      } else {
72        block.querySelector(".filters .filter-button.desktop").click();
73      }
74    }
75
76    function show_cats(e) {
77      locations.classList.toggle("selected");
78      document.addEventListener("click", close_cat);
79    }
80
81    text_input.addEventListener("click", show_cats);
82    label.addEventListener("click", show_cats);
83  }
84
85  function set_radio_label(filter) {
86    if (!filter.classList.contains("sort")) {
87      return;
88    }
89
90    var checked = filter.querySelectorAll("input:checked");
91    var label = filter.querySelector(".selected-label span");
92    var text_input = filter.querySelector('input[type="text"]');
93    if (checked.length > 0) {
94      text_input.value = "";
95      filter.classList.add("selected");
96      label.textContent = checked[0].value;
97    } else {
98      filter.classList.remove("selected");
99    }
100  }
101
102  function set_cat_label(filter) {
103    var checked = filter.querySelectorAll("input:checked");
104    var label = filter.querySelector(".selected-label span");
105    var clear_filter = block.querySelector(".clear-filter");
106    var text_input = filter.querySelector('input[type="text"]');
107
108    if (checked.length > 0) {
109      text_input.value = "";
110      filter.classList.add("selected");
111      var location_str = "Category";
112      if (checked.length == 1) {
113        location_str += ` (1)`;
114      } else if (checked.length > 1) {
115        location_str = `Categories (${checked.length})`;
116      }
117      label.textContent = location_str;
118      clear_filter.classList.add("active");
119    } else {
120      filter.classList.remove("selected");
121      clear_filter.classList.remove("active");
122    }
123  }
124
125  function clear_checkboxes(filter) {
126    var checkboxes = filter.querySelectorAll(".items p input");
127    checkboxes.forEach(function (checkbox) {
128      checkbox.checked = false;
129      checkbox.parentElement.classList.remove("hidden");
130    });
131    filter.classList.remove("selected");
132  }
133
134  function filter_checkboxes_init(filter) {
135    var checkboxes = filter.querySelectorAll("input[type=checkbox]");

136    checkboxes.forEach(function (checkbox) {
137      checkbox.addEventListener("change", function (e) {
138        var selected = filter.querySelectorAll("input:checked");
139        if (selected.length == 0) {
140          clear_checkboxes(filter);
141        }
142        set_cat_label(filter);
143      });
144    });
145    // initial run on page load
146    set_cat_label(filter);
147  }
148
149  function filter_radioboxes_init(filter) {
150    var checkboxes = filter.querySelectorAll("input[type=radio]");
151    checkboxes.forEach(function (checkbox) {
152      checkbox.addEventListener("change", function (e) {
153        var selected = filter.querySelectorAll("input:checked");
154        if (selected.length == 0) {
155          clear_checkboxes(filter);
156        }
157        set_radio_label(filter);
158      });
159    });
160    // initial run on page load
161    set_radio_label(filter);
162  }
163
164  function filter_label_clear_init(filter) {
165    var button = filter.querySelector(".selected-label button");
166    button.addEventListener("click", function (e) {
167      clear_checkboxes(filter);
168    });
169  }
170
171  function filter_init(elem) {
172    filter_dropdown_init(elem);
173    filter_checkboxes_init(elem);
174    filter_radioboxes_init(elem);
175    filter_label_clear_init(elem);
176  }
177
178  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
179  const resetButton = document.getElementById("mobile-reset-filters");
180  const applyButton = document.getElementById("mobile-apply-filters");
181
182  function mobile_button_init() {
183    const isAnyChecked = Array.from(checkboxes).some(
184      (checkbox) => checkbox.checked
185    );
186    resetButton.classList.toggle("disabled", !isAnyChecked);
187    applyButton.disabled = !isAnyChecked;
188  }
189
190  function filter_menu_init() {
191    const openMenuBtn = document.getElementById("filter-menu-open");
192    const closeMenuBtn = document.getElementById("filter-menu-close");
193    const sideMenu = document.getElementById("filter-menu");
194    const overlay = document.getElementById("overlay");
195    const mobileApplyFilters = document.getElementById("mobile-apply-filters");
196    const filterForm = document.querySelector(".dns-search-results form");
197    const body = document.body;
198
199    openMenuBtn.addEventListener("click", (e) => {
200      e.preventDefault();
201      e.stopPropagation();
202      sideMenu.classList.add("active");
203      overlay.classList.add("active");
204      body.classList.add("swjobs-menu-open");
205    });
206
207    closeMenuBtn.addEventListener("click", (e) => {
208      e.preventDefault();
209      e.stopPropagation();
210      sideMenu.classList.remove("active");
211      overlay.classList.remove("active");
212      body.classList.remove("swjobs-menu-open");
213    });
214
215    mobileApplyFilters.addEventListener("click", (e) => {
216      e.preventDefault();
217      e.stopPropagation();
218      filterForm.submit();
219    });
220
221    sideMenu.querySelectorAll(".checkbox").forEach(function (checkbox) {
222      checkbox.addEventListener("click", (e) => {
223        e.preventDefault();
224        e.stopPropagation();
225        let mobileCheckbox = checkbox.querySelector('input[type="checkbox"]');
226        let mobileRadiobox = checkbox.querySelector('input[type="radio"]');
227
228        if (mobileCheckbox) {
229          mobileCheckbox.checked = !mobileCheckbox.checked;
230          let formCheckbox = filterForm.querySelector(
231            `#${mobileCheckbox.id.replace(/^mobile-/, "")}`
232          );
233          formCheckbox.checked = !formCheckbox.checked;
234        } else if (mobileRadiobox) {
235          mobileRadiobox.checked = !mobileRadiobox.checked;
236          let formRadiokbox = filterForm.querySelector(
237            `#${mobileRadiobox.id.replace(/^mobile-/, "")}`
238          );
239          // formRadiokbox.checked = !formRadiokbox.checked;
240        }
241        mobile_button_init();
242      });
243    });
244
245    overlay.addEventListener("click", (e) => {
246      e.preventDefault();
247      e.stopPropagation();
248      sideMenu.classList.remove("active");
249      overlay.classList.remove("active");
250      body.classList.remove("swjobs-menu-open");
251    });
252  }
253
254  var location_filter = document.querySelector(".filter-dropdown.categories");
255  filter_init(location_filter);
256
257  var sort_filter = document.querySelector(".filter-dropdown.sort");
258
259  filter_init(sort_filter);
260  text_search_init();
261  filter_menu_init();
262  mobile_button_init();
263})();