Reddit Circle Tagger

Makes the Tags in CircleofTrust readable

// ==UserScript==
// @name        Reddit Circle Tagger
// @namespace   95332c7107ad85b0bbf1478b044bee1f042a254a
// @description Makes the Tags in CircleofTrust readable
// @author      /u/AyrA_ch
// @version     1.2
// @match       http://*.reddit.com/r/CircleofTrust/*
// @match       http://reddit.com/r/CircleofTrust/*
// @match       https://reddit.com/r/CircleofTrust/*
// @match       https://*.reddit.com/r/CircleofTrust/*
// @run-at      document-body
// @grant       none
// @expired     true
// @broken      Outdated. Used for April fools day 2018 only
// ==/UserScript==

//Changelog
//1.2 - Fix meaning of second number
//1.1 - Click on Tag now opens that users circle
//1.0 - Initial Version

//This script has a high comment density in case you want to change something and are not too familiar with JavaScript
(function () {
	"use strict"
	//Function that will process all flairs and make them readable
	var setCircleTitle = function () {
		//Process all flairs
		document.querySelectorAll(".flair").forEach(function (v) {
			//We set a tag for processed flairs to not double process them
			if (!v.getAttribute("data-tagset")) {
				//For some reason, searching for ∅ doesn't works properly, so we check the number of "segments" instead.
				//Betrayers have 3 segments, others have two
				var betrayer = v.title.trim().split(' ').length === 3;
				//Regex to match and extract the two numbers
				var txt = v.textContent.match(/^(\d+), (\d+)/);
				//Just in cast someone has a different tag
				if (txt) {
					//Convert into usable format
					txt = {
						members: +txt[1],
						joined: +txt[2]
					};
					//Prevent double parsing of this tag
					v.setAttribute("data-tagset", v.title.trim());
					//Change the Text accordingly
					v.textContent = "Members: " + txt.members + ", Joined: " + txt.joined;
					//Mark betrayers clearly
					if (betrayer) {
						//Custom class that makes it fade in and out repeatedly
						v.className += " betrayer";
						//Add exclamation marks and Text to betrayers
						v.textContent = "⚠ " + v.textContent + " (Betrayer) ⚠";
					}
					//Allow clicking to get to someones circle
					v.addEventListener("click", function (e) {
						//The username is on the same level in the DOM as the tag
						var un=e.target.parentNode.querySelector(".author").textContent;
						//This opens a link in a new tab
						var a = document.createElement("a");
						//You can add "embed/" to the url to only show circles and not the entire post.
						a.href = "https://www.reddit.com/user/" + un + "/circle/";
						a.target = "_blank";
						a.click();
					});
				}
			}
		});
	};

	//Process all tags immediately, once the body is there
	setCircleTitle();

	//Set up an observer for ducument changes.
	//This makes the script work with RES or dynamically loading content
	var observer = new MutationObserver(setCircleTitle);
	//Configure the things we watch for.
	//In this case all element insertions and removals of a specified node or its subtree
	//Be careful. Enabling certain modes can trigger lots of updates or even infinite loops
	var config = {
		attributes: false,
		childList: true,
		characterData: false,
		subtree: true
	};
	//Begin to look for changes
	observer.observe(document.body, config);
	//Fade style for betrayer. We only need to add this once
	var style = document.createElement("style");
	//It has 3 parts:
	//(1) Animation frame
	//(2) Betrayer highlighting with animation frame and color
	//(3) Show cursor as pointer because the tag is now a link
	style.textContent = "@keyframes fadeIn{0%{opacity:0; color:#000000; }}\n" +
		".betrayer{animation:fadeIn 2s infinite alternate;background-color:#FF0 !important;color:#000 !important;font-weight:bold !important}\n" +
		"[data-tagset]{cursor:pointer;}";
	document.head.appendChild(style);
})();

/*
LICENSE:
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
The full license text can be found here: http://creativecommons.org/licenses/by-nc-sa/4.0/
The link has an easy to understand version of the license and the full license text.

DISCLAIMER:
THIS SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESSED OR IMPLIED WARRANTIES,
INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS
OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
THE POSSIBILITY OF SUCH DAMAGE.
*/