Widget:PlaceNamesCharts: Difference between revisions

From International Robin Hood Bibliography
mNo edit summary
m (Text replacement - "/wiki/" to "/w/")
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude><div class="no-img">This widget generates charts on landing pages. It takes no parameters.</div></noinclude><includeonly><script>(function() {
<noinclude><div class="no-img">This widget generates charts on landing pages. It takes no parameters.</div></noinclude>
<includeonly><script>
//Timeline widget
(function() {
window.IRHB = window.IRHB || {};
window.IRHB = window.IRHB || {};
Line 46: Line 49:
if (curCentury !== 0) {
if (curCentury !== 0) {
var cntStr = curCentury + (curCentury !== "21" ? "th" : "st") + " Cent.";
var cntStr = curCentury + (curCentury !== "21" ? "th" : "st") + " Cent.";
var cHead = "<div class='tLnCnt' id='c" + curCentury + "'><div>" + cntStr + " (" + cTotal + ")</div>";
var cHead = "<div class='tlnCnt' id='c" + curCentury + "'><div>" + cntStr + " (" + cTotal + ")</div>";
pText += cHead + "<div>" + cText + "</div></div>";
pText += cHead + "<div>" + cText + "</div></div>";
}
}
Line 56: Line 59:
cTotal += nPages;
cTotal += nPages;
var decStr = prop + "&ndash;" + String((parseInt(prop) + 9)).substring(2) + " (" + nPages + ")";
var decStr = prop + "&ndash;" + String((parseInt(prop) + 9)).substring(2) + " (" + nPages + ")";
cText += "<div class='tLnDec' id='i" + prop + "'><div>" + decStr + "</div><ul>";
cText += "<div class='tlnDec' id='i" + prop + "'><div>" + decStr + "</div><ul>";
for (var i = 0; i < nPages; i++) {
for (var i = 0; i < nPages; i++) {
cText += "<li class='tLnItem'><span>" + pages[prop][i].year + " &ndash; " + pages[prop][i].page + "</span><div></div></li>";
cText += "<li class='tlnItem'><span>" + pages[prop][i].year + " &ndash; " + pages[prop][i].page + "</span><div></div></li>";
}
}
cText += "</ul></div>"
cText += "</ul></div>"
Line 64: Line 67:
}
}
var cntStr = curCentury + (curCentury !== "21" ? "th" : "st") + " Cent.";
var cntStr = curCentury + (curCentury !== "21" ? "th" : "st") + " Cent.";
var cHead = "<div class='tLnCnt' id='c" + curCentury + "'><div>" + cntStr + " (" + cTotal + ")</div>";
var cHead = "<div class='tlnCnt' id='c" + curCentury + "'><div>" + cntStr + " (" + cTotal + ")</div>";
pText += cHead + "<div>" + cText + "</div></div>";
pText += cHead + "<div>" + cText + "</div></div>";
elem.innerHTML = pText;
elem.innerHTML = pText;
var centuries = get("tline").getElementsByClassName("tLnCnt");
var centuries = get("tline").getElementsByClassName("tlnCnt");
var nCnts = centuries.length;
var nCnts = centuries.length;
for (var i = 0; i < nCnts; i++) {
for (var i = 0; i < nCnts; i++) {
initDiv(centuries[i]);
initDiv(centuries[i]);
}
}
var decades = get("tline").getElementsByClassName("tLnDec");
var decades = get("tline").getElementsByClassName("tlnDec");
var nDecs = decades.length;
var nDecs = decades.length;
for (var i = 0; i < nDecs; i++) {
for (var i = 0; i < nDecs; i++) {
initDiv(decades[i]);
initDiv(decades[i]);
}
}
var items = get("tline").getElementsByClassName("tLnItem");
var items = get("tline").getElementsByClassName("tlnItem");
var nItems = items.length;
var nItems = items.length;
for (var i = 0; i < nItems; i++) {
for (var i = 0; i < nItems; i++) {
Line 89: Line 92:
t.getDecade = function(year) {
t.prepareItemCard = function (event) {
var t = event.target;
if (t.tagName != "A") {
var tc = event.currentTarget;
var item = tc.firstChild.innerHTML;
var card = tc.firstChild.nextSibling;
if (card.innerHTML == "") {
var start = item.indexOf(" – ") + " – ".length;
item = encodeURIComponent(item.substring(start));
var qry = "/w/api.php?action=ask&query=[[" + item + "]]|?Geopoint|?AdministrativeDivision|?FirstRecord|?Image|?PlaceNamesInterest|?PlaceNamesStatus|?PlaceNamesType|?Vicinity|?CenturyOrdinal|?Aka&format=json";
query(qry, "POST", makeItemCard);
} else {
card.innerHTML = "";
card.style.display = "none";
}
} else {
event.stopPropagation();
}
};
function makeItemCard(resp) {
var res = JSON.parse(resp).query.results;
res = res[Object.keys(res)[0]];
var page = res.fulltext;
var firstRec = res.printouts.FirstRecord;
var dec = getDecade(firstRec);
var itemName = firstRec + " – " + page;
var decadeDiv = get("i" + dec);
var lst = decadeDiv.firstChild.nextSibling;
var lstItems = lst.children;
var nItems = lstItems.length;
for (var i = 0; i < nItems; i++) {
if (lstItems[i].firstChild.innerHTML == itemName) {
var card = lstItems[i].firstChild.nextSibling;
var imgId = "img" + dec + "_" + i;
card.innerHTML = "";
var txt = "<div class='cardText'><table class='itemCard'>";
var safePage = page.replaceAll("'", "%27");
txt += "<tr><td colspan='2'><img class='cardImg' id='" + imgId + "'></img></td></tr>";
txt += "<tr><th>Link</th><td><a href='/w/index.php/" + safePage + "'>" + page + "</a></td></tr>";
var lt = res.printouts.Geopoint[0] ? res.printouts.Geopoint[0].lat : "?";
var ln = res.printouts.Geopoint[0] ? res.printouts.Geopoint[0].lon : "?";
txt += "<tr><th>Lat.</th><td>" + lt + "</td></tr>";
txt += "<tr><th>Lon.</th><td>" + ln + "</td></tr>";
txt += "<tr><th>Adm. div.</th><td>" + res.printouts.AdministrativeDivision[0] + "</td></tr>";
var vic = res.printouts.Vicinity[0];
vic = vic.replace("''", "<i>").replace("''", "</i>");
txt += "<tr><th>Vicinity</th><td>" + vic + "</td></tr>";
txt += "<tr><th>Type</th><td>" + res.printouts.PlaceNamesType[0] + "</td></tr>";
txt += "<tr><th>Interest</th><td>" + res.printouts.PlaceNamesInterest[0] + "</td></tr>";
txt += "<tr><th>Status</th><td>" + res.printouts.PlaceNamesStatus[0] + "</td></tr>";
txt += "<tr><th>First rec.</th><td>" + res.printouts.FirstRecord[0] + "</td></tr>";
var century = res.printouts.CenturyOrdinal[0];
if (century) {
txt += "<tr><th>CenturyOrdinal</th><td>" + res.printouts.CenturyOrdinal[0] + "</td></tr>";
}
var aka = res.printouts.Aka;
var akaTxt = "";
var nAka = aka.length;
for (var i = 0; i < nAka; i++) {
akaTxt += "; " + aka[i];
}
akaTxt = akaTxt.replace("; ", "");
if (akaTxt !== "") {
txt += "<tr><th>A.k.a.</th><td>" + akaTxt + "</td></tr></table>";
}
card.innerHTML += txt;
var imgName = res.printouts.Image;
var img = get(imgId);
if (imgName != "") {
var tempImg = new Image();
tempImg.onload = function() {
img.src = this.src
card.style.display = "block";
};
tempImg.src = "/w/thumb.php?f=" + encodeURIComponent(res.printouts.Image) + "&w=195";
img.style.display = "block";
} else {
img.style.display = "none";
card.style.display = "block";
}
break;
}
}
}
function getDecade(year) {
var decade = year % 10 !== 0 ? year : year - 1;
var decade = year % 10 !== 0 ? year : year - 1;
decade = (Math.floor(decade / 10) * 10) + 1;
decade = (Math.floor(decade / 10) * 10) + 1;
return decade;
return decade;
};
}
var getDecade = t.getDecade;
t.getCentury = function(decade) {
function getCentury(decade) {
var century = parseInt(decade / 100) + 1;
var century = parseInt(decade / 100) + 1;
return century;
return century;
};
}
var getCentury = t.getCentury;
 
function query(qry, method, callBack) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
  if (xmlhttp.status == 200) {
  callBack(xmlhttp.responseText);
  } else if (xmlhttp.status == 400) {
say("An error occurred; closing down!");
  }
  else {
  callBack(xmlhttp.responseText);
  }
}
};
xmlhttp.open(method, qry, true);
xmlhttp.send();
}
Line 140: Line 249:




//Charts
(function() {
(function() {
Line 177: Line 287:
"display": true,
"display": true,
"fontSize": 28,
"fontSize": 28,
"fontFamily": "'Open Sans Condensed', Helvetica, Arial, sans-serif",
"fontFamily": "'OpenSansCondensed-Light', Helvetica, Arial, sans-serif",
"fontColor": '#964d4d',
"fontColor": '#800000',
"fontStyle": "bold",
"fontStyle": "bold",
"padding": 20
"padding": 20
Line 211: Line 321:
makeChart(
makeChart(
tc, "typeCvs", cType, "Type",
tc, "typeCvs", cType, "Type",
{"Public house": 0, "Monument": 0, "Building": 0, "Church": 0,  
{"Public house": 0, "Monument": 0, "Building": 0, "Church/monastery": 0,  
"Prehistoric site": 0, "Natural feature": 0, "Settlement": 0, "Area": 0,  
"Prehistoric site": 0, "Natural feature": 0, "Settlement": 0, "Area": 0,  
"Thoroughfare": 0, "Transport": 0, "Establishment": 0, "Association": 0,  
"Thoroughfare": 0, "Transport": 0, "Establishment": 0, "Association": 0,  
Line 247: Line 357:
//Non-empty query result in paragraph, if no paragraph, no timeline:
//Non-empty query result in paragraph, if no paragraph, no timeline:
if (tc.firstElementChild) {
if (tc.firstElementChild) {
window.IRHB.timeline.create(tc, prepareItemCard);
t.create(tc, t.prepareItemCard);
} else {
} else {
get("sChart").style.paddingBottom = "6em";
get("sChart").style.paddingBottom = "6em";
Line 281: Line 391:
}
}
if (lbl === "Status") {
if (lbl === "Status") {
cColrs[1] = "#82a89e";
cColrs[1] = "#800000";
}
}
var chrt = new Chart( get(cvsId), {
var chrt = new Chart( get(cvsId), {
Line 335: Line 445:
}
}
 
function prepareItemCard(event) {
var t = event.target;
if (t.tagName != "A") {
var tc = event.currentTarget;
var item = tc.firstChild.innerHTML;
var card = tc.firstChild.nextSibling;
if (card.innerHTML == "") {
var start = item.indexOf(" – ") + " – ".length;
item = encodeURIComponent(item.substring(start));
var qry = "https://www.irhb.org/wiki/api.php?action=ask&query=[[" + item + "]]|?Geopoint|?Pnadmdiv|?Pnfirstrecord|?Pnimage|?Pninterest|?Pnstatus|?Pntype|?Pnvicinity|?Century|?Pnaka&format=json";
query(qry, "POST", makeItemCard);
} else {
card.innerHTML = "";
card.style.display = "none";
}
} else {
event.stopPropagation();
}
}
function makeItemCard(resp) {
var res = JSON.parse(resp);
res = res.query.results;
res = res[Object.keys(res)[0]];//First property in "res.query.results"
var page = res.fulltext;
var firstRec = res.printouts.Pnfirstrecord;
var dec = t.getDecade(firstRec);
var itemName = firstRec + " – " + page;
var decadeDiv = get("i" + dec);
var lst = decadeDiv.firstChild.nextSibling;
var lstItems = lst.children;
var nItems = lstItems.length;
for (var i = 0; i < nItems; i++) {
if (lstItems[i].firstChild.innerHTML == itemName) {
var card = lstItems[i].firstChild.nextSibling;
var imgId = "img" + dec + "_" + i;
card.innerHTML = "<img class='cardImg' id='" + imgId + "'></img>";
var txt = "<div class='cardText'><table>";
var safePage = page.replace("'", "%27");
txt += "<tr><td>Page</td><td><a href='https://www.irhb.org/wiki/index.php/" + safePage + "'>" + page + "</a></td></tr>";
var lt = res.printouts.Geopoint[0] ? res.printouts.Geopoint[0].lat : "?";
var ln = res.printouts.Geopoint[0] ? res.printouts.Geopoint[0].lon : "?";
txt += "<tr><td>Lat.</td><td>" + lt + "</td></tr>";
txt += "<tr><td>Lon.</td><td>" + ln + "</td></tr>";
txt += "<tr><td>Adm. div.</td><td>" + res.printouts.Pnadmdiv[0] + "</td></tr>";
var vic = res.printouts.Pnvicinity[0];
vic = vic.replace("''", "<i>").replace("''", "</i>");
txt += "<tr><td>Vicinity</td><td>" + vic + "</td></tr>";
txt += "<tr><td>Type</td><td>" + res.printouts.Pntype[0] + "</td></tr>";
txt += "<tr><td>Interest</td><td>" + res.printouts.Pninterest[0] + "</td></tr>";
txt += "<tr><td>Status</td><td>" + res.printouts.Pnstatus[0] + "</td></tr>";
txt += "<tr><td>First rec.</td><td>" + res.printouts.Pnfirstrecord[0] + "</td></tr>";
var century = res.printouts.Century[0];
if (century) {
txt += "<tr><td>Century</td><td>" + res.printouts.Century[0] + "</td></tr>";
}
var aka = res.printouts.Pnaka;
var akaTxt = "";
var nAka = aka.length;
for (var i = 0; i < nAka; i++) {
akaTxt += "; " + aka[i];
}
akaTxt = akaTxt.replace("; ", "");
if (akaTxt !== "") {
txt += "<tr><td>A.k.a.</td><td>" + akaTxt + "</td></tr></table>";
}
card.innerHTML += txt;
var imgName = res.printouts.Pnimage;
var img = get(imgId);
if (imgName != "") {
var tempImg = new Image();
tempImg.onload = function() {
img.src = this.src
card.style.display = "block";
};
tempImg.src = "https://www.irhb.org/wiki/thumb.php?f=" + encodeURIComponent(res.printouts.Pnimage) + "&w=195";
img.style.display = "block";
} else {
img.style.display = "none";
card.style.display = "block";
}
break;
}
}
}
function query(qry, method, callBack) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
  if (xmlhttp.status == 200) {
  callBack(xmlhttp.responseText);
  } else if (xmlhttp.status == 400) {
say("An error occurred; closing down!");
  }
  else {
  callBack(xmlhttp.responseText);
  }
}
};
xmlhttp.open(method, qry, true);
xmlhttp.send();
}
     var script = document.createElement('script');
     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.type = 'text/javascript';
     script.src = "https://www.irhb.org/wiki/js/Chart.js";
     script.src = "/w/js/Chart.js";
     script.onreadystatechange = prepareCharts;
     script.onreadystatechange = prepareCharts;
     script.onload = prepareCharts;
     script.onload = prepareCharts;
     document.head.appendChild(script);
     document.head.appendChild(script);


})();</script></includeonly>
})();
</script></includeonly>

Latest revision as of 03:56, 6 June 2022

This widget generates charts on landing pages. It takes no parameters.
Retrieved from "https://www.irhb.org/w/index.php?title=Widget:PlaceNamesCharts&oldid=332802"