merry christmas, individual image hiding

gulp/res/css/style.css

@@ -188,7 +188,9 @@ pre {
 .pv-5 {
 	padding: 5px 0;
 }
-
+.vh {
+	visibility: hidden!important;
+}
 #settings, .dummy-link {
 	cursor: pointer;
 }

gulp/res/js/hideimages.js

@@ -0,0 +1,53 @@
+let imageSources = new Set(JSON.parse(localStorage.getItem('hiddenimages')));
+
+const toggleAllHidden = (state) => imageSources.forEach(i => toggleSource(i, state));
+
+const toggleSource = (source, state) => {
+	const images = document.querySelectorAll(`img.file-thumb[src="${source}"]`);
+	images.forEach(i => i.classList[state?'add':'remove']('vh'));
+}
+
+toggleAllHidden(true);
+
+const toggleHandler = (e) => {
+	const thumbSource = e.target.dataset.src
+	const hidden = imageSources.has(thumbSource);
+	imageSources[hidden?'delete':'add'](thumbSource);
+	setLocalStorage('hiddenimages', JSON.stringify([...imageSources]));
+	toggleSource(thumbSource, !hidden);
+}
+
+document.querySelectorAll('.hide-image').forEach(el => {
+	el.addEventListener('click', toggleHandler, false);
+});
+
+const handleHiddenImages = (e) => {
+	//hide any images from this post that should already be hidden
+	const hasHiddenImages = e.detail.json.files.forEach(f => {
+		if (imageSources.has(f.filename)) {
+			toggleSource(f.filename, true);
+		}
+	});
+	//add the hide toggle link and event listener
+	if (!e.detail.hover) {
+		e.detail.post.querySelector('.hide-image').addEventListener('click', toggleHandler, false);
+	}
+}
+
+window.addEventListener('addPost', handleHiddenImages, false);
+
+window.addEventListener('settingsReady', () => {
+
+	imageSourcesList = document.getElementById('hiddenimages-setting');
+	imageSourcesList.value = [...imageSources];
+	const imageSourcesListClearButton = document.getElementById('hiddenimages-clear');
+	const clearImageSources = () => {
+		toggleAllHidden(false);
+		imageSources = new Set();
+		imageSourcesList.value = '';
+		setLocalStorage('hiddenimages', '[]');
+		console.log('cleared hidden images list');
+	}
+	imageSourcesListClearButton.addEventListener('click', clearImageSources, false);
+
+});

gulp/res/js/yous.js

@@ -4,7 +4,7 @@ let yousEnabled = localStorage.getItem('yous-setting') == 'true';
 let savedYous = new Set(JSON.parse(localStorage.getItem('yous')));
 let yousList;
 
-const toggleAll = (state) => savedYous.forEach(y => toggleOne(y, state));
+const toggleAllYous = (state) => savedYous.forEach(y => toggleOne(y, state));
 
 const toggleQuotes = (quotes, state) => {
 	quotes.forEach(q => {
@@ -28,7 +28,7 @@ const toggleOne = (you, state) => {
 }
 
 if (yousEnabled) {
-	toggleAll(yousEnabled);
+	toggleAllYous(yousEnabled);
 }
 
 const handleNewYous = (e) => {
@@ -89,7 +89,7 @@ window.addEventListener('settingsReady', () => {
 	const yousListClearButton = document.getElementById('youslist-clear');
 	const clearYousList = () => {
 		if (yousEnabled) {
-			toggleAll(false);
+			toggleAllYous(false);
 		}
 		savedYous = new Set();
 		yousList.value = '';
@@ -102,7 +102,7 @@ window.addEventListener('settingsReady', () => {
 	const toggleYousSetting = () => {
 		yousEnabled = !yousEnabled;
 		setLocalStorage('yous-setting', yousEnabled);
-		toggleAll(yousEnabled);
+		toggleAllYous(yousEnabled);
 		console.log('toggling yous', yousEnabled);
 	}
 	yousSetting.checked = yousEnabled;

gulpfile.js

@@ -311,6 +311,7 @@ const settings = ${JSON.stringify(configs.frontendScriptDefault)};
 			`!${paths.scripts.src}/hidefileinput.js`,
 			`!${paths.scripts.src}/dragable.js`,
 			`!${paths.scripts.src}/filters.js`,
+			`!${paths.scripts.src}/hideimages.js`,
 			`!${paths.scripts.src}/yous.js`,
 			`!${paths.scripts.src}/catalog.js`,
 			`!${paths.scripts.src}/time.js`,
@@ -323,6 +324,7 @@ const settings = ${JSON.stringify(configs.frontendScriptDefault)};
 	return gulp.src([
 			`${paths.scripts.src}/hidefileinput.js`,
 			`${paths.scripts.src}/dragable.js`,
+			`${paths.scripts.src}/hideimages.js`,
 			`${paths.scripts.src}/yous.js`,
 			`${paths.scripts.src}/filters.js`,
 			`${paths.scripts.src}/catalog.js`,

views/mixins/modal.pug

@@ -113,6 +113,10 @@ mixin modal(data)
 						.label (You)s
 						input.mr-1#youslist-setting(type='text' readonly)
 						input#youslist-clear(type='button' value='Clear')
+					.row
+						.label Hidden images
+						input.mr-1#hiddenimages-setting(type='text' readonly)
+						input#hiddenimages-clear(type='button' value='Clear')
 					.row
 						.label Cache
 						input.mr-1#hovercachelist-setting(type='text' readonly)

views/mixins/post.pug

@@ -72,8 +72,12 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false, overboar
 							span.post-file-info
 								span: a(href='/file/'+file.filename title='Download '+file.originalFilename download=file.originalFilename) #{post.spoiler || file.spoiler ? 'Spoiler File' : file.originalFilename}
 								br
+								span.jsonly
+									b [
+									a.dummy-link.hide-image(data-src=`/file/thumb-${file.hash}${file.thumbextension}`) Hide
+									b ]
 								span 
-									| (#{file.sizeString}
+									|  (#{file.sizeString}
 									if file.geometryString
 										| , #{file.geometryString}
 									if file.durationString