HowlsOfOutrage

show MetaFilter favoriters (favoritors?) on hover

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

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

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

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

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

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// HowlsOfOutrage.user.js
//
// Copyright 2010-2014, Michael Devore
// This file is licensed under the terms of the Artistic License 2.0.
// See http://opensource.org/licenses/Artistic-2.0 for the license itself.
//
// This is a Greasemonkey script.
// See http://www.greasespot.net/ for more information on Greasemonkey.
//
// ==UserScript==
// @name          HowlsOfOutrage
// @namespace     http://www.devoresoftware.com/gm/hoo
// @description   show MetaFilter favoriters (favoritors?) on hover
// @include       http://*.metafilter.com/*
// @include       https://*.metafilter.com/*
// @version       4.6
// ==/UserScript==
//
// version 4.6: post favorite fix
// version 4.5: fix for MetaFilter redesign, add https support
// version 4.2: fixes a problem that Greasemonkey 2.1 has with GM_xmlhttpRequest and Windows
// version 4.1: minor fixes, works for nonregistered users
// version 4: fixes breakage, made popup positioning more intelligent, minor layout changes
// version 3: adds loading message for when response is slow,
//   minimum delay between favorites popup displays, cosmetic stuff
// version 2: adds explicit text color for white background, variable-height box,
//   hover over post favorites for list in addition to existing comment support

"use strict";

var favPopUp;
var favWork;
var mfBackgroundColor = "#006699";	// MetaFilter blue as background color
var favLoadDelay = 1;	// minimum seconds between subsequent displays of favorite lists
var waitForDelay = false;
var waitForHover = false;
var currentEvent;

var popupWidth = 400;

function howlMain()
{
	favWork = document.createElement("div");
	favWork.id = 'howlDiv';
	favWork.style.display = "none";
	document.getElementsByTagName('body')[0].appendChild(favWork);

	favPopUp = document.createElement("div");
	favPopUp.style.width = popupWidth+"px";
	favPopUp.style.height = "auto";
	favPopUp.style.top = "0px";
	favPopUp.style.left = "0px";
	favPopUp.style.overflow = "hidden";
	favPopUp.style.color = "white";
	favPopUp.style.paddingLeft = "8px";
	favPopUp.style.paddingRight = "8px";
	favPopUp.style.paddingTop = "8px";
	favPopUp.style.paddingBottom = "8px";
	favPopUp.style.fontSize = "12pt";
	favPopUp.style.backgroundColor = mfBackgroundColor;
	favPopUp.style.borderStyle = "dashed";
	favPopUp.style.borderWidth = "medium";
	favPopUp.style.borderColor = "black";
	favPopUp.style.position = "absolute";
	favPopUp.style.display = "none";
	favPopUp.style.opacity = ".94";
	document.getElementsByTagName('body')[0].appendChild(favPopUp);

	var xpath = "//DIV/SPAN[starts-with(text(),'posted by') and @class='smallcopy']/SPAN[starts-with(@id,'fav')]/SPAN[starts-with(@id,'favcnt')]/A";
	var postNodes = document.evaluate(
		xpath,
		document,
		null,
		XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
		null
	);

	if (!postNodes.snapshotLength)
	{
		xpath = "//DIV[@class='comments']/SPAN[starts-with(text(),'posted by') and @class='smallcopy']/A[starts-with(@href, '/favorited/')]";
		postNodes = document.evaluate(
			xpath,
			document,
			null,
			XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
			null
		);
	}

	var totalFavAnchors = postNodes.snapshotLength;

	for (var i = 0; i < totalFavAnchors; i++)
	{
		// this is for comments
		var favNode = postNodes.snapshotItem(i);
		favNode = favNode.parentNode;
		favNode.addEventListener('mouseover', checkFavHover, false);
		favNode.addEventListener('mouseout', favGoAway, false);
	}

	// pick up post favorites
	xpath = "//DIV[@class='copy']/SPAN[starts-with(text(),'posted by') and (@class='smallcopy' or @class='smallcopy postbyline')]/SPAN[starts-with(@id,'favcnt')]/A";
	postNodes = document.evaluate(
		xpath,
		document,
		null,
		XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
		null
	);
	if (postNodes.snapshotLength)
	{
		// this is for the original post
		var favNode = postNodes.snapshotItem(0);
		var newSpan = document.createElement("span");
		favNode.parentNode.parentNode.insertBefore(newSpan, favNode.parentNode.nextSibling);
		newSpan.appendChild(favNode.parentNode);

//		favNode.addEventListener('mouseover', checkFavHover, false);
//		favNode.addEventListener('mouseout', favGoAway, false);
		newSpan.addEventListener('mouseover', checkFavHover, false);
		newSpan.addEventListener('mouseout', favGoAway, false);
	}
}

