https://www.jeri.co.jp/wp-content/themes/dbj/assets/js/default.js

1jQuery(document).ready(function ($) {
2  jQuery("form input[type='reset']").on("click", function (e) {
3    e.preventDefault();
4    const form = jQuery(this).parents("form");
5    form.find("input[type='text']").val("");
6    form.find("input[type='radio']").prop("checked", false);
7    form.find("input[type='checkbox']").removeAttr("checked");
8    form.find(".input-radio-container").removeClass("checked");
9    form.find("select").val("");
10    form.find(".select-custom").each(function () {
11      const placeholder = jQuery(this).find("select option:first");
12      jQuery(this)
13        .find(".select-dropdown .dropdown-item")
14        .removeClass("selected");
15      jQuery(this)
16        .find(".select-title__content")
17        .text(placeholder.text())
18        .removeClass("selected");
19    });
20  });
21
22  jQuery(".search-row .btn-close").on("click", function () {
23    jQuery(".search-row input[type='text']").val("");
24  });
25
26  jQuery(".btn-expand").on("click", function () {
27    const btnExpand = jQuery(this);
28    const expandArea = btnExpand.parents(".expand-parent").find(".expand-area");
29    btnExpand.text(expandArea.is(":visible") ? "＋" : "ー");
30    expandArea.slideToggle();
31  });
32
33  // select custom
34  jQuery(".select-custom").each(function () {
35    const curModal = jQuery(this);
36    const dropdownItems = curModal.find(".select-dropdown .dropdown-item");
37    // get all option without placeholder
38    const dropdownOptions = curModal.find("select option:not(:first)");
39
40    curModal.find(".select-title").on("click", function () {
41      curModal.toggleClass("open");
42    });
43    dropdownItems.on("click", function () {
44      // remove all option
45      dropdownItems.removeClass("selected");
46      dropdownOptions.removeAttr("selected");
47
48      // add "selected" attr and text for choosed option
49      const selectedItem = jQuery(this);
50      const selectedId = selectedItem.data("id");
51      const selectedOption = curModal.find(`select option[value="${selectedId}"]`);
52      selectedItem.addClass("selected");
53      selectedOption.prop("selected", true);
54      curModal
55        .find(".select-title__content")
56        .text(selectedItem.text())
57        .addClass("selected");
58
59      // close modal
60      curModal.removeClass("open");
61    });
62    // close modal when click outside
63    jQuery(document).on("mouseup", function (e) {
64      // if the target of the click isn't the container nor a descendant of the container
65      if (!curModal.is(e.target) && curModal.has(e.target).length === 0) {
66        curModal.removeClass("open");
67      }
68    });
69  });
70  jQuery('.select-custom select').change(function() {
71    const select_text = jQuery(this).find("option:selected").text();
72    jQuery(this).parent()
73      .find(".select-title__content")
74      .text(select_text)
75      .addClass("selected");
76  });
77
78  // form checkbox
79  const formCheckboxs = document.querySelectorAll(".form-checkbox");
80  [...formCheckboxs].forEach((formCheckbox) => {
81    const checkAllElem = formCheckbox.querySelector(
82      ".checkbox-title input.check-all"
83    );
84    const checkItemElems = formCheckbox.querySelectorAll(
85      ".checkbox-body input"
86    );
87    checkAllElem.addEventListener("change", function (e) {
88      if (e.target.checked) {

89        checkItemElems.forEach((c) => (c.checked = true));
90      } else {
91        checkItemElems.forEach((c) => (c.checked = false));
92      }
93    });
94  });
95  const allRadioQuery = ".input-radio-container input[type='radio']";
96  $(allRadioQuery).click(function () {
97    const radioEl = $(this);
98    const parentRadioEl = $(this).parent();
99    const elNotThis = $(allRadioQuery).not(this);
100    const parentElNotThis = elNotThis.parent();
101
102    // remove all checked
103    elNotThis.prop("checked", false);
104    parentElNotThis.removeClass("checked");
105
106    // toggle class and checked
107    if (radioEl.data("checked")) {
108      radioEl.prop("checked", false);
109      radioEl.data("checked", false);
110    } else {
111      radioEl.data("checked", true);
112    }
113
114    elNotThis.data("checked", false);
115    parentRadioEl.removeClass("checked");
116    parentRadioEl.toggleClass("checked", radioEl.data("checked"));
117  });
118
119  // hanlde click menu in mobile
120  const body = jQuery("body");
121  const header = jQuery("header");
122  const menuElem = header.find(".mobile-menu");
123  const overlay = jQuery("header .overlay");
124  const navMobile = jQuery(".nav-mobile");
125  const searchMobile = jQuery(".mobile-search");
126  // handle toogle nav menu dropdown
127  menuElem.on("click", function () {
128    body.css("overflow-y", "hidden");
129    searchMobile.hide();
130    overlay.toggle();
131    navMobile.slideToggle(300);
132  });
133  // toogle nested menu on mobile
134  const menuIcons = jQuery(".nav-mobile .menu-icon");
135  menuIcons.each(function () {
136    jQuery(this).on("click", function (e) {
137      e.preventDefault();
138      const subMenu = jQuery(this).parent().children("ul.sub-menu");
139      jQuery(this).parent().toggleClass("open");
140      subMenu && subMenu.slideToggle(300);
141    });
142  });
143  // handle open dropdown seach on mobile
144  const searchIcon = header.find(".mobile-search-icon");
145  searchIcon.on("click", function () {
146    body.css("overflow-y", "hidden");
147    navMobile.hide();
148    overlay.toggle();
149    searchMobile.slideToggle(300);
150  });
151  // hanlde click overlay - close all
152  overlay.on("click", function () {
153    searchMobile.hide();
154    navMobile.hide();
155    overlay.hide();
156    body.css("overflow-y", "auto");
157  });
158
159  // handle show close button on input search
160  const inputSearchWrapper = jQuery(".input-search-close");
161  const inputSearch = inputSearchWrapper.children("input");
162  const buttonClose = inputSearchWrapper.children(".btn-close");
163  const updateBtnClose = function (e) {
164    if (e.val().trim().length > 0) {
165      buttonClose.css("visibility", "visible");
166    } else {
167      buttonClose.css("visibility", "hidden");
168    }
169  };
170  updateBtnClose(inputSearch);
171  inputSearch.on("input", function () {
172    updateBtnClose(jQuery(this));
173  });
174  // handle clear input search data in dropdown search input
175  buttonClose &&
176    buttonClose.on("click", function () {
177      inputSearch.val("");
178      buttonClose.css("visibility", "hidden");
179    });
180
181  // handle show modal preview image
182  jQuery(".image-wrapper-zoom-available").each(function () {
183    const container = jQuery(this);
184    container.find(".image-zoom-btn").on("click", function () {
185      const imgSrc = container.find("img").attr("src");
186      jQuery("#modal-preview-image img").attr("src", imgSrc);
187      jQuery("#modal-preview-image").css("display", "block");
188      jQuery("body").css("overflow-y", "hidden");
189    });
190  });
191  jQuery("#modal-preview-image .modal-btn-close").click(function () {
192    jQuery("#modal-preview-image").css("display", "none");
193    jQuery("body").css("overflow-y", "auto");
194  });
195
196  // Footer mobile
197  jQuery(".menu-item-has-children").append(
198    '<span class="btn-collapse">＋</span>'
199  );
200  jQuery(".menu-item-has-children .btn-collapse").on("click", function () {
201    const expandArea = jQuery(this).parent().children(".sub-menu");
202    jQuery(this).text(expandArea.is(":visible") ? "＋" : "ー");
203    expandArea.slideToggle();
204    return false;
205  });
206  // Search scroll
207  function jumpTo(dest, speed = 1000) {
208    $("html, body").animate(
209      {
210        scrollTop:
211          $(decodeURI(dest))?.offset()?.top - $(".header-group").outerHeight(),
212      },
213      speed
214    );
215  }
216
217  function updateHashWithoutEvent(newHash) {
218    if (newHash && newHash.charAt(0) === "#") {
219      history.replaceState({}, "", window.location.pathname + newHash);
220    }
221  }
222
223  if (window.location.href.includes("?")) {
224    jumpTo("#search-found");
225  }
226
227  $('.main-container a[href*="#"]').not('.overview-research-link').click(function (event) {
228    event.preventDefault();
229    jumpTo(this.hash);
230    updateHashWithoutEvent(this.hash);
231  });
232
233  const hash = window.location.hash;
234  if (hash) {
235    jumpTo(hash);
236  }
237});
238
239window.addEventListener("hashchange", function (event) {
240  event.preventDefault();
241});