https://j-creas.com/wps/wp-content/themes/head-office/recruit/assets/js/script.js

1window.addEventListener("DOMContentLoaded", function () {
2	const mainContent = document.querySelector("main");
3	mainContent.classList.add("is-loaded");
4});
5
6/* ----------------------------------------------
7 * 	画面サイズをCSSカスタム変数にセット
8---------------------------------------------- */
9const setFillHeight = () => {
10	const vh = window.innerHeight * 0.01;
11	document.documentElement.style.setProperty("--vh", `${vh}px`);
12};
13let vw = window.innerWidth;
14window.addEventListener("resize", () => {
15	if (vw === window.innerWidth) {
16		return;
17	}
18
19	vw = window.innerWidth;
20	setFillHeight();
21});
22setFillHeight();
23
24/* ----------------------------------------------
25 *  ヘッダー
26---------------------------------------------- */
27const headerHam = document.getElementById("js-ham");
28const headerMenu = document.getElementById("js-menu");
29const header = document.querySelector("header");
30const body = document.querySelector("body");
31headerHam.addEventListener("click", function () {
32	header.classList.toggle("is-menuopen");
33	headerHam.classList.toggle("is-active");
34	headerMenu.classList.toggle("is-open");
35	body.classList.toggle("is-fixed");
36});
37
38// スクロール
39const fixed = document.querySelector(".l-fixed");
40const windowWidth = window.innerWidth;
41const footerHeight = document.querySelector(".l-footer").offsetHeight;
42const recruitHeight = document.querySelector(".l-recruit").offsetHeight;
43const fixedHeight =
44	document.documentElement.scrollHeight -
45	window.innerHeight -
46	footerHeight -
47	recruitHeight;
48window.addEventListener("scroll", function () {
49	let scroll = window.pageYOffset;
50	if (scroll > fixedHeight) {
51		fixed.classList.add("is-hidden");
52	} else if (!scroll < fixedHeight && scroll > 100) {
53		fixed.classList.remove("is-hidden");
54		header.classList.add("is-scroll");
55	} else {
56		header.classList.remove("is-scroll");
57	}
58});
59
60// ヘッダーサブメニュー
61const headerSubTriggers = document.querySelectorAll(".l-header__trigger");
62const headerSubItems = document.querySelectorAll(".l-header__item");
63const headerOverlay = document.querySelector(".l-header__overlay");
64
65headerSubTriggers.forEach((trigger) => {
66	trigger.addEventListener("click", (e) => {
67		const currentItem = trigger.closest(".l-header__item");
68
69		// 他のis-openを削除
70		headerSubItems.forEach((item) => {
71			if (item !== currentItem) {
72				item.classList.remove("is-open");
73			}
74		});
75
76		// クリックされた要素のis-openをトグル
77		currentItem.classList.toggle("is-open");
78	});
79});
80
81headerOverlay.addEventListener("click", () => {
82	headerSubItems.forEach((item) => {
83		item.classList.remove("is-open");
84	});
85});
86
87// スマホメニューアコーディオン
88const menuSubTriggers = document.querySelectorAll(".l-menu__trigger");
89
90menuSubTriggers.forEach((trigger) => {
91	trigger.addEventListener("click", () => {
92		const subMenu = trigger.nextElementSibling;
93
94		if (subMenu.style.maxHeight) {
95			subMenu.style.maxHeight = null;
96			trigger.classList.remove("is-open");
97		} else {
98			subMenu.style.maxHeight = subMenu.scrollHeight + "px";
99			trigger.classList.add("is-open");
100		}
101	});
102});
103
104// リサイズ
105function resizeWIindow() {
106	let headerHeight = header.clientHeight;
107	// CSSカスタム変数"--header-height"にセット
108	document.documentElement.style.setProperty(
109		"--header-height",
110		headerHeight + "px"
111	);
112}
113window.addEventListener("resize", () => {
114	resizeWIindow();
115});
116resizeWIindow();
117
118/* ----------------------------------------------
119 *  dropdown
120---------------------------------------------- */
121const dropdownHeaders = document.querySelectorAll('[data-dropdown="h"]');
122
123dropdownHeaders.forEach((header) => {
124	const body = header.nextElementSibling;
125
126	if (
127		body &&
128		body.hasAttribute("data-dropdown") &&
129		body.getAttribute("data-dropdown") === "b"
130	) {
131		header.addEventListener("click", () => {
132			const isOpen = body.style.maxHeight;
133
134			if (isOpen) {
135				body.style.maxHeight = null;
136				header.classList.remove("is-open");
137			} else {
138				body.style.maxHeight = body.scrollHeight + "px";
139				header.classList.add("is-open");
140			}
141		});
142	}
143});
144
145/* ----------------------------------------------
146 * lenis.js
147---------------------------------------------- */
148const lenis = new Lenis();
149
150function raf(time) {
151	lenis.raf(time);
152	requestAnimationFrame(raf);
153}
154
155requestAnimationFrame(raf);
156
157/* ----------------------------------------------
158 *  スクロールアニメーション
159---------------------------------------------- */
160const scrollTargets = document.querySelectorAll("[data-anime]");
161const scrollObserver = new IntersectionObserver((entries) => {

162	entries.forEach((entry) => {
163		if (entry.isIntersecting) {
164			entry.target.classList.add("is-active");
165		}
166	});
167});
168
169scrollTargets.forEach((image) => {
170	scrollObserver.observe(image);
171});
172
173/* ----------------------------------------------
174 *  スムーススクロール
175---------------------------------------------- */
176const links = document.querySelectorAll('a[href^="#"]');
177
178links.forEach((link) => {
179	link.addEventListener("click", (e) => {
180		e.preventDefault();
181
182		const href = link.getAttribute("href");
183		const targetSection = document.querySelector(href);
184		const sectionTop = targetSection.getBoundingClientRect().top;
185		const currentPos = window.scrollY;
186		const headerHeight = header.clientHeight;
187		const target = sectionTop + currentPos - headerHeight;
188
189		window.scrollTo({
190			top: target,
191			behavior: "smooth",
192		});
193	});
194});
195
196/* ----------------------------------------------
197 *  detailsタグ
198---------------------------------------------- */
199class Accordion {
200	constructor(el) {
201		this.el = el;
202		this.summary = el.querySelector('[data-accordion="summary"]');
203		this.content = el.querySelector('[data-accordion="detail"]');
204		this.animation = null;
205		this.isClosing = false;
206		this.isExpanding = false;
207		this.summary.addEventListener("click", (e) => this.onClick(e));
208	}
209
210	onClick(e) {
211		e.preventDefault();
212		this.el.style.overflow = "hidden";
213		this.el.classList.toggle("is-open");
214		if (this.isClosing || !this.el.open) {
215			this.open();
216		} else if (this.isExpanding || this.el.open) {
217			this.shrink();
218		}
219	}
220
221	shrink() {
222		this.isClosing = true;
223		const startHeight = `${this.el.offsetHeight}px`;
224		const endHeight = `${this.summary.offsetHeight}px`;
225
226		if (this.animation) {
227			this.animation.cancel();
228		}
229		this.animation = this.el.animate(
230			{
231				height: [startHeight, endHeight],
232			},
233			{
234				duration: 600,
235				easing: "ease-out",
236			}
237		);
238		this.animation.onfinish = () => this.onAnimationFinish(false);
239		this.animation.oncancel = () => (this.isClosing = false);
240	}
241
242	open() {
243		this.el.style.height = `${this.el.offsetHeight}px`;
244		this.el.open = true;
245		window.requestAnimationFrame(() => this.expand());
246	}
247
248	expand() {
249		this.isExpanding = true;
250		const startHeight = `${this.el.offsetHeight}px`;
251		const endHeight = `${
252			this.summary.offsetHeight + this.content.offsetHeight
253		}px`;
254
255		if (this.animation) {
256			this.animation.cancel();
257		}
258		this.animation = this.el.animate(
259			{
260				height: [startHeight, endHeight],
261			},
262			{
263				duration: 400,
264				easing: "ease-out",
265			}
266		);
267		this.animation.onfinish = () => this.onAnimationFinish(true);
268		this.animation.oncancel = () => (this.isExpanding = false);
269	}
270
271	onAnimationFinish(open) {
272		this.el.open = open;
273		this.animation = null;
274		this.isClosing = false;
275		this.isExpanding = false;
276		this.el.style.height = this.el.style.overflow = "";
277	}
278}
279
280document.querySelectorAll("details").forEach((el) => {
281	new Accordion(el);
282});
283
284/* ----------------------------------------------
285 * switch tabs
286---------------------------------------------- */
287const tabElements = document.querySelectorAll('[data-switch="tabs"]');
288
289function handleTabSwitch() {
290	let tabElementsArray = Array.prototype.slice.call(tabElements);
291	let currentIndex = tabElementsArray.indexOf(this);
292
293	const resetActiveTab = function () {
294		document
295			.querySelector('[data-switch="tabs"].is-active')
296			.classList.remove("is-active");
297		document
298			.querySelector('[data-switch="tabs"][aria-selected=true]')
299			.removeAttribute("aria-selected");
300		document.querySelectorAll('[data-switch="tabs"]').forEach((element) => {
301			element.tabIndex = -1;
302		});
303		document
304			.querySelector('[data-switch="panels"].is-active')
305			.classList.remove("is-active");
306	};
307
308	const setActiveTab = function (tabElement, tabPanelElement) {
309		tabElement.classList.add("is-active");
310		tabElement.tabIndex = 0;
311		tabElement.setAttribute("aria-selected", true);
312		tabPanelElement.classList.add("is-active");
313	};
314
315	if (event.type == "keyup") {
316		if (event.key === "ArrowRight") {
317			if (tabElementsArray[currentIndex + 1]) {
318				tabElementsArray[currentIndex + 1].focus();
319				resetActiveTab();

320				setActiveTab(
321					tabElementsArray[currentIndex + 1],
322					document.querySelectorAll('[data-switch="panels"]')[currentIndex + 1]
323				);
324			} else {
325				tabElementsArray[0].focus();
326				resetActiveTab();
327				setActiveTab(
328					tabElementsArray[0],
329					document.querySelectorAll('[data-switch="panels"]')[0]
330				);
331			}
332		}
333		if (event.key === "ArrowLeft") {
334			if (tabElementsArray[currentIndex - 1]) {
335				tabElementsArray[currentIndex - 1].focus();
336				resetActiveTab();
337				setActiveTab(
338					tabElementsArray[currentIndex - 1],
339					document.querySelectorAll('[data-switch="panels"]')[currentIndex - 1]
340				);
341			} else {
342				let lastTabElement = tabElementsArray.pop();
343				lastTabElement.focus();
344				resetActiveTab();
345				setActiveTab(
346					lastTabElement,
347					Array.prototype.slice
348						.call(document.querySelectorAll('[data-switch="panels"]'))
349						.pop()
350				);
351			}
352		}
353	}
354	if (event.type == "click") {
355		resetActiveTab();
356		setActiveTab(
357			this,
358			document.querySelectorAll('[data-switch="panels"]')[currentIndex]
359		);
360	}
361}
362
363tabElements.forEach((tabElement) => {
364	tabElement.addEventListener("click", handleTabSwitch);
365	tabElement.addEventListener("keyup", handleTabSwitch);
366});
367
368/* ----------------------------------------------
369 *  MicroModal.js
370---------------------------------------------- */
371MicroModal.init({
372	disableScroll: true,
373	awaitOpenAnimation: true,
374	awaitCloseAnimation: true,
375});
376
377/* ----------------------------------------------
378 *  swiper.js
379---------------------------------------------- */
380const voice_slider = new Swiper(".l-voice__slider", {
381	slidesPerView: "auto",
382	spaceBetween: (15 / 335) * 100 + "%",
383	speed: 1000,
384	mousewheel: {
385		forceToAxis: true,
386	},
387	scrollbar: {
388		el: ".swiper-scrollbar",
389	},
390	breakpoints: {
391		769: {
392			spaceBetween: (30 / 1400) * 100 + "%",
393		},
394	},
395	navigation: {
396		nextEl: ".l-voice__navigation .swiper-button-next",
397		prevEl: ".l-voice__navigation .swiper-button-prev",
398	},
399});