1,956
edits
(Style of expanders) Tag: Reverted |
(Disabled the [hide heading summaries after putting them in the considerations table] functionality.) |
||
(37 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
//==Expandables and calculations== | |||
var _calc3 = ''; // string to be sent to calc3.php ajax | var _calc3 = ''; // string to be sent to calc3.php ajax | ||
Line 6: | Line 10: | ||
function closePopup() { | function closePopup() { | ||
for (var i=0; i<_popupClasses.length; i++) { | for (var i=0; i<_popupClasses.length; i++) { | ||
e = document.getElementsByClassName(_popupClasses[i]); | var e = document.getElementsByClassName(_popupClasses[i]); | ||
for (var j=0; j<e.length; j++) { | for (var j=0; j<e.length; j++) { | ||
e[j].style.display = 'none'; | e[j].style.display = 'none'; | ||
Line 40: | Line 44: | ||
} | } | ||
} | } | ||
function | |||
function showOnlyNext(ev) { // expand inline | |||
ev.currentTarget.style.display = "none"; | |||
ev.currentTarget.nextElementSibling.style.display = "initial"; | |||
ev.stopPropagation(); | |||
} | |||
function showOnlyPrev(ev) { // collapse inline | |||
ev.currentTarget.style.display = "none"; | |||
ev.currentTarget.previousElementSibling.style.display = "initial"; | |||
ev.stopPropagation(); | |||
} | } | ||
function tpNext(ev) { // show popup | |||
togglePopup(ev.currentTarget.nextElementSibling); | |||
ev.stopPropagation(); | |||
} | |||
function tpSelf(ev) { // hide popup | |||
togglePopup(ev.currentTarget); | |||
ev.stopPropagation(); | |||
} | |||
function dpInfo(o) { // for calculator: display a datapoint's info | function dpInfo(o) { // for calculator: display a datapoint's info | ||
var id = o.innerHTML; | var id = o.innerHTML; | ||
Line 53: | Line 73: | ||
} | } | ||
} | } | ||
function parseExpandables() { // init | |||
// Expandable text and popups | |||
var e = document.getElementsByClassName('forMore'); | |||
for (var i=0; i<e.length; i++) { | |||
var next = e[i].nextElementSibling; | |||
if (next.className=="xpContent" || next.classList.contains("xpContent")) { | |||
e[i].onclick = showOnlyNext; | |||
next.onclick = showOnlyPrev; | |||
} else | |||
if (next.className=="ppContent" || next.classList.contains("ppContent")) { | |||
e[i].onclick = tpNext; | |||
next.onclick = tpSelf; | |||
} | |||
} | |||
// Expandable bullet list | |||
e = document.getElementsByClassName("expandable-bullets"); | |||
for (var i=0; i<e.length; i++) { | |||
var f = e[i].getElementsByTagName("ul"); | |||
for (var j=1; j<f.length; j++) { | |||
f[j].classList.add("mw-collapsible"); | |||
f[j].classList.add("mw-collapsed"); | |||
} | |||
} | |||
} | |||
function parseCalculations() { // init | |||
// Local datapoints and calculations | |||
var e = document.getElementsByClassName('dp'); | |||
for (var i=0; i<e.length; i++) { | |||
var id = e[i].children[0].innerHTML.trim().split('\n')[0]; | |||
var val= e[i].children[1].innerHTML.split('\n').join(' '); | |||
var redundant = document.getElementById('dp-'+id); | |||
if (redundant) redundant.id = ''; // XXX: This can only handle the case 'same identifier, same value'. It can't handle 'same identifier, different value' - at least 1 calculation would show up wrong. But to fix that, we would need a huge refactor - I don't think it's worthwhile. Instead, let's just warn users not to let their datapoints conflict with each other. | |||
e[i].id = 'dp-'+id; | |||
e[i].onclick = closePopup; | |||
_calc3 += id+' = '+val+'\n'; | |||
} | |||
e = document.getElementsByClassName('calc'); | |||
for (var i=0; i<e.length; i++) { | |||
var v = e[i].children[2] && e[i].children[2].innerHTML.trim().split('\n')[0]; // variable | |||
if (v) { | |||
e[i].id = 'calc-'+v; // XXX: If the user sets the same variable more than once (iterative math), it'll break the 'From previous calculation' link. To fix this, we would have to edit both this script and calc3.php. | |||
var n = document.createElement('div'); | |||
n.className = 'dpVar'; n.id = 'dp-'+v; | |||
n.innerHTML = "<div class='dp0'>"+v+"</div><div class='dp2'>From <a href='#calc-"+v+"'>previous calculation</a></div>"; | |||
n.onclick = closePopup; | |||
e[i].parentElement.insertBefore(n, e[i]); | |||
_calc3 += v+' = '; | |||
} | |||
_calc3 += e[i].children[0].innerHTML.split('\n').join(' '); // expression | |||
if (e[i].children[1]) _calc3 += ' <> '+e[i].children[1].innerHTML.split('\n').join(' '); // units wanted | |||
_calc3 += '\n'; | |||
e[i].innerHTML = 'Loading...'; | |||
} | |||
var xhttp = new XMLHttpRequest(); | |||
xhttp.onreadystatechange = function() { | |||
if (this.readyState==4 && this.status==200) { | |||
var l=0; | |||
var lines = this.responseText.split('\n'); | |||
var e = document.getElementsByClassName('dp'); | |||
for (var i=0; i<e.length; i++, l++) e[i].children[1].innerHTML = lines[l].split('<br')[0]; // update 'value' to contain hyperlinks | |||
e = document.getElementsByClassName('calc'); | |||
for (var i=0; i<e.length; i++, l++) e[i].innerHTML = lines[l]; // equation | |||
} | |||
}; | |||
xhttp.open("POST", "/calc/calc3.php?input="+encodeURIComponent(_calc3), true) | |||
try { xhttp.send(); } catch(error) { /* AJAX URL not found */ } | |||
// External calculation links | |||
e = document.getElementsByClassName('ecalc'); | |||
for (var i=0; i<e.length; i++) { | |||
var str = "<a href='/calc/calc2.php"; | |||
str += "?a=" +encodeURIComponent(e[i].children[0].innerHTML); | |||
str += "&b=" +encodeURIComponent(e[i].children[1].innerHTML); | |||
str += "&title="+encodeURIComponent(e[i].children[2].innerHTML); | |||
str += "' target='_blank' class='forMore'>[=] 🔗</a>"; | |||
e[i].innerHTML = str; | |||
e[i].style.display = 'initial'; | |||
} | |||
} | |||
//==File graphs== | |||
// Functions for drag-and-drop of file graph nodes: | // Functions for drag-and-drop of file graph nodes: | ||
Line 165: | Line 273: | ||
function parseFileGraphs() { // init | |||
function | |||
updateFgConnect(); | updateFgConnect(); | ||
window.addEventListener('resize', updateFgConnect); | window.addEventListener('resize', updateFgConnect); | ||
// make file graph nodes draggable | // make file graph nodes draggable | ||
e = document.getElementsByClassName('fileGraph'); | var e = document.getElementsByClassName('fileGraph'); | ||
for (var i=0; i<e.length; i++) { | for (var i=0; i<e.length; i++) { | ||
e[i].id = 'fileGraph'+i; | e[i].id = 'fileGraph'+i; | ||
Line 262: | Line 293: | ||
} | } | ||
} | } | ||
//==Considerations table== | |||
function parseConsiderations() { // init | |||
var elem = document.getElementById("considerations-table"); | |||
if (elem) { | |||
var e = document.getElementsByClassName("consideration-summary"); | |||
var str = "<table class='wikitable'>"; | |||
for (var i=0; i<e.length; i++) { | |||
var topic = e[i].previousElementSibling.getElementsByClassName("mw-headline")[0]; | |||
str += "<tr><td><a href='#"+topic.id+"'>"+topic.innerHTML+"</a></td>"; | |||
if (e[i].title=="bad") str += "<td style='background:#F65'>"; | |||
else if(e[i].title=="good")str += "<td style='background:#0FB'>"; | |||
else str += "<td>"; | |||
str += e[i].innerHTML; | |||
str += "</td></tr>"; | |||
//e[i].style.display = "none"; | |||
} | |||
str += "</table>"; | |||
elem.innerHTML = str; | |||
} | |||
} | |||
//==Text levels== | |||
function parseLevels() { // init | |||
var e = document.getElementsByClassName("levels"); | |||
for (var i=0; i<e.length; i++) { | |||
var size = parseFloat(window.getComputedStyle(e[i]).getPropertyValue("font-size")) || 16; | |||
var lines = e[i].innerHTML.split('\n'); | |||
var str = ""; | |||
for (var j=0; j<lines.length; j++) { | |||
var n=0; while (lines[j][n]==' ') n++; | |||
var k = Math.exp(-0.16*n); | |||
str += "<div style='font-size:" +(1.4*size*k+6) | |||
+"px; margin-left:"+(size*(n*0.5 + 12-12*k)) | |||
+"px; font-family:"+((n%2)?"serif":"sans") | |||
+ "; color:RGB(0,"+(255-255*k)+",0)" | |||
+ "; padding:0.15em 0; line-height:1.1em'>" | |||
+(lines[j].substr(n) || (j==lines.length-1 ? "":" "))+"</div>"; | |||
} | |||
e[i].innerHTML = str; | |||
} | |||
} | |||
//==Word changers== | |||
function changeWords(ev) { // to next option | |||
var hide = ev.currentTarget; | |||
if(!hide || !hide.classList.contains("altOuter")) return; | |||
var show = hide.nextElementSibling; | |||
if(!show || !show.classList.contains("altOuter") || !show.innerHTML) { | |||
var find = hide; | |||
do { // seek back to the first of list | |||
show = find; | |||
find = find.previousElementSibling; | |||
} while (find && find.classList.contains("altOuter")); | |||
} | |||
hide.style.display = "none"; | |||
show.style.display = "initial"; | |||
} | |||
function parseWordChangers() { // init | |||
var e = document.getElementsByClassName("altOuter"); | |||
for (var i=0; i<e.length; i++) { | |||
var str = e[i].innerHTML; | |||
if (str) { | |||
e[i].innerHTML = "↕<span class='altInner'>"+str+"</span>↕"; | |||
e[i].onclick = changeWords; | |||
} | |||
} | |||
} | |||
//==Init when page loads== | |||
parseExpandables(); | |||
parseCalculations(); | |||
parseFileGraphs(); | |||
parseConsiderations(); | |||
parseLevels(); | |||
parseWordChangers(); |