image hide script

gulp/res/css/style.css

@@ -914,6 +914,10 @@ table.boardtable td:nth-child(6) {
 	visibility: visible;
 }
 
+.invisible {
+	visibility: hidden!important;
+}
+
 table, .boardtable {
 	max-width: 100%;
 }

gulp/res/js/hide.js

@@ -98,6 +98,31 @@ for (let elem of hidden) {
 	setHidden(posts, true);
 }
 
+!localStorage.getItem('hideimages') ? setLocalStorage('hideimages', false) : void 0;
+let hideImagesEnabled = localStorage.getItem('hideimages') == 'true';
+const hideImages = () => {
+	const postThumbs = document.getElementsByClassName('file-thumb');
+	for (thumb of postThumbs) {
+		thumb.classList.toggle('invisible');
+	}
+}
+if (hideImagesEnabled) {
+	hideImages();
+}
+
+window.addEventListener('settingsReady', function(event) {
+
+//todo: option here and in modal for clearing hide list and unhide all hidden posts
+    const hideImagesSetting = document.getElementById('hideimages-setting');
+	hideImagesSetting.checked = hideImagesEnabled;
+	const toggleHideImages = () => {
+		hideImagesEnabled = !hideImagesEnabled
+		setLocalStorage('hideimages', hideImagesEnabled);
+		hideImages();
+	}
+    hideImagesSetting.addEventListener('change', toggleHideImages, false);
+});
+
 window.addEventListener('addPost', function(e) {
 	const post = e.detail.post;
 	const { board, postId, userId } = post.dataset;
@@ -105,6 +130,11 @@ window.addEventListener('addPost', function(e) {
 	if (hidden.has(hiddenKey) || hidden.has(userId)) {
 		post.classList.add('hidden');
 	}
+	if (hideImagesEnabled) {
+		for (thumb of post.querySelectorAll('.file-thumb')) {
+			thumb.classList.add('invisible');
+		}
+	}
 	const menu = post.querySelector('.postmenu');
 	for (let i = 0; i < menu.children.length; i++) {
 		menu.children[i].originalText = menu.children[i].innerText;
@@ -112,9 +142,3 @@ window.addEventListener('addPost', function(e) {
 	menu.value = '';
 	menu.addEventListener('change', changeOption, false);
 });
-
-window.addEventListener('settingsReady', function(event) {
-
-	//add option here and in modal compiledclient for clearing hide list and unhide all hidden posts
-
-});

gulp/res/js/modal.js

@@ -95,7 +95,7 @@ pug_html = pug_html + "\u003Coption" + (pug_attr("value", theme, true, false)) +
   }
 }).call(this);
 
-pug_html = pug_html + "\u003C\u002Fselect\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EDefault volume\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"volume-setting\" type=\"range\" min=\"0\" max=\"100\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELive posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"live-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ENotifications\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"notification-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EScroll to new posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"scroll-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003E24h time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"24hour-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EShow relative time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"relative-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
+pug_html = pug_html + "\u003C\u002Fselect\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EDefault volume\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"volume-setting\" type=\"range\" min=\"0\" max=\"100\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELive posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"live-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ENotifications\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"notification-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EScroll to new posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"scroll-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003E24h time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"24hour-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EShow relative time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"relative-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EHide Thumbnails\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"hideimages-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
 }
 pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
 };

gulp/res/js/post.js

@@ -10,7 +10,7 @@ var block = (this && this.block), attributes = (this && this.attributes) || {};
 pug_html = pug_html + "\u003Cdiv class=\"reports post-container\"\u003E\u003Cinput" + (" class=\"post-check\""+" type=\"checkbox\" name=\"checkedreports\""+pug_attr("value", r.id, true, false)) + "\u002F\u003E ";
 if (globalmanage) {
 ipHashSub = r.ip.slice(-10);
-pug_html = pug_html + "\u003Ca" + (" class=\"bold\""+pug_attr("href", `?rip=${encodeURIComponent(ipHashSub)}`, true, false)) + "\u003E" + (pug_escape(null == (pug_interp = ipHashSub) ? "" : pug_interp)) + "\u003C\u002Fa\u003E ";
+pug_html = pug_html + "\u003Ca" + (" class=\"bold\""+pug_attr("href", `?ip=${encodeURIComponent(ipHashSub)}`, true, false)) + "\u003E" + (pug_escape(null == (pug_interp = ipHashSub) ? "" : pug_interp)) + "\u003C\u002Fa\u003E ";
 }
 const reportDate = new Date(r.date);
 pug_html = pug_html + "\u003Ctime" + (" class=\"reltime\""+pug_attr("datetime", reportDate.toISOString(), true, false)) + "\u003E" + (pug_escape(null == (pug_interp = reportDate.toLocaleString(undefined, { hour12:false })) ? "" : pug_interp)) + "\u003C\u002Ftime\u003E | Reason: " + (pug_escape(null == (pug_interp = r.reason) ? "" : pug_interp)) + "\u003C\u002Fdiv\u003E";

views/mixins/modal.pug

@@ -55,3 +55,7 @@ mixin modal(data)
 						.label Show relative time
 						label.postform-style.ph-5
 							input#relative-setting(type='checkbox')
+					.row
+						.label Hide Thumbnails
+						label.postform-style.ph-5
+							input#hideimages-setting(type='checkbox')