https://www.skypce.net/businesscard/case/js/case_list.js?260820

1// 現在のURLを取得
2const currentUrl = window.location.href;
3
4// 一致するhrefを持つ要素を削除する関数
5function removeMatchingElements() {
6	const currentPath = new URL(removeURLParameters(currentUrl)).pathname;
7	const links = document.querySelectorAll('#case-slider a');
8
9	links.forEach(link => {
10		const linkPath = new URL(link.href).pathname;
11		if (linkPath === currentPath) {
12			link.parentElement.remove();
13		}
14	});
15}
16
17function removeURLParameters(url) {
18	let urlObj = new URL(url);
19	urlObj.search = '';
20	return urlObj.toString();
21}
22
23// 一覧用
24function generateListHTML(data) {
25	let html = ''; // ここでhtml変数を初期化
26	data.forEach(item => {
27		const target = item.blank ? ' target="_blank"' : '';
28		const caseUrl = item.type === 'link' ? item.link : '/case/article/' + item.topics_id;
29		html += `
30			<a class="p-case-card" href="${caseUrl}"${target}>
31				<div class="p-case-thumb">
32					<img class="p-case-thumb__img" src="${item.mv}" alt="${item.name}">
33				</div>
34				<div class="p-case-info">
35					<p class="p-case-title">
36						<span class="u-textInline">${item.heading}</span>
37					</p>
38					<p class="p-case-company">${item.name} 様</p>
39					<p class="p-case-tag">${item.industry}</p>
40				</div>
41			</a>
42        `;
43	});
44	return html;
45}
46
47// スライダー用
48function generateSliderHTML(data) {
49	let html = ''; // ここでhtml変数を初期化
50	data.forEach(item => {
51		const target = item.blank ? ' target="_blank"' : '';
52		const caseUrl = item.type === 'link' ? item.link : '/case/article/' + item.topics_id;
53		html += `
54            <li class="p-case-card swiper-slide">
55                <a href="${caseUrl}"${target}>
56                    <div class="p-case-thumb">
57                        <img class="p-case-thumb__img" src="${item.mv}" alt="${item.name}ロゴ">
58                    </div>
59                    <div class="p-case-info">
60                        <p class="p-case-title">${item.heading}</p>
61                        <p class="p-case-company">${item.name} 様</p>
62                    </div>
63                </a>
64            </li>
65        `;
66	});
67	return html;
68}
69
70// トップ用
71function generateLogoHTML(data) {
72	let html = ''; // ここでhtml変数を初期化
73	data.forEach(item => {
74		const target = item.blank ? ' target="_blank"' : '';
75		const caseUrl = item.type === 'link' ? item.link : '/case/article/' + item.topics_id;
76		html += `
77			<li class="splide__slide">
78				<a href="${caseUrl}" class="p-case__logo-item"${target}>
79					<img src="${item.company_image01}" alt="${item.name}">
80				</a>
81			</li>
82        `;
83	});
84	return html;
85}
86
87// 汎用的な関数でHTMLを挿入
88function insertHTMLById(id, html) {
89	const element = document.getElementById(id);
90	if (element) {
91		element.innerHTML = html;
92	}
93}
94
95// 汎用的な関数でHTMLを挿入
96function functionSlider() {
97	const target = '.swiperBox';
98	if (!document.querySelector(target)) return;
99	
100	let useSwiper = new Swiper(".swiperBox .swiper-wrapper-el", {
101		navigation: {
102			nextEl: ".swiperBox .swiper-button-next--banner",
103			prevEl: ".swiperBox .swiper-button-prev--banner"
104		},
105		pagination: {
106			el: ".swiper-wrapper-el .p-caseList-pagination",
107			type: "bullets",
108			clickable: "clickable"
109		},
110		loop: true,
111		speed: 600,
112		spaceBetween: 32, // 余白r
113		slidesPerView: 1, // 一度に表示するスライド枚数
114		centeredSlidesBounds: true,
115
116		breakpoints: {
117			568: {
118				slidesPerView: 2,
119			},
120			1024: {
121				slidesPerView: 3,
122			},
123		},
124	});
125	document.addEventListener('DOMContentLoaded', () => {
126	});
127}
128
129// JSONデータを読み込んで処理
130fetch('/businesscard/case/data.html')
131	.then(response => {
132		if (!response.ok) {
133			throw new Error('Network response was not ok');
134		}
135		return response.json();
136	})
137	.then(jsonData => {
138		// JSONデータをHTMLに変換
139		const listHtml = generateListHTML(jsonData);
140		const sliderHtml = generateSliderHTML(jsonData);
141		const logoHtml = generateLogoHTML(jsonData);
142
143		// HTMLをDOMに挿入
144		insertHTMLById('case-list', listHtml);
145		insertHTMLById('case-slider', sliderHtml);
146		insertHTMLById('case-logo', logoHtml);
147
148		// 一致するhrefを持つ要素を削除する
149		removeMatchingElements();
150
151		// slider
152		functionSlider();
153
154		// TOPのロゴループスライダ用のシグナル
155		document.dispatchEvent(new CustomEvent('caseListReady'));
156		window.caseSlidesAreReady = true;
157	})
158	.catch(error => console.error('Error loading JSON data:', error));