https://www.serverworks.com/assets/js/index.js?20260714105734

1"use strict";
2
3document.addEventListener('DOMContentLoaded', function () {
4  // 各種初期化関数を呼び出し
5  initializeIllustrationAnimation();
6  initializeScrollEvents();
7  initializeServiceList();
8  initializeNewsFilter();
9});
10
11// イラストアニメーションの初期化
12function initializeIllustrationAnimation() {
13  var illustElm = document.querySelector('.p-topIllust');
14  handleIllustrationPosition(); // イラストの位置を調整
15  handleBackgroundChange(); // 背景色の変更を処理
16}
17
18// スクロールイベントの初期化
19function initializeScrollEvents() {
20  window.addEventListener('scroll', function () {
21    handleIllustrationPosition(); // スクロール時にイラストの位置を調整
22    handleBackgroundChange(); // スクロール時に背景色の変更を処理
23  });
24}
25
26// イラストの位置を固定または絶対位置に変更する
27function handleIllustrationPosition() {
28  var child = document.querySelector('.p-topIllust');
29  var parent = document.querySelector('.p-topStatement');
30  var childRect = child.getBoundingClientRect();
31  var parentRect = parent.getBoundingClientRect();
32  var childBottomToParentBottom = parentRect.bottom - childRect.bottom;
33  if (!child.classList.contains('p-topIllust--en')) {
34    if (childBottomToParentBottom <= 0) {
35      // 親要素の下端に達したら絶対位置に変更
36      document.querySelector('.p-topIllust').classList.add('p-topIllust--absolute');
37      document.querySelector('.p-topIllust').classList.remove('p-topIllust--fixed');
38    }
39    if (childRect.top > 0) {
40      // 上端に達したら固定位置に変更
41      document.querySelector('.p-topIllust').classList.add('p-topIllust--fixed');
42      document.querySelector('.p-topIllust').classList.remove('p-topIllust--absolute');
43    }
44  } else {
45    document.querySelector('.p-topIllust').classList.add('p-topIllust--absolute');
46    document.querySelector('.p-topIllust').classList.remove('p-topIllust--fixed');
47  }
48}
49
50// 背景色の変更を処理
51function handleBackgroundChange() {
52  var windowCenter = window.scrollY + window.innerHeight / 2;
53  var targetElement = document.querySelector('.p-topService');
54  var targetTop = targetElement.offsetTop;
55  var targetBottom = targetTop + targetElement.offsetHeight;
56  var isWithinTarget = windowCenter >= targetTop && windowCenter <= targetBottom - 120;
57
58  // 要素の中央がターゲット範囲内にあるかどうかでクラスを追加/削除
59  document.body.classList.toggle('js-changecolor', isWithinTarget);
60  document.querySelector('.p-topService').classList.toggle('js-changecolor', isWithinTarget);
61  if (document.querySelector('.p-topService__serviceList__btn')) {
62    document.querySelector('.p-topService__serviceList__btn').classList.toggle('js-changecolor', isWithinTarget);
63  }
64  if (document.querySelector('.p-topCaseStudy__titleWrap__title')) {
65    document.querySelector('.p-topCaseStudy__titleWrap__title').classList.toggle('js-changecolor', isWithinTarget);
66  }
67  if (document.querySelector('.p-topEnNewsRelease__titleWrap__title')) {
68    document.querySelector('.p-topEnNewsRelease__titleWrap__title').classList.toggle('js-changecolor', isWithinTarget);
69  }
70  if (document.querySelectorAll('.p-topServiceList__item__link').length !== 0) {
71    document.querySelectorAll('.p-topServiceList__item__link').forEach(function (element) {
72      element.classList.toggle('js-changecolor', isWithinTarget);
73    });
74  }
75  if (document.querySelector('.p-cloudAutomator__content')) {
76    document.querySelector('.p-cloudAutomator__content').classList.toggle('js-changecolor', isWithinTarget);
77  }
78  if (document.querySelector('.p-cloudAutomator__content__link')) {
79    document.querySelector('.p-cloudAutomator__content__link').classList.toggle('js-changecolor', isWithinTarget);
80  }
81}
82
83// サービスリストの初期化
84function initializeServiceList() {
85  var serviceListItems = document.querySelectorAll('.p-topServiceList__item');
86  var topServiceContent = document.querySelector('.p-topService__serviceList__content');
87  if (topServiceContent) {
88    // 初期表示のコンテンツをクローンして追加
89    var cloneElement = serviceListItems[0].querySelector('.p-topServiceContent').cloneNode(true);
90    topServiceContent.appendChild(cloneElement);
91    topServiceContent.querySelector('.p-topServiceContent').classList.add('p-topServiceContent--show');
92
93    // 各サービスリストアイテムのリンクにイベントリスナーを追加
94    document.querySelectorAll('.p-topServiceList__item__link').forEach(function (element) {
95      element.addEventListener('mouseover', function () {
96        handleServiceListItemHover(this, topServiceContent);
97      });
98      element.addEventListener('click', function (event) {
99        handleServiceListItemClick(event, this, topServiceContent);
100      });
101    });
102  }
103}
104
105// サービスリストアイテムのホバー時の処理
106function handleServiceListItemHover(element, topServiceContent) {
107  if (!element.classList.contains('p-topServiceList__item__link--on')) {
108    var _document$querySelect;
109    // 既存の選択状態を解除し、新たに選択状態を設定
110    (_document$querySelect = document.querySelector('.p-topServiceList__item__link--on')) === null || _document$querySelect === void 0 || _document$querySelect.classList.remove('p-topServiceList__item__link--on');
111    element.classList.add('p-topServiceList__item__link--on');
112
113    // コンテンツを更新
114    topServiceContent.innerHTML = '';
115    var cloneElement = element.nextElementSibling.cloneNode(true);
116    topServiceContent.appendChild(cloneElement);
117    topServiceContent.querySelector('.p-topServiceContent').classList.add('p-topServiceContent--show');
118  }
119}
120
121// サービスリストアイテムのクリック時の処理
122function handleServiceListItemClick(event, element, topServiceContent) {
123  event.preventDefault();
124  if (!element.classList.contains('p-topServiceList__item__link--on')) {
125    var _document$querySelect2;
126    // 既存の選択状態を解除し、新たに選択状態を設定
127    (_document$querySelect2 = document.querySelector('.p-topServiceList__item__link--on')) === null || _document$querySelect2 === void 0 || _document$querySelect2.classList.remove('p-topServiceList__item__link--on');
128    element.classList.add('p-topServiceList__item__link--on');
129
130    // コンテンツを更新
131    topServiceContent.innerHTML = '';
132    var cloneElement = element.nextElementSibling.cloneNode(true);
133    topServiceContent.appendChild(cloneElement);
134    topServiceContent.querySelector('.p-topServiceContent').classList.add('p-topServiceContent--show');
135  }
136

137  // スマートフォン表示時の処理
138  if (window.matchMedia('(max-width: 767px)').matches) {
139    element.classList.toggle('p-topServiceList__item__link--open');
140    element.nextElementSibling.classList.toggle('p-topServiceContent--open');
141  }
142}
143
144// ニュースフィルターの初期化
145function initializeNewsFilter() {
146  var newsBtnItems = document.querySelectorAll('.p-newsFilterBtnList__item__btn');
147  var newsItems = document.querySelectorAll('.p-newsList__item');
148  newsBtnItems.forEach(function (newsBtnItem) {
149    newsBtnItem.addEventListener('click', function (event) {
150      handleNewsFilterClick(event, newsItems);
151    });
152  });
153}
154
155// ニュースフィルターのクリック時の処理
156function handleNewsFilterClick(event, newsItems) {
157  var thisBtn = event.currentTarget;
158  var thisCategory = thisBtn.getAttribute('data-category');
159
160  // 現在選択されているフィルタボタンの状態を解除
161  document.querySelectorAll('.p-newsFilterBtnList__item__btn--on').forEach(function (newsBtnOnItem) {
162    newsBtnOnItem.classList.remove('p-newsFilterBtnList__item__btn--on');
163  });
164  thisBtn.classList.add('p-newsFilterBtnList__item__btn--on');
165
166  // ニュースアイテムの表示を更新
167  newsItems.forEach(function (newsItem) {
168    var isAll = thisCategory === 'all';
169    newsItem.classList.toggle('p-newsList__item--on', isAll || newsItem.dataset.category === thisCategory);
170  });
171}