User:Tyrok1/monobook.js: Difference between revisions

From Rosetta Code
Content added Content deleted
(Tweaking)
(Trying new link)
 
Line 2: Line 2:
/*========================================
/*========================================
This comparison script was written by
This comparison script was written by
Tyrok1 and has been tested in Cr 12.
Tyrok1, and has been tested on Fx 3.6.6,
Cr 5.0.375.99, Epiphany 2.30.2,
Midori 0.2.2
========================================*/
========================================*/


var gadgetsAvailable = [
//define the relationship between the CSS classes and what they do
{
var highlightClasses = [
id: "LanguageComparison",
{ cssBase: "co", description: "Comments" },
name: "Language comparison",
{ cssBase: "nu", description: "Numbers" },
url: "http://rosettacode.org/mw/index.php" +
{ cssBase: "kw", description: "Keywords" },
"?title=Rosetta_Code:Language_comparison_script" +
{ cssBase: "sy", description: "Operators" },
"&action=raw&ctype=text/javascript",
{ cssBase: "st", description: "Strings" },
prefix: "Compare"
{ cssBase: "re", description: "Variables/Erlang Funs" },
},
{ cssBase: "br", description: "Brackets/Parens" },
{
{ cssBase: "co", description: "Comments/Compiler directives" },
id: "Highlight",
{ cssBase: "me", description: "Class methods" }
name: "Syntax Highlight Color Picker",
url: "http://rosettacode.org/mw/index.php" +
"?title=Rosetta_Code:Syntax_Highlight_Color_Picker" +
"&action=raw&ctype=text/javascript",
prefix: "Highlight"
},
{
id: "UtilityButtonBar",
name: "Utility button bar",
url: "http://rosettacode.org/mw/index.php" +
"?title=Rosetta_Code:Per-Code_Example_Buttonbar" +
"&action=raw&ctype=text/javascript",
prefix: "ButtonBar"
}
];
];


function AddHandler(el, handlerType, func)
function GadgetsAddHandler(el, handlerType, func)
{
{
//add an event handler in a more cross-browser way
//add an event handler in a more cross-browser way
Line 35: Line 51:
}
}


function IsChild(parent, child)
function GadgetsScriptLoad(g)
{
{
//check to see if an element is a child of another element
//see if we need to load it
//if we don't, there's not much point in loading it again
while(child && child != parent)
if(!document.getElementById("GadgetScript" + g))
{
{
var scriptEl = document.createElement("script");
child = child.parentNode;
scriptEl.setAttribute("id", "GadgetScript" + g);
scriptEl.setAttribute("type", "text/javascript");
scriptEl.setAttribute("src", gadgetsAvailable[g].url);
document.documentElement.appendChild(scriptEl);
}
}
return (child == parent);
}
}


function HighlightCode(codeEl)
function GadgetsScriptActivate(g)
{
{
//check to see if the script's finished loading
//find all instances of elements with the classes given and update their colors
if(eval("typeof " + gadgetsAvailable[g].prefix + "Activate") == "undefined")
var allSpans = codeEl.getElementsByTagName("span");
for(var s = 0; s < allSpans.length; ++s)
{
{
//not finished yet - try reactivating in another 0.5s
if(allSpans[s].className)
setTimeout(function() { GadgetsScriptActivate(g); }, 500);
{
}
for(var c in highlightClasses)
else
{
{
var cssBase = allSpans[s].className.substring(0, highlightClasses[c].cssBase.length);
//run the activation function
if(cssBase == highlightClasses[c].cssBase)
eval(gadgetsAvailable[g].prefix + "Activate();");
{
var colorEl = document.getElementById("HighlightColor" + c);
var dropdownVal = colorEl.options[colorEl.selectedIndex].value;
allSpans[s].style.color = (dropdownVal == "auto" ? null : dropdownVal);
}
}
}
}
}
}
}


function HighlightUpdate()
function GadgetsScriptDeactivate(g)
{
{
//check to see if the specified script has a deactivation function
//look for language examples
if(eval("typeof " + gadgetsAvailable[g].prefix + "Deactivate") != "undefined")
var allPres = document.getElementsByTagName("pre");
for(var p = 0; p < allPres.length; ++p)
{
{
//it does - run it
if(allPres[p].className && allPres[p].className.indexOf("highlighted_source") >= 0)
eval(gadgetsAvailable[g].prefix + "Deactivate();");
{
HighlightCode(allPres[p]);
}
}
}
else
//save defaults to cookie
var defaults = "";
for(var c in highlightClasses)
{
{
//pop up a warning to the user to let them know
var colorEl = document.getElementById("HighlightColor" + c);
//the plugin will be disabled when they reload
defaults += (defaults == "" ? "" : ",") + highlightClasses[c].cssBase + "-" + colorEl.options[colorEl.selectedIndex].value;
alert("This script will be disabled on next page load");
}
}
document.cookie = ("highlightDefaults=" + defaults + "; expires=" + (new Date((new Date()).getTime() + 1000 * 60 * 60 * 24 * 365)).toGMTString() + "; path=/");
}
}


