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 { } }); })(); ; "use strict"; (() => { const pickers = new Map(); const storageBudget = 10000000000; async function cloudPreview(file, quality, scale, background) { const header = new Uint8Array(await file.arrayBuffer()); const ascii = new TextDecoder('latin1').decode(header); if (ascii.startsWith('GIF') || header[0] === 137 && header[1] === 80 && header[2] === 78 && header[3] === 71 && ascii.includes('acTL') || ascii.startsWith('RIFF') && ascii.slice(8, 12) === 'WEBP' && ascii.includes('ANIM')) throw Error('Animation optimization is unavailable. Keep the original image.'); const image = await createImageBitmap(file); try { if (image.width * image.height > 64000000) throw Error('Choose an image with at most 64 million pixels.'); const factor = Math.min(scale / 100, background ? 2560 / Math.max(image.width, image.height) : 1); const canvas = document.createElement('canvas'); canvas.width = Math.max(1, Math.round(image.width * factor)); canvas.height = Math.max(1, Math.round(image.height * factor)); const context = canvas.getContext('2d'); if (!context) throw Error('Image previews are unavailable in this browser.'); context.drawImage(image, 0, 0, canvas.width, canvas.height); const blob = await new Promise((resolve, reject) => canvas.toBlob(value => value && value.type === 'image/webp' ? resolve(value) : reject(Error('This browser cannot encode WebP previews.')), 'image/webp', quality / 100)); return new Response(blob, { headers: { 'x-image-width': String(canvas.width), 'x-image-height': String(canvas.height) } }); } finally { image.close(); } } const bytes = (size) => size < 1000 ? size + ' B' : size < 1000000 ? (size / 1000).toFixed(1) + ' KB' : size < 1000000000 ? (size / 1000000).toFixed(2) + ' MB' : (size / 1000000000).toFixed(2) + ' GB'; function clear(picker) { for (const choice of picker.choices) { choice.sequence++; choice.pending = false; clearTimeout(choice.timer); choice.controller?.abort(); choice.cancelWait(); URL.revokeObjectURL(choice.originalURL); if (choice.previewURL) URL.revokeObjectURL(choice.previewURL); } picker.choices = []; picker.panel.replaceChildren(); } function makeChoice(file, picker) { const box = document.createElement('fieldset'); box.className = 'image-quality-choice'; const legend = document.createElement('legend'); legend.textContent = file.name; const label = document.createElement('label'); label.className = 'image-quality-enable'; const enabled = document.createElement('input'); enabled.type = 'checkbox'; enabled.className = 'image-optimize'; label.append(enabled, 'Optimize this image before publishing'); const controls = document.createElement('div'); controls.className = 'image-quality-controls'; controls.hidden = true; const qualityLabel = document.createElement('label'); qualityLabel.textContent = 'Quality'; const quality = document.createElement('input'); quality.type = 'range'; quality.min = '10'; quality.max = '100'; quality.value = '85'; quality.className = 'image-quality-slider'; const qualityValue = document.createElement('output'); qualityLabel.append(quality, qualityValue); const scaleLabel = document.createElement('label'); scaleLabel.textContent = 'Resolution'; const scale = document.createElement('input'); scale.type = 'range'; scale.min = '10'; scale.max = '100'; scale.value = '100'; scale.className = 'image-resolution-slider'; const scaleValue = document.createElement('output'); scaleLabel.append(scale, scaleValue); const comparison = document.createElement('div'); comparison.className = 'image-comparison'; const originalFigure = document.createElement('figure'), previewFigure = document.createElement('figure'); const originalCaption = document.createElement('figcaption'); originalCaption.textContent = 'Original'; const previewCaption = document.createElement('figcaption'); previewCaption.textContent = 'Published image'; const original = document.createElement('img'), preview = document.createElement('img'); original.alt = 'Original selected image'; preview.alt = 'Exact image that will be published'; const originalWell = document.createElement('div'), previewWell = document.createElement('div'); originalWell.className = previewWell.className = 'image-compare-well'; originalWell.append(original); previewWell.append(preview); originalFigure.append(originalCaption, originalWell); previewFigure.append(previewCaption, previewWell); comparison.append(originalFigure, previewFigure); const inspect = document.createElement('button'); inspect.type = 'button'; inspect.className = 'secondary'; inspect.textContent = 'Inspect at 100%'; inspect.addEventListener('click', () => { const zoom = comparison.classList.toggle('image-comparison-zoom'); inspect.textContent = zoom ? 'Fit previews' : 'Inspect at 100%'; }); const share = document.createElement('p'); share.className = 'image-budget-status'; const status = document.createElement('p'); status.className = 'image-size-status'; status.setAttribute('role', 'status'); const retry = document.createElement('button'); retry.type = 'button'; retry.className = 'secondary'; retry.textContent = 'Retry preview'; retry.hidden = true; const choice = { original: file, file: null, enabled: false, quality: 85, scale: 100, pending: false, error: '', sequence: 0, timer: 0, controller: null, promise: Promise.resolve(), cancelWait: () => { }, originalURL: URL.createObjectURL(file), previewURL: '', box, render: () => { qualityValue.textContent = choice.quality + '%'; scaleValue.textContent = choice.scale + '%'; controls.hidden = !choice.enabled; retry.hidden = !choice.error; const selected = choice.enabled ? choice.file : file; share.hidden = choice.pending || !!choice.error || !selected || !choice.enabled && picker.input.id === 'appearanceImage'; share.textContent = selected ? 'This image: ' + bytes(selected.size) + ' / 10 GB · ' + (selected.size / storageBudget * 100).toLocaleString(undefined, { maximumFractionDigits: 8 }) + '% of total storage' : ''; status.textContent = choice.pending ? 'Encoding preview… The final file size will appear here.' : choice.error || (!choice.enabled ? (picker.input.id === 'appearanceImage' ? 'Original selected: ' + bytes(file.size) + '. Standard backgrounds are encoded on save; enable optimization for an exact size preview.' : 'Original kept: ' + bytes(file.size)) : choice.file ? 'Original ' + bytes(file.size) + ' → Published ' + bytes(choice.file.size) + ' · ' + (choice.file.size <= file.size ? ((1 - choice.file.size / file.size) * 100).toFixed(1) + '% less space' : ((choice.file.size / file.size - 1) * 100).toFixed(1) + '% more space') : 'Choose quality and resolution to preview.'); } }; original.src = choice.originalURL; function encode() { clearTimeout(choice.timer); choice.cancelWait(); choice.controller?.abort(); const sequence = ++choice.sequence; choice.error = ''; choice.file = null; if (choice.previewURL) { URL.revokeObjectURL(choice.previewURL); choice.previewURL = ''; preview.removeAttribute('src'); } if (!choice.enabled) { choice.pending = false; choice.render(); return; } choice.pending = true; choice.render(); choice.promise = new Promise(resolve => { choice.cancelWait = resolve; choice.timer = window.setTimeout(() => { void (async () => { const controller = new AbortController(); choice.controller = controller; try { const background = picker.input.id === 'appearanceImage'; const response = document.documentElement.dataset.hosting === 'cloudflare' ? await cloudPreview(file, choice.quality, choice.scale, background) : await fetch('/api/images/preview?quality=' + choice.quality + '&scale=' + choice.scale + (background ? '&background=1' : ''), { method: 'POST', headers: { 'x-dm-request': '1', 'content-type': 'application/octet-stream' }, body: file, signal: controller.signal }); if (!response.ok) { const result = await response.json(); throw Error(result.error || 'Could not generate preview.'); } const blob = await response.blob(); if (sequence !== choice.sequence || !choice.enabled || !window.RoseViewer?.owner) return; choice.file = new File([blob], file.name.replace(/\.[^.]+$/, '') + '-optimized.webp', { type: 'image/webp', lastModified: file.lastModified }); choice.previewURL = URL.createObjectURL(blob); preview.src = choice.previewURL; previewCaption.textContent = 'Published image · ' + response.headers.get('x-image-width') + ' × ' + response.headers.get('x-image-height'); } catch (error) { if (sequence === choice.sequence && !(error instanceof DOMException && error.name === 'AbortError')) choice.error = error instanceof Error ? error.message : String(error); } finally { if (sequence === choice.sequence) { choice.pending = false; choice.render(); } resolve(); } })(); }, 350); }); } enabled.addEventListener('change', () => { choice.enabled = enabled.checked; encode(); }); quality.addEventListener('input', () => { choice.quality = Number(quality.value); encode(); }); scale.addEventListener('input', () => { choice.scale = Number(scale.value); encode(); }); retry.addEventListener('click', encode); const note = document.createElement('p'); note.textContent = 'Nothing is published until you save. ' + (picker.input.id === 'appearanceImage' ? 'Uncheck to use standard background processing.' : 'Uncheck optimization to keep the original.') + ' Quality 100 still re-encodes the image.' + (picker.input.id === 'appearanceImage' ? ' Backgrounds are limited to 2560 pixels on the longest side.' : ''); controls.append(qualityLabel, scaleLabel, comparison, inspect, note); box.append(legend, label, controls, status, share, retry); choice.render(); return choice; } function refresh(picker) { clear(picker); if (!window.RoseViewer?.owner) return; for (const file of picker.input.files || []) { if (!file.type.startsWith('image/') && !/\.(png|jpe?g|webp|gif|bmp|avif)$/i.test(file.name)) continue; const choice = makeChoice(file, picker); picker.choices.push(choice); picker.panel.append(choice.box); } picker.panel.hidden = !picker.choices.length; } function scan() { for (const picker of pickers.values()) if (!picker.input.files?.length && picker.choices.length) { clear(picker); picker.panel.hidden = true; } if (!window.RoseViewer?.owner) return; for (const input of document.querySelectorAll('input[type=file]')) { if (pickers.has(input) || input.hasAttribute('data-image-quality-skip') || !input.accept.includes('image')) continue; const panel = document.createElement('div'); panel.className = 'image-quality-panel'; panel.hidden = true; const anchor = input.closest('label') || input; anchor.after(panel); const picker = { input, panel, choices: [] }; pickers.set(input, picker); input.addEventListener('change', () => refresh(picker)); input.form?.addEventListener('reset', () => { clear(picker); panel.hidden = true; }); if (input.files?.length) refresh(picker); } } document.addEventListener('submit', event => { const form = event.target; if (!(form instanceof HTMLFormElement) || !window.RoseViewer?.owner) return; const relevant = [...pickers.values()].filter(p => p.input.form === form && p.input.files?.length); const choices = relevant.flatMap(p => p.choices).filter(c => c.enabled); if (!choices.length) return; if (choices.some(c => c.pending)) { event.preventDefault(); event.stopImmediatePropagation(); const submitter = event.submitter; void (async () => { for (const choice of choices) while (choice.pending) await choice.promise; if (form.isConnected && window.RoseViewer?.owner) form.requestSubmit(submitter instanceof HTMLButtonElement ? submitter : undefined); })(); return; } if (choices.some(c => c.error || !c.file)) { event.preventDefault(); event.stopImmediatePropagation(); for (const choice of choices) if (choice.error || !choice.file) { choice.box.scrollIntoView({ block: 'nearest' }); break; } return; } for (const picker of relevant) { const files = new DataTransfer(); for (const file of picker.input.files || []) { const choice = picker.choices.find(c => c.original === file || c.file === file); files.items.add(choice?.enabled && choice.file ? choice.file : choice?.original || file); } picker.input.files = files.files; } }, true); window.addEventListener('rose:viewer', () => { if (window.RoseViewer?.owner) scan(); else for (const picker of pickers.values()) { clear(picker); picker.input.value = ''; picker.panel.hidden = true; } }); new MutationObserver(() => { for (const [input, picker] of pickers) if (!input.isConnected) { clear(picker); pickers.delete(input); } scan(); }).observe(document.body, { childList: true, subtree: true }); const previous = window.LiveHooks; window.LiveHooks = { ...previous, idle: () => ![...pickers.values()].some(p => !!p.input.files?.length && p.choices.some(c => c.enabled)) && (previous?.idle() ?? true), save: () => previous?.save() }; scan(); })(); ;__publish({});

Make it yours.

Cloudflare limits

Rose of Arts

An artwork or post title