create index funct

master
grgr 3 years ago
commit 1775fa0f07

@ -4,7 +4,7 @@ const trackList = document.getElementById("trackList");
const pagedjs = document.createElement("script"); const pagedjs = document.createElement("script");
pagedjs.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js"; pagedjs.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
pagedjs.id ="printview" pagedjs.id = "printview";
const printLib = document.getElementById("btn-print"); const printLib = document.getElementById("btn-print");
@ -14,7 +14,7 @@ window.addEventListener("load", () => {
//document.getElementsByTagName("head")[0].appendChild(pagedjs); //document.getElementsByTagName("head")[0].appendChild(pagedjs);
}); });
printLib.addEventListener("click", () =>{ printLib.addEventListener("click", () => {
printViewToggle(); printViewToggle();
console.log(btnPrint); console.log(btnPrint);
}); });
@ -26,6 +26,7 @@ function fetchContents() {
} }
function populateContributions(contributions) { function populateContributions(contributions) {
contributions.sort((a, b) => a.order - b.order);
contributions.forEach((contribution) => { contributions.forEach((contribution) => {
contributionsList.appendChild(createSection(contribution)); contributionsList.appendChild(createSection(contribution));
createIndexSection(contribution); createIndexSection(contribution);
@ -48,7 +49,7 @@ function atlasLink() {
let groups = atlas.querySelectorAll("g"); let groups = atlas.querySelectorAll("g");
for (const group of groups) { for (const group of groups) {
let link = document.createElementNS("http://www.w3.org/2000/svg", "a"); let link = document.createElementNS("http://www.w3.org/2000/svg", "a");
link.setAttributeNS("http://www.w3.org/2000/svg", "href", "#" + group.id); link.setAttribute("href", "#" + group.id);
link.innerHTML = group.innerHTML; link.innerHTML = group.innerHTML;
group.innerHTML = ""; group.innerHTML = "";
group.appendChild(link); group.appendChild(link);
@ -56,7 +57,7 @@ function atlasLink() {
} }
function createIndexSection(contribution) { function createIndexSection(contribution) {
let table = document.createElement("table"); let table = document.createElement("table");
let title = document.createElement("h4"); let title = document.createElement("h4");
title.innerHTML = contribution.title; title.innerHTML = contribution.title;
if (contribution.audio){ if (contribution.audio){
@ -77,20 +78,16 @@ function createIndexSection(contribution) {
trackList.appendChild(table); trackList.appendChild(table);
} }
function printViewToggle() { function printViewToggle() {
var printview = document.getElementById("printview") var printview = document.getElementById("printview");
if (!printview) { if (!printview) {
document.getElementsByTagName("head")[0].appendChild(pagedjs); 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 (????) // 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"); var btnPrint = document.getElementById("btn-print");
console.log(btnPrint); console.log(btnPrint);
} else { } else {
//document.getElementsByTagName("head")[0].removeChild(printview); //document.getElementsByTagName("head")[0].removeChild(printview);
pagejs.remove(); pagejs.remove();
console.log("aooooo che cazzo"); console.log("aooooo che cazzo");
} }
} }

@ -14,7 +14,7 @@
<body> <body>
<div class="container"> <div class="container">
<div class="atlas"> <div class="atlas">
<button id="btn-print">libretto</button> <!-- <button id="btn-print">libretto</button> -->
<svg <svg
width="1000" width="1000"
height="1000" height="1000"
@ -152,7 +152,7 @@
<dt>Caretakers</dt> <dt>Caretakers</dt>
<dd>Erica, Gersande, Kamo</dd> <dd>Erica, Gersande, Kamo</dd>
</dl> </dl>
<button id="print">Print Libretto</button> <button id="btn-print">Print Libretto</button>
</header> </header>
<!-- <section class="vocabulary"></section> --> <!-- <section class="vocabulary"></section> -->

@ -165,7 +165,7 @@ dd {
height: auto; height: auto;
} }
#print { #btn-print {
display: inline-block; display: inline-block;
margin-top: 32px; margin-top: 32px;
background: none; background: none;
@ -174,7 +174,7 @@ dd {
font-size: 1rem; font-size: 1rem;
} }
#print:hover{ #btn-print:hover{
cursor: pointer; cursor: pointer;
} }

Loading…
Cancel
Save