(() => { const GALLERY_ROOT_SELECTOR = '.gallery-grid'; const POST_FEED_ROOT_SELECTOR = '#post-feed-list, .post-feed-list'; const POST_DETAIL_ROOT_SELECTOR = '.layout-shell.post article.page-section'; const POST_CARD_SELECTOR = '.post-card'; const EVENT_CARD_SELECTOR = '.event-card'; const EVENT_COPY_SELECTOR = '.event-copy'; const MOBILE_BREAKPOINT = 650; const MEDIA_READY_TIMEOUT = 2500; const POST_DETAIL_MEDIA_SELECTOR = [ '.post-media-grid img', '.post-media-grid video', '.post-detail-product img', '.post-product-thumbs img', '.post-gated-image-wrap img', '.post-gated-image-wrap video', '.post-body img', '.post-body video', ].join(', '); function parsePx(raw, fallback) { const text = String(raw ?? '').trim(); if (!text || text.includes('%')) return fallback; const value = parseFloat(text); return Number.isFinite(value) && value >= 0 ? value : fallback; } function parseCount(raw, fallback) { const value = parseInt(String(raw ?? '').trim(), 10); return Number.isFinite(value) && value > 0 ? value : fallback; } function readRootStyles() { return window.getComputedStyle(document.documentElement); } function getAvailableWidth(root, options = {}) { const source = root.parentElement || root; const rectWidth = Math.ceil(source.getBoundingClientRect().width); const clientWidth = source.clientWidth || 0; const rawWidth = Math.max(clientWidth, rectWidth); const offset = options.subtractMenuOffset ? parsePx(readRootStyles().getPropertyValue('--starter-window-menu-offset'), 0) : 0; return Math.max(0, rawWidth - offset); } function setStyle(el, property, value) { if (el.style.getPropertyValue(property) !== value) { el.style.setProperty(property, value); } } function readGalleryMetrics(root) { const rootStyles = readRootStyles(); const rootStylesForGap = window.getComputedStyle(root); const itemWidth = parsePx(rootStyles.getPropertyValue('--starter-global-gallery-width'), 1120); const gap = parsePx( rootStyles.getPropertyValue('--starter-global-gallery-gap') || rootStylesForGap.columnGap || rootStylesForGap.gap, 16, ); const maxColumns = parseCount(rootStyles.getPropertyValue('--starter-global-gallery-columns'), 1); return { itemWidth, gap, maxColumns }; } function readPostFeedMetrics(root) { const rootStyles = readRootStyles(); const rootStylesForGap = window.getComputedStyle(root); const itemWidth = parsePx(rootStyles.getPropertyValue('--starter-global-post-width'), 0); const gap = parsePx( rootStyles.getPropertyValue('--starter-global-post-feed-gap') || rootStylesForGap.columnGap || rootStylesForGap.gap, 16, ); const maxColumns = parseCount(rootStyles.getPropertyValue('--starter-global-post-feed-columns'), 1); return { itemWidth, gap, maxColumns }; } function resolveFixedColumns(availableWidth, itemWidth, gap, maxColumns) { if (!(availableWidth > 0)) return null; if (!(itemWidth > 0) || availableWidth <= MOBILE_BREAKPOINT || itemWidth > availableWidth) { return { columnCount: 1, rootWidth: '100%', itemWidth: '100%', columnWidth: 'auto', }; } const columnCount = Math.max(1, Math.min(maxColumns, Math.floor((availableWidth + gap) / (itemWidth + gap)))); const fittedWidth = columnCount * itemWidth + Math.max(0, columnCount - 1) * gap; const fittedWidthPx = `${Math.min(fittedWidth, availableWidth)}px`; return { columnCount, rootWidth: fittedWidthPx, itemWidth: `${itemWidth}px`, columnWidth: `${itemWidth}px`, }; } function applyGalleryLayout(root) { const availableWidth = getAvailableWidth(root, { subtractMenuOffset: true }); const { itemWidth, gap, maxColumns } = readGalleryMetrics(root); const layout = resolveFixedColumns(availableWidth, itemWidth, gap, maxColumns); if (!layout) return; setStyle(root, 'width', layout.rootWidth); setStyle(root, 'max-width', layout.rootWidth); setStyle(root, 'column-count', String(layout.columnCount)); setStyle(root, 'column-width', layout.columnWidth); root.dataset.galleryColumns = String(layout.columnCount); } function applyPostFeedLayout(root) { const availableWidth = getAvailableWidth(root); const { itemWidth, gap, maxColumns } = readPostFeedMetrics(root); const layout = resolveFixedColumns(availableWidth, itemWidth, gap, maxColumns); if (!layout) return; if (maxColumns >= 2 && availableWidth > MOBILE_BREAKPOINT) { var __tcF = Math.floor((availableWidth - (maxColumns - 1) * gap) / maxColumns); layout.columnCount = maxColumns; layout.rootWidth = '100%'; layout.itemWidth = __tcF + 'px'; layout.columnWidth = __tcF + 'px'; } /* tc-fill-feed-v2 */ setStyle(root, 'width', layout.rootWidth); setStyle(root, 'max-width', layout.rootWidth); setStyle(root, '--starter-post-feed-item-width', layout.itemWidth); root.dataset.postFeedColumns = String(layout.columnCount); } function setLoadingState(el, isLoading, loadingClass, readyClass) { if (!(el instanceof HTMLElement)) return; el.classList.toggle(loadingClass, isLoading); el.classList.toggle(readyClass, !isLoading); el.setAttribute('aria-busy', String(isLoading)); } function markReady(el, loadingClass, readyClass, readyAttr) { if (!(el instanceof HTMLElement)) return; setLoadingState(el, false, loadingClass, readyClass); if (readyAttr) el.dataset[readyAttr] = '1'; } function watchMediaElements(container, options) { if (!(container instanceof HTMLElement)) return; const { selector, loadingClass, readyClass, readyAttr, revealWhenReady = true, readyTimeoutMs = MEDIA_READY_TIMEOUT, } = options; if (container.dataset.mediaWatchBound === '1') return; container.dataset.mediaWatchBound = '1'; const mediaElements = Array.from(container.querySelectorAll(selector)).filter((el) => el instanceof HTMLImageElement || el instanceof HTMLVideoElement); if (!mediaElements.length) { if (revealWhenReady) markReady(container, loadingClass, readyClass, readyAttr); return; } let pending = 0; let finished = false; let timeout = 0; const finish = () => { if (finished) return; finished = true; if (timeout) window.clearTimeout(timeout); if (revealWhenReady) markReady(container, loadingClass, readyClass, readyAttr); }; const checkDone = () => { if (pending <= 0) finish(); }; const attachImage = (img) => { if (img.complete) return; pending += 1; const onDone = () => { img.removeEventListener('load', onDone); img.removeEventListener('error', onDone); pending -= 1; checkDone(); }; img.addEventListener('load', onDone, { once: true }); img.addEventListener('error', onDone, { once: true }); }; const attachVideo = (video) => { if (video.readyState >= 2) return; pending += 1; const onDone = () => { video.removeEventListener('loadeddata', onDone); video.removeEventListener('canplay', onDone); video.removeEventListener('error', onDone); pending -= 1; checkDone(); }; video.addEventListener('loadeddata', onDone, { once: true }); video.addEventListener('canplay', onDone, { once: true }); video.addEventListener('error', onDone, { once: true }); }; for (const el of mediaElements) { if (el instanceof HTMLImageElement) { attachImage(el); } else if (el instanceof HTMLVideoElement) { attachVideo(el); } } if (pending === 0) { finish(); } else { setLoadingState(container, true, loadingClass, readyClass); timeout = window.setTimeout(finish, readyTimeoutMs); } } function injectEventFallbacks() { for (const card of Array.from(document.querySelectorAll(EVENT_CARD_SELECTOR))) { if (!(card instanceof HTMLElement)) continue; const copy = card.querySelector(EVENT_COPY_SELECTOR) || card; if (!(copy instanceof HTMLElement)) continue; const existingDesc = copy.querySelector('.event-card-desc'); if (existingDesc instanceof HTMLElement) { if (!existingDesc.textContent.trim()) { existingDesc.textContent = 'No description'; existingDesc.classList.add('event-card-desc--empty'); } continue; } if (copy.dataset.eventFallbackInjected === '1') continue; const desc = document.createElement('p'); desc.className = 'event-card-desc event-card-desc--empty'; desc.textContent = 'No description'; const meta = copy.querySelector('.event-card-meta'); const title = copy.querySelector('.event-card-title, .section-title'); if (meta instanceof HTMLElement) { meta.before(desc); } else if (title instanceof HTMLElement) { title.after(desc); } else { copy.appendChild(desc); } copy.dataset.eventFallbackInjected = '1'; } } function bindGallery(root) { if (root.dataset.galleryBound === '1') return; root.dataset.galleryBound = '1'; let frame = 0; let cleaned = false; let resizeObserver = null; const cleanup = () => { if (cleaned) return; cleaned = true; if (frame) window.cancelAnimationFrame(frame); resizeObserver?.disconnect(); window.removeEventListener('resize', schedule); delete root.dataset.galleryBound; delete root.dataset.galleryColumns; root.style.width = ''; root.style.maxWidth = ''; root.style.columnCount = ''; root.style.columnWidth = ''; }; const schedule = () => { if (!root.isConnected) { cleanup(); return; } if (frame) window.cancelAnimationFrame(frame); frame = window.requestAnimationFrame(() => { frame = 0; applyGalleryLayout(root); }); }; resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => schedule()) : null; resizeObserver?.observe(root.parentElement || root); window.addEventListener('resize', schedule, { passive: true }); schedule(); watchMediaElements(root, { selector: 'img', loadingClass: 'is-gallery-loading', readyClass: 'is-gallery-ready', readyAttr: 'galleryReady', }); } function bindPostFeed(root) { if (root.dataset.postFeedBound === '1') return; root.dataset.postFeedBound = '1'; let frame = 0; let cleaned = false; let resizeObserver = null; const cleanup = () => { if (cleaned) return; cleaned = true; if (frame) window.cancelAnimationFrame(frame); resizeObserver?.disconnect(); window.removeEventListener('resize', schedule); delete root.dataset.postFeedBound; delete root.dataset.postFeedColumns; root.style.width = ''; root.style.maxWidth = ''; root.style.removeProperty('--starter-post-feed-item-width'); }; const schedule = () => { if (!root.isConnected) { cleanup(); return; } if (frame) window.cancelAnimationFrame(frame); frame = window.requestAnimationFrame(() => { frame = 0; applyPostFeedLayout(root); }); }; resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => schedule()) : null; resizeObserver?.observe(root.parentElement || root); window.addEventListener('resize', schedule, { passive: true }); schedule(); } function bindPostDetail(root) { if (root.dataset.postDetailMediaBound === '1') return; root.dataset.postDetailMediaBound = '1'; watchMediaElements(root, { selector: POST_DETAIL_MEDIA_SELECTOR, loadingClass: 'is-media-loading', readyClass: 'is-media-ready', readyAttr: 'mediaReady', }); } function bindPostCard(card) { if (!(card instanceof HTMLElement)) return; if (card.dataset.mediaWatchBound === '1') return; watchMediaElements(card, { selector: 'img, video', loadingClass: 'is-media-loading', readyClass: 'is-media-ready', readyAttr: 'mediaReady', }); } function scan() { injectEventFallbacks(); for (const root of Array.from(document.querySelectorAll(GALLERY_ROOT_SELECTOR))) { if (root instanceof HTMLElement) bindGallery(root); } for (const root of Array.from(document.querySelectorAll(POST_FEED_ROOT_SELECTOR))) { if (root instanceof HTMLElement) bindPostFeed(root); } for (const root of Array.from(document.querySelectorAll(POST_DETAIL_ROOT_SELECTOR))) { if (root instanceof HTMLElement) bindPostDetail(root); } for (const card of Array.from(document.querySelectorAll(POST_CARD_SELECTOR))) { if (card instanceof HTMLElement) bindPostCard(card); } } function observeMutations() { if (window.__tcStarterThemeObserver) return; let frame = 0; const schedule = () => { if (frame) window.cancelAnimationFrame(frame); frame = window.requestAnimationFrame(() => { frame = 0; scan(); }); }; const observer = new MutationObserver(() => schedule()); observer.observe(document.documentElement, { childList: true, subtree: true }); window.__tcStarterThemeObserver = observer; } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { scan(); observeMutations(); }, { once: true }); } else { scan(); observeMutations(); } window.addEventListener('load', scan, { once: true }); })(); /* tc-pageinfo-accordion-v1 */ ;(function(){function tcAcc(){var boxes=document.querySelectorAll('.product-detail-pageinfo');for(var b=0;b-1; var zone=document.createElement('div');zone.className='tc-file-drop';zone.tabIndex=0;zone.setAttribute('role','button'); var hint=document.createElement('span');hint.className='tc-file-drop-hint'; var HINT=imgOnly?'Drag & drop an image, or click to browse':'Drag & drop a file, or click to browse'; hint.textContent=HINT; var nameEl=document.createElement('span');nameEl.className='tc-file-drop-name'; var clear=document.createElement('button');clear.type='button';clear.className='tc-file-drop-clear';clear.textContent='Remove'; zone.appendChild(hint);zone.appendChild(nameEl);zone.appendChild(clear); input.parentNode.insertBefore(zone,input); function sync(){var f=input.files&&input.files[0];zone.classList.toggle('has-file',!!f); nameEl.textContent=f?(f.name+(f.size?' ('+Math.max(1,Math.round(f.size/1024))+' KB)':'')):'';} zone.addEventListener('click',function(e){if(e.target===clear)return;input.click();}); zone.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();input.click();}}); clear.addEventListener('click',function(){input.value='';sync();}); ['dragenter','dragover'].forEach(function(t){zone.addEventListener(t,function(e){e.preventDefault();zone.classList.add('is-drag');});}); ['dragleave','drop'].forEach(function(t){zone.addEventListener(t,function(e){e.preventDefault();zone.classList.remove('is-drag');});}); zone.addEventListener('drop',function(e){ var files=e.dataTransfer&&e.dataTransfer.files;if(!files||!files.length)return; var picked=[]; for(var i=0;i "Cart" (h1 + document.title) + breadcrumb (every other page has one; the app cart component doesn't render it) */ (function(){ function fix(){ var shell=document.querySelector('.layout-shell.shopping-cart'); if(!shell)return; var h1=shell.querySelector('h1.page-title'); if(h1&&/shopping\s*cart/i.test(h1.textContent))h1.textContent='Cart'; if(/shopping\s*cart/i.test(document.title))document.title=document.title.replace(/Shopping\s*Cart/i,'Cart'); if(!shell.querySelector('.breadcrumb')){ var target=h1||shell.querySelector('.page-section, .layout-content'); if(target){ var nav=document.createElement('nav');nav.className='breadcrumb';nav.setAttribute('aria-label','Breadcrumb'); nav.innerHTML=''; (h1?h1.parentNode:target).insertBefore(nav,h1||target.firstChild); } } } if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',fix);}else{fix();} try{ var t=document.querySelector('head > title'); if(t){new MutationObserver(function(){if(/shopping\s*cart/i.test(document.title)&&document.querySelector('.layout-shell.shopping-cart'))document.title=document.title.replace(/Shopping\s*Cart/i,'Cart');}).observe(t,{childList:true,characterData:true,subtree:true});} }catch(e){} })(); /* tc-port-cart-v1_END */ /* tc-port-nav-v1 — mobile Menu toggle for the collapsed header. The button is CREATED here (not in header_template) because live chrome renders from the design snapshot — markup-only header edits don't reach existing pages. */ (function(){ function init(){ var header=document.querySelector('.site-header'); if(!header)return; var btn=document.querySelector('[data-tc-nav-toggle]'); if(!btn){ var brand=header.querySelector('.site-brand')||header; btn=document.createElement('button'); btn.type='button';btn.className='site-nav-toggle';btn.setAttribute('data-tc-nav-toggle',''); btn.setAttribute('aria-expanded','false');btn.textContent='Menu'; brand.appendChild(btn); } btn.addEventListener('click',function(){ var open=header.toggleAttribute('data-nav-open'); btn.setAttribute('aria-expanded',open?'true':'false'); btn.textContent=open?'Close':'Menu'; }); } if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',init);}else{init();} })(); /* tc-port-nav-v1_END */ /* tc-matte-hero-swap-v1 — thumbnails swap the detail hero ; scroll preserved. */ ;(function(){ if (window.__tcMatteHeroSwap) return; window.__tcMatteHeroSwap = 1; function bind(){ var cols = document.querySelectorAll('.post-detail-media'); for (var i = 0; i < cols.length; i++) (function(col){ if (col.getAttribute('data-tc-hero-bound')) return; var hero = col.querySelector('[data-matte-hero]'); var thumbs = [].slice.call(col.querySelectorAll('.post-detail-thumb')); if (!hero || !thumbs.length) return; col.setAttribute('data-tc-hero-bound', '1'); var active = 0; function show(idx){ active = (idx + thumbs.length) % thumbs.length; var t = thumbs[active]; var src = t.getAttribute('data-thumb-src'); if (!src) return; var beforeY = t.getBoundingClientRect().top; hero.removeAttribute('srcset'); hero.removeAttribute('sizes'); hero.setAttribute('src', src); var alt = t.getAttribute('data-thumb-alt'); if (alt != null) hero.setAttribute('alt', alt); thumbs.forEach(function(x){ x.classList.remove('is-active'); }); t.classList.add('is-active'); hero.addEventListener('load', function(){ var dy = t.getBoundingClientRect().top - beforeY; if (dy) window.scrollBy({ top: dy, left: 0, behavior: 'instant' }); }, { once: true }); } thumbs.forEach(function(t, idx){ t.addEventListener('click', function(){ show(idx); }); }); })(cols[i]); } if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bind, { once: true }); else bind(); window.addEventListener('themecloset:template-ready', bind); })(); /* tc-relvid-frame-v1 — related video thumbs: paint the first frame */ ;(function(){var f=function(){document.querySelectorAll('video.post-related-vid').forEach(function(v){var s=function(){try{v.currentTime=0.1;}catch(e){}};if(v.readyState>=1)s();else v.addEventListener('loadedmetadata',s,{once:true});});};if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',f,{once:true});else f();window.addEventListener('themecloset:template-ready',f);})();

2023 Mockups

2023 Mockups

2023 Mockups

Comments