Anonymous user
Rosetta Code:Language comparison script: Difference between revisions
Rosetta Code:Language comparison script (view source)
Revision as of 05:28, 14 November 2010
, 13 years agoUpdated 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
- Fe 7.0.520.0
- 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
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 = "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)
{
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);
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 - 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)
▲
}
Line 113 ⟶ 133:
if(insEl)
{
insEl.style.display =
(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[0].style.display == "none")
{
ulEls[u].style.display = "none"
}
else
{
ulEls[u].style.display = "inline-block"
}
}
var el = document.getElementById("tocinstructions");
if(el)
{
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
if(window.addEventListener)
{
Line 195 ⟶ 233:
for(var s = 0; s < spanEls.length; ++s)
{
if(spanEls[s].className &&
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
//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));
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."));
instructionsEl.appendChild(document.createElement("br"));
instructionsEl.appendChild(
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
var languages = CompareGetLanguages();
var divEl = null;
for(var
{
if(
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 <
//tag and the next one that has a name attribute
divEl = spanEls[s].parentNode.parentNode.insertBefore(
var curEl = aEls[a].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() != "
{
var newCurEl = curEl.nextSibling;
Line 256 ⟶ 303:
{
//add a float clearing div
var clearEl = divEl.parentNode.insertBefore(
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)
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
if(inputEls[i].getAttribute("name").substring(0, ("CompareLanguage").length) == "CompareLanguage")▼
if(inputEls[i].getAttribute("name").substring(0,
▲
{
languages[inputEls[i].value] = inputEls[i].checked;
Line 320 ⟶ 371:
//now, find all <a> tags with name attributes
var
for(var
{
if(
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
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
}
else if(languages[
{
//enable side-by-side mode
//find the width for this language
var preEls =
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
//arbitrarily set to 45% width
maxWidth = Math.max(
GetElWidth(parentDiv.parentNode) * 0.45,
maxWidth);
}
else
{
maxWidth = Math.max(GetElWidth(preEls[p]),
maxWidth);
}
preEls[p].style.cssFloat = "none";
Line 365 ⟶ 430:
if(!maxWidth)
{
var h2Els =
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
//arbitrarily set to 45% width
maxWidth = Math.max(
GetElWidth(parentDiv.parentNode) * 0.45,
maxWidth);
}
else
Line 393 ⟶ 461:
//set the container <div> to a size just a little bit larger
}
else
{
//hide it entirely
}
}
|