You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

92 lines
3.0 KiB
JavaScript

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.sort((a, b) => a.order - b.order);
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.setAttribute("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;
contribution.audio.forEach((track) => {
console.log(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");
}
}