https://visitmatsumoto.com/js/commonArticleDetail.js

1// JavaScript Document
2
3// #recommend
4$('#recommend section').wrap('<span>');
5$('#recommend .slide').slick({
6	slidesToShow: 3,
7	responsive: [{
8		breakpoint: 992,
9		settings: {
10			slidesToShow: 2,
11		}
12	},{
13		breakpoint: 576,
14		settings: {
15			slidesToShow: 1,
16		}
17	}]
18});
19
20
21// .photo
22$('.photo').each(function(){
23	var num = $(this).find('dl').length;
24	if(num > 1){
25		$(this).find('dl').wrap('<span>');
26		$(this).slick({
27			dots: true,
28		});
29	}
30});
31
32
33// open/close
34const currentLang = document.documentElement.lang;
35const outlineLabels = {
36    'zh-hant': { open: '收起目錄', close: '展開目錄'},
37    'th':    { open: 'แสดงน้อยลง', close: 'แสดงเพิ่มเติม'},
38    'en':    { open: 'Show Less', close: 'Show More'},
39    'default': { open: '目次を閉じる', close: '目次を開く'}
40};
41const outlineLabel = outlineLabels[currentLang] || outlineLabels['default'];
42['#outline'].forEach(selector => {
43	document.querySelectorAll(selector + ' summary').forEach(summary => {
44		summary.addEventListener('click', function(){
45			if (this.classList.contains('open')){
46				this.classList.remove('open');
47				this.textContent = outlineLabel.close;
48			} else {
49				this.classList.add('open');
50				this.textContent = outlineLabel.open;
51			}
52		});
53	});
54});
55const mapLabels = {
56    'zh-hant': { open: '關閉地圖', close: '查看地圖' },
57    'th':    { open: 'ปิดแผนที่', close: 'ดูแผนที่' },
58    'en':    { open: 'Close Map', close: 'View Map' },
59    'default': { open: '地図を閉じる', close: '地図を開く' }
60};
61const mapLabel = mapLabels[currentLang] || mapLabels['default'];
62['.map'].forEach(selector => {
63    document.querySelectorAll(selector + ' summary').forEach(summary => {
64        summary.addEventListener('click', function() {
65            if (this.classList.contains('open')) {
66                this.classList.remove('open');
67                this.textContent = mapLabel.close;
68            } else {
69                this.classList.add('open');
70                this.textContent = mapLabel.open;
71            }
72        });
73    });
74});
75
76
77// photo
78if(document.URL.match('/photo/terms')){
79	$.ajax({
80		type: 'GET',
81		url: '/photo/index.html',

82		dataType: 'html',
83		success: function(data){
84			$('#main').prepend($(data).find('#photo').attr('id', 'terms'));
85			$('#photoText').attr('id', 'termsText');
86			$('#photoLink').attr('id', 'termsLink');
87			$('#tab li').removeClass('select');
88			$('#tab li:eq(1)').addClass('select');
89		},
90	});
91}
92
93
94// gourmet
95if(document.URL.match('visitmatsumoto.com/article/gourmet')){
96	$.ajax({
97		type: 'GET',
98		url: '/gourmet/list.html',
99		dataType: 'html',
100		success: function(data){
101			$('#main').prepend($(data).find('#spot').attr('id', 'gourmet'));
102			$('#tab li').removeClass('select');
103			$('#tab li:eq(0)').addClass('select');
104		},
105	});
106}
107
108
109// smooth scroll
110document.addEventListener('DOMContentLoaded', () => {
111	const htmlEl = document.documentElement;
112	const smoothLinks = document.querySelectorAll('#outline a');
113	smoothLinks.forEach((link) => {
114		link.addEventListener('click', (e) => {
115			htmlEl.classList.add('is-smooth-scrolling');
116			let isSettled = false;
117			const handleScrollEnd = () => {
118				if (!isSettled) {
119					isSettled = true;
120					htmlEl.classList.remove('is-smooth-scrolling');
121					window.removeEventListener('scrollend', handleScrollEnd);
122				}
123			};
124			window.addEventListener('scrollend', handleScrollEnd);
125			setTimeout(() => {
126				handleScrollEnd();
127			}, 1000);
128		});
129	});
130});
131
132
133
134