function favGoAway(evt)
{
	waitForHover = false;
	favPopUp.style.display = "none";
}

function checkFavHover(evt)
{
	currentEvent = evt;
	if (waitForDelay)
	{
		waitForHover = true;
		return;
	}
	waitForHover = false;
	favHover(evt);
}

function timesUp()
{
	waitForDelay = false;
	if (waitForHover)
	{
		waitForHover = false;
		favHover(currentEvent);
	}
}

function favHover(evt)
{
	waitForDelay = true;
	window.setTimeout(timesUp, favLoadDelay * 1000);

	favPopUp.style.color = "#CCCC00";
	favPopUp.style.backgroundColor = "#888888";
	favPopUp.innerHTML = "&nbsp;...loading...";

	favPopUp.style.top = (evt.pageY - 4)+"px";
	favPopUp.style.left = (evt.pageX + 20)+"px";

	var divX = parseInt(favPopUp.style.left);
	if (window.innerWidth <= divX + popupWidth+25)
	{
		var left = parseInt(window.innerWidth-popupWidth-25);
		favPopUp.style.left = left+"px";
	}

	favPopUp.style.display = "";
	var favURL = evt['target']['href'];
	evt['target']['title'] = "";

/*
	// cross-domain request, have to use GM_xmlhttpRequest()
	GM_xmlhttpRequest(
	{
			method : "GET",
			url : favURL,
			headers :
			{
//				"User-Agent" : "Mozilla/5.0",
				"Accept" : "text/xml"

			},
			onload:function(response)
			{
				processFav(response.responseText);
			}
	});
}
*/

	var request =  new XMLHttpRequest();
	request.open("GET", favURL, true);
//	request.setRequestHeader("User-Agent", "Mozilla/5.0");
	request.setRequestHeader("Accept", "text/xml");
	try
	{
		request.addEventListener("readystatechange", favCheckPageReady, false);
	}
	catch (e)
	{
		if (e.message.indexOf("NS_ERROR_ILLEGAL_VALUE" >= 0))
		{
			// readystatechange event not unsupported for this version browser
			request.onreadystatechange = function() {
				if (request.readyState == 4 && request.status == 200)
				{
					if (request.responseText)
					{
						processFav(request.responseText);
					}
				}
			};
		}
		else
		{
			alert("broken script.");
		}
	}
	request.send(null);
}

function favCheckPageReady()
{
	if (this.readyState == 4 && this.status == 200)
	{
		if (this.responseText)
		{
			processFav(this.responseText);
		}
	}
}

function processFav(pText)
{
//	console.log(pText);
	favWork.innerHTML = pText;
//	var xpath = "/DIV[@class='copy']/A";
	var xpath = "//DIV[@id='howlDiv']//DIV[@class='copy']/A";
	var userNodes = document.evaluate(
		xpath,
		favWork,
		null,
		XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
		null
	);
	var totalUserAnchors = userNodes.snapshotLength;
	favPopUp.innerHTML = "";

	favPopUp.style.backgroundColor = mfBackgroundColor;
	for (var i = 0; i < totalUserAnchors; i++)
	{
		var currentNode = userNodes.snapshotItem(i);
		var aNode = currentNode.cloneNode(true);
		aNode.style.color = "white";
		if (i)
		{
			favPopUp.appendChild(document.createTextNode(", "));
		}
		favPopUp.appendChild(aNode);
	}

	var divHeight = parseInt(favPopUp.offsetHeight);
	var divY = parseInt(favPopUp.offsetTop);
	var divBottom = (divY-window.pageYOffset) + divHeight;

	if (window.innerHeight <= divBottom)
	{
		var theTop = parseInt(favPopUp.style.top);
		theTop -= divHeight;
		favPopUp.style.top = theTop+"px";
	}

	var divX = parseInt(favPopUp.style.left);
	if (window.innerWidth <= divX + popupWidth+25)
	{
		var left = parseInt(window.innerWidth-popupWidth-25);
		favPopUp.style.left = left+"px";
	}

}

howlMain();