Hey ! I do know, bizarre title, you might be confused about that and don’t fret.
Introduction
Small presentation of me, my identify is Thomas, 23 years previous, and I am a mod on this AWESOME group named dev.to since 3 years now 💚🌱
I am additionally a volunteer mod at VscodeTips and CodeNewbie. Do not hesitate to examine these communities!
If you find yourself a mod on a Forem group, you’re a sidebar panel to upvote/downvote the content material of any posts. Add/take away #tags, and report if the content material as a spam or different content material towards the Code of Conduct.
The instrument in query
Once you see the publish, the sidebar mod panel isn’t open by default. So I needed to create a easy script in JavaScript with the Tampermonkey extension in order that the sidebar panel opens when the publish web page is loaded. ✨
The way it works
I searched immediately into the code supply of Forem to detect how the panel open after we click on on this button
And I discovered this piece of code, the operate to toggle the sidebar mod panel ! 😎
operate toggleModActionsMenu() {
doc
.getElementById('mod-actions-menu-btn-area')
.classList.take away('hidden');
doc
.getElementsByClassName('mod-actions-menu')[0]
.classList.toggle('exhibiting');
// exhibiting shut icon within the mod panel whether it is opened by clicking the button
const modContainer = doc.getElementById('mod-container');
const panelDocument = modContainer.contentDocument;
if (panelDocument) {
const closePanel = panelDocument.getElementsByClassName(
'close-actions-panel',
)[0];
closePanel && closePanel.classList.take away('hidden');
}
}
After seen that, I created the Tampermonkey file :
(operate() {
'use strict';
// Get the ingredient with this ID and take away the category 'hidden'
doc
.getElementById('mod-actions-menu-btn-area')
.classList.take away('hidden');
// Present the sidebar mod menu
doc
.getElementsByClassName('mod-actions-menu')[0]
.classList.toggle('exhibiting');
})();
Open Supply 💚
Come on and turns into de Open Sourcerer ! This code supply is revealed, and any consumer can contribute ! 🧙🏼♂️
I significantly thank @andypiper for fixing the hyperlink to put in this script on Tampermonkey and typography. 🤩🚀