{
"version": 3,
"sources": ["/cdn/shop/t/11/assets/cfg3d.js?cfgv=1780474191"],
"sourcesContent": ["// ======================================================\r\n// cfg3d.js (Shopify theme asset) - FULL\r\n// ------------------------------------------------------\r\n// \u2714 Steps: case / pcba / switch / keycap / option / summary\r\n// \u2714 Size toggle: 60% / 80% tag filtering (supports 60% and 60\uFF05)\r\n// \u2714 Option step: only products tagged \"\u30AA\u30D7\u30B7\u30E7\u30F3\"\r\n// \u2714 Per-step single selection (None supported)\r\n// \u2714 Total = sum of selected step prices (Shopify cents)\r\n// \u2714 Money format: JPY-safe\r\n// \u2714 three.js GLB loader (optional)\r\n// \u2714 Guide button + modal: step-specific label + content\r\n// \u2714 Guide hidden on option + summary\r\n// \u2714 Search filter UI per step (AND with size)\r\n// \u2714 Summary renders breakdown + subtotal\r\n// \u2714 Add selected variants to cart (skip None) via /cart/add.js\r\n// ======================================================\r\n\r\nconst THREE_CDN = 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';\r\nconst ORBIT_CDN = 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/controls/OrbitControls.js';\r\nconst GLTF_CDN = 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/GLTFLoader.js';\r\nconst DRACO_CDN = 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/DRACOLoader.js';\r\nconst RGBE_CDN = 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/RGBELoader.js';\r\n\r\n(async () => {\r\n const root = document.querySelector('[data-cfg3d]');\r\n if (!root) return;\r\n\r\n // --------------------------------------------------\r\n // Elements\r\n // --------------------------------------------------\r\n const stepBtns = [...root.querySelectorAll('.cfg3d__step[data-step]')];\r\n const panels = [...root.querySelectorAll('[data-panel]')];\r\n\r\n const rightTitleEl = root.querySelector('.cfg3d__title');\r\n\r\n const nextBtn = root.querySelector('[data-next]');\r\n const prevBtn = root.querySelector('[data-prev]');\r\n const totalEl = root.querySelector('[data-total]');\r\n const hiddenInputs = [...root.querySelectorAll('[data-selected-variant]')];\r\n const shareBtn = root.querySelector('[data-share-build]');\r\n const copyBtn = root.querySelector('[data-copy-build-url]');\r\n\r\n // Viewer\r\n const canvasHost = root.querySelector('[data-canvas-host]');\r\n const placeholder = root.querySelector('[data-placeholder]');\r\n const loadingEl = root.querySelector('[data-loading]');\r\n const viewerTitleEl = root.querySelector('[data-viewer-title]');\r\n const viewerSubEl = root.querySelector('[data-viewer-sub]');\r\n\r\n // Guide\r\n const guideBtn = root.querySelector('[data-open-guide], [data-guide-open]');\r\n const guideModal = root.querySelector('[data-guide-modal]');\r\n const guideCloseEls = [...root.querySelectorAll('[data-guide-close]')];\r\n const modalTitleEl = guideModal?.querySelector('.cfg3d-modal__title') || null;\r\n const modalBodyEl = guideModal?.querySelector('.cfg3d-modal__body') || null;\r\n\r\n // Filter UI\r\n const filterRoot = root.querySelector('[data-filter]');\r\nconst filterToggleBtns = [...root.querySelectorAll('[data-filter-toggle]')];\r\nconst filterPanelEl = root.querySelector('[data-filter-panel]');\r\n const filterColorEl = root.querySelector('[data-filter-color]');\r\n const filterVendorEl = root.querySelector('[data-filter-vendor]');\r\n const filterMaterialEl = root.querySelector('[data-filter-material]');\r\n const filterMinEl = root.querySelector('[data-filter-min]');\r\n const filterMaxEl = root.querySelector('[data-filter-max]');\r\n\r\n // Summary\r\n const summaryListEl = root.querySelector('[data-summary-list]');\r\n const summarySubtotalEl = root.querySelector('[data-summary-subtotal]');\r\n\r\n // --------------------------------------------------\r\n // Constants / State\r\n // --------------------------------------------------\r\n const NAV_STEPS = ['case', 'pcba', 'switch', 'keycap', 'option', 'summary'];\r\n const PRICE_STEPS = ['case', 'pcba', 'switch', 'keycap', 'option'];\r\n\r\n const ASSEMBLY_FEE_CENTS = 500000; // \u00A55,000\r\n const CUSTOM_KEYBOARD_VARIANT_ID = 54520547606601; // \u2190 \u5B9FID\u306B\u5909\u66F4\r\n\r\n const STEP_UI = {\r\n case: { title: '\u30AD\u30FC\u30DC\u30FC\u30C9\u30B1\u30FC\u30B9', guideLabel: '\u30B1\u30FC\u30B9\u306E\u9078\u3073\u65B9', modalTitle: '\u30B1\u30FC\u30B9\u306E\u9078\u3073\u65B9' },\r\n pcba: { title: 'PCBA', guideLabel: 'PCBA\u306E\u9078\u3073\u65B9', modalTitle: 'PCBA\u306E\u9078\u3073\u65B9' },\r\n switch: { title: '\u30AD\u30FC\u30B9\u30A4\u30C3\u30C1', guideLabel: '\u30B9\u30A4\u30C3\u30C1\u306E\u9078\u3073\u65B9', modalTitle: '\u30B9\u30A4\u30C3\u30C1\u306E\u9078\u3073\u65B9' },\r\n keycap: { title: '\u30AD\u30FC\u30AD\u30E3\u30C3\u30D7', guideLabel: '\u30AD\u30FC\u30AD\u30E3\u30C3\u30D7\u306E\u9078\u3073\u65B9', modalTitle: '\u30AD\u30FC\u30AD\u30E3\u30C3\u30D7\u306E\u9078\u3073\u65B9' },\r\n option: { title: '\u30AA\u30D7\u30B7\u30E7\u30F3', guideLabel: '', modalTitle: '' },\r\n summary: { title: '\u5408\u8A08', guideLabel: '', modalTitle: '' },\r\n };\r\n\r\n // \u30E2\u30FC\u30C0\u30EB\u672C\u6587\u5DEE\u3057\u66FF\u3048\uFF08\u5FC5\u8981\u306A\u3089\uFF09\r\n const GUIDE_HTML = {\r\n case: null,\r\n pcba: null,\r\n switch: null,\r\n keycap: null,\r\n option: null,\r\n summary: null,\r\n };\r\n\r\n // Tabs in modal (Corsair-like)\r\n document.addEventListener('click', (e) => {\r\n const tab = e.target.closest('[data-tab]');\r\n if (!tab) return;\r\n const wrap = tab.closest('[data-cfg3d-tabs]');\r\n if (!wrap) return;\r\n\r\n wrap.querySelectorAll('[data-tab]').forEach((b) => {\r\n b.classList.remove('is-active');\r\n b.setAttribute('aria-selected', 'false');\r\n });\r\n tab.classList.add('is-active');\r\n tab.setAttribute('aria-selected', 'true');\r\n\r\n wrap.querySelectorAll('.cfg3d-panel').forEach((p) => p.classList.remove('is-active'));\r\n const panel = wrap.querySelector(`#${CSS.escape(tab.dataset.target)}`);\r\n if (panel) panel.classList.add('is-active');\r\n });\r\n\r\n const state = {\r\n currentStep: 'case',\r\n size: '60', // '60' | '80'\r\n selections: { case: null, pcba: null, switch: null, keycap: null, option: null },\r\n filters: {\r\n case: { color:'', vendor:'', material:'', minYen:'', maxYen:'' },\r\n pcba: { color:'', vendor:'', material:'', minYen:'', maxYen:'' },\r\n switch: { color:'', vendor:'', material:'', minYen:'', maxYen:'' },\r\n keycap: { color:'', vendor:'', material:'', minYen:'', maxYen:'' },\r\n option: { color:'', vendor:'', material:'', minYen:'', maxYen:'' },\r\n },\r\n cachedCaseModalHtml: null,\r\n };\r\n\r\n // --------------------------------------------------\r\n // Money (JPY-safe)\r\n // --------------------------------------------------\r\n function formatMoneyJPYFromCents(cents) {\r\n const yen = Math.round((Number(cents) || 0) / 100);\r\n return `\u00A5${yen.toLocaleString('ja-JP')}`;\r\n }\r\n\r\n function calcSubtotalCents() {\r\n return PRICE_STEPS.reduce((acc, step) => {\r\n const s = state.selections[step];\r\n return acc + (s ? (Number(s.priceCents) || 0) : 0);\r\n }, ASSEMBLY_FEE_CENTS);\r\n }\r\n\r\n function updateTotal() {\r\n const sumCents = calcSubtotalCents();\r\n if (totalEl) totalEl.textContent = `+${formatMoneyJPYFromCents(sumCents)}`;\r\n }\r\n\r\n // --------------------------------------------------\r\n // Helpers\r\n // --------------------------------------------------\r\n function hasBuildParamsInUrl() {\r\n const params = new URLSearchParams(window.location.search);\r\n return ['c', 'p', 's', 'k', 'o'].some(key => params.has(key));\r\n}\r\n\r\n function restoreSelectionsFromUrl() {\r\n const params = new URLSearchParams(window.location.search);\r\n\r\n const keyMap = {\r\n case: 'c',\r\n pcba: 'p',\r\n switch: 's',\r\n keycap: 'k',\r\n option: 'o'\r\n };\r\n\r\n PRICE_STEPS.forEach(step => {\r\n const id = params.get(keyMap[step]);\r\n if (!id) return;\r\n\r\n const btn = optionButtons(step).find(b => b.dataset.variantId === id);\r\n if (btn) {\r\n selectOption(step, btn);\r\n }\r\n });\r\n}\r\n\r\n function stepPanelEl(step) {\r\n return root.querySelector(`[data-panel=\"${step}\"]`);\r\n }\r\n\r\n function optionButtons(step) {\r\n return [...root.querySelectorAll(`[data-option][data-step=\"${step}\"]`)];\r\n }\r\n\r\n function hiddenInput(step) {\r\n return hiddenInputs.find(i => i.dataset.selectedVariant === step) || null;\r\n }\r\n\r\n function isNone(btn) {\r\n return btn.dataset.none === 'true';\r\n }\r\n\r\n function priceCents(btn) {\r\n const n = Number(btn.dataset.price || 0);\r\n return Number.isFinite(n) ? n : 0;\r\n }\r\n\r\nfunction escapeHtml(str) {\r\n return String(str)\r\n .replace(/&/g, '&')\r\n .replace(//g, '>')\r\n .replace(/\"/g, '"')\r\n .replace(/'/g, ''');\r\n}\r\n\r\n// ============================\r\n// \uD83D\uDD3D \u5DE6\u30DF\u30CB\u30B5\u30DE\u30EA\u30FC\u7528\r\n// ============================\r\n\r\nfunction getMiniSummaryStepLabel(step) {\r\n const map = {\r\n case: '\u30AD\u30FC\u30DC\u30FC\u30C9\u30B1\u30FC\u30B9',\r\n pcba: 'PCBA',\r\n switch: '\u30AD\u30FC\u30B9\u30A4\u30C3\u30C1',\r\n keycap: '\u30AD\u30FC\u30AD\u30E3\u30C3\u30D7',\r\n option: '\u30AA\u30D7\u30B7\u30E7\u30F3'\r\n };\r\n return map[step] || step;\r\n}\r\n\r\nfunction getSelectedProductAndVariant(step) {\r\n const s = state.selections?.[step];\r\n if (!s || !s.variantId) return null;\r\n\r\n const productTitle = String(s.productTitle || '').trim();\r\n const variantTitle = String(s.title || '').trim();\r\n\r\n if (!productTitle) return null;\r\n if (!variantTitle || variantTitle.toLowerCase() === 'none') return null;\r\n\r\n return {\r\n step,\r\n stepLabel: getMiniSummaryStepLabel(step),\r\n productTitle,\r\n variantTitle\r\n };\r\n}\r\nconst buildMini = root.querySelector('[data-build-mini]');\r\n\r\nbuildMini?.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n buildMini.classList.toggle('is-open');\r\n});\r\n// ============================\r\n// Build summary outside tap close\r\n// ============================\r\n\r\ndocument.addEventListener('click', (e) => {\r\n const buildMini = document.querySelector('[data-build-mini]');\r\n if (!buildMini) return;\r\n\r\n const clickedInside = buildMini.contains(e.target);\r\n\r\n // \u5916\u30BF\u30C3\u30D7\u306A\u3089\u9589\u3058\u308B\r\n if (!clickedInside) {\r\n buildMini.classList.remove('is-open');\r\n }\r\n});\r\nfunction renderBuildMiniSummary() {\r\n const wrap = root.querySelector('[data-build-mini]');\r\n const body = root.querySelector('[data-build-mini-body]');\r\n if (!wrap || !body) return;\r\n\r\n const steps = ['case', 'pcba', 'switch', 'keycap', 'option'];\r\n const items = steps\r\n .map(getSelectedProductAndVariant)\r\n .filter(Boolean);\r\n\r\n if (!items.length) {\r\n wrap.hidden = true;\r\n body.innerHTML = '';\r\n return;\r\n }\r\n\r\n body.innerHTML = items.map(item => {\r\n const showVariant =\r\n item.variantTitle &&\r\n item.variantTitle !== 'Default Title' &&\r\n item.variantTitle !== item.productTitle;\r\n\r\n return `\r\n \r\n
${escapeHtml(item.stepLabel)}
\r\n
${escapeHtml(item.productTitle)}
\r\n ${showVariant ? `
${escapeHtml(item.variantTitle)}
` : ''}\r\n
\r\n
\r\n
\u7D44\u307F\u7ACB\u3066\u6599\u91D1
\r\n
\u30AB\u30B9\u30BF\u30E0\u30AD\u30FC\u30DC\u30FC\u30C9\u7D44\u307F\u7ACB\u3066
\r\n
\r\n
${formatMoneyJPYFromCents(ASSEMBLY_FEE_CENTS)}
\r\n
\u30D1\u30FC\u30C4\u306F\u307E\u3060\u9078\u629E\u3055\u308C\u3066\u3044\u307E\u305B\u3093\u3002
\r\n `;\r\n summarySubtotalEl.textContent = formatMoneyJPYFromCents(calcSubtotalCents());\r\n return;\r\n }\r\n\r\n summaryListEl.innerHTML = assemblyRow + items.map(({ step, s }) => {\r\n const label = STEP_UI[step]?.title || step;\r\n const price = formatMoneyJPYFromCents(Number(s.priceCents) || 0);\r\n\r\n const productTitle = escapeHtml(s.productTitle || '');\r\n const variantTitle = escapeHtml(s.title || '\u2014');\r\n\r\n const showVariant =\r\n s.title &&\r\n s.title !== 'Default Title' &&\r\n s.title !== s.productTitle;\r\n\r\n return `\r\n \r\n
\r\n
${label}
\r\n
${productTitle}
\r\n ${showVariant ? `
${variantTitle}
` : ''}\r\n
\r\n
${price}
\r\n