Rosetta Code

Rosetta Code:Language comparison script: Difference between revisions

Project page Discussion

Rosetta Code:Language comparison script (view source)

Revision as of 21:34, 2 July 2011

996 bytes added ,  12 years ago
Typo
m (moved Language comparison script to Rosetta Code:Language comparison script: Attempting to move to Rosetta Code namespace)
(Typo)
 
(5 intermediate revisions by the same user not shown)
Line 1:
//<lang javascript>
/*========================================
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 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.floormin(GetElWidth(tocEl) / maxWidth);
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();
//add an event listener for window resizing
if(window.addEventListener)
{
window.addEventListener("resize", CompareRefresh, false);
}
else if(document.addEventListener)
{
document.addEventListener("resize", CompareRefresh, false);
}
else if(window.attachEvent)
{
window.attachEvent("onresize", CompareRefresh);
}
}
}
Line 275 ⟶ 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 306 ⟶ 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 337 ⟶ 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 351 ⟶ 430:
if(!maxWidth)
{
var h2Els = aEls[a].parentNodeparentDiv.getElementsByTagName("h2");
if(h2Els.length > 0)
{
Line 360 ⟶ 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 379 ⟶ 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";
}
}
Line 408 ⟶ 490:
window.onload = CompareActivate;
}
//</lang>
Anonymous user
Retrieved from "https://rosettacode.org/wiki/Special:MobileDiff/149224...149230"