function HighlightAddToolbox()
function GadgetsCreateCheckboxClosure(el)
{
{
//create an onclick handler for the script checkboxes
//check the cookie for default colors from last time
return function() {
var cookies = document.cookie.split(";");
//save the checkboxes to the cookie for next page load
for(var c in cookies)
GadgetsSaveCheckboxes();
{
var nameVal = cookies[c].split("=", 2);
//check to see if we need to activate or deactivate
if(nameVal[0].replace(/^ */, "") == "highlightDefaults")
if(el.checked)
{
var defaults = nameVal[1].split(",");
for(var d in defaults)
{
var defaultNameVal = defaults[d].split("-", 2);
for(var h in highlightClasses)
{
{
//load and activate the script
if(highlightClasses[h].cssBase == defaultNameVal[0])
GadgetsScriptLoad(el.value);
{
GadgetsScriptActivate(el.value);
highlightClasses[h].defaultColor = defaultNameVal[1];
}
}
}
}
else
}
{
//deactivate the script
}
GadgetsScriptDeactivate(el.value);
}
};
}

function GadgetsMouseOver()
{
//show the scripts dropdown
document.getElementById("pt-jsgadgets-list").style.display = "block";
}

function GadgetsMouseOut()
{
//hide the scripts dropdown
document.getElementById("pt-jsgadgets-list").style.display = "none";
}

function GadgetsSaveCheckboxes()
{
var checkedBoxes = "", checkboxEl = null;
//build a string representation of all of the checked boxes to save to the cookie
//add the toolbox
for(var c = 0; checkboxEl = document.getElementById("pt-jsgadgets-gadget" + c); ++c)
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";
var dlEl = pBodyEl.appendChild(document.createElement("dl"));
for(var c in highlightClasses)
{
{
if(checkboxEl.checked)
var labelEl = dlEl.appendChild(document.createElement("dt")).appendChild(document.createElement("label"));
labelEl.setAttribute("for", "HighlightColor" + c);
labelEl.appendChild(document.createTextNode(highlightClasses[c].description));
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;
var optionEl = inputEl.appendChild(document.createElement("option"));
optionEl.value = "auto";
optionEl.appendChild(document.createTextNode("(Default)"));
var optionNum = 1;
for(h1 in hexDigits)
{
{
for(h2 in hexDigits)
if(checkedBoxes != "")
{
{
checkedBoxes += ",";
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;
}
}
}
checkedBoxes += gadgetsAvailable[c].id;
}
}
}
}
//set an expiry date 1000 years into the future
var expireDate = new Date();
expireDate.setFullYear(expireDate.getFullYear() + 1000);
//store the cookie
document.cookie = "jsGadgets=" + escape(checkedBoxes) +
"; expires=" + expireDate.toUTCString();
}
}


