https://kotomachi.jp/wp-content/themes/kotomachi/assets/js/contact.js?ver=0.1.0

1/**
2 * contact.js — Contact ページ（ラボ見学フォーム）
3 *
4 * 「※希望日時の入力について」(.contact-form__help) クリックで中央モーダルを開く。
5 */
6
7document.addEventListener('DOMContentLoaded', function () {
8	initContactDatetimeHelpModal();
9});
10
11function initContactDatetimeHelpModal() {
12	var root = document.querySelector('.contact-lab-tour');
13	if (!root) {
14		return;
15	}
16
17	var triggers = root.querySelectorAll('.contact-form__help');
18	var i;
19	var trigger = null;
20	for (i = 0; i < triggers.length; i++) {
21		if (/希望日時の入力について/.test(triggers[i].textContent || '')) {
22			trigger = triggers[i];
23			break;
24		}
25	}
26	if (!trigger) {
27		return;
28	}
29
30	trigger.classList.add('contact-form__help--modal-trigger');
31	trigger.setAttribute('role', 'button');
32	trigger.setAttribute('tabindex', '0');
33	trigger.setAttribute('aria-haspopup', 'dialog');
34	trigger.setAttribute('aria-expanded', 'false');
35
36	var modal = buildContactHelpModal();
37	document.body.appendChild(modal);
38
39	var backdrop = modal.querySelector('.contact-help-modal__backdrop');
40	var panel = modal.querySelector('.contact-help-modal__panel');
41	var closeBtn = modal.querySelector('.contact-help-modal__close');
42	var dismissX = modal.querySelector('.contact-help-modal__dismiss');
43
44	function openModal() {
45		modal.removeAttribute('hidden');
46		modal.setAttribute('aria-hidden', 'false');
47		trigger.setAttribute('aria-expanded', 'true');
48		document.body.classList.add('contact-help-modal-open');
49		void modal.offsetWidth;
50		modal.classList.add('is-open');
51		if (panel) {
52			panel.focus();
53		}
54	}
55
56	function closeModal() {
57		modal.classList.remove('is-open');
58		trigger.setAttribute('aria-expanded', 'false');
59		modal.setAttribute('aria-hidden', 'true');
60		document.body.classList.remove('contact-help-modal-open');
61		window.setTimeout(function () {
62			if (!modal.classList.contains('is-open')) {
63				modal.setAttribute('hidden', '');
64			}
65		}, 320);
66		trigger.focus();
67	}
68
69	trigger.addEventListener('click', function (e) {
70		e.preventDefault();
71		if (modal.classList.contains('is-open')) {
72			return;
73		}
74		openModal();
75	});
76
77	trigger.addEventListener('keydown', function (e) {
78		if (e.key === 'Enter' || e.key === ' ') {
79			e.preventDefault();
80			if (!modal.classList.contains('is-open')) {
81				openModal();
82			}
83		}
84	});
85
86	if (backdrop) {
87		backdrop.addEventListener('click', closeModal);
88	}
89	if (closeBtn) {
90		closeBtn.addEventListener('click', closeModal);
91	}
92	if (dismissX) {
93		dismissX.addEventListener('click', closeModal);
94	}
95
96	document.addEventListener('keydown', function (e) {
97		if (e.key === 'Escape' && modal.classList.contains('is-open')) {
98			closeModal();
99		}
100	});
101}
102
103function buildContactHelpModal() {
104	var wrap = document.createElement('div');
105	wrap.className = 'contact-help-modal';
106	wrap.id = 'contact-help-modal';
107	wrap.setAttribute('hidden', '');
108	wrap.setAttribute('aria-hidden', 'true');
109
110	wrap.innerHTML =
111		'<div class="contact-help-modal__backdrop" aria-hidden="true"></div>' +
112		'<div class="contact-help-modal__panel" role="dialog" aria-modal="true" aria-label="希望日時の入力について" tabindex="-1">' +
113		'<button type="button" class="contact-help-modal__dismiss" aria-label="閉じる">&times;</button>' +
114		'<div class="contact-help-modal__body">' +
115		'<p>面談時間は1時間ですが、ご都合のよい幅広い時間帯でご記入いただきまして、当社の都合と合わせて1時間枠をお伝えさせていただきます。</p>' +
116		'<p>万が一、ご記入いただいた第2希望までの日程と当社の都合が合わない場合は、あらためて調整依頼のご連絡をさせていただきます。</p>' +
117		'</div>' +
118		'<button type="button" class="contact-help-modal__close">閉じる</button>' +
119		'</div>';
120
121	return wrap;
122}