MediaWiki:Mobile.js: Difference between revisions

no edit summary
(Created page with "→‎All JavaScript here will be loaded for users of the mobile site: var _calc3 = ''; // string to be sent to calc3.php ajax var _popupLastOpened = null; // element const _popupClasses = ['ppContent','dp','dpVar']; function closePopup() { for (var i=0; i<_popupClasses.length; i++) { e = document.getElementsByClassName(_popupClasses[i]); for (var j=0; j<e.length; j++) { e[j].style.display = 'none'; } } _popupLastOpened = null; } function togglePopup(element)...")
 
No edit summary
Tags: Manual revert Mobile edit Mobile web edit
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All JavaScript here will be loaded for users of the mobile site */
/* All JavaScript here will be loaded for users of the mobile site */
//==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 showHide(show,hide) { // for expandables
 
  show.style.display = 'initial';
function showOnlyNext(ev) { // expand inline
  hide.style.display = 'none';
  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'>[=] &#128279;</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:




// Main function - should be called on page load.
function parseFileGraphs() { // init
function parseFeatures() {
var e;
// Expandable text
e = document.getElementsByClassName('xp');
for (var i=0; i<e.length; i++) {
  var content = e[i].innerHTML;
  e[i].innerHTML = "<span class='forMore' onclick='showHide(this.nextSibling, this)'>(...)</span>"
                + "<span class='xpContent' onclick='showHide(this.previousSibling, this)'>( "+content+" )</span>";
}
// Popups
e = document.getElementsByClassName('pp');
for (var i=0; i<e.length; i++) {
  var content = e[i].innerHTML;
  e[i].innerHTML = "<span class='forMore' onclick='togglePopup(this.nextSibling)'>[''']</span>"
                + "<div class='ppContent' onclick='closePopup()'>"+content+"</div>";
}
e = document.getElementsByClassName('ppv2');
for (var i=0; i<e.length; i++) {
  var content = e[i].innerHTML.split('|');
  e[i].innerHTML = "<span class='forMore' onclick='togglePopup(this.nextSibling)'>"+content[0]+"</span>"
                + "<div class='ppContent' onclick='closePopup()'>"+content[1]+"</div>";
}
// Local datapoints and calculations
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'>[=] &#128279;</a>";
  e[i].innerHTML = str;
  e[i].style.display = 'initial';
}
 
// File graph
  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:
  }
  }
}
}
ParseFeatures();
 
 
 
 
//==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 ?
    e[i].previousElementSibling.getElementsByClassName("mw-headline")[0] :
    e[i].parentElement.previousElementSibling.getElementsByClassName("mw-headline")[0]; // DIFFERENT FROM Common.js
  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 ? "":"&nbsp;"))+"</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 = "&#8597;<span class='altInner'>"+str+"</span>&#8597;";
  e[i].onclick = changeWords;
  }
}
}
 
 
 
 
//==Init when page loads==
parseExpandables();
parseCalculations();
parseFileGraphs();
parseConsiderations();
parseLevels();
parseWordChangers();