Rosetta Code:Language comparison script: Difference between revisions

Updated language comparison script to work with new version of wiki
(Adding some slashes to make the raw code valid JS)
(Updated language comparison script to work with new version of wiki)
Line 2:
/*========================================
This comparison script was written by
Tyrok1,. and hasTested been tested on IE 5.5,in:
- Fe 7.0.520.0
IE 6, IE 7, IE 8, Fx 3.6.2, and
Fe- 4.0Fx 3.2806.11
- IE 6, 7, 8
========================================*/
function GetElWidth(el)
Line 20 ⟶ 21:
if(tocEl && ulElsNodeList.length > 0)
{
//limit what we're looking at to only what's directly in the main list, and move from NodeList objects to Arrays
//the main list, and move from NodeList objects to Arrays
var ulEls = [ulElsNodeList[0]];
for(var u = 1; u < ulElsNodeList.length; ++u)
Line 34 ⟶ 36:
{
for(u = 0; u < ulEls.length; ++u)
{F
if(liElsNodeList[l].parentNode == ulEls[u])
{
Line 44 ⟶ 46:
//show all of the <ul> tags so we can get their items' ideal widths
ulEls[0].oldDisplay = if(ulEls[0].style.display && ulEls[0].style.display == "none" ? "none" : "inline-block");
{
ulEls[0].oldDisplay = "none";
}
else
{
ulEls[0].oldDisplay = "inline-block";
}
for(u = 0; u < ulEls.length; ++u)
{
Line 59 ⟶ 68:
}
maxWidth = Math.max(liEls[l].initialWidth, maxWidth);
if(navigator.appVersion.indexOf("MSIE 5.") >= 0 || navigator.appVersion.indexOf("MSIE 6.") >= 0 || navigator.appVersion.indexOf("MSIE 7.") >= 0)
navigator.appVersion.indexOf("MSIE 6.") >= 0 ||
navigator.appVersion.indexOf("MSIE 7.") >= 0)
{
liEls[l].style.display = "inline";
Line 70 ⟶ 81:
//figure out the ideal number of columns
tocEl.style.width = "100%";
var idealColumns = Math.min(Math.floor(GetElWidth(tocEl) / maxWidth), Math.floor(liEls.length / 3) + 1);
Math.floor(GetElWidth(tocEl) / maxWidth),
if(navigator.appVersion.indexOf("MSIE 5.") >= 0 || navigator.appVersion.indexOf("MSIE 6.") >= 0 || navigator.appVersion.indexOf("MSIE 7.") >= 0)
Math.floor(liEls.length / 3) + 1);
if(navigator.appVersion.indexOf("MSIE 5.") >= 0 ||
navigator.appVersion.indexOf("MSIE 6.") >= 0 ||
navigator.appVersion.indexOf("MSIE 7.") >= 0)
{
idealColumns = 1;
Line 84 ⟶ 99:
while(ulEls.length < idealColumns)
{
ulEls[ulEls.length] =
ulEls[ulEls.length] = ulEls[ulEls.length - 1].parentNode.insertBefore(document.createElement("ul"), ulEls[ulEls.length - 1].nextSibling);
ulEls[ulEls.length - 1].parentNode.insertBefore(
document.createElement("ul"),
ulEls[ulEls.length - 1].nextSibling);
}
Line 99 ⟶ 117:
for(l = 0; l < liEls.length; ++l)
{
liEls[l] = ulEls[
liEls[l] = ulEls[Math.floor(l / liEls.length * idealColumns)].appendChild(liEls[l].parentNode.removeChild(liEls[l]));
Math.floor(l / liEls.length * idealColumns)
liEls[l] = ulEls[Math.floor(l / liEls.length * idealColumns) ].appendChild(liEls[l].parentNode.removeChild(liEls[l]));
}
Line 113 ⟶ 133:
if(insEl)
{
insEl.style.display = (ulEls[0].oldDisplay.toLowerCase() == "none" ? "none" : "block");
(ulEls[0].oldDisplay.toLowerCase() == "none" ? "none" : "block");
}
for(u = 0; u < ulEls.length; ++u)
Line 130 ⟶ 151:
for(var u = 0; u < ulEls.length; ++u)
{
ulEls[u].style.display = if(ulEls[0].style.display && ulEls[0].style.display == "none" ? "none" : "inline-block");
ulEls[0].style.display == "none")
{
ulEls[u].style.display = "none"
}
else
{
ulEls[u].style.display = "inline-block"
}
}
var el = document.getElementById("tocinstructions");
if(el)
{
el.style.display = if(ulEls[0].style.display && ulEls[0].style.display.toLowerCase() == "none" ? "none" : "block");
ulEls[0].style.display.toLowerCase() == "none")
{
el.style.display = "none";
}
else
{
el.style.display = "block";
}
}
};
Line 143 ⟶ 180:
};
//add an event handler so if the window's resized the number of columns can change
//resized the number of columns can change
if(window.addEventListener)
{
Line 195 ⟶ 233:
for(var s = 0; s < spanEls.length; ++s)
{
if(spanEls[s].className && spanEls[s].className.toLowerCase() == "toctoggle")
spanEls[s].className.toLowerCase() == "toctoggle")
{
if(foundToggle)
Line 210 ⟶ 249:
for(var l = 0; l < liEls.length; ++l)
{
//add a checkbox with the language section's <a>anchor name attribute as its value for easier lookup in the refresh function
//as its value for easier lookup in the refresh function
var checkboxEl = document.createElement("input");
checkboxEl.setAttribute("type", "checkbox");
Line 216 ⟶ 256:
checkboxEl.setAttribute("id", "CompareLanguage" + l);
var href = liEls[l].getElementsByTagName("a")[0].getAttribute("href");
checkboxEl.setAttribute("value", href.substring(href.indexOf("#") + 1, href.length));
href.substring(href.indexOf("#") + 1, href.length));
checkboxEl.onclick = CompareRefresh;
liEls[l].insertBefore(checkboxEl, liEls[l].firstChild);
Line 225 ⟶ 266:
var instructionsEl = toctitleEl.appendChild(document.createElement("p"));
instructionsEl.setAttribute("id", "tocinstructions");
instructionsEl.appendChild(document.createTextNode("Check the boxes next to languages to compare them."));
document.createTextNode("Check the boxes next to languages to compare them."));
instructionsEl.appendChild(document.createElement("br"));
instructionsEl.appendChild(document.createTextNode("Uncheck all boxes to show all languages."));
document.createTextNode("Uncheck all boxes to show all languages."));
//switch the ToC to multi-column mode
Line 233 ⟶ 276:
//put all language sections inside of a <div>
var aElsspanEls = document.getElementsByTagName("aspan");
var languages = CompareGetLanguages();
var divEl = null;
for(var as = 0; as < aElsspanEls.length; ++as)
{
if(aEls[a].name && typeof languagesspanEls[aEls[as].name]id != "undefined") &&
typeof languages[spanEls[s].id] != "undefined")
{
//we can assume that this is a language section
//make a list of all of the elements between this <aspan> tag and the next one that has a name attribute
//tag and the next one that has a name attribute
divEl = aEls[a].parentNode.insertBefore(document.createElement("div"), aEls[a]);
divEl = spanEls[s].parentNode.parentNode.insertBefore(
var curEl = aEls[a].nextSibling;
divEl document.appendChildcreateElement(aEls"div"), spanEls[as].parentNode.removeChild(aEls[a]));
var curEl = aElsspanEls[as].parentNode.nextSibling;
while(curEl && (!curEl.tagName || curEl.tagName.toLowerCase() != "a" || !curEl.name || typeof languages[curEl.name] == "undefined"))
divEl.appendChild(spanEls[s].parentNode.parentNode.removeChild(
spanEls[s].parentNode));
while(curEl && (!curEl.tagName || curEl.tagName.toLowerCase() != "a" || !curEl.name || typeof languages[curEl.name] == "undefinedh2"))
{
var newCurEl = curEl.nextSibling;
Line 256 ⟶ 303:
{
//add a float clearing div
var clearEl = divEl.parentNode.insertBefore(document.createElement("div"), divEl.nextSibling);
document.createElement("div"), divEl.nextSibling);
clearEl.style.clear = "both";
}
//and refresh the display for good measure (sometimes browsers like to save <input> states between reloads)
//browsers like to save <input> states between reloads)
CompareRefresh();
Line 289 ⟶ 338:
for(var i = 0; i < inputEls.length; ++i)
{
//if it's one of the ones we added earlier, log the checked status to the languages array for later use
//checked status to the languages array for later use
if(inputEls[i].getAttribute("name").substring(0, ("CompareLanguage").length) == "CompareLanguage")
if(inputEls[i].getAttribute("name").substring(0,
if(inputEls[i].getAttribute("name").substring(0, ("CompareLanguage").length) == "CompareLanguage")
{
languages[inputEls[i].value] = inputEls[i].checked;
Line 320 ⟶ 371:
//now, find all <a> tags with name attributes
var aElsspanEls = document.getElementsByTagName("aspan");
for(var as = 0; as < aElsspanEls.length; ++as)
{
if(aEls[a].name && typeof languagesspanEls[aEls[as].name]className != "undefined") &&
spanEls[s].className.indexOf("mw-headline") >= 0 &&
typeof spanEls[s].id != "undefined" &&
typeof languages[spanEls[s].id] != "undefined")
{
var anchorName = spanEls[s].id;
var parentDiv = spanEls[s].parentNode.parentNode;
//we can assume that this is a language section
//check to see if we're displaying in side-by-side mode, regular mode, or not at all
//regular mode, or not at all
if(numChecked < 1 || (languages[aEls[a].name] && (navigator.appVersion.indexOf("MSIE 5.") >= 0 || navigator.appVersion.indexOf("MSIE 6.") >= 0 || navigator.appVersion.indexOf("MSIE 7.") >= 0)))
if(numChecked < 1 || (languages[anchorName] &&
(navigator.appVersion.indexOf("MSIE 5.") >= 0 ||
navigator.appVersion.indexOf("MSIE 6.") >= 0 ||
navigator.appVersion.indexOf("MSIE 7.") >= 0)))
{
//enable full-width mode
aEls[a].parentNodeparentDiv.style.display = "block";
aEls[a].parentNodeparentDiv.style.cssFloat = "none";
aEls[a].parentNodeparentDiv.style.width = "auto";
aEls[a].parentNodeparentDiv.style.marginRight = 0;
}
else if(languages[aEls[a].nameanchorName])
{
//enable side-by-side mode
aEls[a].parentNodeparentDiv.style.display = "inline-block";
aEls[a].parentNodeparentDiv.style.verticalAlign = "top";
aEls[a].parentNodeparentDiv.style.marginRight = "20px";
//find the width for this language
var preEls = aEls[a].parentNodeparentDiv.getElementsByTagName("pre");
var maxWidth = 0;
for(var p = 0; p < preEls.length; ++p)
Line 351 ⟶ 412:
if(GetElWidth(preEls[p]) == oldWidth)
{
//assume it's either wider than the window or IE where they don't shrink
//window or IE where they don't shrink
//arbitrarily set to 45% width
maxWidth = Math.max(GetElWidth(aEls[a].parentNode.parentNode) * 0.45, maxWidth);
GetElWidth(parentDiv.parentNode) * 0.45,
maxWidth);
}
else
{
maxWidth = Math.max(GetElWidth(preEls[p]), maxWidth);
maxWidth);
}
preEls[p].style.cssFloat = "none";
Line 365 ⟶ 430:
if(!maxWidth)
{
var h2Els = aEls[a].parentNodeparentDiv.getElementsByTagName("h2");
if(h2Els.length > 0)
{
Line 374 ⟶ 439:
if(GetElWidth(h2Els[p]) == oldWidth)
{
//assume it's either wider than the window or IE where they don't shrink
//window or IE where they don't shrink
//arbitrarily set to 45% width
maxWidth = Math.max(GetElWidth(aEls[a].parentNode.parentNode) * 0.45, maxWidth);
GetElWidth(parentDiv.parentNode) * 0.45,
maxWidth);
}
else
Line 393 ⟶ 461:
//set the container <div> to a size just a little bit larger
aEls[a].parentNodeparentDiv.style.width = (maxWidth + codeMargin) + "px";
}
else
{
//hide it entirely
aEls[a].parentNodeparentDiv.style.display = "none";
}
}
Anonymous user