☰

UserNotes

adds ajaxy viewing of user notes on Metafilter whenever a username is shown

// ==UserScript==

// @name           UserNotes
// @namespace      jacalata
// @description    adds ajaxy viewing of user notes on Metafilter whenever a username is shown
// @include *.metafilter.com/*
// @version  3.1 (firefox 8.0 support)
//           2.0 (optional marking added to usernames sitewide to indicate notes 
//           1.5 (pressing enter in the text input box now submits the new note)
//	     1.4 (fixed buttons into text-like pieces of ajaxy goodness)
//	     1.3 (fixed bug that was not saving the first note on each page)
//	     1.2 (added autoclear of textbox on focus)
//  	     1.1 (changed to handle multiple notes with individual deletion)
// ==/UserScript==


// chrome doesn't support GM_getValue, using replacement localStorage
// this code borrowed from http://devign.me/greasemonkey-gm_getvaluegm_setvalue-functions-for-google-chrome/
if (!this.GM_getValue || (this.GM_getValue.toString && this.GM_getValue.toString().indexOf("not supported")>-1)) {
    this.GM_getValue=function (key,def) {
        return localStorage[key] || def;
    };
    this.GM_setValue=function (key,value) {
        return localStorage[key]=value;
    };
    this.GM_deleteValue=function (key) {
        return delete localStorage[key];
    };
}

	var currentUserID = "User"+location.href.substring(31);
	numUserNotes = GM_getValue(currentUserID, 0);
	var isAjaxOn = "ajaxSetting";
	var ajaxSetting = GM_getValue(isAjaxOn, false);
	var currentBalloon; 


	
	// adding a button to turn on/off the sitewide notes 
	// (off means they are only visible on the profiles, no markings around the rest of the site)
	ajaxButton = createButton("ajaxButton", "ajaxButton", "##", "sitewide notes off", "_self", toggleAjax);
	
	//create an invisible div that will show the notes in a popup
	// this is from http://blog.kung-foo.tv/archives/001614.html, with the style stuff based on the bookburro extension code
	var notesBox = document.createElement('div');
	notesBox.setAttribute("id", "balloon");
	notesBox.setAttribute("style", "background-color:#778899;text-align:left;");
	notesBox.style.position = "absolute";
	notesBox.style.border = "1px solid navy";
	notesBox.style.margin = "10";
	notesBox.style.zIndex = "99";
	notesBox.style.font = "8pt sans-serif";
	notesBox.style.overflow = "hidden";
	notesBox.style.opacity = "85";
	notesBox.style.padding = "4px";
	notesBox.style.display = "none";
	
	var searchPattern = "//div[@class='mefimessages']";
	var options = document.evaluate( searchPattern, document, null, 
		XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
	var i;
	for (var targetClass = null, i=0; (targetClass = options.snapshotItem(i)); i++) 
	{
			targetClass.innerHTML += " | ";
			targetClass.appendChild(ajaxButton);
			targetClass.appendChild(notesBox);
	}

	// if this is a profile page, add all the note-taking elements
	if (location.href.match("metafilter.com/user") ) 
	{
		takeNotes();
	}
	
	if (ajaxSetting == true)
	{
		ajaxButton.innerHTML = ajaxButton.innerHTML.replace("off", "on");
		showLinkedNotes();
	}
	
// called on loading a page with ajaxNotes set, or when turning on the ajax notes.
// searches for links to user profiles, and makes a mark next to those you have given notes
function showLinkedNotes()
{
	// find every spot where a user profile is linked
	var profileSearch = "//a[contains(@href, '/user/') and not(contains(./text(), 'My')) and not(contains(@href, 'rss' ))]";
	var profiles = document.evaluate( profileSearch, document, null, 
		XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
	var j;
	for (var targetClass = null, j=0; (targetClass = profiles.snapshotItem(j)); j++) 
	{
		var thisUserID = "User"+targetClass.href.substring(31);
		var thisUserNotes = GM_getValue(thisUserID, 0);
		if (thisUserNotes > 0) 
		{
			targetClass.innerHTML += " <i>i</i>  ";
			targetClass.addEventListener("mouseover", viewNotes, false);
                        targetClass.addEventListener("click", hideBalloon, false);
		}
	}
} // function showLinkedNotes


// the user has just turned off the ajax notes feature - hide the little 'i' icons (ie; reverse what showLinkedNotes did)
function removeLinkedNotes()
{
	hideBalloon(); //just in case it is currently displayed
	// find every spot where a user profile is linked
	var profileSearch = "//a[contains(@href, '/user/') and not(contains(./text(), 'My')) and not(contains(@href, 'rss' ))]";
	var profiles = document.evaluate( profileSearch, document, null, 
		XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
	var j;
	for (var targetClass = null, j=0; (targetClass = profiles.snapshotItem(j)); j++) 
	{
		var thisUserID = "User"+targetClass.href.substring(31);
		var thisUserNotes = GM_getValue(thisUserID, 0);
		if (thisUserNotes > 0) 
		{
			targetClass.innerHTML = targetClass.innerHTML.replace(" <i>i</i>  ", "");
			targetClass.removeEventListener("mouseover", viewNotes, false);
		}
	}


}//funtion removeLinkedNotes

// displays the info balloon, containing the notes for the user whose profile you mousedover
// from http://blog.kung-foo.tv/archives/001614.html  
function viewNotes()
{

	var thisUserID = "User"+this.href.substring(31);
	if ( thisUserID == currentBalloon ) 
	{
		return false;
	}
	currentBalloon = thisUserID; // global variable to track which info balloon is currently displayed
	var objX = findPosX(this);
	var objY = findPosY(this);
	
	var balloon = document.getElementById("balloon");
	if ( balloon && balloon.childNodes )
	{
		while ( balloon.childNodes.length > 0 )
		{
			balloon.removeChild(balloon.childNodes[0]); // remove anything in the current balloon
		}
    }

	var closeElt = document.createElement('img');
    closeElt.setAttribute("id","closebox");
    closeElt.setAttribute("src","http://images.metafilter.com/mefi/icons/stockholm_mini/close.gif");
    closeElt.addEventListener('click', hideBalloon, false);
    balloon.appendChild(closeElt);
	
	var newElt = document.createElement('div');
    newElt.setAttribute("id","balloon_contents");
	
	var thisUserID = "User"+this.href.substring(31);
	var thisUserNotes = GM_getValue(thisUserID, 0);
	var k;
	var height = 13;
	for (k=0; k<thisUserNotes; k++)
	{
		var newLine = "-" + GM_getValue(thisUserID+k, "");
		newElt.innerHTML += newLine;
		newElt.innerHTML += "<br>";
		var nRows = Math.ceil( (newLine.length)/30);
		console.log("line Lenght =  " + newLine.length + "nRows = " + nRows);
		height += 13 * nRows;
	}
	balloon.style.width = "150px";
	balloon.style.height = height;
    balloon.appendChild(newElt);	
	balloon.style.top = (objY-0) + 'px';
    balloon.style.left = (objX+45) + 'px';
    balloon.style.display = 'block';
} // function viewNotes

	
// make the info balloon disappear
// from http://blog.kung-foo.tv/archives/001614.html  
function hideBalloon()
{
  var balloon = document.getElementById("balloon");
  if ( balloon )
  {
    balloon.style.display = 'none';
    currentBalloon = null;
  }
  return false;
} // function hideBalloon
	
// find the position of an object along the x axis of the page
// from http://blog.kung-foo.tv/archives/001614.html  
function findPosX(obj)
{
    var curleft = 0;
    if (obj.offsetParent)
	{
        while (obj.offsetParent)
		{
            curleft += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        if ( obj != null )
		{
            curleft += obj.offsetLeft;
		}
    }
    else if (obj.x) 
	{
        curleft += obj.x;
	}
    return curleft;
} // function findPosX

// finds the position of an object along the y axis of the page
// from http://blog.kung-foo.tv/archives/001614.html  
function findPosY(obj)
{
    var curtop = 0;
    if (obj.offsetParent)
	{
        while (obj.offsetParent)
		{
            curtop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        if ( obj != null ) 
		{
            curtop += obj.offsetTop;
		}
    }
    else if (obj.y)
	{
        curtop += obj.y;
	}
    return curtop;
} // funcion findYPos
	
	

// creates a button element that calls a function on this page
function createButton(id, name, href, words, target, clickFunction)
{
	//ajaxButton = createButton("ajaxButton", "ajaxButton", "##", "ajax notes", "_self", toggleAjax);
		
	newButton = document.createElement("a");
	newButton.setAttribute("id", id);
	newButton.setAttribute("name", name);
	newButton.setAttribute("href", href);
	newButton.innerHTML = words;
	newButton.setAttribute("target", target);
	newButton.addEventListener("click", clickFunction, false);
	return newButton;
	
} // function createButton


// toggles the value of our 'is ajax on?' boolean
function toggleAjax()
{
	ajaxSetting = !ajaxSetting;
	GM_setValue(isAjaxOn, ajaxSetting);
	if (ajaxSetting) // turning it on
	{
		ajaxButton.innerHTML = ajaxButton.innerHTML.replace("off", "on");
		showLinkedNotes();
	}
	else //turning it off
	{
		ajaxButton.innerHTML = ajaxButton.innerHTML.replace("on", "off");
		removeLinkedNotes();
	}	
} // function toggleAjax
	
	
// for profile pages:  create and display all the notes for this user.
function takeNotes()
{	
	anchor = document.getElementById('contact');
	if (anchor == null) // this is your own profile - no notes about yourself, because the 'contact' element doesn't exist
	{
		return;
	}
	outputDiv = anchor.parentNode;
	
	if (numUserNotes > 0)
	{
		notesHeadline = document.createElement("div");
		notesHeadline.setAttribute("id", "headline");
		notesHeadline.innerHTML = "<b>My Notes</b>";

		delNotes = createButton("delBut", "DelNotes", "##", "      [delete all]", "_self", delAllNotes);
		
		outputDiv.appendChild(notesHeadline);
		notesHeadline.appendChild(delNotes);

		for (var i = 0; i < numUserNotes; i++)
		{
			note = GM_getValue(currentUserID+i, "");
			currentNotes = document.createElement("div");
			currentNotes.setAttribute("id", "currentNotes"+i);
			currentNotes.innerHTML = note;
			
			delCurrent = createButton("delBut"+i, "DelNote", "##", "      [x]", "_self", delOneNote);
	
			outputDiv.appendChild(currentNotes);	
			currentNotes.appendChild(delCurrent);
		}
	}	

	inputForm = document.createElement("form");
	inputForm.setAttribute("method", "post");
	inputForm.addEventListener("submit", addNote, false);
	inputForm.setAttribute("target", "_self");
	
	newNotes = document.createElement("input");
	newNotes.setAttribute("type", "text");
	newNotes.setAttribute("value", "new note...");
	newNotes.setAttribute("id", "noteInput");
	newNotes.addEventListener("focus", clearValue, true);
	newNotes.innerHTML = "<br>";

	addNotes = document.createElement("input");
	addNotes.setAttribute("type", "submit");
	addNotes.setAttribute("id", "addBut");
	addNotes.setAttribute("value", "Add Note");
	addNotes.setAttribute("target", "_self");

	inputForm.appendChild(newNotes);
	inputForm.appendChild(addNotes);	
	outputDiv.appendChild(inputForm);
	
} // function takeNotes

// clears the default text in the textbox when the user clicks on it
function clearValue()
{
	textbox = document.getElementById("noteInput");
	if (textbox.value == "new note...") {
		textbox.setAttribute("value", "");
	}
} // function clearValue

	
// creates and displays a new note, from the text in the textbox
function addNote()
{	
	var note = document.getElementById("noteInput");
	var noteNum =  numUserNotes;

	if (note.value == "")
	{
		return;
	}
	
	if (numUserNotes == 0)
	{
		notesHeadline = document.createElement("div");
		notesHeadline.setAttribute("id", "headline");
		notesHeadline.innerHTML = "<b>My Notes</b>";
		
		delNotes = createButton("delBut", "DelNotes", "##", "      [delete all]", "_self", delAllNotes);

		//alert(note);
		note.parentNode.insertBefore(notesHeadline, note);
		notesHeadline.appendChild(delNotes);
	}

	numUserNotes++;
	GM_setValue(currentUserID, numUserNotes);
	GM_setValue(currentUserID+noteNum, note.value);

	currentNoteNew = document.createElement("div");
	currentNoteNew.setAttribute("id", "currentNotes"+noteNum);
	currentNoteNew.innerHTML = note.value;

	delCurrentNew = createButton("delBut"+noteNum, "DelNote", "##", "      [x]", "_self", delOneNote);
	
	note.parentNode.insertBefore(currentNoteNew, note);
	currentNoteNew.appendChild(delCurrentNew);	
}//function addNotes


// delete a single note
function delOneNote()
{
	var newID = (+this.id.substring(6));
	var nextID = newID + 1;
	while (nextID < numUserNotes)
	{
		var thisNoteID = currentUserID+newID;
		var nextNoteID = currentUserID+nextID;
		nextNoteValue = GM_getValue(nextNoteID, "");

		currentNotes = document.getElementById("currentNotes"+nextID);
		currentNotes.setAttribute("id", "currentNotes"+newID);

		delCurrent = document.getElementById("delBut"+nextID);
		delCurrent.setAttribute("id", "delBut"+newID);

		GM_setValue(thisNoteID, nextNoteValue);
		newID++;
		nextID++;
	}


	numUserNotes--;
	GM_setValue(currentUserID, numUserNotes);
	noteText = this.parentNode;
	noteText.removeChild(this);
	noteText.parentNode.removeChild(noteText);

	if (numUserNotes == 0)
	{
		headline = document.getElementById("headline");
		headline.parentNode.removeChild(headline);
	}
} // fucntion delOneNote

// delete all notes about this user
function delAllNotes()
{
	var newID;
	for (newID = 0; newID < numUserNotes; newID++)
	{
		note = document.getElementById("currentNotes"+newID);
		note.parentNode.removeChild(note);
	}
	headline = document.getElementById("headline");
	headline.parentNode.removeChild(headline);
	numUserNotes = 0;
	GM_setValue(currentUserID, numUserNotes);

	return false;
} // function delAll Notes