(() => { "use strict"; // Interaction model inspired by Impeccable's fixed annotation overlay. // Purpose-built for HTML review. No upstream runtime code is copied here. const DOC = {{DOC_JSON}}; const STYLES = ":host{all:initial;color-scheme:light;--deep:#2a54ff;--cyan:#06daff;--grad:linear-gradient(135deg,#2a54ff,#06daff);--ink:#0b1526;--navy:#0e1730;--card:#16224a;--line:#e3eaf5;--paper:#fff;--soft:#eef4ff;--on-dark:#a9bcd8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\n*{box-sizing:border-box}\n.brand,.gate-brand{display:block;pointer-events:none}\n.brand{width:20px;height:20px;color:var(--ink)}\n.gate-brand{width:34px;height:34px;margin:2px auto 12px;color:#fff}\n.brand svg,.gate-brand svg{display:block;width:100%;height:100%}\n.highlight{position:fixed;display:none;border:2px solid var(--deep);box-shadow:0 0 0 4px rgba(42,84,255,.18);pointer-events:none;z-index:1}\n.highlight.show{display:block}\n.pin{position:fixed;z-index:2;min-width:25px;height:25px;padding:0 7px;border:2px solid #fff;border-radius:999px;background:var(--grad);color:#fff;box-shadow:0 2px 10px rgba(11,21,38,.32);font:700 11px/21px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%)}\n.pin:hover,.pin:focus-visible{transform:translate(-50%,-50%) scale(1.08);outline:2px solid var(--deep);outline-offset:2px}\n.pin.resolved{background:#5c6c85}\n.toolbar{position:fixed;right:18px;bottom:18px;z-index:4;display:flex;align-items:center;gap:8px;padding:7px 8px 7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper);box-shadow:0 12px 38px rgba(11,21,38,.2);color:var(--ink);pointer-events:auto}\n.toolbar .state{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}\n.toolbar .dot{width:8px;height:8px;border-radius:50%;background:var(--deep)}\n.toolbar.off .dot{background:#c3cede}\n.toolbar.off .brand{opacity:.45}\n.toolbar button,.panel button{border:0;font:700 11px/1.2 inherit;cursor:pointer}\n.toggle{padding:7px 10px;border-radius:999px!important;background:var(--ink);color:#fff}\n.toolbar.off .toggle{background:var(--soft);color:var(--ink)}\n.panel{position:fixed;z-index:5;width:min(360px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 24px));overflow:auto;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:var(--navy);box-shadow:0 22px 70px rgba(11,21,38,.42);color:#fff;pointer-events:auto}\n.panel.gate{width:min(260px,calc(100vw - 24px))}\n.diff{margin-top:7px;font:12px/1.5 inherit;overflow-wrap:anywhere;white-space:pre-wrap}\n.diff .was{color:#9fb0cd;text-decoration:line-through}\n.diff .now{margin-top:3px;color:#fff}\n.panel.gate .field{margin-top:0}\n.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}\n.eyebrow{color:var(--cyan);font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase}\n.title{margin-top:5px;font:650 13px/1.35 inherit;overflow-wrap:anywhere}\n.close{width:28px;height:28px;border-radius:50%!important;background:rgba(255,255,255,.1);color:#fff;font-size:16px!important}\n.field{display:block;margin-top:9px;color:var(--on-dark);font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}\n.field input,.field textarea{display:block;width:100%;margin-top:5px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:var(--card);color:#fff;font:13px/1.45 inherit;outline:none}\n.field input{padding:9px 10px}\n.field textarea{min-height:92px;padding:10px;resize:vertical}\n.field input:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(6,218,255,.22)}\n.panel.drag{border-color:var(--cyan)}\n.attachment-preview,.thread-attachments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}\n.attachment-preview-item{position:relative;min-width:0}.attachment-preview img,.thread-attachments img{display:block;width:100%;height:74px;object-fit:cover;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:var(--card)}\n.attachment-preview-item button{position:absolute;right:3px;top:3px;width:22px;height:22px;padding:0!important;border-radius:50%!important;background:rgba(11,21,38,.86)!important;color:#fff!important}\n.actions{display:flex;justify-content:flex-end;gap:7px;margin-top:10px}\n.actions button{padding:8px 11px;border-radius:8px;background:rgba(255,255,255,.1);color:#fff}\n.actions .primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px -8px rgba(42,84,255,.9)}\n.panel.gate .actions{justify-content:stretch}\n.panel.gate .actions .primary{flex:1;padding:10px 11px}\n.thread{display:grid;gap:8px}\n.note{padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:var(--card)}\n.note.resolved{opacity:.58}\n.meta{display:flex;justify-content:space-between;gap:8px;color:var(--on-dark);font:600 9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}\n.text{margin-top:7px;color:#fff;font:12px/1.5 inherit;white-space:pre-wrap;overflow-wrap:anywhere}\n.note>textarea{display:block;width:100%;min-height:78px;margin-top:7px;padding:8px;border:1px solid var(--cyan);border-radius:8px;background:#1b2a58;color:#fff;font:12px/1.5 inherit;resize:vertical}\n.note-actions{display:flex;gap:6px;margin-top:8px}\n.note-actions button{padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--on-dark);font-size:10px}\n.note-actions .danger{color:#ffb4ab}\n.empty{padding:14px 0;color:var(--on-dark);font-size:12px}\n.error{margin-top:8px;color:#ffb4ab;font-size:11px}\n@media(max-width:520px){.toolbar{right:10px;bottom:10px}.toolbar .state{display:none}.panel{left:12px!important;right:12px!important;top:auto!important;bottom:58px;width:auto}.pin{min-width:28px;height:28px;line-height:24px}}\n"; const WORKER = "https://pipeline-guide-comments.clientsflowdigital.workers.dev"; // Published review pages carry a same-origin Pages proxy for the comment API. // Keep direct access for local files, about:blank fixtures, and local servers. const COMMENT_WORKER = /^(localhost|127\.0\.0\.1)$/.test(location.hostname) || location.protocol === "file:" || location.protocol === "about:" ? WORKER : "/__review-comments"; const IMAGE_UPSTREAM = "https://fusion-review-comment-images.clientsflowdigital.workers.dev"; const IMAGE_WORKER = /^(localhost|127\.0\.0\.1)$/.test(location.hostname) ? IMAGE_UPSTREAM : "/__review-image"; const IMAGE_TYPES = new Set(["image/png","image/jpeg","image/webp","image/gif"]); const MAX_IMAGE_BYTES = 8 * 1024 * 1024; // The shared comments Worker persists a fixed field set (id, cid, label, text, // author, ts, resolved, doc) and drops everything else, so the fields it would // lose ride along at the end of text behind this marker and are stripped on read. const META = "\n\n[comment-html]"; const AUTHOR_KEY = "comment-html-author"; // Exact symbol crop from the original ClientsFlow logo served by clientsflow.hu. const MARK = ""; const DRAFT_PREFIX = "comment-html-draft:"; function brandMark(className) { const holder = document.createElement("span"); holder.className = className; holder.innerHTML = MARK; return holder; } const SKIP_TAGS = new Set(["html","head","body","script","style","link","meta","noscript","br","wbr","template"]); // Contract paragraphs may start with a bold clause number. Those inline children // still form one editable text layer, while block containers remain comment targets. const INLINE_TEXT_TAGS = new Set(["a","abbr","b","bdi","bdo","br","cite","code","data","del","em","font","i","ins","kbd","mark","q","s","samp","small","span","strong","sub","sup","time","u","var"]); const MIXED_TEXT_PARENT_TAGS = new Set(["blockquote","caption","dd","dt","figcaption","h1","h2","h3","label","li","p","pre","td","th"]); // Form controls hold their text in a value, not in child nodes, so contenteditable cannot edit them. const NO_EDIT_TAGS = new Set(["input","textarea","select","option","svg","img","video","canvas","iframe"]); if (window.CommentHTML) return; let comments = []; // Review mode starts off, so the page under review behaves normally until the // reviewer asks for the layer. Ctrl or Command with Space cycles on, off, hidden. // Numbering IS the Ctrl+Space cycle order. It starts at OFF, so the first press turns // review on, the second hides the toolbar for a clean screen, the third comes back to OFF. const MODE_OFF = 0, MODE_ON = 1, MODE_HIDDEN = 2; let mode = MODE_OFF; let visibleMode = MODE_OFF; let enabled = false; let online = false; let activePanel = null; let highlighted = null; let editing = null; const targetCache = new Map(); const originals = new Map(); let notice = ""; let noticeTimer = 0; const host = document.createElement("div"); host.id = "comment-html-asset-" + window.CanvasReview.assetIndex; Object.assign(host.style, {position:"fixed",inset:"0",zIndex:"2147483000",pointerEvents:"none"}); const shadow = host.attachShadow({mode:"open"}); const style = document.createElement("style"); style.textContent = STYLES + "\n.toolbar{display:none}.toolbar[data-canvas-notice]{display:flex;bottom:64px;max-width:calc(100vw - 24px)}.toolbar[data-canvas-notice] .state{display:block;white-space:normal;max-width:calc(100vw - 94px);line-height:1.35;overflow-wrap:anywhere}.toolbar[data-canvas-notice] .toggle{display:none}"; shadow.appendChild(style); const pageStyle = document.createElement("style"); pageStyle.textContent = "[data-comment-html-edited]{outline:2px dashed rgba(42,84,255,.5);outline-offset:2px}" + "[data-comment-html-deleted]{text-decoration:line-through!important;opacity:.45!important}" + "[data-comment-html-editing]{outline:2px solid #2a54ff!important;outline-offset:2px;background:rgba(6,218,255,.12)!important;cursor:text}"; (document.head || document.documentElement).appendChild(pageStyle); const highlight = document.createElement("div"); highlight.className = "highlight"; shadow.appendChild(highlight); const pins = document.createElement("div"); shadow.appendChild(pins); parent.document.getElementById("comment-html-root").shadowRoot.appendChild(host); window.CanvasReview.host = host; function escapeSelector(value) { return window.CSS && CSS.escape ? CSS.escape(value) : String(value).replace(/["\\]/g, "\\$&"); } function pathFor(el) { const parts = []; let node = el; while (node && node !== document.body && parts.length < 8) { let part = node.tagName.toLowerCase(); if (node.id) { part += "#" + escapeSelector(node.id); parts.unshift(part); break; } const siblings = node.parentElement ? [...node.parentElement.children].filter(child => child.tagName === node.tagName) : []; if (siblings.length > 1) part += ":nth-of-type(" + (siblings.indexOf(node) + 1) + ")"; parts.unshift(part); node = node.parentElement; } return "path:body>" + parts.join(">"); } function cidFor(el) { if (!el) return ""; const explicit = el.getAttribute("data-cid"); if (explicit) return explicit; if (el.id) return "id:" + el.id; const cid = pathFor(el); targetCache.set(cid, el); return cid; } function registerTargets() { targetCache.clear(); document.querySelectorAll("[data-cid]").forEach(el => { const cid = cidFor(el); if (cid && !targetCache.has(cid)) targetCache.set(cid, el); }); } function targetFor(cid) { if (targetCache.has(cid) && targetCache.get(cid).isConnected) return targetCache.get(cid); if (cid.startsWith("id:")) return document.getElementById(cid.slice(3)); const explicit = document.querySelector('[data-cid="' + escapeSelector(cid) + '"]'); if (explicit) return explicit; if (cid.startsWith("path:")) { try { // pathFor always prefixes "body>" but stops climbing at the first ancestor // with an id, so the prefix lies whenever that ancestor sits inside a // wrapper (a layout shell's

, for instance). Strip it: // the id already anchors the match uniquely, wrapper or not. const raw = cid.slice(5); const matched = document.querySelector(raw.replace(/^body>/, "")) || document.querySelector(raw); if (matched) { targetCache.set(cid, matched); return matched; } } catch (_) {} } registerTargets(); return targetCache.get(cid) || null; } function pickable(el) { if (!(el instanceof Element) || el === host || SKIP_TAGS.has(el.tagName.toLowerCase())) return false; const rect = el.getBoundingClientRect(); if (rect.width < 1 || rect.height < 1) return false; const computed = getComputedStyle(el); return computed.display !== "none" && computed.visibility !== "hidden"; } // A text layer is a leaf carrying its own words. Line breaks are kept because // Shift and Enter make them, so only spaces and tabs collapse. function rawText(el) { let out = ""; for (const node of el.childNodes) { if (node.nodeType === 3) out += node.textContent; else if (node.nodeName === "BR") out += "\n"; else if (node.nodeType === 1 && INLINE_TEXT_TAGS.has(node.tagName.toLowerCase())) out += rawText(node); } return out.replace(/\r\n?/g,"\n").replace(/[^\S\n]+/g," ").replace(/ *\n */g,"\n").trim(); } // Breaks are written as elements so they survive whatever white-space the page sets. function setText(el, text) { el.textContent = ""; String(text).split("\n").forEach((line, index) => { if (index) el.appendChild(document.createElement("br")); el.appendChild(document.createTextNode(line)); }); } // Inline-only text can be rewritten as one field. Saving normalizes its markup to text. function textLayer(el) { if (!(el instanceof Element) || NO_EDIT_TAGS.has(el.tagName.toLowerCase())) return false; for (const child of el.children) { if (child.tagName === "BR") continue; if (!INLINE_TEXT_TAGS.has(child.tagName.toLowerCase())) return false; } return Boolean(rawText(el)); } function targetFromEvent(event) { if (event.composedPath().includes(host)) return null; let candidate = Number.isFinite(event.clientX) && Number.isFinite(event.clientY) ? document.elementFromPoint(event.clientX,event.clientY) : event.target; if (candidate && candidate.namespaceURI === "http://www.w3.org/2000/svg") { candidate = candidate.closest("svg") || candidate; } while (candidate && candidate !== document.documentElement) { if (pickable(candidate)) return candidate; candidate = candidate.parentElement; } return null; } function labelFor(el, cid) { if (!el) return cid; const text = (el.getAttribute("aria-label") || el.getAttribute("alt") || el.getAttribute("title") || el.textContent || cid).replace(/\s+/g," ").trim(); return text.length > 88 ? text.slice(0,85) + "…" : text || cid; } function setHighlight(el) { highlighted = enabled && el && el.isConnected ? el : null; if (!highlighted) { highlight.classList.remove("show"); return; } const rect = window.CanvasReview.rect(highlighted); if (rect.width < 1 || rect.height < 1) { highlighted = null; highlight.classList.remove("show"); return; } Object.assign(highlight.style, {left:rect.left+"px",top:rect.top+"px",width:rect.width+"px",height:rect.height+"px"}); highlight.classList.add("show"); } function storedAuthor() { try { return (localStorage.getItem(AUTHOR_KEY) || "").replace(/\s+/g," ").trim(); } catch (_) { return ""; } } function draftKey(cid) { return DRAFT_PREFIX + DOC + ":" + cid; } function readDraft(cid) { try { return localStorage.getItem(draftKey(cid)) || ""; } catch (_) { return ""; } } function writeDraft(cid, value) { try { if (value) localStorage.setItem(draftKey(cid), value); else localStorage.removeItem(draftKey(cid)); } catch (_) {} } function grouped() { const map = new Map(); comments.forEach(comment => { if (!map.has(comment.cid)) map.set(comment.cid, []); map.get(comment.cid).push(comment); }); return map; } // Pin labels are a running count of commented targets, ordered by each thread's // first comment, so the first element you comment on stays 1 after any delete. function ordinals() { const ranked = [...grouped().entries()] .map(([cid, thread]) => [cid, Math.min(...thread.map(item => item.ts))]) .sort((a, b) => a[1] - b[1]); return new Map(ranked.map(([cid], index) => [cid, index + 1])); } function editFor(cid) { return comments .filter(item => item.cid === cid && item.kind === "edit") .reduce((latest, item) => !latest || item.ts > latest.ts ? item : latest, null); } function threadCount(thread) { const edits = thread.filter(item => item.kind === "edit").length; const notes = thread.length - edits; return [notes ? notes + " megjegyz\u00e9s" : "", edits ? edits + " v\u00e1ltoz\u00e1s" : ""] .filter(Boolean).join(" · ") || "Nincs megjegyz\u00e9s"; } // The page shows the proposed copy, so a reviewer reads the result rather than the request. function applyEdits() { const wanted = new Map(); comments.forEach(item => { if (item.kind === "edit") wanted.set(item.cid, editFor(item.cid)); }); [...originals.keys()].forEach(cid => { if (wanted.has(cid)) return; const el = targetFor(cid); if (el) { setText(el, originals.get(cid)); el.removeAttribute("data-comment-html-deleted"); el.removeAttribute("data-comment-html-edited"); } originals.delete(cid); }); wanted.forEach((record, cid) => { const el = targetFor(cid); if (!el || el === (editing && editing.el)) return; const current = rawText(el); const before = record.before != null ? record.before : current; // A published revision can remove nodes and shift path-based targets. Never // replay an old edit onto the element that merely inherited that path. If the // accepted text is already baked into the page, leave its inline markup intact. if (!originals.has(cid) && current === record.text && !record.deleted) return; if (!originals.has(cid) && current !== before) return; if (!originals.has(cid)) originals.set(cid, before); setText(el, record.deleted ? originals.get(cid) : record.text); el.toggleAttribute("data-comment-html-deleted", Boolean(record.deleted)); el.toggleAttribute("data-comment-html-edited", !record.deleted); }); } function pinPoint(el, thread) { const rect = window.CanvasReview.rect(el); const located = [...thread].reverse().find(item => Number.isFinite(item.xPct) && Number.isFinite(item.yPct)); const x = located ? located.xPct : .98; const y = located ? located.yPct : .18; return { canvasMapped:true, left: Math.max(14, Math.min(parent.innerWidth - 14, rect.left + rect.width * x)), top: Math.max(14, Math.min(parent.innerHeight - 14, rect.top + rect.height * y)), visible: rect.bottom >= 0 && rect.top <= parent.innerHeight && rect.right >= 0 && rect.left <= parent.innerWidth }; } function renderPins() { pins.innerHTML = ""; if (!enabled) return; const ranks = ordinals(); grouped().forEach((thread, cid) => { const el = targetFor(cid); if (!el) return; const point = pinPoint(el, thread); if (!point.visible) return; const button = document.createElement("button"); button.type = "button"; button.className = "pin" + (thread.every(item => item.resolved) ? " resolved" : ""); button.textContent = String(ranks.get(cid)); button.title = "#" + ranks.get(cid) + " · " + threadCount(thread); Object.assign(button.style, {left:point.left+"px",top:point.top+"px"}); button.addEventListener("mouseenter", () => setHighlight(el)); button.addEventListener("mouseleave", () => { if (!activePanel) setHighlight(null); }); button.addEventListener("click", event => { event.stopPropagation(); openThread(el,cid,point); }); pins.appendChild(button); }); } // Clamp against the panel's measured box, not a guessed height, so a composer // grown by image previews or a long thread still sits fully inside the viewport. function clampPanel(panel, point) { const margin = 12; const box = panel.getBoundingClientRect(); const width = box.width || Math.min(360, parent.innerWidth - 24); const height = box.height; let left = point.left + 18; if (left + width + margin > parent.innerWidth) left = point.left - width - 18; left = Math.max(margin, Math.min(left, parent.innerWidth - width - margin)); let top = point.top - 18; top = Math.max(margin, Math.min(top, parent.innerHeight - height - margin)); Object.assign(panel.style, {left:left+"px",top:top+"px"}); } function positionPanel(panel, point) { point = window.CanvasReview.point(point); panel.point = point; clampPanel(panel, point); if (typeof ResizeObserver === "function") { panel.observer = new ResizeObserver(() => clampPanel(panel, point)); panel.observer.observe(panel); } } function stopEditing() { if (!editing) return; const {el, onBlur} = editing; editing = null; el.removeEventListener("blur", onBlur); el.removeAttribute("contenteditable"); el.removeAttribute("data-comment-html-editing"); } function closePanel() { stopEditing(); if (activePanel && activePanel.observer) activePanel.observer.disconnect(); if (activePanel) activePanel.remove(); activePanel = null; setHighlight(null); } function panelShell(el, cid, eyebrow) { closePanel(); const panel = document.createElement("section"); panel.className = "panel"; const head = document.createElement("div"); head.className = "panel-head"; const copy = document.createElement("div"); const over = document.createElement("div"); over.className = "eyebrow"; over.textContent = eyebrow; const title = document.createElement("div"); title.className = "title"; title.textContent = labelFor(el,cid); copy.append(over,title); const close = document.createElement("button"); close.type = "button"; close.className = "close"; close.setAttribute("aria-label","Bez\u00e1r\u00e1s"); close.textContent = "×"; close.onclick = closePanel; head.append(copy,close); panel.appendChild(head); shadow.appendChild(panel); activePanel = panel; setHighlight(el); return panel; } function encode(record) { const extra = {}; if (record.kind) extra.kind = record.kind; if (record.before != null) extra.before = record.before; if (record.deleted) extra.deleted = true; if (Number.isFinite(record.xPct)) extra.xPct = record.xPct; if (Number.isFinite(record.yPct)) extra.yPct = record.yPct; if ((record.attachments || []).length) extra.attachments = record.attachments; const body = Object.assign({}, record, {text: record.text || ""}); if (Object.keys(extra).length) body.text += META + JSON.stringify(extra); return body; } function decode(record) { const text = record.text || ""; const at = text.lastIndexOf(META); if (at < 0) return record; try { const extra = JSON.parse(text.slice(at + META.length)); return Object.assign({}, record, extra, {text: text.slice(0,at)}); } catch (_) { return record; } } async function post(record) { const response = await fetch(COMMENT_WORKER + "/comments?doc=" + encodeURIComponent(DOC), { method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(encode(record)) }); if (!response.ok) throw new Error("Save failed"); online = true; } async function remove(record) { const response = await fetch(COMMENT_WORKER + "/comments?doc=" + encodeURIComponent(DOC) + "&id=" + encodeURIComponent(record.id), {method:"DELETE"}); if (!response.ok) throw new Error("Delete failed"); online = true; } function safeImageUrl(value) { try { const url = new URL(value,location.href); const direct = new URL(IMAGE_UPSTREAM); const proxied = url.origin === location.origin && url.pathname.startsWith("/__review-image/files/"); const upstream = url.origin === direct.origin && url.pathname.startsWith("/files/"); return proxied || upstream ? url.href : ""; } catch (_) { return ""; } } function imageFromFile(file) { return new Promise((resolve,reject) => { const image = new Image(); const url = URL.createObjectURL(file); image.onload = () => { URL.revokeObjectURL(url); resolve(image); }; image.onerror = () => { URL.revokeObjectURL(url); reject(new Error("A k\u00e9p nem olvashat\u00f3.")); }; image.src = url; }); } async function makeThumbnail(file) { const image = await imageFromFile(file); const scale = Math.min(1,384 / Math.max(image.naturalWidth,image.naturalHeight)); const canvas = document.createElement("canvas"); canvas.width = Math.max(1,Math.round(image.naturalWidth * scale)); canvas.height = Math.max(1,Math.round(image.naturalHeight * scale)); canvas.getContext("2d",{alpha:false}).drawImage(image,0,0,canvas.width,canvas.height); const blob = await new Promise(resolve => canvas.toBlob(resolve,"image/webp",.82)); if (!blob) throw new Error("A k\u00e9p el\u0151n\u00e9zete nem k\u00e9sz\u00fclt el."); return new File([blob],"thumbnail.webp",{type:"image/webp"}); } async function uploadAttachment(file,commentId) { const thumbnail = await makeThumbnail(file); const form = new FormData(); form.append("doc",DOC); form.append("comment",commentId); form.append("original",file,file.name || "image"); form.append("thumbnail",thumbnail,"thumbnail.webp"); const response = await fetch(IMAGE_WORKER + "/upload",{method:"POST",body:form}); const body = await response.json().catch(() => ({})); if (!response.ok) throw new Error(body.error || "A k\u00e9p felt\u00f6lt\u00e9se nem siker\u00fclt."); if (!safeImageUrl(body.originalUrl) || !safeImageUrl(body.thumbnailUrl)) throw new Error("A k\u00e9p c\u00edme \u00e9rv\u00e9nytelen."); return { originalUrl:body.originalUrl,thumbnailUrl:body.thumbnailUrl,mimeType:body.mimeType, byteSize:body.byteSize,sha256:body.sha256,width:body.width ?? null,height:body.height ?? null }; } async function deleteAttachment(attachment,commentId) { const urls = new Set([attachment.originalUrl,attachment.thumbnailUrl].map(safeImageUrl).filter(Boolean)); await Promise.all([...urls].map(async value => { try { const url = new URL(value); url.searchParams.set("doc",DOC); url.searchParams.set("comment",commentId); await fetch(url,{method:"DELETE"}); } catch (_) {} })); } function validateImages(files) { const accepted = [], errors = []; [...files].forEach(file => { if (!IMAGE_TYPES.has(file.type)) errors.push((file.name || "F\u00e1jl") + ": PNG, JPEG, WebP vagy GIF lehet."); else if (!file.size || file.size > MAX_IMAGE_BYTES) errors.push((file.name || "F\u00e1jl") + ": legfeljebb 8 MB."); else accepted.push(file); }); return {accepted,errors}; } // Asked once per browser, before the first comment. The mark sits on top, then the // name and the one button, so Enter and Ment\u00e9s do the same thing and Escape cancels. function openNameGate(el, point, onAccept) { closePanel(); const panel = document.createElement("section"); panel.className = "panel gate"; const label = document.createElement("label"); label.className = "field"; label.textContent = "N\u00e9v:"; const input = document.createElement("input"); input.maxLength = 80; input.setAttribute("aria-label","N\u00e9v"); label.appendChild(input); const actions = document.createElement("div"); actions.className = "actions"; const save = document.createElement("button"); save.type = "button"; save.className = "primary"; save.textContent = "Ment\u00e9s"; actions.appendChild(save); panel.append(brandMark("gate-brand"),label,actions); shadow.appendChild(panel); activePanel = panel; setHighlight(el); positionPanel(panel, point); const accept = () => { const name = input.value.replace(/\s+/g," ").trim(); if (!name) { input.focus(); return; } try { localStorage.setItem(AUTHOR_KEY, name); } catch (_) {} closePanel(); onAccept(); }; save.onclick = event => { event.stopPropagation(); accept(); }; // Read by the single capture-phase key handler; Escape falls through to the close. panel.onkey = event => { if (event.key !== "Enter") return false; event.preventDefault(); accept(); return true; }; setTimeout(() => input.focus(), 0); } // Click a text layer and you rewrite it in place. The outline is the whole editor: // leaving it or pressing Enter saves, Escape reverts, Shift and Enter break the line. // The record keeps the original, so the pin shows before and after. function openInlineEditor(el, cid, ratios) { closePanel(); const existing = editFor(cid); const before = existing && existing.before != null ? existing.before : rawText(el); if (!originals.has(cid)) originals.set(cid, before); const onBlur = () => { if (editing && editing.el === el) commitEdit(); }; editing = {el, cid, before, ratios, saving:false, onBlur}; el.setAttribute("contenteditable","plaintext-only"); el.setAttribute("data-comment-html-editing",""); el.removeAttribute("data-comment-html-deleted"); el.addEventListener("blur", onBlur); setHighlight(el); el.focus(); const range = document.createRange(); range.selectNodeContents(el); const selection = getSelection(); selection.removeAllRanges(); selection.addRange(range); } function cancelEdit() { if (!editing) return; stopEditing(); closePanel(); applyEdits(); renderPins(); } // Clearing the text is the delete gesture, and it strikes the copy through rather // than removing it, so the pin stays reachable and the change stays revertible. async function commitEdit() { if (!editing || editing.saving) return; const session = editing; const {el, cid, before, ratios} = session; const after = rawText(el); const deleted = !after; const existing = editFor(cid); if (!existing && after === before) { cancelEdit(); return; } const record = existing ? Object.assign({}, existing, {text: deleted ? before : after, deleted, ts: Date.now(), author: storedAuthor() || existing.author}) : {id:crypto.randomUUID(), cid, kind:"edit", label:labelFor(el,cid), before, text: deleted ? before : after, deleted, author:storedAuthor() || "Reviewer", ts:Date.now(), resolved:false, doc:DOC, xPct:ratios.xPct, yPct:ratios.yPct, attachments:[]}; session.saving = true; try { await post(record); const at = comments.findIndex(item => item.id === record.id); if (at > -1) comments[at] = record; else comments.push(record); stopEditing(); closePanel(); applyEdits(); updateToolbar(); renderPins(); } catch (caught) { session.saving = false; flash(caught.message || "Nem siker\u00fclt menteni. Pr\u00f3b\u00e1ld \u00fajra."); el.focus(); } } function withAuthor(el, point, run) { if (storedAuthor()) run(); else openNameGate(el, point, run); } function openComposer(el, cid, point, ratios) { const panel = panelShell(el,cid,"\u00daj megjegyz\u00e9s"); const textLabel = document.createElement("label"); textLabel.className = "field"; textLabel.textContent = "Megjegyz\u00e9s"; const textarea = document.createElement("textarea"); textLabel.appendChild(textarea); const preview = document.createElement("div"); preview.className = "attachment-preview"; const error = document.createElement("div"); error.className = "error"; const actions = document.createElement("div"); actions.className = "actions"; const cancel = document.createElement("button"); cancel.type = "button"; cancel.textContent = "M\u00e9gse"; cancel.onclick = event => { event.stopPropagation(); writeDraft(cid,""); closePanel(); }; const save = document.createElement("button"); save.type = "button"; save.className = "primary"; save.textContent = "Ment\u00e9s"; actions.append(cancel,save); panel.append(textLabel,preview,error,actions); let staged = []; const showError = message => { error.textContent = message; }; // The draft is the only thing that survives an accidental close, so it is // written on every keystroke and cleared only by an explicit save or cancel. textarea.value = readDraft(cid); textarea.addEventListener("input", () => writeDraft(cid, textarea.value)); panel.dirty = () => Boolean(textarea.value.trim() || staged.length); const renderPreview = () => { preview.innerHTML = ""; staged.forEach(file => { const item = document.createElement("div"); item.className = "attachment-preview-item"; const image = document.createElement("img"); image.className = "attachment-preview-image"; image.alt = file.name || "Attached image"; const url = URL.createObjectURL(file); image.src = url; image.onload = () => URL.revokeObjectURL(url); const removeButton = document.createElement("button"); removeButton.type = "button"; removeButton.textContent = "×"; removeButton.setAttribute("aria-label",(file.name || "K\u00e9p") + " elt\u00e1vol\u00edt\u00e1sa"); // Identify by the file itself: a captured index goes stale after a removal. removeButton.onclick = event => { event.stopPropagation(); const at = staged.indexOf(file); if (at > -1) staged.splice(at,1); renderPreview(); }; item.append(image,removeButton); preview.appendChild(item); }); }; const addFiles = files => { const result = validateImages(files); staged.push(...result.accepted); showError(result.errors.join(" ")); renderPreview(); }; // Bound on the panel, not the textarea, so a paste lands wherever focus sits. panel.addEventListener("paste",event => { const files = [...(event.clipboardData?.items || [])].filter(item => item.kind === "file").map(item => item.getAsFile()).filter(Boolean); if (files.length) { event.preventDefault(); event.stopPropagation(); addFiles(files); } }); panel.ondragover = event => { event.preventDefault(); event.stopPropagation(); panel.classList.add("drag"); }; panel.ondragleave = event => { event.preventDefault(); event.stopPropagation(); panel.classList.remove("drag"); }; panel.ondrop = event => { event.preventDefault(); event.stopPropagation(); panel.classList.remove("drag"); addFiles(event.dataTransfer.files); }; async function submit() { if (save.disabled) return; const body = textarea.value.trim(); if (!body && !staged.length) { showError("\u00cdrj valamit, vagy tegy\u00e9l be k\u00e9pet."); return; } const id = crypto.randomUUID(); const attachments = []; save.disabled = true; save.textContent = staged.length ? "Felt\u00f6lt\u00e9s…" : "Ment\u00e9s…"; showError(""); try { for (const file of staged) attachments.push(await uploadAttachment(file,id)); const record = {id,cid,label:labelFor(el,cid),text:body,author:storedAuthor() || "Reviewer",ts:Date.now(),resolved:false,doc:DOC,xPct:ratios.xPct,yPct:ratios.yPct,attachments}; await post(record); comments.push(record); writeDraft(cid,""); closePanel(); updateToolbar(); renderPins(); } catch (caught) { await Promise.all(attachments.map(attachment => deleteAttachment(attachment,id))); save.disabled = false; save.textContent = "Ment\u00e9s"; showError(caught.message || "Nem siker\u00fclt menteni. Pr\u00f3b\u00e1ld \u00fajra."); } } save.onclick = event => { event.stopPropagation(); submit(); }; panel.onkey = event => { if (!(event.metaKey || event.ctrlKey) || event.key !== "Enter") return false; event.preventDefault(); submit(); return true; }; positionPanel(panel,point); // Focus before returning from the click handler so a fast first keystroke is // entered in the composer instead of being swallowed while focus is still on the page. textarea.focus(); } function openThread(el, cid, point) { const thread = comments.filter(item => item.cid === cid).sort((a,b) => a.ts - b.ts); const panel = panelShell(el,cid,threadCount(thread)); const list = document.createElement("div"); list.className = "thread"; thread.forEach(record => { const note = document.createElement("article"); note.className = "note" + (record.resolved ? " resolved" : ""); const meta = document.createElement("div"); meta.className = "meta"; const who = document.createElement("span"); who.textContent = record.author || "Reviewer"; const when = document.createElement("span"); when.textContent = new Date(record.ts).toLocaleString(); meta.append(who,when); const body = document.createElement("div"); if (record.kind === "edit") { body.className = "diff"; const was = document.createElement("div"); was.className = "was"; was.textContent = record.before || ""; const now = document.createElement("div"); now.className = "now"; now.textContent = record.deleted ? "(t\u00f6r\u00f6lve)" : (record.text || ""); body.append(was,now); } else { body.className = "text"; body.textContent = record.text || ""; } const attachmentList = document.createElement("div"); attachmentList.className = "thread-attachments"; (record.attachments || []).forEach(attachment => { const original = safeImageUrl(attachment.originalUrl), thumbnail = safeImageUrl(attachment.thumbnailUrl); if (!original || !thumbnail) return; const link = document.createElement("a"); link.href = original; link.target = "_blank"; link.rel = "noreferrer"; const image = document.createElement("img"); image.src = thumbnail; image.alt = "Attached image"; link.appendChild(image); attachmentList.appendChild(link); }); const actions = document.createElement("div"); actions.className = "note-actions"; const resolve = document.createElement("button"); resolve.type = "button"; resolve.textContent = record.resolved ? "\u00dajranyit\u00e1s" : "K\u00e9sz"; const edit = document.createElement("button"); edit.type = "button"; edit.className = "edit"; edit.textContent = "Szerkeszt\u00e9s"; const del = document.createElement("button"); del.type = "button"; del.className = "danger"; del.textContent = "T\u00f6rl\u00e9s"; resolve.onclick = async event => { event.stopPropagation(); const before = record.resolved; record.resolved = !before; try { await post(record); openThread(el,cid,point); renderPins(); } catch (_) { record.resolved = before; } }; edit.onclick = event => { event.stopPropagation(); const textarea = document.createElement("textarea"); textarea.value = record.text || ""; body.replaceWith(textarea); actions.innerHTML = ""; const saveEdit = document.createElement("button"); saveEdit.type = "button"; saveEdit.className = "edit"; saveEdit.textContent = "Ment\u00e9s"; const cancelEdit = document.createElement("button"); cancelEdit.type = "button"; cancelEdit.textContent = "M\u00e9gse"; actions.append(saveEdit,cancelEdit); textarea.focus(); saveEdit.onclick = async saveEvent => { saveEvent.stopPropagation(); const next = textarea.value.trim(); if (!next && !(record.attachments || []).length) return; const before = record.text, beforeTs = record.ts; record.text = next; record.ts = Date.now(); try { await post(record); openThread(el,cid,point); } catch (_) { record.text = before; record.ts = beforeTs; } }; cancelEdit.onclick = cancelEvent => { cancelEvent.stopPropagation(); openThread(el,cid,point); }; }; del.onclick = async event => { event.stopPropagation(); if (!confirm("T\u00f6rl\u00f6d ezt a megjegyz\u00e9st?")) return; try { await remove(record); await Promise.all((record.attachments || []).map(attachment => deleteAttachment(attachment,record.id))); comments = comments.filter(item => item.id !== record.id); if (record.kind === "edit") applyEdits(); openThread(el,cid,point); updateToolbar(); renderPins(); } catch (_) {} }; if (record.kind === "edit") actions.append(resolve,del); else actions.append(resolve,edit,del); note.append(meta,body); if (attachmentList.childElementCount) note.appendChild(attachmentList); note.appendChild(actions); list.appendChild(note); }); if (!thread.length) { const empty = document.createElement("div"); empty.className="empty"; empty.textContent="Nincs megjegyz\u00e9s."; list.appendChild(empty); } const add = document.createElement("button"); add.type="button"; add.className="primary"; add.textContent="\u00daj megjegyz\u00e9s"; const actions = document.createElement("div"); actions.className="actions"; actions.appendChild(add); add.onclick = event => { event.stopPropagation(); const rect = window.CanvasReview.rect(el); const ratios = {xPct:(point.left-rect.left)/Math.max(1,rect.width),yPct:(point.top-rect.top)/Math.max(1,rect.height)}; withAuthor(el, point, () => openComposer(el,cid,point,ratios)); }; panel.append(list,actions); positionPanel(panel,point); } const toolbar = document.createElement("div"); toolbar.className = "toolbar"; const statusDot = document.createElement("span"); statusDot.className = "dot"; const state = document.createElement("span"); state.className = "state"; const toggle = document.createElement("button"); toggle.type="button"; toggle.className="toggle"; toolbar.append(brandMark("brand"),statusDot,state,toggle); shadow.appendChild(toolbar); function flash(message) { notice = message; clearTimeout(noticeTimer); noticeTimer = setTimeout(() => { notice = ""; updateToolbar(); }, 5000); updateToolbar(); } function updateToolbar() { toolbar.classList.toggle("off",!enabled); toolbar.toggleAttribute("data-canvas-notice",Boolean(notice)); state.textContent = notice || threadCount(comments) + (online ? "" : " · t\u00f6lt\u00e9s"); toggle.textContent = enabled ? "V\u00e9lem\u00e9ny be" : "V\u00e9lem\u00e9ny ki"; toggle.setAttribute("aria-pressed",String(enabled)); } // The button flips between on and off and never hides the bar; only the shortcut does. toggle.onclick = event => { event.stopPropagation(); setMode(mode === MODE_ON ? MODE_OFF : MODE_ON); }; function setMode(next) { if (next === MODE_HIDDEN && mode !== MODE_HIDDEN) visibleMode = mode; mode = next; enabled = mode === MODE_ON; closePanel(); host.style.display = mode === MODE_HIDDEN ? "none" : ""; updateToolbar(); renderPins(); } ["pointerdown","mousedown","focusin"].forEach(type => shadow.addEventListener(type,event => event.stopPropagation())); document.addEventListener("pointermove", event => { if (!enabled || activePanel || editing) return; const next = targetFromEvent(event); if (next !== highlighted) setHighlight(next); },true); document.addEventListener("click", event => { if (!enabled || event.composedPath().includes(host)) return; // Clicks inside the element being rewritten place the caret; they are not targeting. if (editing && editing.el.contains(event.target)) return; const el = targetFromEvent(event); if (!el) return; event.preventDefault(); event.stopPropagation(); // An open editor or a composer holding unsaved work is settled by this click and // never silently swapped onto another target. The next click starts the new one. if (editing) { commitEdit(); return; } if (activePanel && activePanel.dirty && activePanel.dirty()) { closePanel(); return; } const rect = el.getBoundingClientRect(); const point = {left:event.clientX,top:event.clientY}; const ratios = {xPct:(event.clientX-rect.left)/Math.max(1,rect.width),yPct:(event.clientY-rect.top)/Math.max(1,rect.height)}; // Text rewrites in place; everything else comments. Ctrl or Command asks for the // comment on a text layer too. const cid = cidFor(el); if (!(event.metaKey || event.ctrlKey) && textLayer(el)) { withAuthor(el, point, () => openInlineEditor(el,cid,ratios)); return; } withAuthor(el, point, () => openComposer(el,cid,point,ratios)); },true); // A host page that binds Space or the arrow keys (a slide deck) must never see the // reviewer typing, so the layer's keys are handled here and stopped in the capture // phase, before the page or any of its own listeners can read them. Stopping the // propagation is not preventing the default, so typing still enters the field. // An open panel counts too: its field is focused a tick after it is drawn, and the // first keystroke of a fast reviewer must not fall through to the page in between. const layerKey = event => Boolean(editing) || Boolean(activePanel) || event.composedPath().includes(host); const composing = event => Boolean(editing) || Boolean(activePanel && event.composedPath().includes(activePanel)); const typing = event => event.isComposing || composing(event) || event.composedPath().some(node => node instanceof Element && (node.isContentEditable || node.matches("input,textarea,select,[role='textbox']"))); const visibilityShortcut = event => event.code === "ArrowDown" && (event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey; const swallow = event => { event.stopPropagation(); event.stopImmediatePropagation(); }; // Bound on the window, not on the document: a host page that already listens on // the document in the capture phase would otherwise read the key before us. window.addEventListener("keydown", event => { if (visibilityShortcut(event) && !typing(event)) { event.preventDefault(); swallow(event); if (!event.repeat) setMode(mode === MODE_HIDDEN ? visibleMode : MODE_HIDDEN); return; } // The cycle answers from anywhere except mid-sentence in the layer's own fields. if (event.code === "Space" && (event.ctrlKey || event.metaKey) && !composing(event)) { event.preventDefault(); swallow(event); setMode((mode + 1) % 3); return; } // Escape still closes an open panel from anywhere, exactly as it did before. if (!layerKey(event)) { if (event.key === "Escape") closePanel(); return; } if (editing) { if (event.key === "Escape") { event.preventDefault(); cancelEdit(); } else if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); commitEdit(); } } else { // The open panel reads its own keys here, and Escape closes what it leaves. const handled = activePanel && activePanel.onkey && activePanel.onkey(event); if (!handled && event.key === "Escape") closePanel(); } swallow(event); }, true); // A stopped keydown still leaves a keypress and a keyup for the page to act on, // the shortcut's own Space included. Bare modifier keys are left alone. ["keypress","keyup"].forEach(type => window.addEventListener(type, event => { if (layerKey(event) || (visibilityShortcut(event) && !typing(event)) || (event.code === "Space" && (event.ctrlKey || event.metaKey))) swallow(event); }, true)); window.addEventListener("scroll", () => { setHighlight(highlighted); renderPins(); },{passive:true}); window.addEventListener("resize", () => { setHighlight(highlighted); renderPins(); if (activePanel && activePanel.point) clampPanel(activePanel, activePanel.point); }); async function load() { registerTargets(); updateToolbar(); try { const response = await fetch(COMMENT_WORKER + "/comments?doc=" + encodeURIComponent(DOC)); if (!response.ok) throw new Error("Load failed"); comments = (await response.json()).map(decode); online = true; } catch (_) { comments = []; online = false; } applyEdits(); updateToolbar(); renderPins(); } window.CommentHTML = Object.freeze({refresh:() => {registerTargets();applyEdits();renderPins();},documentId:DOC}); load(); })();