https://runnet.jp/assets/js/common.js

1function initModal() {
2  const mmOption = {
3    disableFocus: true,
4    onShow: modal => {
5      if ($(modal).find('.js-slider-modal').length) {
6        $(modal).find('.js-slider-modal').slick('setPosition').slick('setPosition');
7      }
8      if ($(modal).find('.js-slider-step').length) {
9        $(modal).find('.js-slider-step').slick('setPosition').slick('setPosition');
10      }
11      if ($(modal).hasClass('js-dialog-test')) {
12        setTimeout(function() {
13          MicroModal.close(modal.id);
14        }, 1000);
15      }
16    },
17    awaitOpenAnimation: true,
18    awaitCloseAnimation: true,
19  };
20
21  $('[data-micromodal-show]').each(function() {
22    const modalID = $(this).attr('id');
23    MicroModal.show(modalID, mmOption);
24  });
25
26  $('.js-check-dialog').on('change', function() {
27    if ($(this).val() !== '') {
28      const selectedLabel = $(this).find('option:selected').attr('data-label');
29      $('#dialog_check').find('.js-dialog-text').text(selectedLabel);
30      MicroModal.show('dialog_check', {
31        awaitOpenAnimation: true,
32        awaitCloseAnimation: true,
33      })
34    }
35  });
36
37  MicroModal.init(mmOption);
38}
39
40function selectPrefectures() {
41  $('.js-prefecture-select').each(function() {
42    const $all = $(this).find('[data-prefecture-all]');
43    const $prefectures = $(this).find('[data-prefecture-list]');
44
45    $all.on('change', function() {
46      if ($(this).prop('checked')) {
47        $prefectures.find('input').prop('checked', true);
48      } else {
49        $prefectures.find('input').prop('checked', false);
50      }
51    });
52  });
53}
54
55function inputEnter() {
56  const $inputPopup = $('.js-input-popup');
57  moment.locale("ja");
58
59  $inputPopup.each(function() {
60    const $popup = $(this);
61    const $enterBtn = $popup.find('.js-input-enter');
62    const parent = $popup.attr('data-parent');
63
64    $enterBtn.on('click', function() {
65      // 各値を入れるオブジェクト
66      let dateVals = '';
67      let distanceVals = '';
68      let vals = [];
69
70      $popup.find('input[type="text"]').each(function() {
71        if ($(this).val() !== '') {
72          if (this.hasAttribute('data-date-start')) {
73            dateVals += moment($(this).val()).format('YYYY年M月DD日');
74            dateVals += '〜';
75          }
76          if (this.hasAttribute('data-date-end')) {
77            if (dateVals === '') dateVals += '〜';
78            dateVals += moment($(this).val()).format('YYYY年M月DD日');
79          }
80          if (this.hasAttribute('data-distance-start')) {
81            distanceVals += $(this).val() + 'km';
82            distanceVals += '〜';
83          }
84          if (this.hasAttribute('data-distance-end')) {
85            if (distanceVals === '') distanceVals += '〜';
86            distanceVals += $(this).val() + 'km';
87          }
88        }
89      });
90
91      $popup.find('input[type="radio"]:checked, input[type="checkbox"]:checked').each(function() {
92        if (!this.hasAttribute('data-prefecture-all')) {
93          vals.push($(this).next('label').text());
94        }
95      });
96
97      if (dateVals !== '') vals.unshift(dateVals);
98      if (distanceVals !== '') vals.push(distanceVals);
99      $('#' + parent).val(vals.join('、'));
100    });
101  });
102}
103
104function initformParts() {
105  // 都道府県の一括選択／解除
106  selectPrefectures();
107  inputEnter();
108}
109
110function initPopup() {
111  const $trigger = $('[data-popup-trigger]');
112
113  $trigger.each(function() {
114    const $self = $(this);
115    const popupID = $(this).data('popup-trigger');
116    const $popup = $('#' + popupID);
117
118    $self.on('focus', function() {
119      if ($popup.attr('aria-hidden') === 'true') {
120        closePopup();
121        $(this).attr('data-focus', true);
122        $popup.attr('aria-hidden', 'false').attr('data-popup-open', true);
123      }
124    });
125  });
126
127  $('[data-popup-close]').on('click', function() {
128    closePopup();
129  });
130
131  $('[data-popup-reset]').on('click', function() {
132    const $popup =  $(this).closest('.js-popup');
133    $popup.find('input[type="radio"], input[type="checkbox"]').filter(':checked').prop('checked', false);
134    $popup.find('select, input[type="text"]').val('');
135  });
136
137  $(document).on('click', function(e) {
138    if (!$(e.target).closest('.js-popup').length && !e.target.hasAttribute('data-popup-trigger')) {
139      closePopup();
140    }
141  });
142
143  function closePopup() {
144    $('[data-popup-open]').attr('aria-hidden', 'true');
145    $trigger.removeAttr('data-focus');
146  }
147}
148
149function initTab() {
150  $('.js-tab-container').each(function() {
151    const $container = $(this);
152    const $nav = $container.find('.js-tab-nav');
153    const $tab = $nav.find('[aria-controls]');
154
155    $tab.on('click', function(e) {
156      const targetContent = $(this).attr('aria-controls');
157      const $targetContent = $('#' + targetContent);
158      const $currentTab = $nav.find('[aria-selected="true"]');
159      const $currentContent = $container.find('.js-tab-content').filter('[aria-hidden="false"]');
160
161      if ($(this).attr('aria-selected') === 'false') {
162        // 現在の選択状態の解除
163        $currentTab.attr('aria-selected', 'false');
164        $currentContent.attr('aria-hidden', 'true');
165        // クリックされたタブへ切替
166        $(this).attr('aria-selected', 'true');
167        $targetContent.attr('aria-hidden', 'false');
168      }
169    });

170  });
171}
172
173function initExpander() {
174  const $expander = $('.js-expander');
175
176  $expander.each(function() {
177    const $trigger = $(this).find('[aria-controls]');
178    const targetContent = $trigger.attr('aria-controls');
179    const $targetContent = $('#' + targetContent);
180    const isMyPage = (targetContent === 'mypage-menu');
181
182    $trigger.on('click', function() {
183      if ($(this).attr('aria-expanded') === 'false') {
184        $(this).attr('aria-expanded', 'true');
185        $targetContent.attr('aria-hidden', 'false');
186      } else {
187        $(this).attr('aria-expanded', 'false');
188        $targetContent.attr('aria-hidden', 'true');
189      }
190    });
191
192    $(document).on('click', function(e) {
193      if (!$(e.target).closest('.js-expander').length) {
194        $trigger.attr('aria-expanded', 'false');
195        $targetContent.attr('aria-hidden', 'true');
196      }
197    });
198  });
199}
200
201function initPCMenu() {
202  const $menuBg = $('.js-menu-bg');
203  const bgOffset = $('.js-nav').offset().top + $('.js-nav').outerHeight();
204  let isMenuActive = false;
205  let timeout;
206
207  // オーバーレイの位置調整
208  $menuBg.css('top', bgOffset).show();
209
210  function openMegaMenu($parent) {
211    $parent.addClass('is-open');
212    $parent.find('.js-megamenu-child').slideDown(300);
213    $('html').addClass('is-menu-active');
214    isMenuActive = true;
215  }
216
217  function closeMegaMenu($parent) {
218    $parent.removeClass('is-open');
219    $parent.find('.js-megamenu-child').slideUp(300, function() {
220      if (!$('.js-megamenu-parent.is-open').length) {
221        $('html').removeClass('is-menu-active');
222        isMenuActive = false;
223      }
224    });
225  }
226
227  // メガメニューの制御
228  $('.js-megamenu-parent').mouseenter(function() {
229    const $this = $(this);
230    clearTimeout(timeout);
231
232    // クリックしたメニューを開く
233    timeout = setTimeout(function() {
234      // 開かれているメガメニューを閉じる
235      if (isMenuActive) {
236        $('.js-megamenu-parent.is-open').not($this).each(function() {
237          closeMegaMenu($(this));
238        });
239      }
240      openMegaMenu($this);
241    }, 300);
242  });
243
244  $('.js-megamenu-parent').mouseleave(function() {
245    clearTimeout(timeout);
246
247    timeout = setTimeout(function() {
248      // 全てのメガメニューを閉じる
249      $('.js-megamenu-parent.is-open').each(function() {
250        closeMegaMenu($(this));
251      });
252    }, 300);
253  });
254
255  $('.js-megamenu-child').mouseleave(function() {
256    const $this = $(this);
257
258    // メガメニューが開かれた状態で外れた場合は閉じる
259    if ($this.parent().hasClass('is-open')) {
260      closeMegaMenu($this.parent());
261    }
262  });
263}
264
265$(function() {
266  initModal();
267  initformParts();
268  initPopup();
269  initTab();
270  initExpander();
271  initPCMenu();
272});