function HighlightScroll(e)
function GadgetsGetCheckboxes()
{
{
//pull in the cookie and look for the jsGadgets key
var toolboxEl = document.getElementById("HighlightToolbox");
var fullCookie = document.cookie;
if(!toolboxEl.originalTop)
var gadgetsPos = fullCookie.indexOf("jsGadgets=");
if(gadgetsPos < 0)
{
{
//no gadgets in the cookie
toolboxEl.originalTop = toolboxEl.offsetTop;
return new Array();
}
}
var endPos = fullCookie.indexOf(";", gadgetsPos);
var pageScroll = (document.body.scrollTop ? document.body.scrollTop : window.pageYOffset);
var newTop = (pageScroll - toolboxEl.originalTop);
//split the gadget IDs by comma
toolboxEl.style.top = (newTop >= 0 ? newTop : 0) + "px";
var jsGadgets = fullCookie.substring(gadgetsPos + ("jsGadgets=").length,
}
(endPos > 0 ? endPos : fullCookie.length));

var checkIDs = unescape(jsGadgets).split(",");
function HighlightActivate()
{
//translate the list of IDs to a list of array indices,
//check to see if we're looking at a task page
//in keeping with the way the rest of this module works
var catLinksEl = document.getElementById("catlinks");
var isTask = false;
var checkIndices = new Array();
for(var g = 0; g < gadgetsAvailable.length; ++g)
if(catLinksEl)
{
{
for(var c = 0; c < checkIDs.length; ++c)
var aEls = catLinksEl.getElementsByTagName("a");
for(var a = 0; a < aEls.length; ++a)
{
{
if(gadgetsAvailable[g].id == checkIDs[c])
if(aEls[a].getAttribute("title") == "Category:Programming Tasks")
{
{
checkIndices[checkIndices.length] = g;
//it's a task
isTask = true;
break;
break;
}
}
}
}
}
}
return checkIndices;
if(!isTask)
}

function GadgetsActivate()
{
//find the user preferences button and add a new list item to the right of it
var prefsEl = document.getElementById("pt-preferences");
if(!prefsEl)
{
{
var personalEl = document.getElementById("p-personal");
return;
if(!personalEl)
{
return;
}
var liEls = personalEl.getElementsByTagName("li");
if(!liEls || liEls.length < 2)
{
return;
}
prefsEl = liEls[liEls.length - 2];
}
}
var jsMenuEl = prefsEl.parentNode.insertBefore(
document.createElement("li"), prefsEl.nextSibling);
jsMenuEl.setAttribute("id", "pt-jsgadgets");
//add a new link named "My scripts" in the new list item
HighlightAddToolbox();
//from a semantics point of view, this is not great,
//but this way the styling kicks in to keep it consistent with its siblings
var jsLinkEl = jsMenuEl.appendChild(document.createElement("a"));
jsLinkEl.appendChild(document.createTextNode("My scripts"));
jsLinkEl.setAttribute("href", "javascript: void(0);");
jsLinkEl.style.position = "relative";
//add handlers for showing on mouseover and hiding on mouseout
AddHandler(window, "scroll", HighlightScroll);
GadgetsAddHandler(jsLinkEl, "mouseover", GadgetsMouseOver);
GadgetsAddHandler(jsLinkEl, "mouseout", GadgetsMouseOut);
//build a list for showing available JS gadgets
HighlightUpdate();
var modulesListEl = jsLinkEl.appendChild(document.createElement("ol"));
modulesListEl.setAttribute("id", "pt-jsgadgets-list");
modulesListEl.style.listStyle = "none";
modulesListEl.style.margin = 0;
modulesListEl.style.padding = 0;
modulesListEl.style.position = "absolute";
modulesListEl.style.top = "100%";
modulesListEl.style.left = 0;
modulesListEl.style.backgroundColor = "#fff";
modulesListEl.style.border = "1px solid #69c";
modulesListEl.style.padding = "0.5em";
modulesListEl.style.display = "none";
//raise the zIndex of the new button (as well as
//a few parents) so the menu overlaps the page
var zEl = modulesListEl;
for(var z = 0; z < 6 && zEl && zEl.style; ++z, zEl = zEl.parentNode)
{
zEl.style.zIndex = 100;
}
//add each of the gadgets to the list
for(var m = 0; m < gadgetsAvailable.length; ++m)
{
//add the list item element
var liEl = modulesListEl.appendChild(document.createElement("li"));
liEl.style.display = "block";
liEl.style.cssFloat = "none";
liEl.style.right = "auto";
liEl.style.left = 0;
liEl.style.textAlign = "left";
liEl.style.margin = 0;
liEl.style.padding = 0;
//add the checkbox
var inputEl = document.createElement("input");
var checkboxId = "pt-jsgadgets-gadget" + m;
inputEl.setAttribute("type", "checkbox");
inputEl.setAttribute("id", checkboxId);
inputEl.setAttribute("value", m);
GadgetsAddHandler(inputEl, "click", GadgetsCreateCheckboxClosure(inputEl));
liEl.appendChild(inputEl);
//add the label
var labelEl = document.createElement("label");
labelEl.setAttribute("for", checkboxId);
labelEl.appendChild(document.createTextNode(gadgetsAvailable[m].name));
labelEl.style.paddingLeft = "1em";
liEl.appendChild(labelEl);
}
//fetch the saved checkboxes from the cookie
var checks = GadgetsGetCheckboxes();
for(var c = 0; c < checks.length; ++c)
{
//for each one that should be checked on page load,
//check the box, load, and activate it
document.getElementById("pt-jsgadgets-gadget" + checks[c]).checked = true;
GadgetsScriptLoad(checks[c]);
GadgetsScriptActivate(checks[c]);
}
}
}


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

//</lang>
//</lang>

Latest revision as of 19:34, 3 July 2011

//<lang javascript>
/*========================================
This comparison script was written by
Tyrok1, and has been tested on Fx 3.6.6,
Cr 5.0.375.99, Epiphany 2.30.2,
Midori 0.2.2
========================================*/

