simplify timeline cell.

v2ex_cell.js

// ==UserScript==
// @name         v2ex_cell
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  simplify timeline cell.
// @author       6david9
// @match        https://*.v2ex.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=v2ex.com
// @require      https://code.jquery.com/jquery-3.6.3.min.js
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    /* globals jQuery, $, waitForKeyElements */

    function blockUser(userPath) {
        const url = `https://v2ex.com${userPath}`;

        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
                const htmlText = this.responseText;
                const regex = /\/block\/\d+\?once=\d+/;
                const result = regex.exec(htmlText)

                if (result !== null) {
                    const blockPath = result[0];
                    console.log(blockPath);

                    location.href = blockPath;
                }
            }
        };
        xhr.open("GET", url, true);
        xhr.send();
    }

    function format(items) {
        if (items.length == 0) {
            return;
        }

        for (let i = 0; i < items.length; ++i) {
            let item = items[i];

            let titleElem = $(item).find("span.item_title a");
            let countElem = $(item).find(".count_livid");
            let nodeElem = $(item).find("span.topic_info a.node");
            let timeElem = $(item).find("span.topic_info > span");
            let userElem = $(item).find("span.topic_info strong a");

            let replacedItem = $("<div></div>").addClass("cell item");

            if (typeof(nodeElem) !== "undefined" && nodeElem.length > 0) {
                let nodeDiv = $("<span style='margin-right: 5px;'></span>").append(nodeElem.first()[0]);
                replacedItem.append(nodeDiv);
            }

            if (typeof(titleElem) !== "undefined" && titleElem.length > 0) {
                const titleLink = titleElem.attr({"target": "_blank"}).first()[0];
                let titleDiv = $("<span style='margin-right: 5px;'></span>").append(titleLink);
                replacedItem.append(titleDiv);
            }

            if (typeof(countElem) !== "undefined" && countElem.length > 0) {
                let countDiv = $("<span></span>").addClass('count_livid').append(countElem.first()[0]);
                replacedItem.append(countDiv);
            }

            if (typeof(timeElem) !== "undefined" && timeElem.length > 0) {
                const date = new Date(timeElem.first().attr("title"));
                let timeSpan = $("<span style='margin-left: 5px; color: lightgray;'></span>").append(date.toLocaleString());
                replacedItem.append(timeSpan);
            }

            if (typeof(userElem) !== "undefined" && userElem.length > 0) {
                const userObject = userElem.first();
                const userName = userObject.text();
                const userPath = userObject.attr("href");

                const button = $("<button>");
                button.text(userName);
                button.on("click", function() {
                    //blockUser(userPath);
                    window.open(userPath, "_blank");
                });
                button.css({
                    "background-color": "white",
                    "color": "#D3D3D3",
                    "border": "none",
                    "padding": "3px 10px",
                    "border-radius": "5px",
                    "font-size": "12px"
                });
                button.on("mouseenter", function() {
                    $(this).css("color", "#000");
                });

                button.on("mouseleave", function() {
                    $(this).css("color", "#D3D3D3");
                });

                let nodeDiv = $("<span style='margin-left: 5px;'></span>").append(button);
                replacedItem.append(nodeDiv);
            }

            $(item).replaceWith(replacedItem)
        }
    }

    const items = $('#Main .item');
    format(items);

    const nodes = $('#TopicsNode .cell');
    format(nodes);
})();