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