TagTypeHighlight.js

// ==UserScript==
// @name         Tag Type Highlight
// @namespace    https://e621.net
// @version      1.0.0
// @description  Hilights tags in e621 post verisons.
// @author       Donovan_DMC
// @match        https://e621.net/post_versions*
// @grant        none
// ==/UserScript==

(async function() {
    "use strict";

    const metaTags = ["rating", "parent"];
    const csrfToken = encodeURIComponent($("meta[name=csrf-token]").attr("content"));
    async function getTags(tags) {
        const r = await fetch("https://e621.net/tags/preview.json", {
            method: "POST",
            headers: {
                "User-Agent": "TagTypeHighlight/1.0.0 (donovan_dmc)",
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                tags: Array.isArray(tags) ? tags.join(" ") : tags,
                authenticity_token: csrfToken
            })
        });
        return (await r.json());
    }

    const tagSections = document.querySelectorAll(".pv-tags.pv-content>.diff-list");
    if(tagSections.length === 0) return;
    const tagElements = window.tagElements = {};

    for(const section of tagSections) {
        const added = Array.from(section.querySelectorAll("ins>a"));
        const removed = Array.from(section.querySelectorAll("del>a"));
        const unchanged = Array.from(section.querySelectorAll("span>a"));
        const root = section.parentElement.parentElement;
        const version = root.dataset.postVersionId
        for(const tag of added.concat(removed, unchanged)) {
            if(tag.innerText.includes(":") && metaTags.some(t => tag.innerText.startsWith(t))) continue;
            tagElements[tag.innerText] ??= [];
            tagElements[tag.innerText].push(tag);
        }
    }

    const tags = Object.keys(tagElements);
    if(tags.length === 0) return;
    const parsedTags = await getTags(tags);
    const TagCategory = {
        GENERAL:   0,
        ARTIST:    1,
        COPYRIGHT: 3,
        CHARACTER: 4,
        SPECIES:   5,
        INVALID:   6,
        META:      7,
        LORE:      8
    };
    const SortOrder = [
        TagCategory.INVALID,
        TagCategory.ARTIST,
        TagCategory.COPYRIGHT,
        TagCategory.CHARACTER,
        TagCategory.SPECIES,
        TagCategory.GENERAL,
        TagCategory.META,
        TagCategory.LORE
    ];
    const CategoryColors = [];

    for(const { a: tag, tagTypeA: type} of parsedTags.filter(t => t.type === "tag")) {
        const elements = tagElements[tag];
        for(const el of elements) {
            el.parentNode.classList.add(`category-${type}`);
            el.parentNode.dataset.category = type;
        }
    }

    for (const section of tagSections) {
        const elements = [], specElements = [];
        for(let tag of section.querySelectorAll("span")) {
            if(tag.parentNode !== section) {
                continue;
            }
            elements.push(tag);
            tag.parentNode.removeChild(tag);
        }

        for(const tag of section.querySelectorAll("del, ins")) {
            // tag.style.marginRight = "0";
            specElements.push(tag);
            tag.parentNode.removeChild(tag);
        }

        const end = [], specEnd = [];
        elements.forEach((el, index) => {
            if(el.innerText.includes(":") && metaTags.some(t => el.innerText.startsWith(t))) {
                end.push(el);
                elements.splice(index, 1);
            }
        });
        specElements.forEach((el, index) => {
            if(el.innerText.includes(":") && metaTags.some(t => el.innerText.startsWith(t))) {
                end.push(el);
                specElements.splice(index, 1);
            }
        });
        const isUpload = section.parentNode.parentNode.querySelector(".pv-post.pv-content").innerText.split(":")[1] === "1";
        if(isUpload) section.parentNode.parentNode.querySelector(".pv-post.pv-content").style.backgroundColor = "rgb(97, 40, 40)";
        [
            ...specElements.sort((a,b) => SortOrder.indexOf(Number(a.dataset.category)) - SortOrder.indexOf(Number(b.dataset.category))),
            ...specEnd,
            ...elements.sort((a,b) => SortOrder.indexOf(Number(a.dataset.category)) - SortOrder.indexOf(Number(b.dataset.category))),
            ...end
        ].forEach(el => {
            if(isUpload && el.tagName === "INS") {
                const e = document.createElement("span");
                e.innerHTML = el.innerHTML.slice(1);
                e.dataset.category = el.dataset.category;
                Object.keys(el.dataset).forEach(([k,v]) => e.dataset[k] = v);
                Array.from(el.classList.keys()).forEach(c => e.classList.add(el.classList[c]));
                if(el.classList.contains("obsolete")) e.style.textDecoration = "line-through";
                el = e;
            }
            section.appendChild(el);
            section.innerHTML += " ";
        });
    }
})();