order and links

3 years ago · ee08ab2a50
parent 1a6e13c4e4
commit ee08ab2a50
3 changed files with 10 additions and 13 deletions
--- a/contents.js
+++ b/contents.js
@ -3,7 +3,7 @@ const contributionsList = document.getElementById("contributions");

 const pagedjs = document.createElement("script");
 pagedjs.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
-pagedjs.id ="printview"
+pagedjs.id = "printview";

 const printLib = document.getElementById("btn-print");

@ -13,7 +13,7 @@ window.addEventListener("load", () => {
 	//document.getElementsByTagName("head")[0].appendChild(pagedjs);
 });

-printLib.addEventListener("click", () =>{
+printLib.addEventListener("click", () => {
 	printViewToggle();
 	console.log(btnPrint);
 });
@ -25,6 +25,7 @@ function fetchContents() {
 }

 function populateContributions(contributions) {
+	contributions.sort((a, b) => a.order - b.order);
 	contributions.forEach((contribution) => {
 		contributionsList.appendChild(createSection(contribution));
 	});
@ -46,24 +47,20 @@ function atlasLink() {
 	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.setAttribute("href", "#" + group.id);
 		link.innerHTML = group.innerHTML;
 		group.innerHTML = "";
 		group.appendChild(link);
 	}
 }

-
-
 function printViewToggle() {
-	var printview = document.getElementById("printview")
+	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();
--- a/index.html
+++ b/index.html
@ -14,7 +14,7 @@
 	<body>
 		<div class="container">
 			<div class="atlas">
-                <button id="btn-print">libretto</button>
+				<!-- <button id="btn-print">libretto</button> -->
 				<svg
 					width="1000"
 					height="1000"
@ -151,7 +151,7 @@
 						<dt>Caretakers</dt>
 						<dd>Erica, Gersande, Kamo</dd>
 					</dl>
-					<button id="print">Print Libretto</button>
+					<button id="btn-print">Print Libretto</button>
 				</header>
 				<!-- <section class="vocabulary"></section> -->

--- a/style.css
+++ b/style.css
@ -165,7 +165,7 @@ dd {
    height: auto;
 }

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

-#print:hover{
+#btn-print:hover{
    cursor: pointer;
 }