⚠️ Warning: This is a draft ⚠️

This means it might contain formatting issues, incorrect code, conceptual problems, or other severe issues.

If you want to help to improve and eventually enable this page, please fork RosettaGit's repository and open a merge request on GitHub.

//


/*
### ==================================

This comparison script was written by
Tyrok1 and has been tested in Cr 12 and
Fx 5.

### ==================================
*/

//define the relationship between the CSS classes and what they do
var highlightClasses = [
					{ cssBase: "co", description: "Comments" },
					{ cssBase: "nu", description: "Numbers" },
					{ cssBase: "kw", description: "Keywords" },
					{ cssBase: "sy", description: "Operators" },
					{ cssBase: "st", description: "Strings" },
					{ cssBase: "re", description:
						"Variables/Erlang Funs" },
					{ cssBase: "br", description: "Brackets/Parens" },
					{ cssBase: "co", description:
						"Comments/Compiler directives" },
					{ cssBase: "me", description: "Class methods" }
				];

function AddHandler(el, handlerType, func)
{
	//add an event handler in a more cross-browser way
	if(el.addEventListener)
	{
		el.addEventListener(handlerType, func, false);
	}
	else if(el.attachEvent)
	{
		el.attachEvent("on" + handlerType, func);
	}
	else
	{
		eval("el.on" + handlerType + " = func;");
	}
}

function HighlightCode(codeEl)
{
	//find all instances of elements with the classes in a given
	//code block and update their colors
	var allSpans = codeEl.getElementsByTagName("span");
	for(var s = 0; s < allSpans.length; ++s)
	{
		if(allSpans[s].className)
		{
			for(var c in highlightClasses)
			{
				var cssBase = allSpans[s].className
					.substring(0, highlightClasses[c].cssBase.length);
				if(cssBase == highlightClasses[c].cssBase)
				{
					var colorEl = document.getElementById(
						"HighlightColor" + c);
					var dropdownVal = colorEl.options[
						colorEl.selectedIndex].value;
					allSpans[s].style.color = 
						(dropdownVal == "auto" ? null : dropdownVal);
				}				
			}
		}
	}
}

function HighlightUpdate()
{
	//look for language examples
	var allPres = document.getElementsByTagName("pre");
	for(var p = 0; p < allPres.length; ++p)
	{
		if(allPres[p].className && 
			allPres[p].className.indexOf("highlighted_source") >= 0)
		{
			HighlightCode(allPres[p]);
		}
	}
	
	//save defaults to cookie
	var defaults = "";
	for(var c in highlightClasses)
	{
		var colorEl = document.getElementById("HighlightColor" + c);
		defaults += (defaults == "" ? "" : ",") + 
			highlightClasses[c].cssBase + "-" + 
			colorEl.options[colorEl.selectedIndex].value;
	}
	document.cookie = ("highlightDefaults=" + defaults + 
		"; expires=" + (new Date((new Date()).getTime() + 
		1000 * 60 * 60 * 24 * 365)).toGMTString() + "; path=/");
}

function HighlightAddToolbox()
{
	//check the cookie for default colors from last time
	var cookies = document.cookie.split(";");
	for(var c in cookies)
	{
		var nameVal = cookies[c].split("=", 2);
		if(nameVal[0].replace(/^ */, "") == "highlightDefaults")
		{
			var defaults = nameVal[1].split(",");
			for(var d in defaults)
			{
				var defaultNameVal = defaults[d].split("-", 2);
				for(var h in highlightClasses)
				{
					if(highlightClasses[h].cssBase == defaultNameVal[0])
					{
						highlightClasses[h].defaultColor = 
							defaultNameVal[1];
					}
				}
			}
		}
	}
	
	//add the toolbox
	var hexDigits = ["0", "3", "6", "9", "c", "f"];
	var sideColumn = document.getElementById("column-one");
	var portletEl = sideColumn.appendChild(document.createElement("div"));
	portletEl.className = "portlet";
	portletEl.id = "HighlightToolbox";
	portletEl.style.position = "relative";
	portletEl.appendChild(document.createElement("h5"))
		.appendChild(document.createTextNode("Highlight Colors"));
	var pBodyEl = portletEl.appendChild(document.createElement("div"));
	pBodyEl.className = "pBody";
	
	//add a definition list of color types
	var dlEl = pBodyEl.appendChild(document.createElement("dl"));
	for(var c in highlightClasses)
	{
		//add the text label
		var labelEl = dlEl.appendChild(document.createElement("dt"))
			.appendChild(document.createElement("label"));
		labelEl.setAttribute("for", "HighlightColor" + c);
		labelEl.appendChild(
			document.createTextNode(highlightClasses[c].description));
		
		//add the dropdown
		var inputEl = document.createElement("select");
		inputEl.id = "HighlightColor" + c;
		inputEl = dlEl.appendChild(document.createElement("dd"))
			.appendChild(inputEl);
		inputEl.onclick = HighlightUpdate;
		inputEl.onchange = HighlightUpdate;
		inputEl.onkeyup = HighlightUpdate;
		
		//add an option for (Default)
		var optionEl = inputEl.appendChild(
			document.createElement("option"));
		optionEl.value = "auto";
		optionEl.appendChild(document.createTextNode("(Default)"));
		
		//add each of the color options
		var optionNum = 1;
		for(h1 in hexDigits)
		{
			for(h2 in hexDigits)
			{
				for(h3 in hexDigits)
				{
					var optionEl = inputEl.appendChild(
						document.createElement("option"));
					var color = "#" + hexDigits[h1] + 
						hexDigits[h2] + hexDigits[h3];
					optionEl.value = color;
					optionEl.style.color = color;
					optionEl.appendChild(document.createTextNode(color));
					if(highlightClasses[c].defaultColor && 
						color.toLowerCase() == 
						highlightClasses[c].defaultColor.toLowerCase())
					{
						inputEl.selectedIndex = optionNum;
					}
					++optionNum;
				}
			}
		}
	}
}

function HighlightScroll(e)
{
	//event handler for scrolling to stick the highlight color
	//toolbox to the top of the screen when scrolled down
	var toolboxEl = document.getElementById("HighlightToolbox");
	if(!toolboxEl.originalTop)
	{
		toolboxEl.originalTop = toolboxEl.offsetTop;
	}
	var pageScroll = (document.body.scrollTop ?
			document.body.scrollTop : window.pageYOffset);
	var newTop = (pageScroll - toolboxEl.originalTop);
	toolboxEl.style.top = (newTop >= 0 ? newTop : 0) + "px";
}

function HighlightActivate()
{
	//check to see if we're looking at a task page
	var catLinksEl = document.getElementById("catlinks");
	var isTask = false;
	if(catLinksEl)
	{
		var aEls = catLinksEl.getElementsByTagName("a");
		for(var a = 0; a < aEls.length; ++a)
		{
			if(aEls[a].getAttribute("title") ==
				"Category:Programming Tasks")
			{
				//it's a task
				isTask = true;
				break;
			}
		}
	}
	if(!isTask)
	{
		return;
	}
	
	//add the toolbox
	HighlightAddToolbox();
	
	//add the event handler for scrolling
	AddHandler(window, "scroll", HighlightScroll);
	
	//update the syntax highlight colors to bring in settings
	//from the cookie
	HighlightUpdate();
}

//register the script with the window's load event
AddHandler(window, "load", HighlightActivate);

//