feat: Show controls when hiding a post on its permalink page

src/features/no_recommended/hide_recommended_community_posts.js

@@ -1,23 +1,20 @@
-import { buildStyle, filterPostElements, getTimelineItemWrapper } from '../../utils/interface.js';
+import { createPostHideFunctions } from '../../utils/hide_posts.js';
+import { filterPostElements } from '../../utils/interface.js';
 import { onNewPosts } from '../../utils/mutations.js';
 import { timelineObject } from '../../utils/react_props.js';
 import { forYouTimelineFilter, searchPostsTimelineFilter } from '../../utils/timeline_id.js';
 import { joinedCommunityUuids } from '../../utils/user.js';
 
-const hiddenAttribute = 'data-no-recommended-community-posts-hidden';
 const timeline = [forYouTimelineFilter, searchPostsTimelineFilter];
 const includeFiltered = true;
 
-export const styleElement = buildStyle(`[${hiddenAttribute}] {
-  content: linear-gradient(transparent, transparent);
-  height: 0;
-}`);
+const { hidePost, showPosts } = createPostHideFunctions({ id: 'no-recommended-community-posts' });
 
 const processPosts = postElements =>
   filterPostElements(postElements, { timeline, includeFiltered }).forEach(async postElement => {
     const { community } = await timelineObject(postElement);
     if (community && !joinedCommunityUuids.includes(community.uuid)) {
-      getTimelineItemWrapper(postElement).setAttribute(hiddenAttribute, '');
+      hidePost(postElement);
     }
   });
 
