☰

AO3: [Wrangling] Rainbow Home Page

adds CSS classes to style table rows as a rainbow, and updates dynamically when filters are applied

目前為 2022-10-09 提交的版本，檢視 最新版本。

// ==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      2.0
// @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 = 'skin';

    // 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';

    var style = $('<style type="text/css"></style>').appendTo($('head'));
    if (SOURCE == 'script') {
        var fullCSS = RAINBOW.map((e, i) => ".rainbow"+i+" { background-color: "+e+"; color: inherit !important }" );
        fullCSS = fullCSS.join(' ');

        $(style).html(`
            .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}
        `);
    }

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

    // wait for document to finish loading (seems to be required - events only work properly after other scripts finished writing the filtering links)
    $(document).ready(function(){
        // executes on page load for initial coloring
        resetRainbow();

        // add events for dynamic updates of the CSS classes when filters are applied
        // Redux
        $('#filter-fandoms a').on("click", resetRainbow);
        // N-in-1
        $('#media-filter a').add('#source-filter a').add('#fandom-filter a').add('#setup-filter a').add('#reset-filter a').on("click", resetRainbow);
        // Standard (doesn't specify a p#id so we have to assume it's the second p)
        $('.assigned p:nth-of-type(2)').not('#filter-fandoms, #media-filter, #source-filter, #fandom-filter, #setup-filter, #reset-filter, #fandom_search').children('a').on("click", resetRainbow);

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

    });

})(jQuery);