Foxlinks styled quotes (condensed)

Format quotes like Foxlinks

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.

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

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

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

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

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

// ==UserScript==
// @name         Foxlinks styled quotes (condensed)
// @namespace    http://tampermonkey.net/
// @version      0.2.4
// @description  Format quotes like Foxlinks
// @author       sintrode
// @author       Joshh
// @match        https://*.websight.blue/thread/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=websight.blue
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';
    GM_addStyle("blockquote { border: var(--MsgTop) 2px solid; margin: 4px; border-radius: 5px; padding: 4px; }");
    GM_addStyle("blockquote > blockquote { margin-left: 0; margin-right: 0; }");
    GM_addStyle("blockquote > blockquote:last-child { margin-bottom: 0; }");
    GM_addStyle("blockquote > p { margin-top: 4px }");
    GM_addStyle("blockquote > p:first-of-type { padding: 0 4px; background-color: var(--MsgTop); border-radius: 3px 3px 0 0; margin: -4px 0 4px -4px; max-width: initial; width: 100%; }");
    GM_addStyle(".standalone-blockquote {  }");
    GM_addStyle(".standalone-blockquote > p:first-of-type { background: none; margin-bottom: 0; display: inline; }");

    main();

    function main() {
        const postsContainer = document.querySelector('#messages');
        startMutationObserver(postsContainer);

        const blockquotes = postsContainer.querySelectorAll('.message-contents blockquote > p:first-of-type');
        handleBlockquotes(blockquotes);
    }

    // Add event listener to any posts added to DOM via livelinks
    function startMutationObserver(targetNode) {
        // Options for the observer (which mutations to observe)
        const config = { childList: true };

        // Callback function to execute when mutations are observed
        const callback = (mutationList, observer) => {
            // For all mutations made to the target node, check if any nodes were added...
            for (const mutation of mutationList) {
                handleMutation(mutation);
            }
        };

        // Create an observer instance linked to the callback function
        const observer = new MutationObserver(callback);

        // Start observing the target node for configured mutations
        observer.observe(targetNode, config);
    }

    // Handle any changes made to the messages container.
    function handleMutation(mutation) {
        if(mutation.addedNodes.length) {
            for (const addedNode of mutation.addedNodes) {
                if (!addedNode.tagName) continue; // Not an element
                if(addedNode.classList.contains('post')) {
                    const addedNodeBlockquotes = addedNode.querySelectorAll('.message-contents blockquote > p:first-of-type');
                    handleBlockquotes(addedNodeBlockquotes);
                }
            }
        }
    }

    function handleBlockquotes(blockquotes) {
        for (const blockquote of blockquotes) {
            const innerHTML = blockquote.innerHTML;
            if(innerHTML.slice(0, 4) === 'From') {
                const brIndex = innerHTML.indexOf("<br>");
                if(brIndex !== -1) {
                    const html = innerHTML.slice(brIndex + 4);
                    const node = document.createElement('p');
                    node.innerHTML = html;
                    blockquote.innerHTML = innerHTML.slice(0, brIndex);
                    blockquote.parentNode.insertBefore(node, blockquote.nextSibling);
                }
            } else {
                blockquote.parentNode.classList.add('standalone-blockquote');
            }
        }
    }
})();