Add a button to go to your Follow List next to the notification bell in the top navigation bar
// ==UserScript==
// @name Royal Road: Follow List in Top Nav Bar
// @namespace https://github.com/w4tchdoge
// @version 1.1.1-20240712_174213
// @description Add a button to go to your Follow List next to the notification bell in the top navigation bar
// @author w4tchdoge
// @homepage https://github.com/w4tchdoge/MISC-UserScripts
// @match *://*.royalroad.com/*
// @run-at document-start
// @license AGPL-3.0-or-later
// @history 1.1.1 — Only add the follow list icon to the top nav bar when the user is logged in
// @history 1.1.0 — Have script wait only until the notification element exists as opposed to waiting until everything loaded
// @history 1.0.1 — Change padding values to make it more aesthetically pleasing
// @history 1.0.0 — Initial userscript creation
// ==/UserScript==
(async function () {
`use strict`;
// from https://stackoverflow.com/a/61511955/11750206
function waitForElm(selector, search_root = document) {
return new Promise(resolve => {
if (search_root.querySelector(selector)) {
return resolve(search_root.querySelector(selector));
}
const observer = new MutationObserver(mutations => {
if (search_root.querySelector(selector)) {
observer.disconnect();
resolve(search_root.querySelector(selector));
}
});
// If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
observer.observe(document.documentElement, {
childList: true,
subtree: true
});
});
}
// Wait for page header to load
const page_header = await waitForElm(`.page-header-top`);
// Get login state; true is logged in
console.log(`
Royal Road Follow List in Top Nav Bar UserScript
------------------------
Checking Login Status`
);
const login_state = (function () {
try {
const login_state = page_header.querySelectorAll(`a[href*="account/login"]`).length;
return ((login_state > 0 == false) ? true : false);
} catch (error) {
return false;
}
})();
// console.log(page_header, login_state);
// console.log(login_state);
// Run the rest of the script only when logged in
if (login_state == true) {
console.log(`
Royal Road Follow List in Top Nav Bar UserScript
------------------------
User is Logged In
Running the rest of the UserScript`
);
// Create a "Follow List" element that is to go in the top nav bar next to the notification bell
const navBar_follow_list_main = Object.assign(document.createElement(`li`), {
id: `userscript-navbutton-followlist-main`,
className: `dropdown`,
innerHTML: `<a href="/my/follows" class="dropdown-toggle"><i class="fas fa-bookmark" id="userscript-navbutton-followlist-icon"></i></a>`
});
// Code for changing padding based on media query modified from example at https://www.w3schools.com/howto/howto_js_media_queries.asp
// Create function to change padding
function PaddingChange(media_query) {
if (media_query.matches) {
navBar_follow_list_main.querySelector(`a`).style.padding = `17px 6px 10px 2px`;
} else {
navBar_follow_list_main.querySelector(`a`).style.padding = `17px 8px 10px 6px`;
}
}
// Create media query used to trigger PaddingChange
const media_query = window.matchMedia(`(max-width: 767px)`);
// Calling PaddingChange at script runtime
PaddingChange(media_query);
// Make script listen for changes in width that would trigger the media query
media_query.addEventListener(`change`, function () {
PaddingChange(media_query);
});
// Find the notification bell
const navBar_notifications = await waitForElm(`#header_notification_bar`, page_header);
// Put the "Follow List" element after the notification bell
navBar_notifications.after(navBar_follow_list_main);
} else { console.log(`\nRoyal Road Follow List in Top Nav Bar UserScript\n------------------------\nUser is Not Logged In\nHalting Script Execution`); }
})();