MeFi Navigator Redux

MetaFilter: navigate through users' comments, and highlight comments by OP and yourself
Від 29.03.2025. Дивіться остання версія.
Відвідайте сайт автора, щоб отримати підтримку, поставити питання, залишити відгук, або поскаржитись на сценарій.
Wrap lines
// ==UserScript==
// @name         MeFi Navigator Redux
// @namespace    https://github.com/klipspringr/mefi-userscripts
// @version      2025-03-29-b
// @description  MetaFilter: navigate through users' comments, and highlight comments by OP and yourself
// @author       Klipspringer
// @supportURL   https://github.com/klipspringr/mefi-userscripts
// @license      MIT
// @match        *://*.metafilter.com/*
// @grant        none
// ==/UserScript==

const SELF_HTML =
    '<span style="padding:0 4px;margin-left:4px;background-color:#C8E0A1;color:#000;font-size:0.8em;border-radius:2px;">me</span>';

const getCookie = (key) => {
    const s = RegExp(key + "=([^;]+)").exec(document.cookie);
    if (!s || !s[1]) return null;
    return decodeURIComponent(s[1]);
};

const createLink = (href, content) => {
    const a = document.createElement("a");
    a.setAttribute("href", href);
    a.textContent = content;
    return a;
};

const markSelf = (targetNode) =>
    targetNode.insertAdjacentHTML("afterend", SELF_HTML);

const markOP = (targetNode) => {
    const wrapper = targetNode.parentNode.parentNode;
    wrapper.style["border-left"] = "5px solid #0004"; // 40% black
    wrapper.style["padding-left"] = "10px";
};

const processByline = (
    bylineNode,
    user,
    anchor,
    anchors,
    firstRun,
    self = null,
    op = null
) => {
    // don't mark self or OP more than once
    if (firstRun || !bylineNode.hasAttribute("data-mfnr-byline")) {
        if (self !== null && user === self) markSelf(bylineNode);
        if (op !== null && user === op) markOP(bylineNode);
        bylineNode.setAttribute("data-mfnr-byline", "");
    }

    if (anchors.length <= 1) return;

    const i = anchors.indexOf(anchor);
    const previous = anchors[i - 1];
    const next = anchors[i + 1];

    // if not first run, check for existing nav and remove it if exists
    if (!firstRun)
        bylineNode.parentNode.querySelector("span[data-mfnr-nav]")?.remove();

    const navigator = document.createElement("span");
    navigator.setAttribute("data-mfnr-nav", "");

    const navigatorNodes = [" ["];
    if (previous) navigatorNodes.push(createLink("#" + previous, "⮝"));
    navigatorNodes.push(anchors.length);
    if (next) navigatorNodes.push(createLink("#" + next, "⮟"));
    navigatorNodes.push("]");

    navigator.append(...navigatorNodes);
    bylineNode.parentNode.append(navigator);
};

const run = (firstRun = false) => {
    const start = performance.now();

    const subsite = window.location.hostname.split(".")[0];
    const self = getCookie("USER_NAME");

    // post node: first smallcopy in div.copy (works on all subsites, 2025-03-29)
    const postNode = document.querySelector(
        "div.copy > span.smallcopy > a:first-child"
    );
    const op = postNode.textContent;

    // initialise with post
    const bylines = [[op, "top"]];
    const mapUsersAnchors = new Map([[op, ["top"]]]);

    // comment nodes: smallcopy children of div.comments (works on all subsites, 2025-03-29)
    const commentNodes = document.querySelectorAll(
        "div.comments > span.smallcopy > a:first-child"
    );

    for (const node of commentNodes) {
        const user = node.textContent;

        const anchorElement =
            node.parentElement.parentElement.previousElementSibling;
        const anchor = anchorElement.getAttribute("name");

        bylines.push([user, anchor]);

        const anchors = mapUsersAnchors.get(user) ?? [];
        mapUsersAnchors.set(user, anchors.concat(anchor));
    }

    for (const [i, bylineNode] of [postNode, ...commentNodes].entries()) {
        processByline(
            bylineNode,
            bylines[i][0],
            bylines[i][1],
            mapUsersAnchors.get(bylines[i][0]),
            firstRun,
            self,
            subsite !== "ask" && i > 0 ? op : null // don't highlight OP on AskMe, as site already does
        );
    }

    console.log(
        "mefi-navigator-redux",
        firstRun ? "first-run" : "new-comments",
        1 + commentNodes.length,
        performance.now() - start
    );
};

(() => {
    if (!/^\/(\d|comments\.mefi)/.test(window.location.pathname)) return;

    const newCommentsElement = document.getElementById("newcomments");
    if (newCommentsElement) {
        const observer = new MutationObserver(run);
        observer.observe(newCommentsElement, { childList: true });
    }

    run(true);
})();