https://xn--ndd-vb3f670a.jp/js/config.js

1/*
2Copyright (c) 2021 ACESWEB,inc.
3*/
4
5//Container Query Polyfill
6if (!('container' in document.documentElement.style)) {
7	import('https://unpkg.com/container-query-polyfill@^0.2.0');
8}
9
10//遅延読込用
11window.addEventListener('load',function(){
12  document.body.classList.add('onload');
13  document.body.setAttribute('ontouchstart', '');
14});
15
16
17
18//ランキング画像スライド
19const rankslider = document.querySelectorAll('.rankbox-slider');
20rankslider.forEach(function(v,e){
21  let l = v.childElementCount;
22  if(l > 1){
23    //spanタグに変更
24    for(let a = 0; a < l; a++) {
25      let img_parent = v.children[a];
26      img_parent.outerHTML = '<span>' + img_parent.outerHTML + '</span>';
27      let parentElem = v.children[a].firstChild;
28      while (parentElem.firstChild) {
29        parentElem.parentNode.insertBefore(parentElem.firstChild, parentElem);
30      }
31      parentElem.parentNode.removeChild(parentElem);
32    }
33    //クラス名「rslide+e」で囲む
34    v.innerHTML = "<div class="+'rslide'+e+">" + v.innerHTML + "</div>";
35    
36    //サムネイル作成
37    let clone = v.firstChild.cloneNode(true);
38    clone.className = 'crl-d';
39    
40    //前後ボタン表示
41    var arrow = document.createElement('div');
42    arrow.classList.add('rslide-arrow');
43    arrow.innerHTML = "<button class="+'prev'+">prev</button><button class="+'next'+">next</button>";
44    v.appendChild(arrow);
45
46    //クラス名「rslide-wrap」で囲む
47    v.innerHTML = "<div class="+'rslide-wrap'+">" + v.innerHTML + "</div>";
48    
49    //サムネイル表示
50    for(let b = 0; b < clone.childElementCount; b++) {
51      let img_parent = clone.children[b];
52      img_parent.outerHTML = '<button class="crl-d-ctl">' + img_parent.outerHTML + '</button>';
53      let parentElem = clone.children[b].firstChild;
54      while (parentElem.firstChild) {
55        parentElem.parentNode.insertBefore(parentElem.firstChild, parentElem);
56      }
57      parentElem.parentNode.removeChild(parentElem);
58    }
59    clone.children[0].classList.add('selected');
60    v.appendChild(clone);
61    
62    //スライダー初期化
63    const mySiema = new Siema({
64      selector: '.rslide' + e,
65      loop: true,
66      onChange: () => {
67        v.querySelector('.selected').classList.remove('selected');
68        crlD.children[mySiema.currentSlide].classList.add('selected');
69      }
70    });
71    
72    //サムネイルボタン
73    let crlD = v.querySelector('.crl-d');
74    let crlDctl = crlD.querySelectorAll('.crl-d-ctl');
75    for(let c = 0; c < crlD.childElementCount; c++) {
76      crlD.children[c].addEventListener('click', (e) => {
77        mySiema.goTo([c]);
78      }, false);
79    }
80    
81    //前後ボタン
82    v.querySelector('.prev').addEventListener('click', (e) => {
83      mySiema.prev();
84    }, false);
85    v.querySelector('.next').addEventListener('click', (e) => {
86      mySiema.next();
87    }, false);
88  }
89});
90
91
92
93// もっと見るボタン 
94const moreBtn = document.querySelectorAll('.pagenation__more');
95if(moreBtn != null) {
96  for(let i = 0; i < moreBtn.length; i++) {
97    let moreCount = moreBtn[i].getAttribute('data-more');
98    if(moreCount == '') moreCount = 4;
99    const listElement = moreBtn[i].previousElementSibling;
100    const childNodesCount = listElement.childElementCount;
101    if(childNodesCount <= moreCount){
102       moreBtn[i].remove()
103    } else {
104      for(let b=moreCount; b<childNodesCount; b++) {
105        listElement.children[b].classList.add('is__btn__hidden');
106      }
107      moreBtn[i].firstElementChild.addEventListener('click', (e) => {
108        e.preventDefault();
109        const hiddenItems = listElement.querySelectorAll('.is__btn__hidden');
110        for(let c = 0; c < hiddenItems.length; c++) {
111          if(c < moreCount) {
112            hiddenItems[c].classList.remove('is__btn__hidden');
113          }
114        }
115        if(hiddenItems.length <= moreCount) {
116          moreBtn[i].remove();
117        }
118      }, false);
119    }
120  }
121}
122
123
124
125// グローバルナビ 
126const spmenuBtn = document.getElementById('spmenu-btn');
127const header = document.getElementById('header');
128let html = document.getElementsByTagName('html')[0];
129let spmenu = Boolean('');
130const wrap = document.getElementById('wrap');
131let headerStyle;
132let headerHeight;
133function wrapPaddingTop() {
134	if(!header.classList.contains('fix')) {
135		headerStyle = getComputedStyle(header,null).getPropertyValue('position');
136		headerHeight = header.clientHeight + parseInt(window.getComputedStyle(header).marginBottom) + parseInt(window.getComputedStyle(header).marginTop);
137		if(headerStyle=='static' || headerStyle=='relative') wrap.style.paddingTop = headerHeight+'px';
138		else if(headerStyle=='fixed') wrap.style.paddingTop = '';
139	}
140}
141function clickFunction() {
142	if(getComputedStyle(spmenuBtn,null).getPropertyValue('display')!='none') {
143		wrapPaddingTop();
144		spmenu = !spmenu;
145		html.dataset.spmenu = spmenu;
146	}
147}
148if(spmenuBtn != null) {
149  spmenuBtn.addEventListener('click',clickFunction,false);
150}
151let spMenuLinkAll = document.getElementById('spmenu').querySelectorAll('a[href*="#"]');
152for (let i = 0; i < spMenuLinkAll.length; i++){
153	spMenuLinkAll[i].addEventListener('click',clickFunction,false);
154}
155const spmenuSwitch = matchMedia('(min-width: 1025px)');
156handle(spmenuSwitch);
157spmenuSwitch.addListener(handle);
158function handle(mq) {
159	if (mq.matches) {
160		spmenu = Boolean('');
161		html.dataset.spmenu = spmenu;
162		if(!header.classList.contains('fix')) wrap.style.paddingTop = '';
163	}
164}
165
166
167
168// 検索ボタン
169const headerMenu = document.querySelectorAll('#header-menu .search')[0];
170const headerMenuChild = document.querySelectorAll('#header-menu .search .search-form > *');
171let searchbox = false;

