https://www.work-wheels.co.jp/assets/js/common.js?1791054603

1class Base {
2    constructor(){
3        this.deviceDecision();
4        this.previousWidth = window.innerWidth;
5        window.addEventListener('load', (e) => {
6            this.windowLoadAction();
7            this.headerNavActive();
8            this.footerLinkActive();
9            this.ankerLinkAction();
10            this.fixedTopActive();
11            this.keywordSearchToggle();
12        });
13
14        // リサイズ時、設定関数の再読み込み
15        window.addEventListener('resize', (e) => {
16            // ウインドウ横幅が変わっていないため処理をキャンセルする
17            var currentWidth = window.innerWidth;
18            if(this.previousWidth === currentWidth){
19                return;
20            }
21            this.previousWidth = currentWidth;
22
23            this.deviceDecision();
24            this.footerLinkActive();
25        });
26
27        /* swiperのデフォルトオプション */
28        this.default_option = {
29            loop: true,
30            speed: 2000,
31            slidesPerView: 1,
32            allowTouchMove: false,
33            autoplay: {
34                delay: 1500,
35                disableOnInteraction: false,
36            },
37        };
38    }
39
40    ///-------------------------------------------------
41    /// 読み込み時処理
42    ///-------------------------------------------------
43    windowLoadAction(){
44        this.loadingPicture();
45
46        // アンカーリンクのスムーススクロール
47        if(location.hash){
48
49            //URLに「/keyword/」が含まれているか判定
50            if(location.hash.indexOf('#gsc') >= 0) return;
51
52            const target = document.querySelector(location.hash);
53            if(target){
54                const header = document.getElementById('header');
55                const headerHeight = (header)? header.clientHeight : 0;
56                const targetOffsetTop = window.pageYOffset + target.getBoundingClientRect().top;
57
58                setTimeout(() => {
59                    window.scrollTo({
60                        top: targetOffsetTop - headerHeight - 20,
61                        behavior: "smooth"
62                    });
63                }, 100);
64            }
65        }
66    }
67
68    ///-------------------------------------------------
69    /// デバイス判定
70    ///-------------------------------------------------
71    deviceDecision(){
72        const windowSize = window.innerWidth;
73        // document.body.classList.remove(...document.body.classList); // リセット
74        if(375 < windowSize && windowSize < 961){
75            document.body.classList.remove('device-sp');
76            document.body.classList.remove('device-pc');
77            document.body.classList.add('device-tab');
78        }
79        else if(961 <= windowSize){
80            document.body.classList.remove('device-sp');
81            document.body.classList.remove('device-tab');
82            document.body.classList.add('device-pc');
83        }
84        else{
85            document.body.classList.remove('device-tab');
86            document.body.classList.remove('device-pc');
87            document.body.classList.add('device-sp');
88        }
89    }
90
91    ///-------------------------------------------------
92    /// headerのアクティブ処理
93    ///-------------------------------------------------
94    headerNavActive(){
95        const headerBtn = document.querySelector('.component-header--btn');
96        const bodyClasses = document.body.classList;
97        const headerParentLinks = document.querySelectorAll('.component-header--nav-modal .component-header--nav-list:not(.others) .component-header--nav-item.has-child');
98        const headerChildLinks = document.querySelectorAll('.component-header--nav-modal .component-header--subnav-list .component-header--nav-item:not(.insertElem)');
99        const headerMenuParentLinks = document.querySelectorAll('.component-header--nav-menu .component-header--nav-list:not(.others) .component-header--nav-item');
100
101        // 追加される前に既存の insertElem を削除
102        document.querySelectorAll('.component-header--nav-modal .component-header--nav-item.insertElem').forEach(el => el.remove());
103
104        headerBtn.addEventListener('click', (e) => {
105            const header = document.getElementById('header');
106            const headerNav = document.querySelector('.component-header--nav-modal');
107            header.classList.toggle('activation');
108            document.body.classList.toggle('menu-open');
109        });
110
111        const linkActivation = (elem, option='off') => {
112            if(elem){
113                const href = elem.dataset.href;
114                let text = elem.text;
115                if(text != '' && text === 'PRODUCT製品情報') return false;

116                if(text != '' && text === 'NEWSニュース') text = '一覧';
117                if(href){
118                    // デバイスによって有効化の分岐
119                    if(option === 'on'){
120                        const subNav = elem.nextElementSibling;
121                        if(subNav && bodyClasses.contains('device-pc')){
122                            elem.setAttribute('href', href);
123                            /* 一時的に生成したaタグを削除 */
124                            let insertElem = subNav.querySelector('.component-header--nav-item.insertElem');
125                            if(insertElem) insertElem.remove();
126                        }
127                        else{
128                            elem.removeAttribute('href');
129                            /* アコーディオン対策でPC以外は一時的にaタグを生成する */
130                            if(subNav && !subNav.querySelector('.component-header--nav-item.insertElem')){
131                                const insertElem = document.createElement('li');
132                                const insertChildElem = document.createElement('a');
133                                insertElem.classList.add('component-header--nav-item', 'insertElem');
134                                insertChildElem.setAttribute('href', href);
135                                insertChildElem.classList.add('component-header--nav-link');
136                                insertChildElem.textContent = text;
137                                insertElem.prepend(insertChildElem);
138                                subNav.insertBefore(insertElem, subNav.querySelector('.component-header--nav-item'));
139                            }
140                        }
141                    }
142                    else{
143                        elem.setAttribute('href', href);
144                    }
145                }
146            }
147        };
148
149        headerParentLinks.forEach((link) => {
150            const a_Tag = link.querySelector('a');
151            linkActivation(a_Tag, 'on');
152            /* アクティブ処理 */
153            if(!bodyClasses.contains('device-pc')){
154                a_Tag.addEventListener('click', (e) => {
155                    e.preventDefault();
156                    /* アクティブ時サブメニューの開閉 */
157                    this.customSlideToggle(e.target);
158                });
159            }
160        });
161        headerChildLinks.forEach((link) => {
162            const a_Tag = link.querySelector('a');
163            linkActivation(a_Tag);
164        });
165        headerMenuParentLinks.forEach((link) => {
166            const a_Tag = link.querySelector('a');
167            const menuLink = link.closest('ul').querySelectorAll('.component-header--nav-item.has-child');
168            if(bodyClasses.contains('device-pc')){
169                a_Tag.addEventListener('mouseenter', (e) => {
170                    e.preventDefault();
171                    if(menuLink.length){
172                        menuLink.forEach((link) => {
173                            const a_Tag = link.querySelector('a');
174                            if(a_Tag.classList.contains('active')){
175                                this.customSlideToggle(a_Tag);
176                            }
177                        });
178                    }
179
180                    if(link.classList.contains('has-child')){
181                        /* アクティブ時サブメニューの開閉 */
182                        this.customSlideToggle(e.target);
183                    }
184                });
185                a_Tag.addEventListener('mouseleave', (e) => {
186                    e.preventDefault();
187                    /* アクティブ時サブメニューの開閉 */
188                    // this.customSlideToggle(e.target);
189                });
190            }
191        });
192    }
193
194    ///-------------------------------------------------
195    /// フッターリンクの有効・無効処理
196    ///-------------------------------------------------
197    footerLinkActive(){
198        const bodyClasses = document.body.classList;
199        const footerNormalLinks = document.querySelectorAll('.component-footer--nav-list.others .component-footer--nav-item:not(.has-child)');
200        const footerParentLinks = document.querySelectorAll('.component-footer--nav-list:not(.others) .component-footer--nav-item.has-child');
201        const footerChildLinks = document.querySelectorAll('.component-footer--subnav-list .component-footer--nav-item:not(.insertElem)');
202
203        // 追加される前に既存の insertElem を削除
204        document.querySelectorAll('.component-footer--nav-item.insertElem').forEach(el => el.remove());
205
206        const linkActivation = (elem, option='off') => {
207            if(elem){
208                const href = elem.dataset.href;
209                const text = elem.text;
210                if(href){
211                    // デバイスによって有効化の分岐
212                    if(option === 'on'){
213                        const subNav = elem.nextElementSibling;
214                        if(subNav && bodyClasses.contains('device-pc')){
215                            elem.setAttribute('href', href);
216                            /* 一時的に生成したaタグを削除 */
217                            let insertElem = subNav.querySelector('.component-footer--nav-item.insertElem');

218                            if(insertElem) insertElem.remove();
219                        }
220                        else{
221                            elem.removeAttribute('href');
222                            /* アコーディオン対策でPC以外は一時的にaタグを生成する */
223                            if(subNav && !subNav.querySelector('.component-footer--nav-item.insertElem')){
224                                const insertElem = document.createElement('li');
225                                const insertChildElem = document.createElement('a');
226                                insertElem.classList.add('component-footer--nav-item', 'insertElem');
227                                insertChildElem.setAttribute('href', href);
228                                insertChildElem.classList.add('component-footer--nav-link');
229                                insertChildElem.textContent = text;
230                                insertElem.prepend(insertChildElem);
231                                subNav.insertBefore(insertElem, subNav.querySelector('.component-footer--nav-item'));
232                            }
233                        }
234                    }
235                    else{
236                        elem.setAttribute('href', href);
237                    }
238                }
239            }
240        };
241
242        footerNormalLinks.forEach((link) => {
243            const a_Tag = link.querySelector('a');
244            linkActivation(a_Tag);
245        });
246        footerParentLinks.forEach((link) => {
247            const a_Tag = link.querySelector('a');
248            linkActivation(a_Tag, 'on');
249            /* アクティブ処理 */
250            if(!bodyClasses.contains('device-pc')){
251                a_Tag.addEventListener('click', (e) => {
252                    e.preventDefault();
253                    /* アクティブ時サブメニューの開閉 */
254                    this.customSlideToggle(e.target);
255                });
256            }
257        });
258        footerChildLinks.forEach((link) => {
259            const a_Tag = link.querySelector('a');
260            linkActivation(a_Tag);
261        });
262    }
263
264    ///-------------------------------------------------
265    /// スライド開閉
266    ///-------------------------------------------------
267    customSlideToggle(target){
268        const elem = target.nextElementSibling;
269        if (!elem) return;
270
271        target.classList.toggle('active');
272        if(target.classList.contains('active')){
273            elem.style.height = elem.scrollHeight + 'px';
274        }
275        else{
276            elem.style.height = '0';
277        }
278    }
279
280    ///-------------------------------------------------
281    /// 画像の自動表示
282    ///-------------------------------------------------
283    loadingPicture(){
284        const pictures = document.querySelectorAll('#contents picture img');
285        if(pictures){
286            pictures.forEach((img, num) => {
287                setTimeout(() => {
288                    img.setAttribute('load', true);
289                }, 120 * num);
290            });
291        }
292    }
293
294    ///-------------------------------------------------
295    /// Swiper呼び出し
296    ///-------------------------------------------------
297    setSwiper(variable, elem, option={}){
298        this[variable] = new Swiper(elem, option);
299    }
300
301    ///-------------------------------------------------
302    /// 画像の自動表示
303    ///-------------------------------------------------
304    ankerLinkAction(){
305        const targets = document.querySelectorAll('a[href^="#"]');
306        if(targets.length == 0) return false;
307
308        targets.forEach(anchor => {
309            anchor.addEventListener('click', (e) => {
310                e.preventDefault();
311                const href = e.currentTarget.getAttribute('href').replace(/^#/, '');
312                const target = document.getElementById(href);
313                if(target){
314                    const header = document.getElementById('header');
315                    const headerHeight = (header) ? header.clientHeight : 0;
316                    const targetOffsetTop = target.offsetTop;
317
318                    setTimeout(() => {
319                        window.scrollTo({
320                            top: targetOffsetTop - headerHeight - 20,
321                            behavior: "smooth"
322                        });
323                    }, 200);
324                }
325            });
326        });
327    }
328
329    ///-------------------------------------------------
330    /// ページTOP ボタンの表示・非表示
331    ///-------------------------------------------------
332    fixedTopActive(){
333        window.addEventListener('scroll', () => {
334            if(window.scrollY > 100){
335                document.getElementById('pageTop').style.opacity = '1';
336                document.getElementById('pageTop').style.pointerEvents = 'visible';
337            }
338            else{
339                document.getElementById('pageTop').style.opacity = '0';
340                document.getElementById('pageTop').style.pointerEvents = 'none';
341            }
342        });
343        document.addEventListener('click', (e) => {
344            if(e.target.closest('#pageTop')){
345                window.scrollTo({
346                    top: 0,
347                    behavior: 'smooth'
348                });
349                e.preventDefault();
350            }
351        });
352    }
353
354    ///-------------------------------------------------
355    /// キーワード検索の処理
356    ///-------------------------------------------------
357    keywordSearchToggle(){

358        const keywordTgl = document.querySelector('.component-header--nav-icon.search');
359        const keywordBox = document.querySelector('.component-header--nav-keysearch');
360
361        keywordTgl.addEventListener('click', (e) => {
362            e.preventDefault();
363            keywordTgl.classList.toggle('is-active');
364            if(keywordTgl.classList.contains('is-active')){
365                keywordBox.style.maxHeight = keywordBox.scrollHeight + 'px';
366            }
367            else{
368                keywordBox.style.maxHeight = null;
369            }
370        });
371    }
372}