var gadgetsAvailable = [
					{
						id: "LanguageComparison",
						name: "Language comparison",
						url: "http://rosettacode.org/mw/index.php" +
							"?title=Rosetta_Code:Language_comparison_script" + 
							"&action=raw&ctype=text/javascript",
						prefix: "Compare"
					},
					{
						id: "Highlight",
						name: "Syntax Highlight Color Picker",
						url: "http://rosettacode.org/mw/index.php" +
							"?title=Rosetta_Code:Syntax_Highlight_Color_Picker" +
							"&action=raw&ctype=text/javascript",
						prefix: "Highlight"
					},
					{
						id: "UtilityButtonBar",
						name: "Utility button bar",
						url: "http://rosettacode.org/mw/index.php" +
							"?title=Rosetta_Code:Per-Code_Example_Buttonbar" +
							"&action=raw&ctype=text/javascript",
						prefix: "ButtonBar"
					}
				];

function GadgetsAddHandler(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 GadgetsScriptLoad(g)
{
	//see if we need to load it
	//if we don't, there's not much point in loading it again
	if(!document.getElementById("GadgetScript" + g))
	{
		var scriptEl = document.createElement("script");
		scriptEl.setAttribute("id", "GadgetScript" + g);
		scriptEl.setAttribute("type", "text/javascript");
		scriptEl.setAttribute("src", gadgetsAvailable[g].url);
		document.documentElement.appendChild(scriptEl);
	}
}

function GadgetsScriptActivate(g)
{
	//check to see if the script's finished loading
	if(eval("typeof " + gadgetsAvailable[g].prefix + "Activate") == "undefined")
	{
		//not finished yet - try reactivating in another 0.5s
		setTimeout(function() { GadgetsScriptActivate(g); }, 500);
	}
	else
	{
		//run the activation function
		eval(gadgetsAvailable[g].prefix + "Activate();");
	}
}

function GadgetsScriptDeactivate(g)
{
	//check to see if the specified script has a deactivation function
	if(eval("typeof " + gadgetsAvailable[g].prefix + "Deactivate") != "undefined")
	{
		//it does - run it
		eval(gadgetsAvailable[g].prefix + "Deactivate();");
	}
	else
	{
		//pop up a warning to the user to let them know
		//the plugin will be disabled when they reload
		alert("This script will be disabled on next page load");
	}
}

function GadgetsCreateCheckboxClosure(el)
{
	//create an onclick handler for the script checkboxes
	return function() {
				//save the checkboxes to the cookie for next page load
				GadgetsSaveCheckboxes();
				
				//check to see if we need to activate or deactivate
				if(el.checked)
				{
					//load and activate the script
					GadgetsScriptLoad(el.value);
					GadgetsScriptActivate(el.value);
				}
				else
				{
					//deactivate the script
					GadgetsScriptDeactivate(el.value);
				}
			};
}

function GadgetsMouseOver()
{
	//show the scripts dropdown
	document.getElementById("pt-jsgadgets-list").style.display = "block";
}

function GadgetsMouseOut()
{
	//hide the scripts dropdown
	document.getElementById("pt-jsgadgets-list").style.display = "none";
}

function GadgetsSaveCheckboxes()
{
	var checkedBoxes = "", checkboxEl = null;
	
	//build a string representation of all of the checked boxes to save to the cookie
	for(var c = 0; checkboxEl = document.getElementById("pt-jsgadgets-gadget" + c); ++c)
	{
		if(checkboxEl.checked)
		{
			if(checkedBoxes != "")
			{
				checkedBoxes += ",";
			}
			checkedBoxes += gadgetsAvailable[c].id;
		}
	}
	
	//set an expiry date 1000 years into the future
	var expireDate = new Date();
	expireDate.setFullYear(expireDate.getFullYear() + 1000);
	
	//store the cookie
	document.cookie = "jsGadgets=" + escape(checkedBoxes) +
			"; expires=" + expireDate.toUTCString();
}

function GadgetsGetCheckboxes()
{
	//pull in the cookie and look for the jsGadgets key
	var fullCookie = document.cookie;
	var gadgetsPos = fullCookie.indexOf("jsGadgets=");
	if(gadgetsPos < 0)
	{
		//no gadgets in the cookie
		return new Array();
	}
	var endPos = fullCookie.indexOf(";", gadgetsPos);
	
	//split the gadget IDs by comma
	var jsGadgets = fullCookie.substring(gadgetsPos + ("jsGadgets=").length,
					(endPos > 0 ? endPos : fullCookie.length));
	var checkIDs = unescape(jsGadgets).split(",");
	
	//translate the list of IDs to a list of array indices,
	//in keeping with the way the rest of this module works
	var checkIndices = new Array();
	for(var g = 0; g < gadgetsAvailable.length; ++g)
	{
		for(var c = 0; c < checkIDs.length; ++c)
		{
			if(gadgetsAvailable[g].id == checkIDs[c])
			{
				checkIndices[checkIndices.length] = g;
				break;
			}
		}
	}
	return checkIndices;
}

function GadgetsActivate()
{
	//find the user preferences button and add a new list item to the right of it
	var prefsEl = document.getElementById("pt-preferences");
	if(!prefsEl)
	{
		var personalEl = document.getElementById("p-personal");
		if(!personalEl)
		{
			return;
		}
		var liEls = personalEl.getElementsByTagName("li");
		if(!liEls || liEls.length < 2)
		{
			return;
		}
		prefsEl = liEls[liEls.length - 2];
	}
	var jsMenuEl = prefsEl.parentNode.insertBefore(
				document.createElement("li"), prefsEl.nextSibling);
	jsMenuEl.setAttribute("id", "pt-jsgadgets");
	
	//add a new link named "My scripts" in the new list item
	//from a semantics point of view, this is not great,
	//but this way the styling kicks in to keep it consistent with its siblings
	var jsLinkEl = jsMenuEl.appendChild(document.createElement("a"));
	jsLinkEl.appendChild(document.createTextNode("My scripts"));
	jsLinkEl.setAttribute("href", "javascript: void(0);");
	jsLinkEl.style.position = "relative";
	
	//add handlers for showing on mouseover and hiding on mouseout
	GadgetsAddHandler(jsLinkEl, "mouseover", GadgetsMouseOver);
	GadgetsAddHandler(jsLinkEl, "mouseout", GadgetsMouseOut);
	
	//build a list for showing available JS gadgets
	var modulesListEl = jsLinkEl.appendChild(document.createElement("ol"));
	modulesListEl.setAttribute("id", "pt-jsgadgets-list");
	modulesListEl.style.listStyle = "none";
	modulesListEl.style.margin = 0;
	modulesListEl.style.padding = 0;
	modulesListEl.style.position = "absolute";
	modulesListEl.style.top = "100%";
	modulesListEl.style.left = 0;
	modulesListEl.style.backgroundColor = "#fff";
	modulesListEl.style.border = "1px solid #69c";
	modulesListEl.style.padding = "0.5em";
	modulesListEl.style.display = "none";
	
	//raise the zIndex of the new button (as well as
	//a few parents) so the menu overlaps the page
	var zEl = modulesListEl;
	for(var z = 0; z < 6 && zEl && zEl.style; ++z, zEl = zEl.parentNode)
	{
		zEl.style.zIndex = 100;
	}
	
	//add each of the gadgets to the list
	for(var m = 0; m < gadgetsAvailable.length; ++m)
	{
		//add the list item element
		var liEl = modulesListEl.appendChild(document.createElement("li"));
		liEl.style.display = "block";
		liEl.style.cssFloat = "none";
		liEl.style.right = "auto";
		liEl.style.left = 0;
		liEl.style.textAlign = "left";
		liEl.style.margin = 0;
		liEl.style.padding = 0;
		
		//add the checkbox
		var inputEl = document.createElement("input");
		var checkboxId = "pt-jsgadgets-gadget" + m;
		inputEl.setAttribute("type", "checkbox");
		inputEl.setAttribute("id", checkboxId);
		inputEl.setAttribute("value", m);
		GadgetsAddHandler(inputEl, "click", GadgetsCreateCheckboxClosure(inputEl));
		liEl.appendChild(inputEl);
		
		//add the label
		var labelEl = document.createElement("label");
		labelEl.setAttribute("for", checkboxId);
		labelEl.appendChild(document.createTextNode(gadgetsAvailable[m].name));
		labelEl.style.paddingLeft = "1em";
		liEl.appendChild(labelEl);
	}
	
	//fetch the saved checkboxes from the cookie
	var checks = GadgetsGetCheckboxes();
	for(var c = 0; c < checks.length; ++c)
	{
		//for each one that should be checked on page load,
		//check the box, load, and activate it
		document.getElementById("pt-jsgadgets-gadget" + checks[c]).checked = true;
		GadgetsScriptLoad(checks[c]);
		GadgetsScriptActivate(checks[c]);
	}
}

//register the comparison script with the window's load event
GadgetsAddHandler(window, "load", GadgetsActivate);
//</lang>