User:Tyrok1/monobook.js: Difference between revisions
Content added Content deleted
(Testing JavaScript syntax highlight changer) |
(Trying new link) |
||
(3 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
/*======================================== |
/*======================================== |
||
This comparison script was written by |
This comparison script was written by |
||
Tyrok1, and has been tested on Fx 3.6.6, |
|||
Tyrok1. |
|||
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 |
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 |
function GadgetsScriptLoad(g) |
||
{ |
{ |
||
// |
//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 |
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 |
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 |
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] == "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) |
|||
{ |
{ |
||
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 |
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 newTop = (document.body.scrollTop - toolboxEl.originalTop); |
|||
toolboxEl.style.top = (newTop >= 0 ? newTop : 0) + "px"; |
|||
//split the gadget IDs by comma |
|||
} |
|||
var jsGadgets = fullCookie.substring(gadgetsPos + ("jsGadgets=").length, |
|||
(endPos > 0 ? endPos : fullCookie.length)); |
|||
function HighlightActivate() |
|||
var checkIDs = unescape(jsGadgets).split(","); |
|||
{ |
|||
//check to see if we're looking at a task page |
|||
//translate the list of IDs to a list of array indices, |
|||
var catLinksEl = document.getElementById("catlinks"); |
|||
//in keeping with the way the rest of this module works |
|||
var isTask = false; |
|||
var checkIndices = new Array(); |
|||
if(catLinksEl) |
|||
for(var g = 0; g < gadgetsAvailable.length; ++g) |
|||
{ |
{ |
||
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 |
|||
HighlightUpdate(); |
|||
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 |
//register the comparison script with the window's load event |
||
GadgetsAddHandler(window, "load", GadgetsActivate); |
|||
AddHandler(window, "scroll", HighlightScroll); |
|||
//</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>