fatchan
/
jschan
mirror of https://gitgud.io/fatchan/jschan.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dont try to start live when not in thread and approve appearance of some things

Browse Source
merge-requests/208/head
fatchan 5 years ago
parent 970f0f8316
commit 854078d1bf
5 changed files with 146 additions and 136 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      gulp/res/css/style.css
  2. 1
      gulp/res/js/captcha.js
  3. 254
      gulp/res/js/live.js
  4. 7
      gulp/res/js/settings.js
  5. 4
      views/includes/head.pug

16
gulp/res/css/style.css
Unescape View File

@ -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;
}

1
gulp/res/js/captcha.js
Unescape View File

@ -1,4 +1,3 @@
window.addEventListener('DOMContentLoaded', (event) => {
const captchaFields = document.getElementsByClassName('captchafield');

254
gulp/res/js/live.js
Unescape View File

@ -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');
}
*/
});
});
}

7
gulp/res/js/settings.js
Unescape View File

@ -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;

4
views/includes/head.pug
Unescape View File

@ -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')

Write Preview
Loading…
Cancel
Save