fix-tool-community-page-styling.js

// ==UserScript==
// @name         Tool Band Community Style Fixes
// @description  Fix styling issues with Tool Band's community website.
// @namespace    http://src.run/
// @version      0.1.0
// @copyright    2023, SRC LLC
// @license      https://src.mit-license.com/
// @author       Rob Frawley 2nd <[email protected]>
// @match        https://www.toolband.com/forums*
// @match        https://www.toolband.com/activities*
// @icon         data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIEZvbnQgQXdlc29tZSBQcm8gNS4xNS40IGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIC0tPjxkZWZzPjxzdHlsZT4uZmEtc2Vjb25kYXJ5e29wYWNpdHk6LjR9PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTM1MiAyNTZhMjQgMjQgMCAxIDAgMjQgMjQgMjQgMjQgMCAwIDAtMjQtMjR6bS0xOTQuNDggMTZoMzdMMTc2IDIxOC43OHpNNDY0IDY0SDQ4YTQ4IDQ4IDAgMCAwLTQ4IDQ4djI4OGE0OCA0OCAwIDAgMCA0OCA0OGg0MTZhNDggNDggMCAwIDAgNDgtNDhWMTEyYTQ4IDQ4IDAgMCAwLTQ4LTQ4ek0yNTAuNTggMzUyaC0xNi45NGExNiAxNiAwIDAgMS0xNS4xMi0xMC43NUwyMTEuMTUgMzIwaC03MC4yOWwtNy4zOCAyMS4yNUExNiAxNiAwIDAgMSAxMTguMzYgMzUyaC0xNi45NGExNiAxNiAwIDAgMS0xNS4xMi0yMS4yNUwxNDAgMTc2LjEyQTI0IDI0IDAgMCAxIDE2Mi42NyAxNjBoMjYuNjZBMjQgMjQgMCAwIDEgMjEyIDE3Ni4xM2w1My42OSAxNTQuNjJBMTYgMTYgMCAwIDEgMjUwLjU4IDM1MnpNNDI0IDMzNmExNiAxNiAwIDAgMS0xNiAxNmgtMTZhMTUuNzQgMTUuNzQgMCAwIDEtMTItNS42OEE3MiA3MiAwIDEgMSAzNTIgMjA4YTcxLjA1IDcxLjA1IDAgMCAxIDI0IDQuNDJWMTc2YTE2IDE2IDAgMCAxIDE2LTE2aDE2YTE2IDE2IDAgMCAxIDE2IDE2eiIgY2xhc3M9ImZhLXNlY29uZGFyeSIvPjxwYXRoIGQ9Ik0yMTIgMTc2LjEzQTI0IDI0IDAgMCAwIDE4OS4zMyAxNjBoLTI2LjY2QTI0IDI0IDAgMCAwIDE0MCAxNzYuMTJMODYuMyAzMzAuNzVBMTYgMTYgMCAwIDAgMTAxLjQyIDM1MmgxNi45NGExNiAxNiAwIDAgMCAxNS4xMi0xMC43NWw3LjM4LTIxLjI1aDcwLjI5bDcuMzcgMjEuMjVBMTYgMTYgMCAwIDAgMjMzLjY0IDM1MmgxNi45NGExNiAxNiAwIDAgMCAxNS4xMS0yMS4yNXpNMTU3LjUyIDI3MkwxNzYgMjE4Ljc4IDE5NC40OCAyNzJ6TTQwOCAxNjBoLTE2YTE2IDE2IDAgMCAwLTE2IDE2djM2LjQyYTcxLjA1IDcxLjA1IDAgMCAwLTI0LTQuNDIgNzIgNzIgMCAxIDAgMjggMTM4LjMyIDE1Ljc0IDE1Ljc0IDAgMCAwIDEyIDUuNjhoMTZhMTYgMTYgMCAwIDAgMTYtMTZWMTc2YTE2IDE2IDAgMCAwLTE2LTE2em0tNTYgMTQ0YTI0IDI0IDAgMSAxIDI0LTI0IDI0IDI0IDAgMCAxLTI0IDI0eiIgY2xhc3M9ImZhLXByaW1hcnkiLz48L3N2Zz4=
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_xmlhttpRequest
// @grant        GM_registerMenuCommand
// @grant        GM_deleteValue
// @grant        GM_listValues
// @grant        GM_getResourceText
// @grant        GM_getResourceURL
// @grant        GM_log
// @grant        GM_setClipboard
// @grant        GM_info
// ==/UserScript==

