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

@@ -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') }; },
  },

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' }, () => {});
  }

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