Mostly working

gulp/res/css/style.css

@@ -880,6 +880,13 @@ input:invalid, textarea:invalid {
 	font-weight: bold;
 }
 
+.you:after {
+	margin-left: 3px;
+	content: '(You)';
+	font-weight: lighter;
+	font-style: italic;
+}
+
 .noselect {
 	user-select: none;
 }

gulp/res/js/forms.js

@@ -63,6 +63,12 @@ function formToJSON(form) {
 	return JSON.stringify(data);
 }
 
+function saveYouFromPath(path) {
+	const redirectBoard = path.split('/')[1];
+	const redirectPostId = path.split('#')[1];
+	appendLocalStorageArray('yous', `${redirectBoard}-${redirectPostId}`);
+}
+
 class formHandler {
 
 	constructor(form) {
@@ -174,13 +180,18 @@ class formHandler {
 //todo: show success messages nicely for forms like actions (this doesnt apply to non file forms yet)
 						}
 					} else {
+						if (json.postId) {
+							window.myPostId = json.postId;
+						}
+						if (json.redirect) {
+							saveYouFromPath(json.redirect);
+						}
 						if (json.message || json.messages || json.error || json.errors) {
 							doModal(json);
 							if (json.message === 'Incorrect captcha answer') {
 								//todo: create captcha form, add method to captcha frontend code
 							}
 						} else if (socket && socket.connected) {
-							window.myPostId = json.postId;
 							window.location.hash = json.postId
 						} else {
 							if (!isThread) {

gulp/res/js/hover.js

@@ -136,6 +136,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
 			//need this event so handlers like post hiding still apply to hover introduced posts
 			const newPostEvent = new CustomEvent('addPost', {
 	 		   detail: {
+					json: postJson,
 					post: hoveredPost,
 					postId: postJson.postId,
 					hover: true

gulp/res/js/live.js

@@ -82,7 +82,9 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 			}
 		});
 		//dispatch the event so quote click handlers, image expand, etc can be added in separate scripts by listening to the event
-		window.dispatchEvent(newPostEvent);
+//		setTimeout(() => {
+			window.dispatchEvent(newPostEvent);
+//		}, 5);
 	}
 
 	let jsonParts = window.location.pathname.replace(/\.html$/, '.json').split('/');

gulp/res/js/localstorage.js

@@ -12,6 +12,12 @@ function setLocalStorage(key, value) {
 	}
 }
 
+function appendLocalStorageArray(key, value) {
+	const storedArray = JSON.parse(localStorage.getItem(key));
+	storedArray.push(value);
+	setLocalStorage(key, JSON.stringify(storedArray));
+}
+
 function clearLocalStorageJunk() {
 	//clears hover cache when localstorage gets full
 	const hoverCaches = Object.keys(localStorage).filter(k => k.startsWith('hovercache'));

gulp/res/js/yous.js

@@ -0,0 +1,66 @@
+setDefaultLocalStorage('yous-setting', true);
+let yousEnabled = localStorage.getItem('yous-setting') == 'true';
+setDefaultLocalStorage('yous', '[]');
+let savedYous = JSON.parse(localStorage.getItem('yous'));
+
+const toggleAll = () => savedYous.forEach(y => toggleOne(y));
+
+const toggleQuotes = (quotes) => {
+	quotes.forEach(q => {
+		q.classList[yousEnabled?'add':'remove']('you');
+	});
+}
+
+const toggleOne = (you) => {
+	const [board, postId] = you.split('-');
+	const post = document.querySelector(`[data-board="${board}"][data-post-id="${postId}"]`);
+	if (post) {
+		const postName = post.querySelector('.post-name');
+		if (postName) {
+			postName.classList[yousEnabled?'add':'remove']('you');
+		}
+	}
+	const quotes = document.querySelectorAll(`.quote[href^="/${board}/"][href$="#${postId}"]`);
+	if (quotes) {
+		toggleQuotes(quotes);
+	}
+}
+
+if (yousEnabled) {
+	toggleAll();
+}
+
+window.addEventListener('addPost', (e) => {
+	savedYous = JSON.parse(localStorage.getItem('yous'));
+	const postYou = `${e.detail.json.board}-${e.detail.postId}`;
+	if (window.myPostId == e.detail.postId) {
+		savedYous.push(postYou);
+		setLocalStorage('yous', JSON.stringify(savedYous));
+	}
+	if (savedYous.includes(postYou)) {
+		toggleOne(postYou);
+	}
+	const youHoverQuotes = e.detail.json.quotes
+		.concat(e.detail.json.backlinks)
+		.map(q => `${e.detail.json.board}-${q.postId}`)
+		.filter(y => savedYous.includes(y))
+		.map(y => {
+			const [board, postId] = y.split('-');
+			return e.detail.post.querySelector(`.quote[href^="/${board}/"][href$="#${postId}"]`)
+		});
+	toggleQuotes(youHoverQuotes);
+});
+
+window.addEventListener('settingsReady', () => {
+
+    const yousSetting = document.getElementById('yous-setting');
+    const toggleYousSetting = () => {
+        yousEnabled = !yousEnabled;
+        setLocalStorage('yous-setting', yousEnabled);
+        toggleAll();
+        console.log('toggling yous', yousEnabled);
+    }
+    yousSetting.checked = yousEnabled;
+    yousSetting.addEventListener('change', toggleYousSetting, false);
+
+});

gulpfile.js

@@ -217,6 +217,7 @@ function scripts() {
 			`${paths.scripts.src}/*.js`,
 			`!${paths.scripts.src}/dragable.js`,
 			`!${paths.scripts.src}/hide.js`,
+			`!${paths.scripts.src}/yous.js`,
 			`!${paths.scripts.src}/catalog.js`,
 			`!${paths.scripts.src}/time.js`,
 		])
@@ -225,6 +226,7 @@ function scripts() {
 		.pipe(gulp.dest(paths.scripts.dest));
 	return gulp.src([
 			`${paths.scripts.src}/dragable.js`,
+			`${paths.scripts.src}/yous.js`,
 			`${paths.scripts.src}/hide.js`,
 			`${paths.scripts.src}/catalog.js`,
 			`${paths.scripts.src}/time.js`,

views/mixins/modal.pug

@@ -59,6 +59,10 @@ mixin modal(data)
 								label.postform-style.ph-5
 									input#noncolorids-setting(type='checkbox')
 								.rlabel Non-color IDs
+							.row
+								label.postform-style.ph-5
+									input#yous-setting(type='checkbox')
+								.rlabel Show (You)'s
 
 						.col
 
@@ -69,7 +73,7 @@ mixin modal(data)
 							.row
 								label.postform-style.ph-5
 									input#hiderecursive-setting(type='checkbox')
-								.rlabel Recursive Post Hide
+								.rlabel Recursive post hide
 							.row
 								label.postform-style.ph-5
 									input#loop-setting(type='checkbox')
@@ -92,14 +96,14 @@ mixin modal(data)
 								.rlabel Always reveal spoilers
 
 					.row
-						.label Video/Audio Volume
+						.label Video/Audio volume
 						label.postform-style.ph-5
 							input#volume-setting(type='range' min='0' max='100')
 					.row
-						.label Post Password
+						.label Post password
 						input#postpassword-setting(type='password' name='postpassword')
 					.row
-						.label Default Name
+						.label Default name
 						input#name-setting(type='text' name='name')
 					.row
 						.label Theme