From ad51a07e13a5396bbf17ffcf11495bf2935b53e4 Mon Sep 17 00:00:00 2001
From: Lars <larsjohnsen@gmail.com>
Date: Tue, 12 Jun 2018 14:31:11 +0200
Subject: [PATCH] Filterline comment filters: Add option to also hide children

---
 lib/css/modules/_filteReddit.scss     | 10 +++++++++-
 lib/modules/filteReddit.js            |  2 ++
 lib/modules/filteReddit/Filterline.js |  8 ++++++++
 lib/modules/filteReddit/LineFilter.js | 10 ++++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/lib/css/modules/_filteReddit.scss b/lib/css/modules/_filteReddit.scss
index 2863646a1c..e059bf195b 100644
--- a/lib/css/modules/_filteReddit.scss
+++ b/lib/css/modules/_filteReddit.scss
@@ -10,7 +10,7 @@ body.hideOver18 {
 	// For some reason does the scss linter complain on body:not()
 	body.res:not(.res-filters-disabled):not(.res-show-filter-reason) &:not(.res-filterline-highlight-match) {
 		&:not(.res-thing-has-visible-child),
-		&.res-thing-has-visible-child.collapsed { // seperate line since :not() didn't work with multiple classes
+		&.res-thing-filter-propagate {
 			// !important since many custom stylesheets overrides it otherwise
 			display: none !important;
 		}
@@ -151,6 +151,14 @@ body.hideOver18 {
 				}
 			}
 
+			&-options {
+				float: right;
+
+				input {
+					vertical-align: text-bottom;
+				}
+			}
+
 			&-group {
 				margin-top: 2px;
 			}
diff --git a/lib/modules/filteReddit.js b/lib/modules/filteReddit.js
index ff9a689134..994e84d371 100644
--- a/lib/modules/filteReddit.js
+++ b/lib/modules/filteReddit.js
@@ -310,12 +310,14 @@ module.options = {
 				opts: {
 					ondemand: false,
 					name: '',
+					propagate: false,
 				},
 			};
 		},
 		customOptionsFields: [
 			[{ type: 'check', id: 'ondemand', label: 'Only filter when added to Filterline (on-demand)' }],
 			['Filterline name: ', { type: 'text', id: 'name' }],
+			[{ type: 'check', id: 'propagate', label: 'Hide child commments' }],
 		],
 		get cases() { Cases.populatePrimitives(); return { ...Cases.getByContext('comment'), ...Cases.getByContext('browse') }; },
 	},
diff --git a/lib/modules/filteReddit/Filterline.js b/lib/modules/filteReddit/Filterline.js
index 182528b252..e993c8253d 100644
--- a/lib/modules/filteReddit/Filterline.js
+++ b/lib/modules/filteReddit/Filterline.js
@@ -403,6 +403,8 @@ export class Filterline {
 		const externOpts = CaseClass._customFilter && CaseClass._customFilter.opts;
 		if (externOpts) {
 			if (!name) ({ name } = externOpts);
+			const { propagate } = externOpts;
+			if (!sideEffects && typeof propagate === 'boolean') sideEffects = { propagate };
 		}
 
 		if (CaseClass.variant === 'ondemand') {
@@ -485,7 +487,11 @@ export class Filterline {
 	availableSideEffects: {
 		[key: string]: (Thing, Array<boolean>) => void,
 	} = {
+		propagate: (thing, results) => {
+			thing.element.classList.toggle('res-thing-filter-propagate', results.includes(true));
+		},
 		highlight: (thing, results) => {
+			// XXX If a parent comment is hidden and that is propagated, then this comment won't be highlighted
 			thing.element.classList.toggle('res-filterline-highlight-match', results.includes(true));
 		},
 	};
@@ -528,9 +534,11 @@ export class Filterline {
 		);
 
 		if (thing.filter !== matchedFilter) {
+			// XXX Show reason if hidden due to propagation?
 			if (this.showFilterReason) this.refreshThingFilterReason(thing, thing.filter, matchedFilter);
 			thing.setFilter(matchedFilter);
 
+			// TODO The beneath may also have to refresh when is filter the propagation side-effect is changed
 			if (matchedFilter && SelectedEntry.selectedThing === thing) {
 				SelectedEntry.frameThrottledMove('closestVisible', { scrollStyle: 'none' }, () => {});
 			}
diff --git a/lib/modules/filteReddit/LineFilter.js b/lib/modules/filteReddit/LineFilter.js
index fb192544f9..e447391eb8 100644
--- a/lib/modules/filteReddit/LineFilter.js
+++ b/lib/modules/filteReddit/LineFilter.js
@@ -172,6 +172,16 @@ export class LineFilter extends Filter {
 			}
 		});
 
+		if (filterline.thingType === 'comment') {
+			const options = body.querySelector('.res-filterline-filter-hover-options');
+			const propagate = string.html`<label><input type="checkbox" ${this.sideEffects.propagate && 'checked'}>Also hide children</label>`;
+			options.append(propagate);
+			waitForEvent(propagate, 'change').then(() => {
+				this.sideEffects.propagate = downcast(propagate.querySelector('input'), HTMLInputElement).checked;
+				this.refresh();
+			}).then(redraw);
+		}
+
 		function addButton(container, text, groupName, action) {
 			const button = string.html`<button class="res-filterline-filter-hover-button" action="${action}">${text}</button>`;
 			const group = downcast(container.querySelector(`[group=${groupName}]`), HTMLElement);