// Laho Global Work — Shared Nav & Footer Component // Session 42:接 AIMS dataTree(動態 nav / footer / brand / LINE 浮動鈕) (async function() { // 從 URL pathname 解 biz_id(優先,因 R2 路徑) const _bizFromUrl = (() => { const m = (typeof location !== 'undefined' ? location.pathname : '').match(/\/business\/(\d+)\/site\//); return m ? m[1] : ''; })(); const aimsBizId = _bizFromUrl || (document.querySelector('meta[name="aims-business-id"]') || {}).content || ''; const aimsBackend = ((document.querySelector('meta[name="aims-backend-url"]') || {}).content || '').replace(/\/$/, ''); // 預設 nav / footer(沒 dataTree fallback) let nav = { items: [ { label: '關於我們', href: 'about.html' }, { label: '最新消息', href: 'news.html' }, { label: '服務項目', href: 'services.html', children: [ { label: '外籍家庭幫傭', href: 'service-helper.html' }, { label: '外籍看護工', href: 'service-caregiver.html' }, { label: '產業外籍勞工', href: 'service-industry.html' }, { label: '申辦文件代辦', href: 'service-document.html' }, { label: '轉換仲介服務', href: 'service-transfer.html' }, { label: '在台管理與諮詢', href: 'service-management.html' } ]}, { label: '勞雇須知', href: 'qa.html' }, { label: '文件下載', href: 'downloads.html' }, { label: '專欄', href: 'blog.html' }, { label: '問答 FAQ', href: 'faq.html' } ], cta_text: '聯絡我們', cta_href: 'contact.html' }; let footer = { brand_desc: '樂荷人力仲介致力於提供合法、透明、溫暖的人力媒合服務,守護每個家庭與企業的人力需求。', phone: '0800-000-000', phone_href: 'tel:0800000000', col1_title: '服務項目', col1_links: [ { label: '外籍家庭幫傭', href: 'service-helper.html' }, { label: '外籍看護工', href: 'service-caregiver.html' }, { label: '產業外籍勞工', href: 'services.html' }, { label: '轉換仲介', href: 'services.html' } ], col2_title: '資訊中心', col2_links: [ { label: '最新消息', href: 'news.html' }, { label: '勞雇須知', href: 'qa.html' }, { label: '文件下載', href: 'downloads.html' }, { label: '問答專區', href: 'qa.html' }, { label: 'FAQ', href: 'faq.html' } ], col3_title: '關於樂荷', col3_links: [ { label: '公司介紹', href: 'about.html' }, { label: '專欄文章', href: 'blog.html' }, { label: '聯絡我們', href: 'contact.html' }, { label: '隱私政策', href: 'privacy.html' } ], copyright: '© 2024 樂荷人力仲介有限公司 All rights reserved.', license: '勞動部仲介許可證字號:(外)字第 A12345 號' }; let brand = { logo_url: 'assets/logo.png', logo_zh: '樂荷人力仲介', logo_en: 'LAHO GLOBAL WORK' }; let lineFloat = { enabled: true, label_text: '免費諮詢' }; let socialLinks = { facebook_url: '#', line_url: '#', instagram_url: '#' }; // AIMS dataTree fetch(主題指派客戶後個人化) if (aimsBizId && aimsBackend) { try { const r = await fetch(`${aimsBackend}/businesses/${aimsBizId}/site-content`, { cache: 'no-store' }); if (r.ok) { const live = await r.json(); const liveGlobal = (live && live.data && live.data._global) || {}; if (liveGlobal.nav) nav = { ...nav, ...liveGlobal.nav }; if (liveGlobal.footer) footer = { ...footer, ...liveGlobal.footer }; if (liveGlobal.brand) brand = { ...brand, ...liveGlobal.brand }; if (liveGlobal.line_floating) lineFloat = { ...lineFloat, ...liveGlobal.line_floating }; if (liveGlobal.social) socialLinks = { ...socialLinks, ...liveGlobal.social }; } // brand.logo_url 沒填 → fallback fetch profile.logo_url if (!brand.logo_url || brand.logo_url === 'assets/logo.png') { try { const pr = await fetch(`${aimsBackend}/businesses/${aimsBizId}/profile`, { cache: 'no-store' }); if (pr.ok) { const profile = await pr.json(); if (profile && profile.logo_url) { brand.logo_url = profile.logo_url; if (profile.business_name) brand.logo_zh = profile.business_name; } } } catch (_e) {} } } catch (e) { console.warn('[laho-chrome] dataTree fetch 失敗,使用預設', e); } } const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); // ── NAV ── const renderNavItem = (it) => { const isCta = it.href === nav.cta_href; const children = Array.isArray(it.children) && it.children.length ? it.children : null; if (children) { // dropdown 模式 return `
  • ${esc(it.label)} ▼
    • `; } return `
  • ${esc(it.label)}
    • `; }; const renderMNavItem = (it) => { const children = Array.isArray(it.children) && it.children.length ? it.children : null; let html = `${esc(it.label)}`; if (children) { html += children.map(c => `└ ${esc(c.label)}`).join(''); } return html; }; const renderCtaBtn = () => nav.cta_text ? `${esc(nav.cta_text)}` : ''; // ── 注入 dropdown CSS(在 head)── if (!document.getElementById('laho-nav-dropdown-css')) { const style = document.createElement('style'); style.id = 'laho-nav-dropdown-css'; style.textContent = ` .nav-with-dropdown { position:relative; } .nav-dropdown { position:absolute; top:100%; left:0; min-width:220px; background:#fff; border:1px solid #E5DDD0; border-radius:10px; box-shadow:0 8px 32px rgba(15,34,56,.12); list-style:none; padding:8px 0; margin:0; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .2s, visibility .2s; z-index:200; } .nav-with-dropdown:hover .nav-dropdown, .nav-with-dropdown:focus-within .nav-dropdown { opacity:1; visibility:visible; transform:translateY(0); } .nav-dropdown li { margin:0; } .nav-dropdown li a { display:block; padding:10px 18px; font-size:13.5px; color:#1A1A2E; text-decoration:none; transition:background .15s, color .15s; } .nav-dropdown li a:hover { background:#F3EDE3; color:#E05C2A; } `; document.head.appendChild(style); } const NAV_HTML = ` `; // ── FOOTER ── const renderFooterLink = (l) => `${esc(l.label)}`; const SOCIAL_HTML = `
    ${socialLinks.facebook_url ? `f` : ''} ${socialLinks.line_url ? `L` : ''} ${socialLinks.instagram_url ? `ig` : ''}
    `; const FOOTER_HTML = ` `; // ── LINE 浮動鈕 ── const LINE_FAB_HTML = lineFloat.enabled ? ` 💬 ${esc(lineFloat.label_text || '免費諮詢')} ` : ''; // 找到 #site-header / #site-footer 占位 → inject(若沒占位 fallback inject body 開頭/結尾) const headerSlot = document.getElementById('site-header'); if (headerSlot) { headerSlot.innerHTML = NAV_HTML; } else { document.body.insertAdjacentHTML('afterbegin', NAV_HTML); } const footerSlot = document.getElementById('site-footer'); if (footerSlot) { footerSlot.innerHTML = FOOTER_HTML; } else { document.body.insertAdjacentHTML('beforeend', FOOTER_HTML); } if (LINE_FAB_HTML) document.body.insertAdjacentHTML('beforeend', LINE_FAB_HTML); // Nav scroll effect const navEl = document.getElementById('site-nav'); if (navEl) { window.addEventListener('scroll', () => { navEl.classList.toggle('scrolled', window.scrollY > 10); }); } // Hamburger toggle const ham = document.getElementById('hamburger'); const mm = document.getElementById('mmenu'); if (ham && mm) { ham.addEventListener('click', () => mm.classList.toggle('open')); // 點 mmenu 內連結後關閉 mm.querySelectorAll('a').forEach(a => a.addEventListener('click', () => mm.classList.remove('open'))); } // Active nav link const currentPage = location.pathname.split('/').pop() || 'index.html'; document.querySelectorAll('#nav-links a, #mmenu a').forEach(a => { if (a.getAttribute('href') === currentPage) a.classList.add('active'); }); // 公開 brand 給其他 inline script 用(例如 hero 區想用 brand.primary_color) window.__lahoChrome = { nav, footer, brand, lineFloat, socialLinks }; })();