/* * Taiyo Sushi UI Theme * Progressive enhancement for the generated storefront markup. * No framework dependency and no interference with the dashboard controls. */ (() => { "use strict"; const NS = "taiyoSushiTheme"; const SELECTORS = { hero: '[id^="restaurant_hero-"]', contact: '[id^="contact_links-"]', menu: '[id^="restaurant_menu-"]', newsletter: '[id^="whatsapp_newsletter-"]', category: '[id^="restaurant-menu-"]', tabs: '[id^="menu-tabs-container-"]' }; const state = { initialized: false, categoryObserver: null, revealObserver: null, mutationTimer: 0 }; function getStorefront() { const hero = document.querySelector(SELECTORS.hero); if (!hero) return null; return { root: hero.closest(".studio-generated") || hero.parentElement, hero, contact: document.querySelector(SELECTORS.contact), menu: document.querySelector(SELECTORS.menu), newsletter: document.querySelector(SELECTORS.newsletter) }; } function safeScroll(target, extraOffset = 16) { if (!target) return; const header = document.querySelector(".taiyo-site-header"); const headerHeight = header ? header.getBoundingClientRect().height : 0; const top = target.getBoundingClientRect().top + window.scrollY - headerHeight - extraOffset; window.scrollTo({ top: Math.max(0, top), behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" }); } function createHeader(storefront) { const heroSection = storefront.hero.querySelector("section"); if (!heroSection || heroSection.querySelector(".taiyo-site-header")) return; const header = document.createElement("header"); header.className = "taiyo-site-header"; header.setAttribute("aria-label", "التنقل الرئيسي"); header.innerHTML = ` TAIYO SUSHI CLUB Premium Japanese Food

حجز طاولة

`; heroSection.prepend(header); storefront.hero.id = storefront.hero.id || "taiyo-home"; storefront.hero.dataset.taiyoAnchor = "home"; storefront.hero.setAttribute("data-taiyo-home", "true"); storefront.hero.querySelector("section")?.setAttribute("id", "taiyo-home"); storefront.contact?.querySelector("section")?.setAttribute("id", "taiyo-contact"); storefront.newsletter?.querySelector("section")?.setAttribute("id", "taiyo-newsletter"); const toggle = header.querySelector(".taiyo-mobile-toggle"); const nav = header.querySelector(".taiyo-main-nav"); toggle?.addEventListener("click", () => { const nextOpen = toggle.getAttribute("aria-expanded") !== "true"; toggle.setAttribute("aria-expanded", String(nextOpen)); toggle.setAttribute("aria-label", nextOpen ? "إغلاق القائمة" : "فتح القائمة"); nav?.classList.toggle("is-open", nextOpen); }); header.querySelectorAll('a[href^="#"]').forEach((link) => { link.addEventListener("click", (event) => { const hash = link.getAttribute("href"); const target = hash ? document.querySelector(hash) : null; if (!target) return; event.preventDefault(); nav?.classList.remove("is-open"); toggle?.setAttribute("aria-expanded", "false"); safeScroll(target, 12); }); }); const setHeaderState = () => { header.classList.toggle("is-scrolled", window.scrollY > 28); }; setHeaderState(); window.addEventListener("scroll", setHeaderState, { passive: true }); } function setupMenuTabs(menu) { if (!menu || menu.dataset[NS + "Tabs"] === "ready") return; const tabsContainer = menu.querySelector(SELECTORS.tabs); const categorySections = Array.from(menu.querySelectorAll(SELECTORS.category)); if (!tabsContainer || categorySections.length === 0) return; const buttons = Array.from(tabsContainer.querySelectorAll("button")); if (buttons.length === 0) return; menu.dataset[NS + "Tabs"] = "ready"; const setActiveButton = (activeIndex) => { buttons.forEach((button, index) => { const isActive = index === activeIndex; button.dataset.taiyoActive = String(isActive); button.setAttribute("aria-pressed", String(isActive)); }); }; buttons.forEach((button, index) => { button.type = "button"; button.setAttribute("aria-controls", index === 0 ? "menu" : categorySections[index - 1]?.id || "menu"); button.addEventListener("click", (event) => { event.preventDefault(); const target = index === 0 ? menu.querySelector("#menu") || menu : categorySections[index - 1]; setActiveButton(index); safeScroll(target, 22); }); }); setActiveButton(0); state.categoryObserver?.disconnect(); state.categoryObserver = new IntersectionObserver( (entries) => { const visible = entries .filter((entry) => entry.isIntersecting) .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]; if (!visible) return; const categoryIndex = categorySections.indexOf(visible.target); if (categoryIndex >= 0) setActiveButton(categoryIndex + 1); }, { rootMargin: "-18% 0px -62% 0px", threshold: [0.08, 0.2, 0.45] } ); categorySections.forEach((section) => state.categoryObserver.observe(section)); } function setupViewToggle(menu) { if (!menu || menu.dataset[NS + "View"] === "ready") return; const controls = menu.querySelector(".sticky > div:last-child"); const buttons = controls ? Array.from(controls.querySelectorAll("button")) : []; if (buttons.length < 2) return; menu.dataset[NS + "View"] = "ready"; const [gridButton, listButton] = buttons; gridButton.type = "button"; listButton.type = "button"; gridButton.setAttribute("aria-label", "عرض شبكي"); listButton.setAttribute("aria-label", "عرض قائمة"); gridButton.title = "عرض شبكي"; listButton.title = "عرض قائمة"; const applyMode = (mode) => { const isList = mode === "list"; menu.classList.toggle("taiyo-list-view", isList); gridButton.setAttribute("aria-pressed", String(!isList)); listButton.setAttribute("aria-pressed", String(isList)); try { localStorage.setItem("taiyo-menu-view", mode); } catch (_) { // Storage may be disabled; the UI still works for this page view. } }; gridButton.addEventListener("click", () => applyMode("grid")); listButton.addEventListener("click", () => applyMode("list")); let storedMode = "grid"; try { storedMode = localStorage.getItem("taiyo-menu-view") || "grid"; } catch (_) { storedMode = "grid"; } applyMode(storedMode === "list" ? "list" : "grid"); } function setupReveal(storefront) { const targets = [ storefront.contact, storefront.menu?.querySelector(".text-center.mb-12"), ...Array.from(storefront.menu?.querySelectorAll(SELECTORS.category) || []), storefront.newsletter?.querySelector("section > div") ].filter(Boolean); if (targets.length === 0) return; // If motion or IntersectionObserver is unavailable, show everything immediately. if (!("IntersectionObserver" in window) || window.matchMedia("(prefers-reduced-motion: reduce)").matches) { targets.forEach((target) => { target.dataset[NS + "Reveal"] = "ready"; target.classList.add("is-visible"); }); return; } // Create the observer ONCE and keep it alive. Re-running initialize() on every // DOM mutation must never disconnect it, otherwise already-registered targets // stay stuck at opacity:0 and the menu items disappear. if (!state.revealObserver) { state.revealObserver = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (!entry.isIntersecting) return; entry.target.classList.add("is-visible"); observer.unobserve(entry.target); }); }, { rootMargin: "0px 0px -9% 0px", threshold: 0.08 } ); } targets.forEach((target, index) => { if (target.dataset[NS + "Reveal"] === "ready") return; target.dataset[NS + "Reveal"] = "ready"; target.classList.add("taiyo-reveal"); target.style.transitionDelay = `${Math.min(index * 45, 180)}ms`; state.revealObserver.observe(target); // Safety net: guarantee the content is never permanently hidden, even if the // observer never fires inside an embedded / builder scroll container. window.setTimeout(() => { if (!target.classList.contains("is-visible")) { target.classList.add("is-visible"); state.revealObserver?.unobserve(target); } }, 1600); }); } function setupNewsletter(newsletter) { const form = newsletter?.querySelector("form"); const input = form?.querySelector('input[type="text"], input[type="tel"]'); if (!form || !input || form.dataset[NS] === "ready") return; form.dataset[NS] = "ready"; input.setAttribute("inputmode", "tel"); input.setAttribute("autocomplete", "tel"); input.setAttribute("aria-label", "رقم واتساب"); const normalize = () => { const cleaned = input.value.replace(/[^0-9+]/g, "").replace(/(?!^)[+]/g, ""); if (input.value !== cleaned) input.value = cleaned; return cleaned; }; const isValid = (value) => /^\+?[0-9]{8,15}$/.test(value); input.addEventListener("input", () => { const value = normalize(); input.classList.toggle("taiyo-invalid", value.length > 0 && !isValid(value)); input.removeAttribute("aria-invalid"); }); form.addEventListener("submit", (event) => { const value = normalize(); if (isValid(value)) { input.classList.remove("taiyo-invalid"); input.removeAttribute("aria-invalid"); return; } event.preventDefault(); input.classList.add("taiyo-invalid"); input.setAttribute("aria-invalid", "true"); input.focus({ preventScroll: true }); safeScroll(newsletter, 26); }); } function setupRipples(root) { if (!root) return; root.querySelectorAll("button, .taiyo-reserve-button").forEach((element) => { if (element.dataset[NS + "Ripple"] === "ready") return; element.dataset[NS + "Ripple"] = "ready"; element.classList.add("taiyo-ripple-host"); element.addEventListener("pointerdown", (event) => { if (event.pointerType === "mouse" && event.button !== 0) return; const rect = element.getBoundingClientRect(); const ripple = document.createElement("span"); ripple.className = "taiyo-ripple"; ripple.style.left = `${event.clientX - rect.left}px`; ripple.style.top = `${event.clientY - rect.top}px`; element.appendChild(ripple); ripple.addEventListener("animationend", () => ripple.remove(), { once: true }); }); }); } function setupImages(root) { if (!root) return; root.querySelectorAll("img").forEach((image) => { if (image.dataset[NS + "Image"] === "ready") return; image.dataset[NS + "Image"] = "ready"; if (image.complete) { image.classList.add("taiyo-image-ready"); return; } image.classList.add("taiyo-image-loading"); image.addEventListener( "load", () => { image.classList.remove("taiyo-image-loading"); image.classList.add("taiyo-image-ready"); }, { once: true } ); image.addEventListener( "error", () => image.classList.remove("taiyo-image-loading"), { once: true } ); }); } function setupSectionNavigation(storefront) { const navLinks = Array.from(document.querySelectorAll(".taiyo-main-nav [data-taiyo-section]")); if (navLinks.length === 0 || !("IntersectionObserver" in window)) return; const sections = [ { name: "home", element: storefront.hero.querySelector("section") }, { name: "menu", element: storefront.menu?.querySelector("#menu") || storefront.menu }, { name: "contact", element: storefront.contact?.querySelector("section") || storefront.contact }, { name: "newsletter", element: storefront.newsletter?.querySelector("section") || storefront.newsletter } ].filter((entry) => entry.element); const observer = new IntersectionObserver( (entries) => { const visible = entries .filter((entry) => entry.isIntersecting) .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]; if (!visible) return; const section = sections.find((entry) => entry.element === visible.target); navLinks.forEach((link) => { link.classList.toggle("is-active", link.dataset.taiyoSection === section?.name); }); }, { rootMargin: "-22% 0px -58% 0px", threshold: [0.08, 0.2, 0.5] } ); sections.forEach((entry) => observer.observe(entry.element)); } function initialize() { const storefront = getStorefront(); if (!storefront || !storefront.root) return false; document.documentElement.classList.add("taiyo-sushi-ui"); storefront.root.classList.add("taiyo-storefront-root"); createHeader(storefront); setupMenuTabs(storefront.menu); setupViewToggle(storefront.menu); setupReveal(storefront); setupNewsletter(storefront.newsletter); setupRipples(storefront.root); setupImages(storefront.root); if (!state.initialized) { setupSectionNavigation(storefront); state.initialized = true; } return true; } function start() { initialize(); const observer = new MutationObserver(() => { window.clearTimeout(state.mutationTimer); state.mutationTimer = window.setTimeout(initialize, 120); }); observer.observe(document.body, { childList: true, subtree: true }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", start, { once: true }); } else { start(); } })(); /* * Taiyo Sushi — photo knockout patch * Add this function to taiyo-sushi-theme.js and call it from initialize(). * It hands each menu photo's own URL to CSS so the stylesheet can use the * image as a luminance mask (black backdrop -> transparent -> red shows through). */ function setupPhotoKnockout(root) { if (!root) return; const cells = root.querySelectorAll( '[id^="restaurant-menu-"] > div.grid > div > div:first-child' ); cells.forEach((cell) => { if (cell.dataset.taiyoKnockout === "ready") return; const image = cell.querySelector("img"); if (!image) return; const apply = () => { const source = image.currentSrc || image.getAttribute("src"); if (!source) return; // Wrap in quotes and escape any stray quote so odd filenames can't // break out of the url() token. const safe = source.replace(/"/g, "%22"); cell.style.setProperty("--taiyo-src", `url("${safe}")`); cell.classList.add("taiyo-knockout-ready"); cell.dataset.taiyoKnockout = "ready"; }; if (image.complete && image.naturalWidth > 0) { apply(); } else { image.addEventListener("load", apply, { once: true }); } }); }

المتجر غير متاح حاليًا

This store is currently unavailable