diff --git a/gulp/res/js/live.js b/gulp/res/js/live.js index 460e0113..a86db09c 100644 --- a/gulp/res/js/live.js +++ b/gulp/res/js/live.js @@ -15,6 +15,74 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa } let lastPostId; + const anchors = document.getElementsByClassName('anchor'); + if (anchors.length === 0) { + return; //url matches, but on a 404 page so dont bother with the rest + } + + let liveEnabled = localStorage.getItem('live') == 'true'; + let notificationsEnabled = localStorage.getItem('notifications') == 'true'; + let scrollEnabled = localStorage.getItem('scroll') == 'true'; + + lastPostId = anchors[anchors.length - 1].id; + const thread = document.querySelector('.thread'); + const newPost = (data) => { + console.log('got new post'); + lastPostId = data.postId; + const postData = data; + //create a new post + const postHtml = post({ post: postData }); + //add it to the end of the thread + thread.insertAdjacentHTML('beforeend', postHtml); + for (let j = 0; j < postData.quotes.length; j++) { + const quoteData = postData.quotes[j]; + //add backlink to quoted posts + const quotedPost = document.getElementById(quoteData.postId).nextSibling; + let replies = quotedPost.querySelector('.replies'); + if (!replies) { + const quotedPostData = quotedPost.querySelector('.post-data'); + const newRepliesDiv = document.createElement('div'); + newRepliesDiv.textContent = 'Replies: '; + ['replies', 'mt-5', 'ml-5'].forEach(c => { + newRepliesDiv.classList.add(c); + }); + quotedPostData.appendChild(newRepliesDiv); + replies = newRepliesDiv; + } + if (new RegExp(`>>${postData.postId}(\s|$)`).test(replies.innerText)) { + //reply link already exists (probably from a late catch up + continue; + } + const newReply = document.createElement('a'); + const space = document.createTextNode(' '); + newReply.href = `${window.location.pathname}#${postData.postId}`; + newReply.textContent = `>>${postData.postId}`; + newReply.classList.add('quote'); + replies.appendChild(newReply); + replies.appendChild(space); + } + const newPostAnchor = document.getElementById(postData.postId); + const newPost = newPostAnchor.nextSibling; + if (scrollEnabled) { + newPostAnchor.scrollIntoView(); //scroll to post if enabled; + } + if (notificationsEnabled) { + new Notification(document.title, { + body: postData.nomarkup ? postData.nomarkup.substring(0,100) : '' + }); + } + const newPostEvent = new CustomEvent('addPost', { + detail: { + post: newPost, + postId: postData.postId, + json: postData + } + }); + //dispatch the event so quote click handlers, image expand, etc can be added in separate scripts by listening to the event + window.dispatchEvent(newPostEvent); + } + + const jsonPath = window.location.pathname.replace(/\.html$/, '.json'); const jsonCatchup = async () => { console.log('catching up after reconnect'); @@ -39,70 +107,9 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa } const startLive = () => { - const anchors = document.getElementsByClassName('anchor'); - if (anchors.length === 0) { - return; //url matches, but on a 404 page so dont bother with the rest - } - lastPostId = anchors[anchors.length - 1].id; - const newPost = (data) => { - console.log('got new post'); - lastPostId = data.postId; - const postData = data; - //create a new post - const postHtml = post({ post: postData }); - //add it to the end of the thread - thread.insertAdjacentHTML('beforeend', postHtml); - for (let j = 0; j < postData.quotes.length; j++) { - const quoteData = postData.quotes[j]; - //add backlink to quoted posts - const quotedPost = document.getElementById(quoteData.postId).nextSibling; - let replies = quotedPost.querySelector('.replies'); - if (!replies) { - const quotedPostData = quotedPost.querySelector('.post-data'); - const newRepliesDiv = document.createElement('div'); - newRepliesDiv.textContent = 'Replies: '; - ['replies', 'mt-5', 'ml-5'].forEach(c => { - newRepliesDiv.classList.add(c); - }); - quotedPostData.appendChild(newRepliesDiv); - replies = newRepliesDiv; - } - if (new RegExp(`>>${postData.postId}(\s|$)`).test(replies.innerText)) { - //reply link already exists (probably from a late catch up - continue; - } - const newReply = document.createElement('a'); - const space = document.createTextNode(' '); - newReply.href = `${window.location.pathname}#${postData.postId}`; - newReply.textContent = `>>${postData.postId}`; - newReply.classList.add('quote'); - replies.appendChild(newReply); - replies.appendChild(space); - } - const newPostAnchor = document.getElementById(postData.postId); - const newPost = newPostAnchor.nextSibling; - if (scrollEnabled) { - newPostAnchor.scrollIntoView(); //scroll to post if enabled; - } - if (notificationsEnabled) { - new Notification(document.title, { - body: postData.nomarkup ? postData.nomarkup.substring(0,100) : '' - }); - } - const newPostEvent = new CustomEvent('addPost', { - detail: { - post: newPost, - postId: postData.postId, - json: postData - } - }); - //dispatch the event so quote click handlers, image expand, etc can be added in separate scripts by listening to the event - window.dispatchEvent(newPostEvent); - } const roomParts = window.location.pathname.replace(/\.html$/, '').split('/'); const room = `${roomParts[1]}-${roomParts[3]}`; - const thread = document.querySelector('.thread'); - socket = io({ transports: ['websocket'] }); //no polling + socket = io({ transports: ['websocket', 'polling'] }); socket.on('connect', () => { console.log('joined room', room); updateLive('Connected for live posts', '#0de600'); @@ -130,10 +137,6 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa socket.on('newPost', newPost); } - let liveEnabled = localStorage.getItem('live') == 'true'; - let notificationsEnabled = localStorage.getItem('notifications') == 'true'; - let scrollEnabled = localStorage.getItem('scroll') == 'true'; - const liveSetting = document.getElementById('live-setting'); const notificationSetting = document.getElementById('notification-setting'); const scrollSetting = document.getElementById('scroll-setting');