bgm相关回复跳转

在web自动识别贴贴过的帖子，提供跳转。
当前为 2024-05-26 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         bgm相关回复跳转
// @version      0.1
// @description  在web自动识别贴贴过的帖子，提供跳转。
// @match        https://bgm.tv/ep/*
// @match        https://bamgumi.tv/ep/*
// @match        https://chii.in/ep/*
// @grant        none
// @license      MIT
// @namespace    bgm_jump_related_post
// ==/UserScript==


// 几个todo，目前自己没这个需求，暂时简化。如果有人需要可以说一声：
// - 除了贴贴也支持回复的跳转
// - 暂时只支持番剧吐槽页面，主要是觉得别的页面也没必要。
// - 暂时只处理第一层的回复，这个主要是暂时懒得做先简化一下。

(function () {
    'use strict';

    const selfUserId = $('.avatar').attr('href').split('/').pop();
    // 先完成遍历处理第一层的逻辑
    const replyList = $('#comment_list>div');
    let relatedPostIds = [];

    replyList.slice(0, 2).each(function () {
        if (checkReplyElementRelated(selfUserId, $(this))) {
            relatedPostIds.push($(this).attr('id'));
        }
    });

    // console.log(relatedPostLinks);
    const component = createJumpComponent(relatedPostIds);
    const columnEPB = $('#columnEpB')
    columnEPB.append(component);
})();

function checkReplyElementRelated(userId, element) {
    // 先在这个元素内继续选择 `a.item.selected`
    // const likesGridItem = element.find('a.item.selected');
    const innerDiv = element.children().eq(2)
    const likesGridItemAs = innerDiv.children().eq(2).children().eq(1).children();
    if (likesGridItemAs.length === 0) {
        return false;
    }

    let found = false;
    likesGridItemAs.each(function () {
        const title = $(this).attr('title');
        if (checkUserIdInTitle(userId, title)) {
            found = true;
            return false;  // break loop
            // ! 这里才是坑，里边有个回调函数，return true 会直接返回到这个回调函数，而不是外层的函数
        }
    });

    return found;
}

function checkUserIdInTitle(userId, title) {
    const regex = /\/user\/(\w+)/g;
    let match;
    while ((match = regex.exec(title)) !== null) {
        if (match[1] === userId) {
            return true;
        }
    }
    return false;
}

function createJumpComponent(postIds) {
    // Basic CSS for styling the component
    const styles = `
        <style>
            .jump-component {
                position: fixed;
                top: 30%;
                right: 40px;
                width: 20%;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 8px;
                background-color: #f9f9f9;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            .jump-component ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .jump-component li {
                margin: 5px 0;
                display: flex;
                align-items: center;
            }
            .jump-component li::before {
                content: "•";
                color: #3498db;
                font-weight: bold;
                display: inline-block;
                width: 1em;
                margin-right: 0.5em;
            }
            .jump-component a {
                color: #3498db;
                text-decoration: none;
                font-weight: 500;
                transition: color 0.3s ease, transform 0.3s ease;
                flex-grow: 1;
            }
            .jump-component a:hover {
                color: #1abc9c;
                transform: translateX(5px);
            }
            .jump-component a:active {
                color: #e74c3c;
            }
        </style>
    `;

    // HTML for the component
    const linksHtml = postIds.map(link => `<li><a href="#${link}" target="_self">${link}</a></li>`).join('');
    const componentHtml = `
    <div class="jump-component">
        <p>贴贴过的回复跳转</p>
        <ul>
            ${linksHtml}
        </ul>
    </div>
    `;
    return styles + componentHtml;
}