User:Tyrok1/monobook.js: Difference between revisions
Content added Content deleted
(Testing JavaScript syntax highlight changer) |
(Tweaking) |
||
Line 96: | Line 96: | ||
{ |
{ |
||
var nameVal = cookies[c].split("=", 2); |
var nameVal = cookies[c].split("=", 2); |
||
if(nameVal[0] == "highlightDefaults") |
if(nameVal[0].replace(/^ */, "") == "highlightDefaults") |
||
{ |
{ |
||
var defaults = nameVal[1].split(","); |
var defaults = nameVal[1].split(","); |
Revision as of 19:08, 3 July 2011
//<lang javascript>
/*========================================
This comparison script was written by
Tyrok1.
========================================*/
//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 IsChild(parent, child)
{
//check to see if an element is a child of another element
while(child && child != parent)
{
child = child.parentNode;
}
return (child == parent);
}
function HighlightCode(codeEl)
{
//find all instances of elements with the classes given 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";
var dlEl = pBodyEl.appendChild(document.createElement("dl"));
for(var c in highlightClasses)
{
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)
{
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)
{
var toolboxEl = document.getElementById("HighlightToolbox");
if(!toolboxEl.originalTop)
{
toolboxEl.originalTop = toolboxEl.offsetTop;
}
var newTop = (document.body.scrollTop - 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;
}
HighlightAddToolbox();
HighlightUpdate();
}
//register the comparison script with the window's load event
AddHandler(window, "load", HighlightActivate);
AddHandler(window, "scroll", HighlightScroll);
//</lang>