https://www.digistyle-kyoto.com/assets/js/scripts.js?ver1.0

1//header menu -----------------------------------------------------------------
2$(function () {
3    'use strict';
4
5    const $html = $('html'),
6        $body = $('body'),
7        $window = $(window),
8        $menu = $('.js-menu'),
9        $trigger = $('.js-menu-trigger'),
10        openClass = 'is-menu-opened',
11        noScrollClass = 'is-noscroll';
12
13    let scrollPos; //スクロール量
14
15    $trigger.on('click.menu', () => {
16        if (window.matchMedia('(max-width: 768px)').matches) {
17            $body.toggleClass(openClass);
18
19            const isOpened = $body.hasClass(openClass);
20
21            if (isOpened) {
22                const scrollbarWidth = innerWidth - document.body.clientWidth; //スクロールバーの幅
23                scrollPos = $window.scrollTop(); //スクロール量を取得
24                $html.addClass(noScrollClass);
25                $body.css({
26                    top: -scrollPos,
27                    'padding-right': `${scrollbarWidth}px`
28                });
29                $menu.fadeIn(300);
30            } else {
31                $body.css({ top: '', 'padding-right': '' });
32                $html.removeClass(noScrollClass);
33                $window.scrollTop(scrollPos);
34                $menu.fadeOut(300);
35            }
36        }
37    });
38});
39
40
41
42//header menu scroll css style change -----------------------------------------------------------------
43document.addEventListener('DOMContentLoaded', () => {
44    'use strict';
45
46    const header = document.querySelector('.js-header');
47    const activeClass = 'is-narrow';
48
49    if (header == null) return;
50
51    // 発火の閾値を調整するための要素を追加
52    document.body.insertAdjacentHTML(
53        'afterbegin',
54        '<div class="js-scroll-threshold"></div>'
55    );
56
57    // Intersection Observerのインスタンス生成
58    const observer = new IntersectionObserver(callback);
59
60    // callback
61    function callback(entries) {
62        if (entries[0].isIntersecting) {
63            header.classList.remove(activeClass);
64        } else {
65            header.classList.add(activeClass);
66        }
67    }
68
69    //対象を監視
70    const thresholdElm = document.querySelector('.js-scroll-threshold');
71    observer.observe(thresholdElm);
72});
73
74
75//pagetop scroll -----------------------------------------------------------------
76$(function () {
77    'use strict';
78    const $window = $(window),
79        $target = $('.js-pagetop'),
80        threshold = 300; 
81
82    $window.on('scroll', function () {
83        if ($window.scrollTop() > threshold) {
84            $target.fadeIn();
85        } else {
86            $target.fadeOut();
87        }
88    });
89});
90
91//header current -----------------------------------------------------------------
92const links = document.querySelectorAll(".header-nav-item > a");
93
94links.forEach(function (link) {
95    if (link.href === location.href) {
96        link.closest(".header-nav-item").classList.add("current");
97    }
98});
99
100//top main slider -----------------------------------------------------------------
101document.addEventListener('DOMContentLoaded', () => {
102    'use strict';
103    const slider = document.querySelector('.top-slider .js-slider');
104    const swiper = new Swiper(slider, {
105        loop: true,
106        centeredSlides: true,
107        slidesPerView: "auto",
108        spaceBetween: 10,
109        autoplay: {
110            delay: 3000,
111            disableOnInteraction: false
112        },
113        breakpoints: {
114            769: {
115                centeredSlides: true,
116                slidesPerView: "auto",
117                spaceBetween: 30 
118            }
119        },
120        pagination: {
121            el: '.swiper-pagination', 
122            clickable: true
123        },
124        navigation: {
125            nextEl: '.swiper-button-next', 
126            prevEl: '.swiper-button-prev'
127        },
128        on: {
129            init: function () {
130                setNavButtonPosition(slider);
131            },
132            resize: function () {
133                setNavButtonPosition(slider);
134            }
135        }
136    });
137
138    //矢印の位置調整
139    function setNavButtonPosition(sliderEl) {
140        if (!window.matchMedia('(max-width: 768px)').matches) {
141            //PC
142            const activeSlidePosLeft = sliderEl
143                .querySelector('.swiper-slide-active')
144                .getBoundingClientRect().left; 
145            const nextSlidePosLeft = sliderEl
146                .querySelector('.swiper-slide-next')
147                .getBoundingClientRect().left; 
148            const navBtnWidth = sliderEl.querySelector('.swiper-button-next')
149                .offsetWidth; 
150            const offset =

151                (nextSlidePosLeft - activeSlidePosLeft + navBtnWidth) / 2;
152
153            sliderEl.querySelector('.swiper-button-prev').style.left =
154                'calc(50% - ' + offset + 'px)'; 
155            sliderEl.querySelector('.swiper-button-next').style.right =
156                'calc(50% - ' + offset + 'px)'; 
157        } else {
158            // SP、style削除
159            sliderEl
160                .querySelector('.swiper-button-prev')
161                .removeAttribute('style');
162            sliderEl
163                .querySelector('.swiper-button-next')
164                .removeAttribute('style');
165        }
166    }
167});
168
169
170
171//top event right slider -----------------------------------------------------------------
172  const mySwiper = new Swiper('.right-slider .swiper', {
173    slidesPerView: 'auto',
174    spaceBetween: 10,
175    centeredSlides: true,
176    grabCursor: true,
177    loop: true,
178    pagination: {
179      el: '.right-slider .swiper-pagination',
180      clickable: true,
181    },
182    navigation: {
183      nextEl: '.right-slider .swiper-button-next',
184      prevEl: '.right-slider .swiper-button-prev',
185    },
186    breakpoints: {
187      768: {
188        spaceBetween: 30,
189        centeredSlides: false,
190      }
191    },
192  });
193
194
195
196//article-list acc -----------------------------------------------------------------
197$(function () {
198    'use strict';
199    const $scope = $('.js-more-scope'); 
200    const $target = $('.js-more-item'); 
201    const $trigger = $('.js-more-trigger'); 
202    const showAllClass = 'is-show-all'; //全て表示された際に、スコープ要素に付与されるクラス
203    const initShowItem = 20; // 初期数
204    const showItem = 8; // クリック毎表示数
205
206    $scope.each(function () {
207        const $thisScope = $(this);
208        const $thisTrigger = $thisScope.find($trigger);
209        const $thisTarget = $thisScope.find($target);
210        const targetLength = $thisTarget.length;
211        let isAllShow = false; 
212
213        if (targetLength <= initShowItem) {
214            $thisTrigger.hide();
215        } else {
216            $thisTarget.not(':lt(' + initShowItem + ')').hide();
217            $thisTrigger.on('click', function () {
218                if (isAllShow) {
219                    $thisTarget.not(':lt(' + initShowItem + ')').hide();
220                    $thisScope.removeClass(showAllClass);
221                    isAllShow = false;
222                } else {
223                    $thisTarget.filter(':hidden:lt(' + showItem + ')').fadeIn();
224
225                    const hiddenItemLength =
226                        $thisTarget.filter(':hidden').length;
227
228                    if (hiddenItemLength === 0) {
229                        $thisScope.addClass(showAllClass);
230                        isAllShow = true;
231                    }
232                }
233            });
234        }
235    });
236});
237
238
239
240//tab linktab open用　start -----------------------------------------------------------------
241$(function () {
242    'use strict';
243
244    const $trigger = $('.js-tab-trigger');
245    const $triggerScope = $('.js-tab-trigger-scope');
246    const $target = $('.js-tab-target');
247    const $targetScope = $('.js-tab-target-scope');
248    const currentClass = 'is-current';
249
250    $trigger.on('click', function () {
251        const $this = $(this);
252        const tabId = $this.data('id');
253        const $thisTriggerScope = $this.closest($triggerScope);
254        const $thisTargetScope = $(`#${tabId}`).closest($targetScope);
255
256        $thisTriggerScope.find($trigger).removeClass(currentClass);
257        $thisTargetScope.find($target).removeClass(currentClass);
258        $this.addClass(currentClass);
259        $(`#${tabId}`).addClass(currentClass);
260    });
261    const hash = location.hash; //本番有効化
262    if (hash) {
263        $(hash).click();
264    }
265});
266//横スクロール
267$(function () {
268    'use strict';
269
270    const $list = $('.js-scroll-list'),
271        $item = $list.find('.js-scroll-item'),
272        itemLength = $item.length,
273        $triggerToStart = $('.js-scroll-to-start'),
274        $triggerToEnd = $('.js-scroll-to-end'),
275        duration = 300,
276        easing = 'swing';
277    //左端までスクロール
278    $triggerToStart.on('click', function () {
279        $list.animate(
280            {
281                scrollLeft: 0
282            },
283            duration,
284            easing
285        );
286    });
287    //右端までスクロール
288    $triggerToEnd.on('click', function () {
289        const targetWidth = $list.outerWidth();
290        let itemsWidth = 0;
291        for (let i = 0; i < itemLength; i++) {
292            itemsWidth += $item.eq(i).outerWidth(true);
293        }
294        if (itemsWidth > targetWidth) {
295            $list.animate(
296                {
297                    scrollLeft: itemsWidth - targetWidth
298                },
299                duration,
300                easing
301            );
302        }
303    });
304    //tabクリック時の処理
305    const $tab = $('.js-tab-trigger');
306
307    $tab.on('click', function () {
308        const $thisItem = $(this).closest($item),
309            index = $thisItem.index(), //tabのindex
310            offset = 40; //左のタブが少し見えるようにする場合に設定
311        let thisItemPosX = 0;
312
313        for (let i = 0; i < index; i++) {
314            thisItemPosX += $item.eq(i).outerWidth(true);
315        }
316        $list.animate(
317            {
318                scrollLeft: thisItemPosX - offset
319            },
320            duration,
321            easing
322        );
323    });
324});
325//tab linktab open用　end -----------------------------------------------------------------
326
327
328
329
330
331
332
333
334
335//article-ttl txt count  -----------------------------------------------------------------
336
337
338//==============================================
339// 表示文字数を制限
340//==============================================
341const els = document.getElementsByClassName('article-ttl');
342const len = 30;//最大文字数を指定します
343
344for(let i = 0; i < els.length; i++) {
345    const el = els[i];
346    const str = el.textContent.trim();
347
348    if (str.length > len) {
349        el.textContent = str.substring(0, len) + '…';
350    }
351}
352//==============================================
353// [jQuery] 表示文字数を制限
354//==============================================
355$(function() {
356    const len = 30; // 最大文字数を指定します
357
358    $('.article-ttl').each(function() {
359        const els = $.trim($(this).text());
360
361        if (els.length > len) {
362            const textContent = els.substring(0, len) + '…';
363            $(this).text(textContent);
364        }
365    });
366});
367
368
369//==============================================
370// 表示文字数を制限
371//==============================================
372const els2 = document.getElementsByClassName('article-ttl-min');
373const len2 = 14;//最大文字数を指定します
374
375for(let i = 0; i < els2.length; i++) {
376    const el = els2[i];
377    const str = el.textContent.trim();
378
379    if (str.length > len2) {
380        el.textContent = str.substring(0, len2) + '…';
381    }
382}
383//==============================================
384// [jQuery] 表示文字数を制限
385//==============================================
386$(function() {
387    const len2 = 14; // 最大文字数を指定します
388
389    $('.article-ttl-min').each(function() {
390        const els2 = $.trim($(this).text());
391
392        if (els2.length > len2) {
393            const textContent = els2.substring(0, len2) + '…';
394            $(this).text(textContent);
395        }
396    });
397});
398
399
400
401
402/* ====================================
403  pagelink in header
404===================================== */
405$(function () {
406    var headH = $("header").outerHeight(); 
407    var animeSpeed = 500;
408    $("a[href^='#']").on({
409        "click": function () {
410            var href = $(this).attr("href");
411            var target = $(href == "#" || href === "" ? "html" : href);
412            var position;
413            position = target.offset().top - 80 ;
414            $("body,html").stop().animate({
415                scrollTop: position
416            }, animeSpeed);
417            return true;
418        }
419    });
420  });
421