(() => { const GALLERY_ROOT_SELECTOR = '.gallery-grid'; const POST_DETAIL_ROOT_SELECTOR = '.layout-shell.post .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 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 value = parseFloat(String(raw ?? '').trim()); return Number.isFinite(value) && value >= 0 ? value : fallback; } function readRootStyles() { return window.getComputedStyle(document.documentElement); } function getRootWidth(root) { return Math.max(root.clientWidth || 0, Math.ceil(root.getBoundingClientRect().width)); } 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 = Math.max(1, parseInt(String(rootStyles.getPropertyValue('--starter-global-gallery-columns') || '').trim(), 10) || 1); return { itemWidth, gap, maxColumns }; } function applyGalleryLayout(root) { root.style.width = ''; root.style.maxWidth = ''; const availableWidth = getRootWidth(root); if (!(availableWidth > 0)) return; const { itemWidth, gap, maxColumns } = readGalleryMetrics(root); if (!(itemWidth > 0)) { root.style.width = '100%'; root.style.maxWidth = '100%'; root.style.columnCount = '1'; root.style.columnWidth = 'auto'; root.dataset.galleryColumns = '1'; return; } const columnCount = Math.max(1, Math.min(maxColumns, Math.floor((availableWidth + gap) / (itemWidth + gap)))); const fittedWidth = Math.min(availableWidth, columnCount * itemWidth + Math.max(0, columnCount - 1) * gap); const fittedWidthPx = `${fittedWidth}px`; if (root.style.width !== fittedWidthPx) { root.style.width = fittedWidthPx; root.style.maxWidth = fittedWidthPx; } root.style.columnCount = String(columnCount); root.style.columnWidth = `${Math.min(itemWidth, availableWidth)}px`; root.dataset.galleryColumns = String(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, } = 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; const finish = () => { if (finished) return; finished = true; 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); } 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; const schedule = () => { if (frame) window.cancelAnimationFrame(frame); frame = window.requestAnimationFrame(() => { frame = 0; applyGalleryLayout(root); }); }; const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => schedule()) : null; resizeObserver?.observe(root); window.addEventListener('resize', schedule, { passive: true }); schedule(); watchMediaElements(root, { selector: 'img', loadingClass: 'is-gallery-loading', readyClass: 'is-gallery-ready', readyAttr: 'galleryReady', }); const cleanup = () => { 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 = ''; }; root.addEventListener?.('remove', cleanup, { once: true }); } 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_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 suf.length && h.slice(-suf.length) === suf) return h.slice(0, h.length - suf.length); } return ""; } function build(){ modal = document.createElement("div"); modal.className = "tc-search-modal"; modal.setAttribute("role","dialog"); modal.setAttribute("aria-modal","true"); modal.setAttribute("aria-label","Search"); modal.hidden = true; modal.innerHTML = '

' + '

' + '' + '' + '

' + '

'; document.body.appendChild(modal); input = modal.querySelector(".tc-search-input"); resultsEl = modal.querySelector(".tc-search-results"); statusEl = modal.querySelector(".tc-search-meta"); modal.addEventListener("click", function(e){ if (e.target.closest("[data-tc-search-close]")) close(); }); input.addEventListener("input", onInput); } function open(){ if (!modal) build(); modal.hidden = false; document.documentElement.classList.add("tc-search-open"); document.body.classList.add("tc-search-open"); setTimeout(function(){ try { input.focus(); } catch(e){} }, 30); } function close(){ if (!modal) return; modal.hidden = true; document.documentElement.classList.remove("tc-search-open"); document.body.classList.remove("tc-search-open"); } function render(list, q){ if (!list || !list.length){ resultsEl.innerHTML = ""; statusEl.textContent = q ? ("No results for \u201c" + q + "\u201d") : ""; return; } statusEl.textContent = list.length + " result" + (list.length>1?"s":"") + " for \u201c" + q + "\u201d"; var html = ""; for (var i=0;i' + (r.type ? '' + esc(r.type) + '' : "") + '' + esc(r.title || "Untitled") + '' + (r.excerpt ? '' + esc(r.excerpt) + '' : "") + ''; } resultsEl.innerHTML = html; } function run(q){ try { if (controller) controller.abort(); } catch(e){} controller = (typeof AbortController !== "undefined") ? new AbortController() : null; statusEl.textContent = "Searching\u2026"; var sp = siteParam(); var endpoint = "/api/site-search?q=" + encodeURIComponent(q) + (sp ? "&site=" + encodeURIComponent(sp) : ""); fetch(endpoint, { signal: controller ? controller.signal : undefined, headers: { "Accept": "application/json" } }) .then(function(res){ return res.ok ? res.json() : { results: [] }; }) .then(function(data){ render((data && data.results) || [], q); }) .catch(function(err){ if (err && err.name === "AbortError") return; statusEl.textContent = "Search is unavailable right now."; }); } function onInput(){ var q = input.value.trim(); clearTimeout(timer); if (q.length < 1){ resultsEl.innerHTML = ""; statusEl.textContent = ""; lastQ = null; return; } if (q === lastQ) return; timer = setTimeout(function(){ lastQ = q; run(q); }, 200); } function isTrigger(a){ if (!a || a.getAttribute("target") === "_blank") return false; if (a.classList && a.classList.contains("site-search-link")) return true; var href = a.getAttribute("href") || ""; return href === "/search" || /\/search$/.test(href.split("?")[0]); } /* Capture phase + stopImmediatePropagation so we open the modal before the */ /* SvelteKit client router can intercept the link and SPA-navigate to /search. */ document.addEventListener("click", function(e){ if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; var a = e.target && e.target.closest && e.target.closest("a"); if (!a || !isTrigger(a)) return; e.preventDefault(); e.stopPropagation(); if (e.stopImmediatePropagation) e.stopImmediatePropagation(); open(); }, true); document.addEventListener("keydown", function(e){ if (modal && !modal.hidden && e.key === "Escape") close(); }); window.__tcOpenSearch = open; })(); /* TC_SALVIA_SEARCH_LIGHTBOX_END */ /* tc-like-plural-v1 removed — owner: Salvia keeps the heart icon */ /* tc-filedrop-v1 — form file inputs become drag & drop zones; the native input stays in the form (visually hidden) so submit still carries the file. */ (function(){ function enhance(){ document.querySelectorAll('.tc-form input[type="file"]:not([data-tc-drop])').forEach(function(input){ input.setAttribute('data-tc-drop','1'); var imgOnly=(input.accept||'').indexOf('image')>-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 + doc title) + breadcrumb injection */ (function(){ function fix(){ var shell=document.querySelector('.layout-shell.shopping-cart'); if(!shell)return; var h1=shell.querySelector('h1.page-title, h1'); 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'); 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-salvia-cart-v1_END */ /* 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);})();

A field guide to color

Reading a palette like a sentence

The working four

Behind the linen series

Color, explained without the jargon

Embeds stress test

Comments