안녕하세요 ! 나도 알아, 이상한 제목, 당신은 그것에 대해 혼란스러워하고 걱정하지 마십시오.

소개

저의 작은 프레젠테이션, 제 이름은 23세의 Thomas이고 저는 3년 전부터 dev.to라는 AWESOME 커뮤니티의 모드입니다 💚🌱

나는 또한 VscodeTips 및 CodeNewbie에서 자원 봉사 모드입니다. 주저하지 말고 이 커뮤니티를 확인하세요!

Forem 커뮤니티의 모드인 경우 모든 게시물의 내용을 찬성/반대하는 사이드바 패널입니다. #태그를 추가/제거하고 콘텐츠가 스팸 또는 행동 강령에 위배되는 기타 콘텐츠인 경우 신고하세요.



🤔 What is Forem ? →

문제의 도구

게시물을 볼 때 기본적으로 사이드바 모드 패널이 열려 있지 않습니다. 그래서 게시물 페이지가 로드될 때 사이드바 패널이 열리도록 Tampermonkey extension을 사용하여 JavaScript에서 간단한 스크립트를 만들고 싶었습니다. ✨

작동 원리

이 버튼을 클릭할 때 패널이 어떻게 열리는지 감지하기 위해 Forem의 코드 소스를 직접 검색했습니다.



그리고 사이드바 모드 패널을 토글하는 기능인 this piece of code을 찾았습니다! 😎

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

그것을 본 후 Tampermonkey 파일을 만들었습니다.

(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 Sourcerer가 되십시오! 이 코드 소스는 게시되었으며 모든 사용자가 기여할 수 있습니다! 🧙🏼‍♂️

특히 Tampermonkey에 이 스크립트를 설치하는 링크와 타이포그래피를 수정해 주셔서 감사합니다. 🤩🚀

devtotools / 오픈 사이드바 모드 메뉴

DEV에서 Mod 패널을 자동으로 엽니다.

사이드바 모드 메뉴 열기

DEV(또는 모든 Forem 커뮤니티)에서 Mod 메뉴를 자동으로 엽니다.

Note

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

그것을 설치하는 방법?

Tampermonkey 또는 브라우저가 Userscripts를 실행할 수 있도록 하는 유사한 확장 프로그램을 설치합니다.

AutoOpenSidebarMenu.user.js의 코드를 Tampermonkey 스크립트로 복사합니다.

스크립트를 활성화합니다.

이미 Tampermonkey 또는 대안이 있습니까?

🔌
Click here to install the script →

출처

function toggleModActionsMenu() in the code source of Forem

View on GitHub





☕
내 . 많은 프로젝트와 업데이트를 볼 수 있습니다. 할 수도 있습니다support me on Buy Me a Coffee.