Click something to edit

Choose text or artwork in the preview, or change the page style below.

'; visualSelected = null; document.getElementById('appearanceSelection').dataset.empty = 'true'; for (const node of parsed.querySelectorAll('script,iframe,object,embed,base,meta[http-equiv]')) node.remove(); for (const node of parsed.querySelectorAll('*')) { for (const attr of [...node.attributes]) if (attr.name.startsWith('on') || attr.name === 'autofocus' || attr.name === 'contenteditable') node.removeAttribute(attr.name); } const base = parsed.createElement('base'); base.href = location.origin + '/'; parsed.head.prepend(base); const style = parsed.createElement('style'); style.textContent = 'html{height:auto!important;overflow:hidden!important}body{height:auto!important;min-height:' + Math.max(400, innerHeight - 70) + 'px!important;overflow:visible!important}.dm-thread{max-height:none!important;height:auto!important;overflow:visible!important}[data-site-copy], [data-preview-content], .landing-card{cursor:pointer} [data-site-copy]:hover,[data-preview-content]:hover{outline:1px dashed var(--accent);outline-offset:3px} [data-preview-selected]{outline:2px solid var(--accent)!important;outline-offset:4px}'; parsed.head.append(style); for (const node of parsed.querySelectorAll('[data-owner-art],[data-owner-label]')) node.hidden = false; for (const link of parsed.querySelectorAll('[data-messages-link]')) link.href = '/inbox.html'; const gallery = parsed.getElementById('gallery'), blog = parsed.getElementById('blogPosts'); if (gallery) { gallery.replaceChildren(); const categories = selected === 'private-gallery' ? ['private'] : ['inspiration', 'commissions']; for (const category of categories) { const section = parsed.createElement('section'); section.dataset.category = category; if (category !== 'private') { const title = parsed.createElement('h2'); title.textContent = category === 'commissions' ? 'Commissions' : 'Creative'; section.append(title); } const grid = parsed.createElement('div'); grid.className = 'gallery'; for (const item of visualItems.filter(item => category === 'private' || (item.category === 'commissions' ? 'commissions' : 'inspiration') === category)) { const figure = parsed.createElement('figure'); figure.className = 'piece'; figure.dataset.previewContent = item.id; const img = parsed.createElement('img'); img.src = '/' + encodeURI(item.file || ''); img.alt = item.title; const title = parsed.createElement('h3'); title.textContent = item.title; title.dataset.previewRole = 'title'; title.dataset.layoutKey = 'art:' + item.id + ':title'; figure.append(img, title); grid.append(figure); } if (!grid.children.length) { const empty = parsed.createElement('p'); empty.className = 'empty'; empty.textContent = 'No pieces here yet.'; grid.append(empty); } section.append(grid); gallery.append(section); } } if (blog) { blog.replaceChildren(); for (const item of visualItems) { const article = parsed.createElement('article'); article.className = 'blog-post'; article.dataset.previewContent = item.id; const time = parsed.createElement('time'); time.textContent = item.created ? new Date(item.created).toLocaleDateString() : ''; const title = parsed.createElement('h2'); title.textContent = item.title; title.dataset.previewRole = 'title'; title.dataset.layoutKey = 'post:' + item.id + ':title'; const body = parsed.createElement('div'); body.className = 'post-body'; body.textContent = item.body || ''; body.dataset.previewRole = 'description'; body.dataset.layoutKey = 'post:' + item.id + ':description'; const media = parsed.createElement('div'); media.className = 'post-media'; for (const attachment of item.media || []) { const figure = parsed.createElement('figure'); figure.className = 'blog-media'; if (attachment.kind === 'video') { const video = parsed.createElement('video'); video.src = '/blog-media/' + attachment.id; video.controls = true; video.preload = 'metadata'; figure.append(video); } else { const img = parsed.createElement('img'); img.src = '/blog-media/' + attachment.id; img.alt = attachment.name; figure.append(img); } media.append(figure); } article.append(time, title, body, media); blog.append(article); } } for (const [key, selector, original] of dynamicCopy[selected] || []) for (const node of parsed.querySelectorAll(selector)) { node.dataset.siteCopy = key; node.textContent = original; } for (const node of parsed.querySelectorAll('[data-site-copy],[data-preview-content]')) if (!node.closest('title')) { node.tabIndex = 0; node.setAttribute('aria-label', 'Edit ' + (node.textContent || 'area').slice(0, 80)); } // Avoid rendering the visual editor recursively when Appearance itself is selected. parsed.getElementById('appearanceWorkspace')?.remove(); if (frame.dataset.page !== selected) frame.style.height = Math.max(400, innerHeight - 70) + 'px'; frame.dataset.page = selected; frame.onload = () => { if (sequence !== copySequence || !window.RoseViewer?.owner) return; const doc = frame.contentDocument; if (!doc) return; syncVisualPreview(); const resize = () => { applyTextLayouts(doc, draftLayouts); const height = Math.max(innerHeight - 70, doc.body.scrollHeight, doc.body.getBoundingClientRect().height); if (Math.abs(frame.getBoundingClientRect().height - height) > 1) frame.style.height = height + 'px'; }; const observer = new ResizeObserver(() => requestAnimationFrame(resize)); observer.observe(doc.body); window.addEventListener('resize', resize); stopVisualResize = () => { observer.disconnect(); window.removeEventListener('resize', resize); }; resize(); doc.addEventListener('click', event => { const target = event.target; if (target?.closest?.('[data-inline-tool]')) return; if (target?.closest?.('[contenteditable=true]')) { event.stopPropagation(); if (target.closest('a,button')) event.preventDefault(); return; } event.preventDefault(); event.stopPropagation(); if (target?.nodeType === 1) selectVisualArea(target); }, true); doc.addEventListener('submit', event => event.preventDefault(), true); doc.addEventListener('keydown', event => { if (event.key === 'Enter' && !event.target?.closest?.('[contenteditable=true],[data-inline-tool]')) { event.preventDefault(); const target = event.target; if (target?.nodeType === 1) selectVisualArea(target); } }, true); document.getElementById('appearancePreviewStatus').textContent = 'Click outlined text or artwork to edit. Nothing is published until you save.'; }; document.getElementById('appearancePreviewStatus').textContent = 'Loading page preview…'; frame.srcdoc = '' + parsed.documentElement.outerHTML; } function apply(theme, node) { const family = (key) => settings?.fonts?.[theme[key] || 'original']?.family || ''; const body = family('fontBody') || 'Georgia, \"Times New Roman\", serif'; const heading = family('fontHeading') || body; node.style.setProperty('--font-body', body); node.style.setProperty('--font-heading', heading); node.style.setProperty('--font-title', family('fontTitle') || heading); node.style.setProperty('--font-description', family('fontDescription') || body); node.dataset.pageCard = theme.pageCard ? 'on' : 'off'; node.dataset.pageImage = theme.image ? 'on' : 'off'; node.style.setProperty('--landing-opacity', String((theme.landingOpacity ?? 80) / 100)); node.style.setProperty('--bg', theme.background); node.style.setProperty('--ink', theme.text); node.style.setProperty('--accent', theme.accent); node.style.setProperty('--page-image', theme.image ? 'url("/backgrounds/' + theme.image + '")' : 'none'); } function edited() { return { layouts: draftLayouts, pageCard: field('appearancePageCard').checked, copy: copyValues('pageCopyFields'), landingOpacity: Number(field('landingOpacity').value), background: field('appearanceBackground').value, text: field('appearanceText').value, accent: field('appearanceAccent').value, image, fontBody: fontSelect('fontBody').value, fontHeading: fontSelect('fontHeading').value, fontTitle: fontSelect('fontTitle').value, fontDescription: fontSelect('fontDescription').value }; } function showPreview() { const hasImage = !!image || !!previewURL; document.getElementById('pageCardControl')?.toggleAttribute('hidden', !hasImage); document.getElementById('landingOpacityControl')?.toggleAttribute('hidden', !hasImage); field('landingOpacity').disabled = !field('appearancePageCard').checked; if (!preview) return; apply(edited(), preview); if (previewURL) preview.style.setProperty('--page-image', 'url("' + previewURL + '")'); syncVisualPreview(); } function choose() { if (!settings || !select) return; clearVisualImages(); draftLayouts = structuredClone(settings.pages[select.value]?.layouts || {}); savedLayouts = JSON.stringify(draftLayouts); const visualStatus = document.getElementById('appearancePreviewStatus'); if (visualStatus) visualStatus.textContent = 'Loading page preview…'; dirty = false; if (previewURL) { URL.revokeObjectURL(previewURL); previewURL = ''; } const theme = settings.pages[select.value] || settings.defaults; image = theme.image; field('appearancePageCard').checked = settings.pages[select.value]?.pageCard ?? select.value === 'home'; field('landingOpacity').value = String(theme.landingOpacity ?? 80); document.getElementById('landingOpacityValue').textContent = field('landingOpacity').value + '%'; preview?.classList.toggle('landing-card-preview', select.value === 'home'); for (const key of fontFields) fontSelect(key).value = theme[key] || 'original'; field('appearanceBackground').value = theme.background; field('appearanceText').value = theme.text; field('appearanceAccent').value = theme.accent; field('appearanceImage').value = ''; savedImage = image; for (const node of controls()) remember(node); showPreview(); void loadCopy().catch(error => { document.getElementById('appearanceStatus').textContent = String(error); }); } async function refresh() { try { const response = await fetch('/api/appearance', { cache: 'no-store' }); if (!response.ok) return; settings = await response.json(); if (form) { for (const key of fontFields) { const select = fontSelect(key); if (!select.options.length) for (const [value, font] of Object.entries(settings.fonts)) { const option = document.createElement('option'); option.value = value; option.textContent = font.label; if (font.family) option.style.fontFamily = font.family; select.append(option); } } } apply(settings.pages[current] || { ...settings.defaults, pageCard: current === 'home' }, document.documentElement); applyCopy(); if (form && !saving && !dirty && !form.contains(document.activeElement)) choose(); } catch (error) { if (error instanceof DOMException && error.name === 'AbortError') return; const status = document.getElementById('appearanceStatus'); if (status) status.textContent = 'Could not load appearance. Please try again.'; } } if (form && select) { setupVisualEditor(); form.addEventListener('toggle', () => requestAnimationFrame(sizeEditorText), true); form.addEventListener('input', () => { updateDirty(); syncVisualPreview(); }); form.addEventListener('change', () => { updateDirty(); syncVisualPreview(); }); for (const [value, label] of Object.entries(labels)) { const option = document.createElement('option'); option.value = value; option.textContent = label; select.append(option); } select.value = 'home'; select.addEventListener('change', choose); for (const id of ['appearanceBackground', 'appearanceText', 'appearanceAccent']) field(id).addEventListener('input', showPreview); for (const key of fontFields) fontSelect(key).addEventListener('change', showPreview); field('appearancePageCard').addEventListener('change', showPreview); field('landingOpacity').addEventListener('input', () => { document.getElementById('landingOpacityValue').textContent = field('landingOpacity').value + '%'; showPreview(); }); field('appearanceImage').addEventListener('change', () => { if (previewURL) URL.revokeObjectURL(previewURL); const file = field('appearanceImage').files?.[0]; previewURL = file ? URL.createObjectURL(file) : ''; showPreview(); }); for (const [button, id] of [['resetPageCopy', 'pageCopyFields'], ['resetSharedCopy', 'sharedCopyFields']]) document.getElementById(button)?.addEventListener('click', () => { for (const input of document.querySelectorAll('#' + id + ' textarea')) input.value = input.dataset.original || ''; updateDirty(); syncVisualPreview(); }); document.getElementById('appearanceCancel')?.addEventListener('click', () => { if (!saving) choose(); }); document.getElementById('appearanceRemove')?.addEventListener('click', () => { image = ''; field('appearanceImage').value = ''; if (previewURL) URL.revokeObjectURL(previewURL); previewURL = ''; updateDirty(); showPreview(); }); form.addEventListener('submit', event => { event.preventDefault(); if (saving || !window.RoseViewer?.owner) return; if (copyLoading) { document.getElementById('appearanceStatus').textContent = 'Please wait for the page wording to finish loading.'; return; } saving = true; const status = document.getElementById('appearanceStatus'); const button = form.querySelector('button[type="submit"]'); button.disabled = true; status.textContent = 'Saving…'; void (async () => { try { const file = field('appearanceImage').files?.[0]; if (file) { const response = await fetch('/api/appearance/image', { method: 'POST', headers: { 'x-dm-request': '1' }, body: file }); const data = await response.json(); if (!response.ok || !data.image) throw Error(data.error || 'Could not upload image'); image = data.image; } const response = await fetch('/api/appearance/save', { method: 'POST', headers: { 'content-type': 'application/json', 'x-dm-request': '1' }, body: JSON.stringify({ page: select.value, ...edited(), sharedCopy: copyValues('sharedCopyFields') }) }); const data = await response.json(); if (!response.ok) throw Error(data.error || 'Could not save appearance'); settings = data; apply(settings.pages[current] || { ...settings.defaults, pageCard: current === 'home' }, document.documentElement); applyCopy(); choose(); status.textContent = 'Saved. This page’s appearance is now updated everywhere.'; } catch (error) { status.textContent = error instanceof Error ? error.message : String(error); } finally { saving = false; button.disabled = false; } })(); }); window.addEventListener('resize', () => { if (settings) applyTextLayouts(document, settings.pages[current]?.layouts || {}); }); const previous = window.LiveHooks; window.LiveHooks = { ...previous, idle: () => !saving && !dirty && (previous?.idle() ?? true), save: () => previous?.save() }; } function ownerChanged() { if (window.RoseViewer?.owner) void refreshUsage(); else { document.getElementById('usageLocal')?.replaceChildren(); document.getElementById('usageCloud')?.replaceChildren(); } const locked = document.getElementById('appearanceLocked'); if (locked) locked.hidden = !!window.RoseViewer?.owner; if (!window.RoseViewer?.owner) { const frame = document.getElementById('appearancePagePreview'); if (frame) frame.srcdoc = ''; clearVisualImages(); closeInlineEditor(); stopVisualSelection(); stopVisualResize(); document.getElementById('appearanceSelection')?.replaceChildren(); visualItems = []; dirty = false; copySequence++; copyLoading = false; if (form) form.reset(); for (const id of ['pageCopyFields', 'sharedCopyFields', 'contentTextFields']) document.getElementById(id)?.replaceChildren(); } if (!window.RoseViewer?.owner && previewURL) { URL.revokeObjectURL(previewURL); previewURL = ''; } void refresh(); } window.addEventListener('rose:viewer', ownerChanged); ownerChanged(); const socket = new WebSocket((location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/host/live'); socket.addEventListener('message', event => { try { if (JSON.parse(String(event.data)).type === 'appearance') void refresh(); } catch { } }); })(); ;__publish({});

Commission a painting