(function() {
    'use strict';

    const setIntervalMilliSec = 0;
    const setResizingListener = true;

    const addStyleSelectorMap = {
        '.fan-wall.activity-panel .fan-wall-post.discussions': [
            'border: 4px solid rgb(0 0 0 / 50%)',
            'border-left: none',
            'border-right: none',
        ],
        '.fan-wall.activity-panel .fan-wall-post.discussions li': [
            'background-color: rgb(0 0 0 / 20%)',
            'border-left: 4px solid rgb(0 0 0 / 25%)',
            'border-right: 4px solid rgb(0 0 0 / 25%)',
            'margin-bottom: 2px',
            'padding: 1em',
        ],
        '.fan-wall.activity-panel .fan-wall-post.discussions li:first-child': [
            'margin-top: 2px',
        ],
        '.fan-wall.activity-panel .fan-wall-post.discussions li:hover, .fan-wall.activity-panel .fan-wall-post.discussions li:focus': [
            'background-color: rgb(0 0 0 / 22.5%)',
        ],
        '.fan-wall.activity-panel .fan-wall-post.discussions li.un-read' : [
            'background-color: rgb(142 104 42 / 50%)',
            'border-left-color: rgb(142 104 42 / 95%)',
            'border-right-color: rgb(142 104 42 / 95%)',
        ],
        '.fan-wall.activity-panel .fan-wall-post.discussions li.un-read:hover, .fan-wall.activity-panel .fan-wall-post.discussions li.un-read:focus': [
            'background-color: rgb(142 104 42 / 55%)',
        ],
        '.fan-wall.activity-panel .fan-wall-post.discussions li .profile-pic' : [
            'margin: 1em 1.5em 1em 0.5em',
            'border: 2px solid rgb(255 255 255 / 80%)',
            'box-shadow: 0 0 0 4px rgb(0 0 0 / 40%)',
        ],
        '.fan-wall.activity-panel .fan-wall-post.discussions li.un-read .profile-pic' : [
            'box-shadow: 0 0 0 4px rgb(39 31 19 / 80%)',
        ],
        '.fan-wall.activity-panel .fan-wall-post.discussions li .content': [
            'border-bottom: none',
            'margin: 0',
            'padding: 1.0em 0 1.0em 0',
        ],
        '.fan-wall.activity-panel .fan-wall-post.discussions li p:first-child': [
            'font-size: 1.2em',
            'margin-bottom: 0.25em',
        ],
        '.fan-wall.activity-panel .fan-wall-post.discussions li.un-read p:first-child' : [
            'font-weight: 500',
        ],
        '.fan-wall.activity-panel .fan-wall-post.discussions li .content .time': [
            'float: none',
            'margin: 0',
            'padding: 0',
        ],
        '.upper-heading .comment-reply-head .vote-btn.notification-view-post': [
            'color: rgb(255 255 255 / 50%)',
        ],
        '.previous-comment-btn span.previous-comment-link': [
            'color: rgb(255 255 255 / 30%)',
        ],
        '.previous-comment-btn span.previous-comment-link:hover,.previous-comment-btn span.previous-comment-link:active ': [
            'color: rgb(255 255 255 / 50%)',
        ],
    };

    const toHiddenSelectorSet = [
        '#practiceOverlay > div > div > div.tw-flex > div:nth-child(1)',
    ];

    const toDeleteSelectorSet = [];

    const onClicksSelectorSet = [
        'div.song-details > div > div > button:nth-child(2)',
    ]

    function getPageSizeX() {
        return window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth
            || 0;
    }

    function getPageSizeY() {
        return window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight
            || 0;
    }

    function debounceEvent(func) {
        var timer;

        return function(event) {
            if (timer) {
                clearTimeout(timer);
            }

            timer = setTimeout(func, 100, event);
        };
    }

    function joinStyles(properties, selector) {
        return properties.map(function (value) {
            return typeof value === 'function' ? value(selector) : value;
        }).filter(function (value) {
            return typeof value === 'string' && value.trim().length > 0;
        }).map(function (value) {
            return value.trim() + ' !important';
        }).join('; ');
    }

    function main() {
        GM_log(`(MAIN) Executing main function ...`);

        GM_log(`(MAIN) Performing element removal operations ...`);

        toDeleteSelectorSet.forEach(function(querySelector) {
            try {
                document.querySelector(querySelector).remove();
                GM_log(`    -> SUCCESS: Removed els matching query selector(s) => [ "${querySelector}" ]`);
            } catch {
                GM_log(`    -> FAILURE: Removed els matching query selector(s) => [ "${querySelector}" ]`);
            }
        });

        GM_log(`(MAIN) Performing element hiding operations ...`);

        toHiddenSelectorSet.forEach(function(querySelector) {
            try {
                document.querySelector(querySelector).style.display = "none !important";
                GM_addStyle(`${querySelector} { display: none !important; }`);
                GM_log(`    -> SUCCESS: Hid els matching query selector(s) => [ "${querySelector}" ]`);
            } catch {
                GM_log(`    -> FAILURE: Hid els matching query selector(s) => [ "${querySelector}" ]`);
            }
        });

        GM_log(`(MAIN) Completed main function ...`);
    }

    function init() {
        GM_log(`(INIT) Executing initialization function ...`);

        GM_log(`(INIT) Registering main function interval invokation ...`);

        if (setIntervalMilliSec && setIntervalMilliSec > 0) {
            document.setInterval(setIntervalMilliSec, debounceEvent(main));
            GM_log(`    -> SUCCESS: Main function will be invoked every "${setIntervalMilliSec}" milliseconds ...`);
        } else {
            GM_log(`    -> SKIPPED: Reoccuring invokation not set (configured interval time is not a non-zero positive number) ...`);
        }

        GM_log(`(INIT) Registering "click" event handlers to invoke main function ...`);

        onClicksSelectorSet.forEach(function(querySelector) {
            try {
                document.querySelector(querySelector).addEventListener('click', function() {
                    GM_log(`(EVNT) Click event was triggered: invoking main function!`);
                    setTimeout(main, debounceEvent(750));
                    setTimeout(main, debounceEvent(1500));
                }, false);
                GM_log(`    -> SUCCESS: Registered click event for element matching query selector => [ "${querySelector}" ]`);
            } catch {
                GM_log(`    -> FAILURE: Registered click event for element matching query selector => [ "${querySelector}" ]`);
            }
        });

        GM_log(`(INIT) Registering "resize" event handler to invoke main function ...`);

        if (setResizingListener) {
            window.addEventListener("resize", debounceEvent(function(event) {
                GM_log(`(EVNT) Resize event was triggered: invoking main function!`);
                main();
            }));
            GM_log(`    -> SUCCESS: Main function will be invoked on window "resize" event ...`);
        } else {
            GM_log(`    -> SKIPPED: The "resize" event handler is configured to be disabled ...`);
        }

        GM_log(`(INIT) Performing element styling operations ...`);

        for (const selector in addStyleSelectorMap) {
            let definition = `${selector} { ${joinStyles(addStyleSelectorMap[selector], selector)}; }`;

            try {
                GM_addStyle(definition);
                GM_log(`    -> SUCCESS: Created new selector style definitions => [ ${definition} ]`);
            } catch {
                GM_log(`    -> FAILURE: Created new selector style definitions => [ ${definition} ]`);
            }
        }

        GM_log(`(INIT) Completed initialization function ...`);
    };

    window.addEventListener('load', function() {
        init();
        main();
    }, false);

//

})();