User:Tyrok1/monobook.js: Difference between revisions

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>
Retrieved from "https://rosettacode.org/wiki/User:Tyrok1/monobook.js"