AO3: [Wrangling] Rainbow Tables

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

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         AO3: [Wrangling] Rainbow Tables
// @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      6.0
// @match        *://*.archiveofourown.org/tag_wranglers/*
// @match        *://*.archiveofourown.org/tags/*/wrangle?*
// @match        *://*.archiveofourown.org/tags/search?*
// @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';
 
    // choose if you'd like the rainbow coloring on the wrangling homepage and/or on the bins
    const ONHOMEPAGE = true;
    const ONBINS = true;
    const ONSEARCH = true;
 
    // 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';

    let main = $('#main'); 
	
    // quit script if this page is disabled
    if (ONHOMEPAGE === false && $(main).hasClass('tag_wranglers-show')) return;
    if (ONBINS === false && $(main).hasClass('tags-wrangle')) return;
    if (ONSEARCH === false && $(main).hasClass('tags-search')) return;
 
    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, #wrangulator thead th { text-align: center; vertical-align: bottom; }
            .assigned thead, #wrangulator thead, #resulttable 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; }
            #wrangulator tbody th, #resulttable tbody th { background: transparent !important; border: 1px solid ${BORDER}; vertical-align: middle; }
            #wrangulator tbody td, #resulttable tbody td { vertical-align: middle; border: 1px solid ${BORDER}; }
            .assigned tbody tr:hover, #wrangulator tbody tr:hover, #resulttable tr:hover { background-color: ${HIGHLIGHT}; }
 
            .assigned tbody a, #wrangulator tbody a, #resulttable tbody a,
            .assigned tbody a:hover, #wrangulator tbody a:hover, #resulttable tbody a:hover,
            .assigned tbody a:visited, #wrangulator tbody a:visited, #resulttable tbody a:visited,
            .assigned tbody a:active, #wrangulator tbody a:active, #resulttable tbody a:active {
              color: ${TEXT}; border-bottom: 0; }
            #resulttable tbody a:hover { background-color: unset; }
            ${fullCSS.join(' ')}
        </style>`);
    }
 
    function resetRainbow() {
        $('.assigned tbody tr, #wrangulator tbody tr, #resulttable tbody tr').removeClass('rainbow0 rainbow1 rainbow2 rainbow3 rainbow4 rainbow5');
        $('.assigned tbody tr:visible, #wrangulator tbody tr:visible, #resulttable tbody tr').each( (it, row) => $(row).addClass('rainbow'+it%6) );
    }
 
    if (ONHOMEPAGE === true && $(main).hasClass('tag_wranglers-show')) {
        // add events for dynamic updates of the CSS classes when filters are applied. delegated to allow any script order
        $(document).on('click', 'p:contains(Show only fandoms with) a', resetRainbow); // Standard (doesn't specify a p#id so we have to go by text content)
        $(document).on('click', '#filter-fandoms *', resetRainbow); // Redux
        $(document).on('click', '#media-filter a, #source-filter a, #fandom-filter a, #setup-filter a, #reset-filter a', resetRainbow); // N-in-1
        $(document).on('click', '#sortunwrangled, #sortname, #sortchars, #sortrels, #sortff', resetRainbow); // Sorting by Total Unwrangled
        $(document).on('click', 'p:contains(Show:) a, tr a:contains([Snooze])', resetRainbow); // Snooze fandom buttons/filters
 
        // Search
        $(document).on('keyup', '#fandom_search', resetRainbow);
    }
 
    if (ONBINS === true && $(main).hasClass('tags-wrangle')) {
        // Snooze "Drafts" button is "slow" because it loads a bunch of pages in the background, and needs a little bit of a delay
        // has to use document for delegation because the snooze script removes the button before it bubbles up to #wrangulator (!?!?)
        $(document).on('click', 'a#snooze_drafts', function(e) { setTimeout(resetRainbow, 500); });
        // other snooze buttons/filters are pretty instantaneous
        $('#wrangulator').on('click', 'td[title="snooze"] a, p:contains(Show:) a', function(e) { setTimeout(resetRainbow, 10); } );
    }
    
    if (ONSEARCH === true && $(main).hasClass('tags-search')) {
        // Fetch All Tag Info script still allows some reordering within the results page
        $(document).on('click', '#resulttable thead th', resetRainbow);
    }
 
    $(document).ready(function() {
        // executes on page load for initial coloring
        resetRainbow();
    });
 
})(jQuery);