Reddit show username in all

Show username hover card in posts

K instalaci tototo skriptu si budete muset nainstalovat rozšíření jako Tampermonkey, Greasemonkey nebo Violentmonkey.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat manažer uživatelských skriptů.

(Už mám manažer uživatelských skriptů, nechte mě ho nainstalovat!)

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.

(Už mám manažer uživatelských stylů, nechte mě ho nainstalovat!)

// ==UserScript==
// @name                Reddit show username in all
// @namespace           https://greasyfork.org/users/821661
// @match               https://www.reddit.com/*
// @grant               none
// @version             0.1
// @author              hdyzen
// @description         Show username hover card in posts
// @license             GPL-3.0-only
// ==/UserScript==

const observer = new MutationObserver(() => {
	const nodes = document.querySelectorAll("shreddit-post:not(:has([slot='authorName']))");

	for (const node of nodes) {
		const authorName = node.getAttribute("author");
		const avatarUrl = node.getAttribute("icon");
		const creditBar = node.querySelector("[id^='feed-post-credit-bar-']");

		creditBar.insertAdjacentHTML("beforeend", getTemplate(authorName, avatarUrl));
	}
});

observer.observe(document, { childList: true, subtree: true });

function getTemplate(authorName, avatarUrl) {
	return `
    <span slot="authorName"
        class="flex items-center text-neutral-content visited:text-neutral-content-weak font-bold a cursor-pointer">
        <div class="inline-flex items-center max-w-full">

            <faceplate-hovercard enter-delay="500" leave-delay="150" position="bottom-start" data-id="user-hover-card"
                label="${authorName}" mouse-only>
                <faceplate-tracker source="post_credit_bar" action="click" noun="user_profile" class="visible">
                    <span
                        class="inline-flex items-center justify-center w-[1.5rem] h-[1.5rem] nd:visible nd:block nd:animate-pulse nd:bg-neutral-background-selected  mr-2xs"
                        rpl="" avatar="">

                        <span rpl="" class="inline-block rounded-full relative [&>:first-child]:h-full [&>:first-child]:w-full [&>:first-child]:mb-0 [&>:first-child]:rounded-[inherit] h-full w-full [&>:first-child]:overflow-hidden [&>:first-child]:max-h-full">
                            <img src="${avatarUrl}"
                                alt="${authorName}" loading="lazy">
                        </span></span>
                    <a rpl
                        class="author-name whitespace-nowrap text-neutral-content visited:text-neutral-content-weak focus-visible:-outline-offset-1 a cursor-pointer no-visited no-underline hover:no-underline"
                        style="vertical-align: super;"
                        href="/user/${authorName}/">${authorName}</a>
                </faceplate-tracker>
                <div slot="content">
                    <faceplate-partial src="/svc/shreddit/user-hover-card/${authorName}"
                        loading="programmatic">
                        <div class="w-5xl h-4xl flex items-center justify-center">
                            <faceplate-progress value="20" class="animate-spin"></faceplate-progress>
                        </div>
                    </faceplate-partial>
                </div>
            </faceplate-hovercard>
        </div>
    </span>
    `;
}