document.addEventListener('DOMContentLoaded', function () {
const boxes = document.querySelectorAll('.meal-tab .text');
const menuWrap = document.querySelector('#menu-content');
let splideInstances = [];
const mealHTMLMap = {
"1": `
雅コース
当館最上級コースです。
料理長が腕によりをかけて仕上げる豪華なお造りは、花盛りで美しく華やかに。
豪華に彩る懐石料理となります。
季節や仕入れによって料理内容が変更になる可能性もあります。予めご了承くださいませ。
`,
"2": `
松コース
当館人気ナンバーワンの上級懐石です。
前菜からデザートまでこだわりぬいた
料理長渾身の懐石料理をお楽しみ下さい。
季節や仕入れによって料理内容が変更になる可能性もあります。予めご了承くださいませ。
`,
"3": `
竹コース
四季折々の地元食材を使用した懐石料理をお楽しみいただけます。
皆様から大変好評をいただいている豆乳しゃぶしゃぶや、地魚のお造り、
旬の食材をふんだんに使用した創作懐石をお楽しみ下さい。
季節や仕入れによって料理内容が変更になる可能性もあります。予めご了承くださいませ。
`,
"4": `
梅コース
気軽に懐石料理を楽しみたい方におすすめのコースです。
甘い香りが食欲をそそる日南どりのくるみ味噌焼きなど
リーズナブルでありながら、お腹も心も満たされる品々で彩ります。
季節や仕入れによって料理内容が変更になる可能性もあります。予めご了承くださいませ。
`,
};
function waitForImages(callback) {
const images = menuWrap.querySelectorAll('img');
let loaded = 0;
if (images.length === 0) return callback();
images.forEach(img => {
if (img.complete) {
loaded++;
if (loaded === images.length) callback();
} else {
img.addEventListener('load', () => {
loaded++;
if (loaded === images.length) callback();
});
img.addEventListener('error', () => {
loaded++;
if (loaded === images.length) callback();
});
}
});
}
function initMenuSplide() {
splideInstances.forEach(instance => instance.destroy());
splideInstances = [];
document.querySelectorAll('.meal-splide01, .meal-splide02, .meal-splide03').forEach(splideEl => {
let options;
if (splideEl.classList.contains('meal-splide01') || splideEl.classList.contains('meal-splide03')) {
options = {
type: 'loop',
perPage: 1,
focus: 'center',
gap: '1rem',
padding: { left: '25%', right: '25%' },
autoplay: true,
interval: 6000,
speed: 2000,
arrows: true,
pagination: true,
pauseOnHover: false,
pauseOnFocus: false,
breakpoints: {
768: {
padding: { left: '0%', right: '0%' },
gap: '1rem',
},
},
};
} else if (splideEl.classList.contains('meal-splide02')) {
options = {
type: 'loop',
perPage: 1,
autoplay: true,
interval: 6000,
speed: 2000,
pagination: true,
pauseOnHover: false,
pauseOnFocus: false,
};
}
const instance = new Splide(splideEl, options);
instance.mount();
splideInstances.push(instance);
});
}
function loadMenuHTML(menuNumber) {
const html = mealHTMLMap[menuNumber];
if (!html) {
menuWrap.innerHTML = '料理情報が見つかりません。
';
return;
}
// フェードアウト → HTML差し替え → フェードイン
menuWrap.classList.add('fade-out');
setTimeout(() => {
menuWrap.innerHTML = html;
requestAnimationFrame(() => {
waitForImages(() => {
initMenuSplide();
menuWrap.classList.remove('fade-out');
});
});
}, 1000); // フェードアウト時間に合わせて調整
}
boxes.forEach(box => {
box.addEventListener('click', function () {
const menuNumber = this.dataset.meal_tab;
boxes.forEach(b => b.classList.remove('active'));
this.classList.add('active');
loadMenuHTML(menuNumber);
});
});
const defaultMenu = "1";
document.querySelector(`.meal-tab .text[data-meal_tab="${defaultMenu}"]`)?.classList.add('active');
loadMenuHTML(defaultMenu);
});
