` /*let comments = [] window.addEventListener('DOMContentLoaded', () => { comments = Array.from(document.getElementsByClassName('comment')) setInterval(() => { comments = Array.from(document.getElementsByClassName('comment')) }, 1000) }) window.addEventListener('scroll', e => { // get comments the user has scrolled past const passedComments = comments.filter(comment => { comment.checkableTop = comment.checkableTop || comment.getBoundingClientRect().top return comment.checkableTop < 0 }) for (const comment of comments) { if (comment === passedComments[passedComments.length - 1] || comments[0]) { # comment.style.position = 'sticky' # comment.style.top = '85px' # comment.style.zIndex = '1000' } else { comment.style.position = 'relative' comment.style.zIndex = '999' } } })*/ let fetchedInitialComments = false; let commentsContainer; window.addEventListener('scroll', e => { if (fetchedInitialComments) { return; } commentsContainer = commentsContainer || document.getElementsByClassName('comments-container')[0] if (commentsContainer.getBoundingClientRect().top < window.innerHeight) { fetchComments() } }) let commentsById = {} let fetchingComments = false; let loadedAllComments = false; function fetchComments() { if (fetchingComments || loadedAllComments) { return; } fetchingComments = true; let currentUrl = window.location.href; currentUrl = new URL(currentUrl.replace(/\/page\/[\d]+$/, '')); currentUrl.pathname += '/comments.json'; let commentsCount = document.querySelectorAll('.comment').length; currentUrl.searchParams.set('offset', commentsCount); fetchedInitialComments = true; fetch(currentUrl.toString(), { headers: new Headers({'content-type': 'application/json'}), }) .then(response => response.json()) .then(data => { const commentsElement = document.getElementById('comments-list'); if (data.comments.length == 0) { const revealButton = document.getElementById('revealComments'); revealButton.style.display = 'none'; loadedAllComments = true; } const commentCountElements = Array.from(document.getElementsByClassName('comments_count')); commentCountElements.forEach(element => { const count = data.total_count; element.innerText = element.innerText.replace(/\d+/, count);; }); for (const comment of data.comments) { const newComment = omegafy(commentTemplate, comment)[0]; if (comment.parent_id) { const parent = commentsById[comment.parent_id] || commentsElement.parentElement; const uls = parent?.getElementsByTagName('ul') uls[0]?.appendChild(newComment); } else { commentsElement.appendChild(newComment); } commentsById[comment.id] = newComment; ascribeCommentBehavior(newComment); } commentsCount = document.querySelectorAll('.comment').length; if (commentsCount >= data.total_count && document.getElementById('comments-list').parentElement.open) { try { document.getElementById('comments-list').parentElement.parentElement.getElementsByClassName('show')[0].remove(); } catch (e) { console.error(e); } } fetchingComments = false; updateUserInteractions(); }) .catch(error => { console.error('Error:', error); alert('An error occurred. Please try again.') fetchingComments = false; }); } let commentsLoaded = false; window.addEventListener('scroll', e => { const revealButton = document.getElementById('revealComments'); if (revealButton) { const rect = revealButton.getBoundingClientRect(); const inView = rect.top >= 0 && rect.bottom <= window.innerHeight; if (inView) { revealComments(); } } }); function revealComments(button) { commentsLoaded = true; const comments = document.getElementById('comments-list'); comments.parentElement.open = true; const revealButton = document.getElementById('revealComments') if (revealButton?.innerText == 'Show more comments') { fetchComments(); } if (revealButton) { revealButton.innerText = 'Show more comments' } return false; } function ascribeCommentBehavior(element) { const remoteLinks = Array.from(element.querySelectorAll('a[data-remote=true]')) remoteLinks.forEach(link => { $(link) .bind("ajax:success", function(evt, data, status, xhr){ if (data.error) { alert(data.error) return; } eval(evt.target.getAttribute('onsuccess') || 'null') }).bind("ajax:error", function(evt, data, status, xhr){ console.log('error', data) }); }) } function submitComment(form, event) { event.preventDefault(); form.style.display = 'none'; const formData = new FormData(form); const params = new URLSearchParams(formData); let currentUrl = window.location.href; currentUrl = new URL(currentUrl); if (currentUrl.searchParams.has('ab_test[split]')) { params.append('ab_test[split]', currentUrl.searchParams.get('ab_test[split]')); } params.append('redesign', 'true'); form.reset(); fetch(form.action, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: params }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response }) .then(response => response.json()) .then(data => { try { const commentCountElements = Array.from(document.getElementsByClassName('comments_count')); commentCountElements.forEach(element => { const count = parseInt(element.innerText.match(/\d+/)[0]); if (isNaN(count + 1)) { return; } element.innerText = element.innerText.replace(/\d+/, count + 1);; }); const newComment = omegafy(commentTemplate, data)[0]; const uls = form.parentElement.parentElement.getElementsByTagName('ul') uls[0]?.prepend(newComment); commentsById[data.id] = newComment; ascribeCommentBehavior(newComment); updateUserInteractions(); } catch (e) { console.error(e); } }) .catch(error => { console.error('Error:', error); alert('An error occurred. Please try again.') }); return false; } function decrementCommentsCount() { const commentCountElements = Array.from(document.getElementsByClassName('comments_count')); commentCountElements.forEach(element => { const count = parseInt(element.innerText.match(/\d+/)[0]); if (isNaN(count - 1)) { return; } element.innerText = element.innerText.replace(/\d+/, count);; }); } function likeComment(linkElement) { const pressed = linkElement.getAttribute('data-pressed'); if (pressed == 'true') { return; }; const counter = linkElement.getElementsByClassName('count')[0]; counter.innerText = parseInt(counter.innerText) + 1; linkElement.setAttribute('pressed', 'true'); const scoreCounter = linkElement.parentElement.getElementsByClassName('score-counter')[0]; scoreCounter.innerText = parseInt(scoreCounter.innerText) + 1; return false; } function dislikeComment(linkElement) { const pressed = linkElement.getAttribute('data-pressed'); if (pressed == 'true') { return; }; const counter = linkElement.getElementsByClassName('count')[0]; counter.innerText = parseInt(counter.innerText) + 1; linkElement.setAttribute('pressed', 'true'); const scoreCounter = linkElement.parentElement.getElementsByClassName('score-counter')[0]; scoreCounter.innerText = parseInt(scoreCounter.innerText) - 1; return false; }