172if(headerMenu != null) {
173  headerMenu.addEventListener('click', () => {
174    searchbox = !searchbox;
175    html.dataset.searchbox = searchbox;
176  }, false);
177  for(let i = 0; i < headerMenuChild.length; i++) {
178    headerMenuChild[i].addEventListener('click', () => {
179      event.stopPropagation();
180    }, false);
181  }
182}
183
184
185
186// カテゴリーメニュー
187const haschildAll = document.querySelectorAll('.haschild');
188if(haschildAll != null) {
189  for(let i = 0; i < haschildAll.length; i++) {
190    haschildAll[i].addEventListener('click', (e) => {
191      e.stopPropagation();
192      haschildAll[i].classList.toggle('show');
193    }, false);
194  }
195}
196
197
198
199// Q&Aアコーディオン
200const qalistAll = document.querySelectorAll('.qa-list');
201if(qalistAll != null) {
202  for(let a = 0; a < qalistAll.length; a++) {
203    const question2All = qalistAll[a].querySelectorAll('.question2');
204    for(let i = 0; i < question2All.length; i++) {
205      question2All[i].addEventListener('click', (e) => {
206        e.target.classList.toggle('show');
207      }, false);
208    }
209  }
210}
211
212
213
214// ページトップ
215const toTop = document.getElementById('pagetop');
216const mainHeader = document.getElementById('main-header');
217if(toTop != null) {
218  (new IntersectionObserver(function (entries) {
219    if (entries[0].isIntersecting) {
220      toTop.classList.remove('show');
221    } else {
222      toTop.classList.add('show');
223    }
224  },{
225    rootMargin: '50% 0px'
226  })).observe(mainHeader);
227}
228
229
230
231// 追従CTA
232const ctaFixed = document.getElementById('cta-fixed');
233if(ctaFixed != null) {
234  (new IntersectionObserver(function (entries) {
235    if (entries[0].isIntersecting) {
236      ctaFixed.classList.add('fixed__follow');
237    }
238  },{
239    rootMargin: '0px 0px -50% 0px'
240  })).observe(ctaFixed);
241  const fixedCloseBtn = ctaFixed.querySelector('#cta-fixedbtn');
242  if(fixedCloseBtn != null) {
243    fixedCloseBtn.addEventListener('click', () => {
244      ctaFixed.classList.toggle('fixed__close');
245    }, false);
246  }
247}
248
249
250// 追加レイアウト2カラム用（サイト内検索文言追加）
251const searchElement = document.querySelector('.search');
252if (searchElement) searchElement.setAttribute('data-search-text', '\u30ad\u30fc\u30ef\u30fc\u30c9\u3067\u63a2\u3059');
253