Automatically switches sidebar between fixed and overlay based on width. Escape closes if overlay
// ==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();
}
}