424 lines
17 KiB
JavaScript
424 lines
17 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
const article = document.querySelector('[data-document-id]');
|
|
if (!article) return;
|
|
|
|
const documentId = article.dataset.documentId;
|
|
const documentHash = article.dataset.documentHash;
|
|
const canComment = article.dataset.canComment === 'true';
|
|
const workspaceShell = article.closest('.workspace-shell--document');
|
|
const commentsAsideList = document.querySelector('[data-comments-aside-list]');
|
|
const commentsAsideListMobile = document.querySelector('[data-comments-aside-list-mobile]');
|
|
const stripTrack = document.querySelector('[data-comments-strip-track]');
|
|
const commentsAside = document.querySelector('[data-comments-aside]');
|
|
const commentsSheetToggle = document.querySelector('[data-toggle-comments]');
|
|
const commentsSheetClose = document.querySelector('[data-close-comments]');
|
|
const commentToggle = document.querySelector('[data-comment-toggle]');
|
|
const watchButton = document.querySelector('[data-document-watch]');
|
|
const historyButtons = document.querySelectorAll('[data-comments-history]');
|
|
const commentVisibilityKey = `cairnquire:document-comments:${documentId}`;
|
|
const commentsByAnchor = new Map();
|
|
const elementsByAnchor = new Map();
|
|
let includeResolved = false;
|
|
let watching = false;
|
|
|
|
function readCommentVisibility() {
|
|
try {
|
|
return window.localStorage.getItem(commentVisibilityKey) === 'hidden';
|
|
} catch (err) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function commentsHidden() {
|
|
return !workspaceShell?.classList.contains('comments-visible');
|
|
}
|
|
|
|
function setCommentsHidden(hidden) {
|
|
article.classList.toggle('comments-hidden', hidden);
|
|
workspaceShell?.classList.toggle('comments-visible', !hidden);
|
|
try {
|
|
window.localStorage.setItem(commentVisibilityKey, hidden ? 'hidden' : 'visible');
|
|
} catch (err) {
|
|
// Storage can be unavailable in private browsing contexts.
|
|
}
|
|
if (commentToggle) {
|
|
commentToggle.setAttribute('aria-pressed', hidden ? 'false' : 'true');
|
|
commentToggle.setAttribute('aria-label', hidden ? 'Show comments' : 'Hide comments');
|
|
commentToggle.title = hidden ? 'Show comments' : 'Hide comments';
|
|
}
|
|
if (!hidden) {
|
|
renderCommentsAside();
|
|
updateStripMarkers();
|
|
}
|
|
}
|
|
|
|
setCommentsHidden(readCommentVisibility());
|
|
commentToggle?.addEventListener('click', () => setCommentsHidden(!commentsHidden()));
|
|
|
|
function hashParagraph(el) {
|
|
const text = (el.textContent || '').trim();
|
|
if (!text) return null;
|
|
let hash = 0;
|
|
for (let i = 0; i < text.length; i++) {
|
|
hash = ((hash << 5) - hash) + text.charCodeAt(i);
|
|
hash &= hash;
|
|
}
|
|
return 'h' + Math.abs(hash).toString(36);
|
|
}
|
|
|
|
function addCommentButton(el, anchorHash) {
|
|
const button = document.createElement('button');
|
|
button.className = 'comment-anchor-btn';
|
|
button.type = 'button';
|
|
button.title = 'Add comment';
|
|
button.setAttribute('aria-label', 'Add comment');
|
|
button.innerHTML = `
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 15a2 2 0 0 1-2 2H8l-5 4V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"></path>
|
|
<path d="M12 8v4"></path><path d="M10 10h4"></path>
|
|
</svg>
|
|
<span class="comment-anchor-count" aria-hidden="true" hidden></span>
|
|
<span class="sr-only">Add comment</span>`;
|
|
button.addEventListener('click', () => createComment(anchorHash));
|
|
el.appendChild(button);
|
|
}
|
|
|
|
function updateCommentButtonState(el, comments) {
|
|
const button = el.querySelector('.comment-anchor-btn');
|
|
const count = comments.filter(comment => !comment.resolvedAt).length;
|
|
if (button) {
|
|
const hasComments = count > 0;
|
|
button.classList.toggle('comment-anchor-btn--has-comments', hasComments);
|
|
const label = hasComments ? `${count} comment${count === 1 ? '' : 's'}` : 'Add comment';
|
|
button.setAttribute('aria-label', label);
|
|
button.title = label;
|
|
const countNode = button.querySelector('.comment-anchor-count');
|
|
if (countNode) {
|
|
countNode.hidden = !hasComments;
|
|
countNode.textContent = count > 99 ? '99+' : String(count);
|
|
}
|
|
}
|
|
el.dataset.hasComments = comments.length > 0 ? 'true' : 'false';
|
|
}
|
|
|
|
async function createComment(anchorHash, parentId) {
|
|
const promptText = parentId ? 'Reply to this comment:' : 'Comment on this section:';
|
|
const content = window.prompt(promptText);
|
|
if (!content || !content.trim()) return;
|
|
try {
|
|
const response = await fetch('/api/comments', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
documentId,
|
|
versionHash: documentHash,
|
|
content: content.trim(),
|
|
anchorHash,
|
|
parentId: parentId || undefined,
|
|
}),
|
|
});
|
|
if (!response.ok) throw new Error(await response.text());
|
|
await loadCommentsForAnchor(anchorHash);
|
|
} catch (err) {
|
|
window.alert('Failed to post comment: ' + err.message);
|
|
}
|
|
}
|
|
|
|
async function resolveThread(comment, anchorHash) {
|
|
if (!window.confirm('Resolve this comment thread?')) return;
|
|
try {
|
|
const response = await fetch(`/api/comments/${encodeURIComponent(comment.id)}/resolve`, { method: 'POST' });
|
|
if (!response.ok) throw new Error(await response.text());
|
|
await loadCommentsForAnchor(anchorHash);
|
|
} catch (err) {
|
|
window.alert('Failed to resolve comment: ' + err.message);
|
|
}
|
|
}
|
|
|
|
async function loadCommentsForAnchor(anchorHash) {
|
|
const element = elementsByAnchor.get(anchorHash);
|
|
if (!element) return;
|
|
const params = new URLSearchParams({ document_id: documentId, anchor_hash: anchorHash });
|
|
if (includeResolved) params.set('include_resolved', 'true');
|
|
try {
|
|
const response = await fetch(`/api/comments?${params}`);
|
|
if (!response.ok) return;
|
|
const data = await response.json();
|
|
const comments = data.comments || [];
|
|
commentsByAnchor.set(anchorHash, comments);
|
|
renderInlineComments(element, anchorHash, comments);
|
|
renderCommentsAside();
|
|
updateStripMarkers();
|
|
} catch (err) {
|
|
console.error('load comments', err);
|
|
}
|
|
}
|
|
|
|
function buildCommentForest(comments) {
|
|
const nodes = new Map(comments.map(comment => [comment.id, { comment, children: [] }]));
|
|
const roots = [];
|
|
comments.forEach(comment => {
|
|
const node = nodes.get(comment.id);
|
|
const parent = comment.parentId ? nodes.get(comment.parentId) : null;
|
|
if (parent) parent.children.push(node);
|
|
else roots.push(node);
|
|
});
|
|
return roots;
|
|
}
|
|
|
|
function renderThreadNode(node, anchorHash, variant) {
|
|
const comment = node.comment;
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = `comment-thread${comment.resolvedAt ? ' is-resolved' : ''}`;
|
|
wrapper.dataset.commentId = comment.id;
|
|
|
|
const item = document.createElement('div');
|
|
item.className = variant === 'aside' ? 'comments-aside-item__comment' : 'comment-item';
|
|
|
|
const meta = document.createElement('div');
|
|
meta.className = variant === 'aside' ? 'comments-aside-item__meta' : 'comment-meta';
|
|
const author = document.createElement('strong');
|
|
author.textContent = comment.authorName || 'Anonymous';
|
|
const time = document.createElement('time');
|
|
time.textContent = formatDate(comment.createdAt);
|
|
meta.append(author, time);
|
|
if (comment.resolvedAt) {
|
|
const status = document.createElement('span');
|
|
status.className = 'comment-status';
|
|
status.textContent = 'Resolved';
|
|
meta.appendChild(status);
|
|
}
|
|
|
|
const body = document.createElement('div');
|
|
body.className = variant === 'aside' ? 'comments-aside-item__body' : 'comment-body';
|
|
body.textContent = comment.content;
|
|
item.append(meta, body);
|
|
|
|
if (canComment && !comment.resolvedAt) {
|
|
const actions = document.createElement('div');
|
|
actions.className = 'comment-actions';
|
|
const reply = document.createElement('button');
|
|
reply.type = 'button';
|
|
reply.className = 'comment-action';
|
|
reply.textContent = 'Reply';
|
|
reply.addEventListener('click', () => createComment(anchorHash, comment.id));
|
|
actions.appendChild(reply);
|
|
if (!comment.parentId) {
|
|
const resolve = document.createElement('button');
|
|
resolve.type = 'button';
|
|
resolve.className = 'comment-action';
|
|
resolve.textContent = 'Resolve thread';
|
|
resolve.addEventListener('click', () => resolveThread(comment, anchorHash));
|
|
actions.appendChild(resolve);
|
|
}
|
|
item.appendChild(actions);
|
|
}
|
|
wrapper.appendChild(item);
|
|
|
|
if (node.children.length) {
|
|
const replies = document.createElement('div');
|
|
replies.className = 'comment-thread__replies';
|
|
node.children.forEach(child => replies.appendChild(renderThreadNode(child, anchorHash, variant)));
|
|
wrapper.appendChild(replies);
|
|
}
|
|
return wrapper;
|
|
}
|
|
|
|
function renderInlineComments(el, anchorHash, comments) {
|
|
el.querySelector('.comment-list')?.remove();
|
|
updateCommentButtonState(el, comments);
|
|
if (!comments.length) return;
|
|
const list = document.createElement('div');
|
|
list.className = 'comment-list';
|
|
buildCommentForest(comments).forEach(root => list.appendChild(renderThreadNode(root, anchorHash, 'inline')));
|
|
el.appendChild(list);
|
|
}
|
|
|
|
function buildAsideItem(anchorHash, el, comments) {
|
|
if (!comments.length) return null;
|
|
const asideItem = document.createElement('div');
|
|
asideItem.className = 'comments-aside-item';
|
|
asideItem.dataset.anchorHash = anchorHash;
|
|
|
|
const target = document.createElement('button');
|
|
target.className = 'comments-aside-item__target';
|
|
target.type = 'button';
|
|
target.textContent = el.dataset.commentTarget || 'Commented section';
|
|
target.addEventListener('click', () => el.scrollIntoView({ behavior: 'smooth', block: 'center' }));
|
|
asideItem.appendChild(target);
|
|
buildCommentForest(comments).forEach(root => asideItem.appendChild(renderThreadNode(root, anchorHash, 'aside')));
|
|
return asideItem;
|
|
}
|
|
|
|
function renderCommentsInto(container) {
|
|
if (!container) return;
|
|
container.innerHTML = '';
|
|
let rendered = 0;
|
|
elementsByAnchor.forEach((el, anchorHash) => {
|
|
const item = buildAsideItem(anchorHash, el, commentsByAnchor.get(anchorHash) || []);
|
|
if (item) {
|
|
container.appendChild(item);
|
|
rendered++;
|
|
}
|
|
});
|
|
if (!rendered) {
|
|
container.innerHTML = `<p class="document-comments-aside__empty">${includeResolved ? 'No comments found.' : 'No active comments yet.'}</p>`;
|
|
}
|
|
}
|
|
|
|
function renderCommentsAside() {
|
|
renderCommentsInto(commentsAsideList);
|
|
renderCommentsInto(commentsAsideListMobile);
|
|
}
|
|
|
|
function updateStripMarkers() {
|
|
if (!stripTrack) return;
|
|
stripTrack.innerHTML = '';
|
|
const shell = document.querySelector('.document-shell');
|
|
if (!shell) return;
|
|
elementsByAnchor.forEach((el, anchorHash) => {
|
|
if (!(commentsByAnchor.get(anchorHash) || []).length) return;
|
|
const rect = el.getBoundingClientRect();
|
|
const shellRect = shell.getBoundingClientRect();
|
|
const relativeTop = rect.top - shellRect.top + shell.scrollTop;
|
|
const percent = (relativeTop / shell.scrollHeight) * 100;
|
|
const marker = document.createElement('button');
|
|
marker.className = 'document-comments-strip__marker';
|
|
marker.type = 'button';
|
|
marker.style.top = Math.max(0, Math.min(95, percent)) + '%';
|
|
marker.dataset.anchorHash = anchorHash;
|
|
marker.title = 'Jump to comments';
|
|
marker.addEventListener('click', () => {
|
|
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
if (commentsHidden()) setCommentsHidden(false);
|
|
commentsAsideList?.querySelector(`[data-anchor-hash="${anchorHash}"]`)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
});
|
|
stripTrack.appendChild(marker);
|
|
});
|
|
}
|
|
|
|
function initBidirectionalHover() {
|
|
const body = document.querySelector('.markdown-body');
|
|
if (!body || !commentsAsideList) return;
|
|
body.addEventListener('mouseover', event => toggleHighlight(event.target.closest('.commentable'), true));
|
|
body.addEventListener('mouseout', event => toggleHighlight(event.target.closest('.commentable'), false));
|
|
commentsAsideList.addEventListener('mouseover', event => toggleAsideHighlight(event.target.closest('.comments-aside-item'), true));
|
|
commentsAsideList.addEventListener('mouseout', event => toggleAsideHighlight(event.target.closest('.comments-aside-item'), false));
|
|
}
|
|
|
|
function toggleHighlight(el, active) {
|
|
if (!el) return;
|
|
const hash = el.dataset.anchorHash;
|
|
el.classList.toggle('is-highlighted', active);
|
|
commentsAsideList?.querySelector(`[data-anchor-hash="${hash}"]`)?.classList.toggle('is-highlighted', active);
|
|
stripTrack?.querySelector(`[data-anchor-hash="${hash}"]`)?.classList.toggle('is-active', active);
|
|
}
|
|
|
|
function toggleAsideHighlight(item, active) {
|
|
if (!item) return;
|
|
toggleHighlight(elementsByAnchor.get(item.dataset.anchorHash), active);
|
|
}
|
|
|
|
function setCommentsSheetOpen(open) {
|
|
if (!commentsAside) return;
|
|
commentsAside.classList.toggle('is-open', open);
|
|
commentsSheetToggle?.setAttribute('aria-expanded', String(open));
|
|
if (open) {
|
|
document.body.classList.add('drawer-open');
|
|
renderCommentsAside();
|
|
} else if (!document.querySelector('[data-picker-drawer].is-open, [data-meta-drawer].is-open')) {
|
|
document.body.classList.remove('drawer-open');
|
|
}
|
|
}
|
|
|
|
commentsSheetToggle?.addEventListener('click', () => setCommentsSheetOpen(!commentsAside?.classList.contains('is-open')));
|
|
commentsSheetClose?.addEventListener('click', () => setCommentsSheetOpen(false));
|
|
|
|
function setWatchState(nextWatching) {
|
|
watching = nextWatching;
|
|
if (!watchButton) return;
|
|
watchButton.setAttribute('aria-pressed', String(watching));
|
|
const label = watchButton.querySelector('[data-document-watch-label]');
|
|
if (label) label.textContent = watching ? 'Unwatch document' : 'Watch document';
|
|
}
|
|
|
|
async function loadWatchStatus() {
|
|
if (!watchButton) return;
|
|
try {
|
|
const response = await fetch(`/api/watch/status?document_id=${encodeURIComponent(documentId)}`);
|
|
if (!response.ok) return;
|
|
const data = await response.json();
|
|
setWatchState(Boolean(data.watching));
|
|
} catch (err) {
|
|
console.error('load watch status', err);
|
|
}
|
|
}
|
|
|
|
async function toggleWatch() {
|
|
if (!watchButton) return;
|
|
watchButton.disabled = true;
|
|
try {
|
|
const response = await fetch('/api/watch/document', {
|
|
method: watching ? 'DELETE' : 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ documentId }),
|
|
});
|
|
if (!response.ok) throw new Error(await response.text());
|
|
setWatchState(!watching);
|
|
} catch (err) {
|
|
window.alert('Failed to update watch: ' + err.message);
|
|
} finally {
|
|
watchButton.disabled = false;
|
|
}
|
|
}
|
|
|
|
watchButton?.addEventListener('click', toggleWatch);
|
|
|
|
function updateHistoryButtons() {
|
|
historyButtons.forEach(button => {
|
|
button.setAttribute('aria-pressed', String(includeResolved));
|
|
button.textContent = includeResolved ? 'Hide resolved' : 'Show resolved';
|
|
});
|
|
}
|
|
|
|
historyButtons.forEach(button => button.addEventListener('click', async () => {
|
|
includeResolved = !includeResolved;
|
|
updateHistoryButtons();
|
|
await Promise.all(Array.from(elementsByAnchor.keys(), loadCommentsForAnchor));
|
|
}));
|
|
|
|
function formatDate(iso) {
|
|
return new Date(iso).toLocaleString();
|
|
}
|
|
|
|
function init() {
|
|
const body = document.querySelector('.markdown-body');
|
|
if (!body) return;
|
|
const commentables = body.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, blockquote, pre');
|
|
commentables.forEach(el => {
|
|
const targetText = (el.textContent || '').replace(/\s+/g, ' ').trim();
|
|
const anchorHash = hashParagraph(el);
|
|
if (!anchorHash) return;
|
|
el.dataset.anchorHash = anchorHash;
|
|
el.dataset.commentTarget = targetText.length > 120 ? targetText.slice(0, 120) + '…' : targetText;
|
|
el.classList.add('commentable');
|
|
elementsByAnchor.set(anchorHash, el);
|
|
if (canComment) addCommentButton(el, anchorHash);
|
|
loadCommentsForAnchor(anchorHash);
|
|
});
|
|
renderCommentsAside();
|
|
initBidirectionalHover();
|
|
loadWatchStatus();
|
|
updateHistoryButtons();
|
|
const shell = document.querySelector('.document-shell');
|
|
shell?.addEventListener('scroll', () => requestAnimationFrame(updateStripMarkers));
|
|
window.addEventListener('resize', () => requestAnimationFrame(updateStripMarkers));
|
|
setTimeout(updateStripMarkers, 100);
|
|
}
|
|
|
|
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
|
|
else init();
|
|
})();
|