AO3: [Wrangling] Rainbow Home Page

adds CSS classes to style table rows as a rainbow, and updates dynamically when filters are applied
当前为 2024-03-31 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         AO3: [Wrangling] Rainbow Home Page
// @namespace    https://greasyfork.org/en/users/906106-escctrl
// @description  adds CSS classes to style table rows as a rainbow, and updates dynamically when filters are applied
// @author       escctrl
// @version      4.1
// @match        *://*.archiveofourown.org/tag_wranglers/*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js
// @license      MIT
// ==/UserScript==

// CONFIGURATION
    // choose if you want to use your AO3 skin to define the colors (skin), or if you'll add the css in this script (script)
    // if you use a skin, note that the classes are added to the table rows (tr) and named .rainbow0 through .rainbow5
    const SOURCE = 'script';

    // set the six different background colors here, for example "rgba(255, 21, 164, 0.86)" or "#ff15a4"
    // tip: rgba let's you define the color in order red-green-blue. the fourth number (alpha) is transparency between 0 (transparent) and 1 (opaque)
    const RAINBOW = ["rgba(246,  48,  63, .2)",
                     "rgba(241, 137,   4, .2)",
                     "rgba(253, 221,   0, .2)",
                     "rgba(119, 189,  30, .2)",
                     "rgba(  1, 152, 207, .2)",
                     "rgba(114,  32, 130, .2)" ];

    const TEXT = "#000000"; // color of the link text in the table
    const BORDER = "#FFFFFF"; // color of the borders in the table
    const HIGHLIGHT = "#FFFFFF"; // background color of the highlighted row (on mouseover)

(function($) {
    'use strict';

    if (SOURCE == 'script') {
        var fullCSS = RAINBOW.map((e, i) => ".rainbow"+i+" { background-color: "+e+"; color: inherit !important }" );

        $('head').append(`<style type="text/css">
            .assigned thead th { text-align: center; vertical-align: bottom; }
            .assigned thead { border-bottom: 0px; }
            .assigned tbody th { background: transparent !important; border: 1px solid ${BORDER}; vertical-align: middle; padding: 0.2em 0.5em; }
            .assigned tbody td { vertical-align: middle; border: 1px solid ${BORDER}; padding: 0.2em 0.5em; text-align: right; }
            .assigned tbody tr:hover { background-color: ${HIGHLIGHT}; }

            .assigned tbody a,
            .assigned tbody a:hover,
            .assigned tbody a:visited,
            .assigned tbody a:active {
              color: ${TEXT}; border-bottom: 0; }
            ${fullCSS.join(' ')}
        </style>`);
    }

    function resetRainbow() {
        $('.assigned tbody tr').removeClass('rainbow0 rainbow1 rainbow2 rainbow3 rainbow4 rainbow5');
        $('.assigned tbody tr:visible').each( (it, row) => $(row).addClass('rainbow'+it%6) );
    }

    $(document).ready(function() {
        // executes on page load for initial coloring
        resetRainbow();

        // add events for dynamic updates of the CSS classes when filters are applied
        $('.assigned p:contains(Show only fandoms with) a') // Standard (doesn't specify a p#id so we have to go by text content)
        .add('#filter-fandoms *') // Redux
        .add('#media-filter a, #source-filter a, #fandom-filter a, #setup-filter a, #reset-filter a') // N-in-1
        .add('#sortunwrangled a, #sortname a') // Sorting by Total Unwrangled
            .on("click", resetRainbow);

        // Search
        $('#fandom_search').on('keyup', resetRainbow);
    });

})(jQuery);