Create account

DEV Community

Thomas Bnt

Posted on Sep 3, 2022 • Edited on Dec 13, 2022

Nice tool to moderate bad posts on a Forem

#javascript #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.

🤔 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

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

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

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. 🤩🚀

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 ?

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