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.
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.
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)
Super useful extension (for me, and hopefully for other moderators) - nice work!
Thanks ! 🤩