DnDB Sidebar

Automatically switches sidebar between fixed and overlay based on width. Escape closes if overlay

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

ستحتاج إلى تثبيت إضافة مثل Stylus لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتتمكن من تثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

(لدي بالفعل مثبت أنماط للمستخدم، دعني أقم بتثبيته!)

// ==UserScript==
// @name     		DnDB Sidebar
// @description		Automatically switches sidebar between fixed and overlay based on width. Escape closes if overlay
// @version  		1
// @grant    		none
// @match 	        https://www.dndbeyond.com/*
// @require 		http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// @require 		https://greasyfork.org/scripts/6250-waitforkeyelements/code/waitForKeyElements.js?version=23756
// @namespace https://greasyfork.org/users/789634
// ==/UserScript==

/* global $ */
/* global waitForKeyElements */

// dndbeyond is a react app that doesn't always reload the page. We track style changes
// on the body so we know when the combat tracker screen is loaded, otherwise
// we're constantly polling for the right DOM elements to load, and then they only
// work on the first page change.
var observer = new MutationObserver(function(mutations) {
    if( observer.event_bound == 'undefined' ) {
        observer.event_bound = false;
    }
    if(document.URL == observer.url){
        return;
    }else{
        observer.url = document.URL;
        if(observer.url.match(/profile\/(.*)\/characters\/(.*)/g)){
            if($(".body-rpgcharacter-sheet").length){
                if(!observer.event_bound){
                    observer.event_bound = true;
                    window_resized();
                    window.addEventListener('resize', window_resized);
                    window.addEventListener('keydown', body_keydown);
                }
            }else{
                if(observer.event_bound){
                    observer.event_bound = false;
                    window.removeEventListener('resize', window_resized);
                    window.removeEventListener('keydown', window_resized);
                }
            }
    }
    }
});

observer.observe($(document.body)[0], {
    childList: true,
});

var body_keydown = function(event){
    if(event.code == 'Escape' && $(".ct-sidebar__body--overlay-right").length){
        $('.ct-sidebar__control--collapse').click();
    }
}

var window_resized = function(){
    if(window.innerWidth >= 1605 && $(".ct-sidebar--hidden").length){
        $('.ct-sidebar__control--expand').click();
        waitForKeyElements('.ct-sidebar__control--fixed', function(){
            $('.ct-sidebar__control--fixed').click();
        });
    }
    if(window.innerWidth < 1605 && $(".ct-sidebar--visible").length){
        $('.ct-sidebar__control--overlay').click();
    }
}