Create hide_community_carousels.js

src/features/no_recommended.json

@@ -28,6 +28,11 @@
       "label": "Hide recommended tags between posts",
       "default": false
     },
+    "hide_community_carousels": {
+      "type": "checkbox",
+      "label": "Hide recommended communities between posts",
+      "default": false
+    },
     "hide_lightbox_related": {
       "type": "checkbox",
       "label": "Hide related posts in the photo lightbox",

src/features/no_recommended/hide_community_carousels.js

@@ -0,0 +1,36 @@
+import { keyToCss } from '../../utils/css_map.js';
+import { buildStyle, getTimelineItemWrapper } from '../../utils/interface.js';
+import { pageModifications } from '../../utils/mutations.js';
+import { timelineObject } from '../../utils/react_props.js';
+
+const hiddenAttribute = 'data-no-recommended-community-carousels-hidden';
+
+export const styleElement = buildStyle(`
+  [${hiddenAttribute}] { position: relative; }
+  [${hiddenAttribute}] > div { visibility: hidden; position: absolute; max-width: 100%; }
+  [${hiddenAttribute}] > div :is(img, video, canvas) { display: none }
+`);
+
+const carouselSelector = `${keyToCss('listTimelineObject')} ${keyToCss('carouselWrapper')}`;
+
+const hideCommunityCarousels = carousels =>
+  carousels.forEach(async carousel => {
+    const { elements } = await timelineObject(carousel);
+    if (elements.some(({ objectType }) => objectType === 'community_card')) {
+      const timelineItem = getTimelineItemWrapper(carousel);
+      if (timelineItem.previousElementSibling.querySelector(keyToCss('titleObject'))) {
+        timelineItem.setAttribute(hiddenAttribute, '');
+        timelineItem.previousElementSibling.setAttribute(hiddenAttribute, '');
+      }
+    }
+  });
+
+export const main = async function () {
+  pageModifications.register(carouselSelector, hideCommunityCarousels);
+};
+
+export const clean = async function () {
+  pageModifications.unregister(hideCommunityCarousels);
+
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
+};