Configure tags to be highlighted with different colors
// ==UserScript==
// @name AO3: highlight tags V2
// @description Configure tags to be highlighted with different colors
// @namespace http://greasyfork.org/users/6872-fangirlishness
// @author Fangirlishness
// @require http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @include http://archiveofourown.org/*
// @include https://archiveofourown.org/*
// @grant none
// @version 2.0
// ==/UserScript==
/* eslint-env jquery */
// loosely derived from tuff-ghost's ao3 hide some tags (with permission)
(function($) {
/**** CONFIG ********************/
// add the tag pattern you want to highlight (can appear anywhere in the tag) and the color for each
// if you only want to highlight tags of a certain kind, start with with the kind of tag, then an exclamation mark, then your text.
// Possible starting values are "relationships!", "characters!", "freeforms!"
var tagsToHighlight = {"Alternate Universe": "#fda7d1", // pink
"Fanart": "#adf7d1", // light green
"somethingelse": "blue", // named colors work too
"^Hurt": "#038200", // only tags that start with Hurt
"Comfort$": "#038200", // only tags that end with Comfort
"relationships!Arthur": "red", // relationship tags that contain 'Arthur'
};
/********************************/
$('.blurb ul.tags, .meta .tags ul').each(function() {
var $list = $(this);
$list.find('a.tag').each(function() {
var $tag = $(this);
var text = $tag.text();
for (var key in tagsToHighlight) {
var color = tagsToHighlight[key];
// parse out tagtype from key and save it as a classname (prepend .)
if(key.startsWith('relationships!') || key.startsWith('characters!') || key.startsWith('freeforms!') ) {
var tagtype = "."+key.substring(0, key.indexOf('!'));
key = key.substring(key.indexOf('!')+1);
}
// match on key without type
var pattern = new RegExp(key, "g")
if(text.match(pattern) != null) {
highlightTag($tag, color, tagtype);
}
}
});
});
function highlightTag($tag, color, tagtype) {
// if tagtype is given, color only tags with that class
if(tagtype) {
$tag.parent(tagtype).children().first().css('background-color', color);
}
else {
$tag.css('background-color', color);
}
}
})(jQuery);