Filterline comment filters: Add option to also hide children

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;
  }

lib/modules/filteReddit.js

@@ -308,12 +308,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') }; },
  },
@@ -443,7 +445,16 @@ module.beforeLoad = fastAsync(function*() {
  createFilterline(yield initialFilterlineState.get());
 
  watchForThings(['post'], updateNsfwThingClass, { immediate: true });
- watchForThings([thingType], registerThing, { immediate: true });
+
+ const hideUnprocessed = false;
+ if (hideUnprocessed) {
+ BodyClasses.add(`filter-hide-unprocessed-${thingType}`);
+ }
+
+ watchForThings([thingType], async thing => {
+ await registerThing(thing);
+ if (hideUnprocessed) thing.element.classList.add('filter-processed');
+ }, { immediate: true });
 });
 
 

lib/modules/filteReddit/Filter.js

@@ -26,7 +26,11 @@ export class Filter {
  availableSideEffects: {
  [key: string]: (Thing, boolean, Array<{ filter: Filter, isActive: boolean }>) => void,
  } = {
+ propagate: (thing, isActive, array) => {
+ thing.element.classList.toggle('res-thing-filter-propagate', !!array.find(({ isActive }) => isActive));
+ },
  highlight: (thing, isActive, array) => {
+ // TODO If a parent comment is hidden and that is propagated, then this comment will still be hidden
  thing.element.classList.toggle('res-filterline-highlight-match', !!array.find(({ isActive }) => isActive));
  },
  };
@@ -40,7 +44,6 @@ export class Filter {
  this.state = state;
  this.setCase(BaseCase.fromConditions(conditions));
  this.undeletable = undeletable;
- this.sideEffects = sideEffects;
  }
 
  createElement() {}

lib/modules/filteReddit/Filterline.js

@@ -397,6 +397,8 @@ export class Filterline {
  const externOpts = CaseClass._customFilter && CaseClass._customFilter.opts;
  if (externOpts) {
  ({ name } = externOpts);
+ const { propagate } = externOpts;
+ if (!sideEffects && typeof propagate === 'boolean') sideEffects = { propagate };
  }
 
  const filter = new Filter(id, CaseClass, name, conditions, state, undeletable, sideEffects);
@@ -507,9 +509,11 @@ export class Filterline {
  );
 
  if (thing.filter !== matchedFilter) {
+ // TODO Show reason if hidden due to propagation?
  if (this.showFilterReason) this.refreshThingFilterReason(thing, thing.filter, matchedFilter);
  thing.setFilter(matchedFilter);
 
+ // TODO The beneath may have to refresh due to filter propagation
  if (matchedFilter && SelectedEntry.selectedThing === thing) {
  SelectedEntry.frameThrottledMove('closestVisible', { scrollStyle: 'none' }, () => {});
  }

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);