DEV Community

Cover image for Nice tool to moderate bad posts on a Forem
Thomas Bnt ☕
Thomas Bnt ☕ Subscriber

Posted on • Updated on

Nice tool to moderate bad posts on a Forem

Hello ! I know, weird title, you are confused about that and don't worry.

Introduction

Small presentation of me, my name is Thomas, 23 years old, and I'm a mod on this AWESOME community named dev.to since 3 years now 💚🌱

I'm also a volunteer mod at VscodeTips and CodeNewbie. Don't hesitate to check these communities!

When you are a mod on a Forem community, you are a sidebar panel to upvote/downvote the content of any posts. Add/remove #tags, and report if the content as a spam or other content against the Code of Conduct.

Sidebar to moderate the posts for Mods<br>

🤔 What is Forem ? →


The tool in question

When you see the post, the sidebar mod panel is not open by default. So I wanted to create a simple script in JavaScript with the Tampermonkey extension so that the sidebar panel opens when the post page is loaded. ✨

How it works

I searched directly into the code source of Forem to detect how the panel open when we click on this button

A button when you click, he open the sidebar mod panel

And I found this piece of code, the function to toggle the sidebar mod panel ! 😎

function toggleModActionsMenu() {
    document
      .getElementById('mod-actions-menu-btn-area')
      .classList.remove('hidden');
    document
      .getElementsByClassName('mod-actions-menu')[0]
      .classList.toggle('showing');

    // showing close icon in the mod panel if it is opened by clicking the button
    const modContainer = document.getElementById('mod-container');
    const panelDocument = modContainer.contentDocument;

    if (panelDocument) {
      const closePanel = panelDocument.getElementsByClassName(
        'close-actions-panel',
      )[0];

      closePanel && closePanel.classList.remove('hidden');
    }
  }
Enter fullscreen mode Exit fullscreen mode

After seen that, I created the Tampermonkey file :

(function() {
    'use strict';
// Get the element with this ID and remove the class 'hidden'
document
      .getElementById('mod-actions-menu-btn-area')
      .classList.remove('hidden');
// Show the sidebar mod menu 
    document
      .getElementsByClassName('mod-actions-menu')[0]
      .classList.toggle('showing');
})();
Enter fullscreen mode Exit fullscreen mode

Open Source 💚

Come on and becomes de Open Sourcerer ! This code source is published, and any user can contribute ! 🧙🏼‍♂️

I particularly thank @andypiper for fixing the link to install this script on Tampermonkey and typography. 🤩🚀

GitHub logo devtotools / open-sidebar-mod-menu

Automaticaly open the Mod panel on DEV.

Open sidebar mod menu

Automatically open the Mod menu on DEV (or any Forem community).

Note

This script was created for dev.to but can work with others Forems community.

How to install it ?

  1. Install Tampermonkey or similar extension which enables the browser to run Userscripts.
  2. Copy the code in AutoOpenSidebarMenu.user.js as a Tampermonkey script.
  3. Activate the script.

Already have Tampermonkey or alternative ?

Sources







Check my Twitter account. You can see many projects and updates. You can also support me on Buy Me a Coffee, Stripe or GitHub Sponsors. Thanks for read my post ! 🤩

Top comments (2)

Collapse
 
andypiper profile image
Andy Piper

Super useful extension (for me, and hopefully for other moderators) - nice work!

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Thanks ! 🤩