|
|
|
const reference = document.getElementById("reference");
|
|
|
|
const contributionsList = document.getElementById("contributions");
|
|
|
|
const trackList = document.getElementById("trackList");
|
|
|
|
|
|
|
|
const pagedjs = document.createElement("script");
|
|
|
|
pagedjs.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
|
|
|
|
pagedjs.id ="printview"
|
|
|
|
|
|
|
|
const printLib = document.getElementById("btn-print");
|
|
|
|
|
|
|
|
window.addEventListener("load", () => {
|
|
|
|
fetchContents();
|
|
|
|
atlasLink();
|
|
|
|
//document.getElementsByTagName("head")[0].appendChild(pagedjs);
|
|
|
|
});
|
|
|
|
|
|
|
|
printLib.addEventListener("click", () =>{
|
|
|
|
printViewToggle();
|
|
|
|
console.log(btnPrint);
|
|
|
|
});
|
|
|
|
|
|
|
|
function fetchContents() {
|
|
|
|
fetch("https://hub.xpub.nl/soupboat/atlas-api/contributions")
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((data) => populateContributions(data));
|
|
|
|
}
|
|
|
|
|
|
|
|
function populateContributions(contributions) {
|
|
|
|
contributions.forEach((contribution) => {
|
|
|
|
contributionsList.appendChild(createSection(contribution));
|
|
|
|
createIndexSection(contribution);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function createSection(contribution) {
|
|
|
|
let section = reference.cloneNode(true);
|
|
|
|
section.id = contribution.moment;
|
|
|
|
section.querySelector(".moment").innerHTML = contribution.moment;
|
|
|
|
section.querySelector(".title").innerHTML = contribution.title;
|
|
|
|
section.querySelector(".author").innerHTML = contribution.author;
|
|
|
|
section.querySelector(".description").innerHTML = contribution.description;
|
|
|
|
section.querySelector(".content").innerHTML = contribution.content_html;
|
|
|
|
return section;
|
|
|
|
}
|
|
|
|
|
|
|
|
function atlasLink() {
|
|
|
|
let atlas = document.getElementById("atlas-map");
|
|
|
|
let groups = atlas.querySelectorAll("g");
|
|
|
|
for (const group of groups) {
|
|
|
|
let link = document.createElementNS("http://www.w3.org/2000/svg", "a");
|
|
|
|
link.setAttributeNS("http://www.w3.org/2000/svg", "href", "#" + group.id);
|
|
|
|
link.innerHTML = group.innerHTML;
|
|
|
|
group.innerHTML = "";
|
|
|
|
group.appendChild(link);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function createIndexSection(contribution) {
|
|
|
|
let table = document.createElement("table");
|
|
|
|
let title = document.createElement("h4");
|
|
|
|
title.innerHTML = contribution.title;
|
|
|
|
if (contribution.audio){
|
|
|
|
let tracks = contribution.audio;
|
|
|
|
tracks.forEach((track) => {
|
|
|
|
let row = document.createElement("tr");
|
|
|
|
let col1 = document.createElement("td");
|
|
|
|
let col2 = document.createElement("td");
|
|
|
|
col1.setAttribute("class", "symbol");
|
|
|
|
col2.setAttribute("class", "filename");
|
|
|
|
col2.innerHTML = track;
|
|
|
|
row.appendChild(col1);
|
|
|
|
row.appendChild(col2);
|
|
|
|
table.appendChild(row);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
trackList.appendChild(title);
|
|
|
|
trackList.appendChild(table);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function printViewToggle() {
|
|
|
|
var printview = document.getElementById("printview")
|
|
|
|
if (!printview) {
|
|
|
|
|
|
|
|
document.getElementsByTagName("head")[0].appendChild(pagedjs);
|
|
|
|
// sto provando sta porcata qui, ma non funzia uguale. quando la pagina si trasforma in pagedjs la variabile del btn non è più definita (????)
|
|
|
|
var btnPrint = document.getElementById("btn-print");
|
|
|
|
console.log(btnPrint);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
//document.getElementsByTagName("head")[0].removeChild(printview);
|
|
|
|
pagejs.remove();
|
|
|
|
console.log("aooooo che cazzo");
|
|
|
|
}
|
|
|
|
}
|