Merge branch '184-expand-omitted-inline' into develop

gulp/res/css/style.css

@@ -203,7 +203,10 @@ pre {
 #settings::after {
 	content: "Settings";
 }
-
+.expand-omitted {
+	vertical-align: bottom;
+	margin-right: 5px;
+}
 #postform-dragHandle, #threadwatcher-dragHandle {
 	flex-grow: 1;
 	background: var(--darken);

gulp/res/js/filters.js

@@ -58,7 +58,8 @@ const anyFilterMatches = (filteringPost) => {
 	const { board, postId, userId, name, subject, tripcode } = filteringPost.dataset;
 	const postMessage = filteringPost.querySelector('.post-message');
 	const message = postMessage ? postMessage.textContent : null;
-	return fid.has(userId)
+	return single.has(`${board}-${postId}`)
+		|| fid.has(userId)
 		|| fname.has(name)
 		|| ftrip.has(tripcode)
 		|| fsub.has(tripcode)

gulp/res/js/live.js

@@ -3,6 +3,7 @@ let scrollEnabled = localStorage.getItem('scroll') == 'true';
 let socket;
 let socketPingInterval;
 let forceUpdate;
+let newPost;
 
 window.addEventListener('settingsReady', function(event) { //after domcontentloaded
 
@@ -59,7 +60,7 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 		}
 	};
 
-	const newPost = (data) => {
+	newPost = (data, options = {}) => {
 		//insert at end of thread, but insert at top for globalmanage
 		console.log('got new post', data);
 		const postData = data;
@@ -75,7 +76,9 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 			...extraLocals,
 		});
 		let insertPoint;
-		if (isRecent) {
+		if (options.insertPoint) {
+			insertPoint = options.insertPoint;
+		} else if (isRecent) {
 			const firstHr = document.querySelector('hr');
 			const newHr = document.createElement('hr');
 			const threadWrapper = document.createElement('div');
@@ -86,7 +89,7 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 		} else {
 			insertPoint = document.querySelector('.thread');
 		}
-		insertPoint.insertAdjacentHTML('beforeend', postHtml);
+		insertPoint.insertAdjacentHTML(options.insertPosition || 'beforeend', postHtml);
 		if (isRecent) {
 			//cap the recent pages to 20 posts so they dont grow to infinity
 			Array.from(document.querySelectorAll('.thread'))
@@ -124,7 +127,7 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 			}
 		}
 		const newPostAnchor = document.getElementById(postData.postId);
-		const newPost = newPostAnchor.nextSibling;
+		const newPostElement = newPostAnchor.nextSibling;
 		if (scrollEnabled) {
 			if (isGlobalRecent) {
 				window.scrollTo(0, 0); //recent pages are reverse sort, so just go to top
@@ -134,7 +137,8 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 		}
 		const newPostEvent = new CustomEvent('addPost', {
 			detail: {
-				post: newPost,
+				nonotify: true,
+				post: newPostElement,
 				postId: postData.postId,
 				json: postData
 			}

gulp/res/js/omitted.js

@@ -0,0 +1,92 @@
+window.addEventListener('DOMContentLoaded', () => {
+
+	let loading = {};
+
+	const hideOmitted = (e) => {
+		e.target.nextSibling.style.display = 'unset';
+		const thread = e.target.closest('.thread');
+		let replies = Array.from(thread.querySelectorAll('.post-container:not(.op)'));
+		if (e.target.dataset.shown > 0) {
+			replies = replies.slice(0, -parseInt(e.target.dataset.shown));
+		}
+		replies.forEach(r => {
+			r.previousSibling.remove();
+			r.remove();
+		});
+		e.target.removeAttribute('data-open');
+		e.target.src = '/file/plus.png';
+	};
+
+	const expandOmitted = async (e) => {
+		const threadId = e.target.dataset.thread;
+		const board = e.target.dataset.board;
+		const parentPost = e.target.closest('.post-container');
+		const firstPreviewReply = parentPost.nextSibling && parentPost.nextSibling.nextSibling; //the first preview reply
+		const jsonPath = `/${board}/thread/${threadId}.json`;
+		let hovercache = localStorage.getItem(`hovercache-${jsonPath}`);
+		let replies;
+		if (hovercache) {
+			hovercache = JSON.parse(hovercache);
+			//if we have the first preview reply in cache, the cache is fresh enough to show the omitted posts
+			if (firstPreviewReply && hovercache.replies.find(r => r.postId == firstPreviewReply.dataset.postId)) {
+				replies = hovercache.replies;
+			}
+			//note: will always fetch (on new page load) for sticky preview replies = 0
+		}
+		if (!replies) {
+			e.target.style.cursor = 'wait';
+			e.target.classList.add('spin');
+			let json;
+			try {
+				//same as hovering post replies
+				if (!loading[jsonPath]) {
+					loading[jsonPath] = fetch(jsonPath).then(res => res.json());
+				}
+				json = await loading[jsonPath];
+			} catch (e) {
+				return console.error(e);
+			} finally {
+				e.target.style.cursor = '';
+				e.target.classList.remove('spin');
+			}
+			if (json) {
+				setLocalStorage(`hovercache-${jsonPath}`, JSON.stringify(json));
+				hoverCacheList.value = Object.keys(localStorage).filter(k => k.startsWith('hovercache'));
+				replies = json.replies;
+			} else {
+				return localStorage.removeItem(`hovercache-${jsonPath}`); //thread deleted
+			}
+		}
+		if (!replies) {
+			return;
+		}
+		e.target.nextSibling.style.display = 'none';
+		e.target.src = '/file/minus.png';
+		e.target.dataset.open = true;
+		replies = replies.reverse();
+		if (firstPreviewReply) {
+			replies = replies.filter(r => r.postId < firstPreviewReply.dataset.postId);
+		}
+		replies.forEach(r => {
+			newPost(r, {
+				insertPoint: firstPreviewReply ? parentPost.nextSibling : parentPost,
+				insertPosition: firstPreviewReply ? 'beforebegin' : 'afterend',
+			});
+		});
+	};
+
+	const handleExpandClick = (e) => {
+		if (e.target.dataset.open) {
+			hideOmitted(e);
+		} else {
+			expandOmitted(e);
+		}
+	};
+
+	const expandOmittedButtons = document.getElementsByClassName('expand-omitted');
+
+	for (let i = 0; i < expandOmittedButtons.length; i++) {
+		expandOmittedButtons[i].addEventListener('click', handleExpandClick, false);
+	}
+
+});

gulp/res/js/time.js

@@ -132,7 +132,6 @@ window.addEventListener('addPost', function(e) {
 });
 
 window.addEventListener('showModal', function(e) {
-console.log(e.detail, e.detail.modal)
 	handleDateUpdates(e.detail.modal);
 });
 

gulp/res/js/viewfulltext.js

@@ -60,10 +60,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
 		}
 		const updatePostMessageEvent = new CustomEvent('updatePostMessage', {
 			detail: {
+				nonotify: true,
 				post: parentPost,
 				postId: postJson.postId,
 				json: postJson,
-				viewfulltext: true,
 			}
 		});
 		window.dispatchEvent(updatePostMessageEvent);

gulp/res/js/yous.js

@@ -91,7 +91,7 @@ const handleNewYous = (e) => {
 	//toggle for any quotes in a new post that quote (you)
 	toggleQuotes(youHoverQuotes, yousEnabled);
 	//if not a hover newpost, and enabled/for yous, send notification
-	if (!e.detail.viewfulltext && !e.detail.hover && notificationsEnabled && !isYou) {
+	if (!e.detail.nonotify && !e.detail.hover && notificationsEnabled && !isYou) {
 		if (notificationYousOnly && !quotesYou) {
 			return; //only send notif for (you) if setting
 		}

views/mixins/post.pug

@@ -158,10 +158,12 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false, overboar
 					| Message too long. #[a.viewfulltext(href=`${postURL}#${post.postId}`) View the full text]
 			if post.omittedposts || post.omittedfiles
 				div.cb.mt-5.ml-5
+					img.jsonly.dummy-link.expand-omitted(height='18' width='18' data-shown=post.replies.length data-board=post.board data-thread=post.postId src='/file/plus.png')
 					- const ompo = post.omittedposts;
 					- const omfi = post.omittedfiles;
-					| #{ompo} repl#{ompo > 1 ? 'ies' : 'y'}
-					| #{omfi > 0 ? ` and ${omfi} file${omfi > 1 ? 's' : ''}` : ''} omitted. 
+					span
+						| #{ompo} repl#{ompo > 1 ? 'ies' : 'y'}
+						| #{omfi > 0 ? ` and ${omfi} file${omfi > 1 ? 's' : ''}` : ''} omitted. 
 					| #[a(href=postURL) View the full thread]
 			if post.previewbacklinks != null
 				if post.previewbacklinks.length > 0