From 854078d1bfae9dff675fab2997bb2cca80c2ed22 Mon Sep 17 00:00:00 2001 From: fatchan Date: Mon, 28 Oct 2019 03:02:15 +0000 Subject: [PATCH] dont try to start live when not in thread and approve appearance of some things --- gulp/res/css/style.css | 16 ++- gulp/res/js/captcha.js | 1 - gulp/res/js/live.js | 254 ++++++++++++++++++++-------------------- gulp/res/js/settings.js | 7 +- views/includes/head.pug | 4 +- 5 files changed, 146 insertions(+), 136 deletions(-) diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index c5daa560..8d1e1c9f 100644 --- a/gulp/res/css/style.css +++ b/gulp/res/css/style.css @@ -187,6 +187,8 @@ object { overflow: hidden; border: 1px solid var(--post-outline-color); box-sizing: border-box; + flex-grow: 1; + max-width: 300px; } .catalog-tile:hover { @@ -626,13 +628,14 @@ textarea { .postmenu { cursor: pointer; - width: 1.1em; - height: 1.1em; - position: relative; - top: 3px; + width: 1.5em; + height: 1em; color: var(--font-color); border: none; background: transparent; + position: relative; + top: 2px; + font-size: 9pt; } .catalog-tile.hidden { @@ -828,7 +831,10 @@ iframe.captcha { } hr { - color: var(--hr); + border-top: 1px solid var(--hr); + border-left: none; + border-right: none; + border-bottom: none; margin: 6px 0 5px 0; } diff --git a/gulp/res/js/captcha.js b/gulp/res/js/captcha.js index 33445b4f..1472b3b7 100644 --- a/gulp/res/js/captcha.js +++ b/gulp/res/js/captcha.js @@ -1,4 +1,3 @@ - window.addEventListener('DOMContentLoaded', (event) => { const captchaFields = document.getElementsByClassName('captchafield'); diff --git a/gulp/res/js/live.js b/gulp/res/js/live.js index 9197962b..0959189b 100644 --- a/gulp/res/js/live.js +++ b/gulp/res/js/live.js @@ -5,146 +5,150 @@ let liveEnabled = localStorage.getItem('live') == 'true'; const isThread = /\/\w+\/thread\/\d+.html/.test(window.location.pathname); let socket; -window.addEventListener('settingsReady', function(event) { //after domcontentloaded +if (isThread) { - const livecolor = document.getElementById('livecolor'); - const livetext = document.getElementById('livetext').childNodes[1]; - const updateLive = (message, color) => { - livecolor.style.backgroundColor = color; - livetext.nodeValue = message; - } + window.addEventListener('settingsReady', function(event) { //after domcontentloaded - 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 + const livecolor = document.getElementById('livecolor'); + const livetext = document.getElementById('livetext').childNodes[1]; + const updateLive = (message, color) => { + livecolor.style.backgroundColor = color; + livetext.nodeValue = message; } - let 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'); - newReply.href = `${window.location.pathname}#${postData.postId}`; - newReply.textContent = `>>${postData.postId} `; - newReply.classList.add('quote'); - replies.appendChild(newReply); + + 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 } - const newPost = document.getElementById(postData.postId).nextSibling; - const newPostEvent = new CustomEvent('addPost', { - detail: { - post: newPost, - postId: postData.postId + let 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'); + newReply.href = `${window.location.pathname}#${postData.postId}`; + newReply.textContent = `>>${postData.postId} `; + newReply.classList.add('quote'); + replies.appendChild(newReply); } - }); - //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'); - updateLive('Checking for missed posts...', 'yellow'); - let json; - try { - json = await fetch(jsonPath).then(res => res.json()); - } catch (e) { - console.error(e); + const newPost = document.getElementById(postData.postId).nextSibling; + const newPostEvent = new CustomEvent('addPost', { + detail: { + post: newPost, + postId: postData.postId + } + }); + //dispatch the event so quote click handlers, image expand, etc can be added in separate scripts by listening to the event + window.dispatchEvent(newPostEvent); } - if (json && json.replies && json.replies.length > 0) { - const newPosts = json.replies.filter(r => r.postId > lastPostId); //filter to only newer posts - if (newPosts.length > 0) { - for (let i = 0; i < newPosts.length; i++) { - newPost(newPosts[i]); + const jsonPath = window.location.pathname.replace(/\.html$/, '.json'); + const jsonCatchup = async () => { + console.log('catching up after reconnect'); + updateLive('Checking for missed posts...', 'yellow'); + let json; + try { + json = await fetch(jsonPath).then(res => res.json()); + } catch (e) { + console.error(e); + } + if (json && json.replies && json.replies.length > 0) { + const newPosts = json.replies.filter(r => r.postId > lastPostId); //filter to only newer posts + if (newPosts.length > 0) { + for (let i = 0; i < newPosts.length; i++) { + newPost(newPosts[i]); + } } } + setTimeout(() => { + updateLive('Connected for live posts', '#0de600'); + }, 1000); } - setTimeout(() => { + 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.on('connect', () => { + console.log('joined room', room); updateLive('Connected for live posts', '#0de600'); - }, 1000); + socket.emit('room', room); + }); + socket.on('pong', (latency) => { + if (socket.connected) { + updateLive(`Connected for live posts (${latency}ms)`, '#0de600'); + } + }); + socket.on('reconnect_error', () => { + updateLive('Error reconnecting', 'orange'); + }); + socket.on('reconnect_attempt', () => { + updateLive('Attempting to reconnect...', 'yellow'); + }); + socket.on('disconnect', () => { + console.log('lost connection to room'); + updateLive('Disconnected', 'red'); + }); + socket.on('reconnect', () => { + console.log('reconnected to room'); + jsonCatchup(); + }); + socket.on('newPost', newPost); } - 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.on('connect', () => { - console.log('joined room', room); - updateLive('Connected for live posts', '#0de600'); - socket.emit('room', room); - }); - socket.on('pong', (latency) => { - if (socket.connected) { - updateLive(`Connected for live posts (${latency}ms)`, '#0de600'); - } - }); - socket.on('reconnect_error', () => { - updateLive('Error reconnecting', 'orange'); - }); - socket.on('reconnect_attempt', () => { - updateLive('Attempting to reconnect...', 'yellow'); - }); - socket.on('disconnect', () => { - console.log('lost connection to room'); - updateLive('Disconnected', 'red'); - }); - socket.on('reconnect', () => { - console.log('reconnected to room'); - jsonCatchup(); - }); - socket.on('newPost', newPost); - } - const toggleLive = () => { - if (isThread) { - if (socket && liveEnabled) { - socket.disconnect(); - updateLive('Live posts disabled', 'red'); - } else if (!socket) { - startLive(); - } else { - socket.connect(); + const toggleLive = () => { + if (isThread) { + if (socket && liveEnabled) { + socket.disconnect(); + updateLive('Live posts disabled', 'red'); + } else if (!socket) { + startLive(); + } else { + socket.connect(); + } } + liveEnabled = !liveEnabled; + console.log('toggling live posts', liveEnabled); + localStorage.setItem('live', liveEnabled); } - liveEnabled = !liveEnabled; - console.log('toggling live posts', liveEnabled); - localStorage.setItem('live', liveEnabled); - } - //todo - startLive(); + //todo + startLive(); - /* - const liveSetting = document.getElementById('live-setting'); - liveSetting.checked = liveEnabled; - liveSetting.addEventListener('change', toggleLive, false); + /* + const liveSetting = document.getElementById('live-setting'); + liveSetting.checked = liveEnabled; + liveSetting.addEventListener('change', toggleLive, false); + + if (liveEnabled) { + startLive(); + } else { + updateLive('Live posts disabled', 'red'); + } + */ - if (liveEnabled) { - startLive(); - } else { - updateLive('Live posts disabled', 'red'); - } - */ + }); -}); +} diff --git a/gulp/res/js/settings.js b/gulp/res/js/settings.js index 54933fa1..4202bf5f 100644 --- a/gulp/res/js/settings.js +++ b/gulp/res/js/settings.js @@ -11,24 +11,25 @@ window.addEventListener('DOMContentLoaded', (event) => { const openSettings = (data) => { settingsModal.style.display = 'unset'; settingsBg.style.display = 'unset'; - } + } const settings = document.getElementById('settings'); - const modalHtml = modal({ + const modalHtml = modal({ modal: { title: 'Settings', settings: { themes, codeThemes }, hidden: true, - } + } }); const inserted = document.body.insertAdjacentHTML('afterbegin', modalHtml); settingsBg = document.getElementsByClassName('modal-bg')[0]; settingsModal = document.getElementsByClassName('modal')[0]; + settingsBg.onclick = hideSettings; settingsModal.getElementsByClassName('close')[0].onclick = hideSettings; settings.onclick = openSettings; diff --git a/views/includes/head.pug b/views/includes/head.pug index ff7c3155..a6b65ef9 100644 --- a/views/includes/head.pug +++ b/views/includes/head.pug @@ -1,11 +1,11 @@ meta(charset='utf-8') meta(name='viewport', content='width=device-width, initial-scale=1') +noscript + style .jsonly { display: none; } link(rel='stylesheet' href='/css/style.css') - const isBoard = board != null; - const theme = isBoard ? board.settings.theme : defaultTheme; - const codeTheme = isBoard ? board.settings.codeTheme : defaultCodeTheme; link#theme(rel='stylesheet' data-theme=theme href=`/css/themes/${theme}.css`) link#codetheme(rel='stylesheet' data-theme=codeTheme href=`/css/codethemes/${codeTheme}.css`) -noscript - style .jsonly { display: none; } link(rel='shortcut icon' href='/favicon.ico' type='image/x-icon')