@@ -27,6 +24,5 @@ export const main = async function () {
 
 export const clean = async function () {
   onNewPosts.removeListener(processPosts);
-
-  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
+  showPosts();
 };

src/features/postblock/index.js

@@ -1,38 +1,31 @@
 import { dom } from '../../utils/dom.js';
-import { getTimelineItemWrapper, filterPostElements } from '../../utils/interface.js';
+import { createPostHideFunctions } from '../../utils/hide_posts.js';
+import { filterPostElements } from '../../utils/interface.js';
 import { registerMeatballItem, unregisterMeatballItem } from '../../utils/meatballs.js';
 import { showModal, hideModal, modalCancelButton } from '../../utils/modals.js';
 import { onNewPosts, pageModifications } from '../../utils/mutations.js';
 import { timelineObject } from '../../utils/react_props.js';
-import { postPermalinkTimelineFilter, timelineSelector } from '../../utils/timeline_id.js';
 import { navigate } from '../../utils/tumblr_helpers.js';
 
 const meatballButtonBlockId = 'postblock-block';
 const meatballButtonBlockLabel = 'Block this post';
 const meatballButtonUnblockId = 'postblock-unblock';
 const meatballButtonUnblockLabel = 'Unblock this post';
 
-const hiddenAttribute = 'data-postblock-hidden';
-const controlsClass = 'xkit-postblock-hidden-post-controls';
-const controlledHiddenAttribute = 'data-xkit-postblock-hidden-controlled';
 const storageKey = 'postblock.blockedPostRootIDs';
 const blogUuidsStorageKey = 'postblock.blockedPostBlogUUIDs';
 
-// Remove outdated elements when loading module
-$(`.${controlsClass}`).remove();
-
 let blogUuids = {};
 
-const addPermalinkPageControls = timelineElement => {
-  const controlsElement = dom('div', { class: controlsClass }, null, [
-    'This post is hidden by PostBlock.',
-    dom('button', null, { click: () => controlsElement.remove() }, 'View post'),
-  ]);
-  timelineElement.prepend(controlsElement);
-};
-
 let blockedPostRootIDs = [];
 
+const { hidePost, showPost, showPosts } = createPostHideFunctions({
+  id: 'postblock',
+  permalinkPageControls: {
+    message: 'This post is hidden by PostBlock.',
+  },
+});
+
 const saveUuidPair = (postId, blogUuid) => {
   if (blockedPostRootIDs.includes(postId) && !blogUuids[postId]) {
     blogUuids[postId] = blogUuid;
@@ -55,15 +48,9 @@ const processPosts = postElements =>
     const rootID = rebloggedRootId || postID;
 
     if (blockedPostRootIDs.includes(rootID)) {
-      const timelineElement = postElement.closest(timelineSelector);
-      if (postPermalinkTimelineFilter(postID)(timelineElement)) {
-        getTimelineItemWrapper(postElement).setAttribute(controlledHiddenAttribute, '');
-        addPermalinkPageControls(timelineElement);
-      } else {
-        getTimelineItemWrapper(postElement).setAttribute(hiddenAttribute, '');
-      }
+      hidePost(postElement);
     } else {
-      getTimelineItemWrapper(postElement).removeAttribute(hiddenAttribute);
+      showPost(postElement);
     }
 
     saveUuidPair(id, uuid);
@@ -144,8 +131,5 @@ export const clean = async function () {
   unregisterMeatballItem(meatballButtonUnblockId);
   onNewPosts.removeListener(processPosts);
 
-  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
-  $(`.${controlsClass}`).remove();
+  showPosts();
 };
-
-export const stylesheet = true;

src/features/tweaks/hide_blocked_blogs.js

@@ -1,14 +1,18 @@
-import { buildStyle, getTimelineItemWrapper, filterPostElements } from '../../utils/interface.js';
+import { createPostHideFunctions } from '../../utils/hide_posts.js';
+import { filterPostElements } from '../../utils/interface.js';
 import { onNewPosts } from '../../utils/mutations.js';
 import { isMyPost, timelineObject } from '../../utils/react_props.js';
 import { blogTimelineFilter, timelineSelector } from '../../utils/timeline_id.js';
 
-const hiddenAttribute = 'data-xkit-tweaks-hide-blocked-blogs-hidden';
-export const styleElement = buildStyle(`
-[${hiddenAttribute}] {
-  content: linear-gradient(transparent, transparent);
-  height: 0;
-}`);
+const { hidePost, showPosts } = createPostHideFunctions({
+  id: 'tweaks-hide-blocked-blogs',
+
+  // Only applied to posts hidden by a blocked blog in the trail.
+  // Posts *authored by* blocked blogs aren't hidden with this util (see isTimelineExempt below).
+  permalinkPageControls: {
+    message: 'This post contains a blocked blog.',
+  },
+});
 
 const processPosts = (postElements) => {
   filterPostElements(postElements, { includeFiltered: true }).forEach(async postElement => {
@@ -32,7 +36,7 @@ const processPosts = (postElements) => {
         continue;
       }
 
-      getTimelineItemWrapper(postElement).setAttribute(hiddenAttribute, '');
+      hidePost(postElement);
       break;
     }
   });
@@ -44,5 +48,5 @@ export const main = async function () {
 
 export const clean = async function () {
   onNewPosts.removeListener(processPosts);
-  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
+  showPosts();
 };

src/features/tweaks/hide_filtered_posts.js

@@ -1,17 +1,18 @@
 import { keyToCss } from '../../utils/css_map.js';
-import { buildStyle, getTimelineItemWrapper } from '../../utils/interface.js';
+import { createPostHideFunctions } from '../../utils/hide_posts.js';
+import { getTimelineItemWrapper } from '../../utils/interface.js';
 import { pageModifications } from '../../utils/mutations.js';
 
-const hiddenAttribute = 'data-tweaks-hide-filtered-posts-hidden';
-export const styleElement = buildStyle(`
-[${hiddenAttribute}] {
-  content: linear-gradient(transparent, transparent);
-  height: 0;
-}`);
+const { hidePost, showPosts } = createPostHideFunctions({
+  id: 'tweaks-hide-filtered-posts',
+  permalinkPageControls: {
+    message: 'This post contains filtered tags or content.',
+  },
+});
 
 const hideFilteredPosts = filteredScreens => filteredScreens
   .map(getTimelineItemWrapper)
-  .forEach(timelineItem => timelineItem.setAttribute(hiddenAttribute, ''));
+  .forEach(hidePost);
 
 export const main = async function () {
   const filteredScreenSelector = `article ${keyToCss('filteredScreen')}`;
@@ -20,6 +21,5 @@ export const main = async function () {
 
 export const clean = async function () {
   pageModifications.unregister(hideFilteredPosts);
-
-  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
+  showPosts();
 };

src/features/tweaks/hide_liked_posts.js

@@ -1,23 +1,19 @@
-import { buildStyle, getTimelineItemWrapper, filterPostElements } from '../../utils/interface.js';
+import { createPostHideFunctions } from '../../utils/hide_posts.js';
+import { filterPostElements } from '../../utils/interface.js';
 import { onNewPosts } from '../../utils/mutations.js';
 import { isMyPost, timelineObject } from '../../utils/react_props.js';
 import { followingTimelineFilter } from '../../utils/timeline_id.js';
 
 const timeline = followingTimelineFilter;
 
-const hiddenAttribute = 'data-tweaks-hide-liked-posts-hidden';
-export const styleElement = buildStyle(`
-[${hiddenAttribute}] {
-  content: linear-gradient(transparent, transparent);
-  height: 0;
-}`);
+const { hidePost, showPosts } = createPostHideFunctions({ id: 'tweaks-hide-liked-posts' });
 
 const processPosts = async function (postElements) {
   filterPostElements(postElements, { timeline }).forEach(async postElement => {
     const { liked } = await timelineObject(postElement);
     const myPost = await isMyPost(postElement);
 
-    if (liked && !myPost) getTimelineItemWrapper(postElement).setAttribute(hiddenAttribute, '');
+    if (liked && !myPost) hidePost(postElement);
   });
 };
 
@@ -27,6 +23,5 @@ export const main = async function () {
 
 export const clean = async function () {
   onNewPosts.removeListener(processPosts);
-
-  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
+  showPosts();
 };

src/features/tweaks/hide_my_posts.js

@@ -1,24 +1,18 @@
-import { buildStyle, getTimelineItemWrapper, filterPostElements } from '../../utils/interface.js';
+import { createPostHideFunctions } from '../../utils/hide_posts.js';
+import { filterPostElements } from '../../utils/interface.js';
 import { onNewPosts } from '../../utils/mutations.js';
 import { isMyPost } from '../../utils/react_props.js';
 import { followingTimelineFilter } from '../../utils/timeline_id.js';
 
 const excludeClass = 'xkit-tweaks-hide-my-posts-done';
 const timeline = followingTimelineFilter;
 
-const hiddenAttribute = 'data-tweaks-hide-my-posts-hidden';
-export const styleElement = buildStyle(`
-[${hiddenAttribute}] {
-  content: linear-gradient(transparent, transparent);
-  height: 0;
-}`);
+const { hidePost, showPosts } = createPostHideFunctions({ id: 'tweaks-hide-my-posts' });
 
 const processPosts = async function (postElements) {
   filterPostElements(postElements, { excludeClass, timeline }).forEach(async postElement => {
-    const myPost = await isMyPost(postElement);
-
-    if (myPost) {
-      getTimelineItemWrapper(postElement).setAttribute(hiddenAttribute, '');
+    if (await isMyPost(postElement)) {
+      hidePost(postElement);
     }
   });
 };
@@ -31,5 +25,5 @@ export const clean = async function () {
   onNewPosts.removeListener(processPosts);
 
   $(`.${excludeClass}`).removeClass(excludeClass);
-  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
+  showPosts();
 };