curl TOC

index.html

@@ -65,12 +65,12 @@ https://pad.xpub.nl/p/HTML_Finale
 
 	<div class="booty">
 		<div class="container">
-		<div class="cover"><img src="img/Mark-Typo_1.png" alt="cover">This publication has been created with paged.js</div>
+		<div class="cover"><img src="img/Mark-Typo_1.png" alt="cover"><div class="cover_title">This publication has been created with paged.js</div></div>
 			<section>
 			
 				<!--data-aos="fade-right" data-aos-duration="1000" data-aos-offset="500"-->
 				<div class="filterDiv swarm_intro" id="swarm1">
-					<h3>SWARM 01</h3>
+					<h3 class="title-element">SWARM 01</h3>
 					<h1> WE HAVE A USB FULL OF DOCUMENTS </h1>
 					<br>
 					<div class="swarmintro">There is no political power without control over the archive, if not over memory.<br><br>You can’t detach an archive from politics and the long history that formed it.<br><br> All contemporary phenomena must be understood contextually and historically, in relation to the power structures - or institutions - that shaped them, and are still shaping our understandings of ourselves, and of our times. 
@@ -80,21 +80,24 @@ https://pad.xpub.nl/p/HTML_Finale
 					Is it possible to archive responsibly?<br> 
 					What would that practice be? How do you sensibly collect, understand, and then *structure* memories? <br>
 					</div>
+					<img src="img/02_swarm1_empty.png">
 					<div class="checkbox">
 						<input type="checkbox" id="print" name="print">
 						<label for="print">Add to print</label>
 						<br>
 					</div>
+					
 				</div>
+				
 
 				
 				<div class="filterDiv Ar Swarm1 methods" id="commencement">
-					<div class="sectiontitles">
+					<div class="title-element">
 						<!--  data-aos="fade-down" data-aos-duration="800" data-aos-offset="320"-->
 						Commencement
 						<br>& Commandement
-						
+						</div>
-					</div>
+					
 					<!--alphabet img-->
 					<div class="filterDiv" >
 						<!--data-aos="fade-in" data-aos-anchor="#illu4" data-aos-duration="800" data-aos-offset="230" id="illu4"-->
@@ -231,7 +234,7 @@ https://pad.xpub.nl/p/HTML_Finale
 				</div>
 
 			<div class="filterDiv Swarm1 tools" id="mediawiki">
-				<h4>MediaWiki</h4>
+				<h4  class="title-element">MediaWiki</h4>
 				<div class="placeholder">
 					<!-- data-aos="zoom-in" data-aos-anchor="#mediawiki" data-aos-duration="1000" data-aos-offset="300"-->
 					<img src="img/icon07.png" alt="icon" width="100">
@@ -257,9 +260,8 @@ https://pad.xpub.nl/p/HTML_Finale
 
 
 
-
 				<div class="filterDiv Ar Swarm1 methods" id="firstchief">
-					<div class="sectiontitles">
+					<div class="title-element">
 						<!-- data-aos="fade-down" data-aos-duration="800" data-aos-offset="140"-->
 						What comes *first* and therefore is *chief* ?
 						
@@ -2486,7 +2488,7 @@ https://pad.xpub.nl/p/HTML_Finale
 				<!--data-aos="slide-left" data-aos-duration="800" data-aos-offset="260"-->
 				Wikipedia edit wars:
 				<br>Conflict of interest or non-neutrality.
-				<br>When wikipedia administrators/editors
+				<br>When Wikipedia administrators/editors
 				<br> keep going back and fourth
 				<br>with statements in Wikipedia
 				<br>due to a lack of source.
@@ -2923,7 +2925,7 @@ https://pad.xpub.nl/p/HTML_Finale
 					3.2 <b>Providing 'tools' for activation</b><br>
 					3.3 <b>The influence of design</b><br>
 					3.4 <b>Content and personality</b><br>
-					3.6 <b>Digital influence on zines collaborative publising</b><br>
+					3.6 <b>Digital influence on zines collaborative publishing</b><br>
 					3.7 <b>On open tools for collaborative publishing</b><br>
 					3.8 <b>Creating hard copies: customising content</b><br>
 					3.9 <b>Recources & links </b><br><br>
@@ -3142,10 +3144,83 @@ popup_button.addEventListener("click", function (e) {
             
 		document.getElementsByTagName("body")[0].classList.add("pagedjs");
 		
-            $.getScript("https://unpkg.com/pagedjs/dist/paged.polyfill.js", function(data, textStatus, jqxhr) {})
+            $.getScript("https://unpkg.com/pagedjs/dist/paged.polyfill.js", function(data, textStatus, jqxhr) {
+                
+                
+                
+
+  class handlers extends Paged.Handler {
+    constructor(chunker, polisher, caller) {
+      super(chunker, polisher, caller);
+    }
+
+    beforeParsed(content){          
+      createToc({
+        content: content,
+        tocElement: '#my-toc-content',
+        titleElements: [ '.mw-content-ltr h2', 'h3' ]
+      });
+    }
+    
+  }
+  Paged.registerHandlers(handlers);
+
+                
+                
+            })
             
 		    //window.print();
 		    };
+		
+		
+
+		
+		//TOC
+		function createToc(config){
+		    const content = config.content;
+		    const tocElement = config.tocElement;
+		    const titleElements = config.titleElements;
+		    
+		    let tocElementDiv = content.querySelector(tocElement);
+		    let tocUl = document.createElement("ul");
+		    tocUl.id = "list-toc-generated";
+		    tocElementDiv.appendChild(tocUl); 
+		
+		    // add class to all title elements    let tocElementNbr = 0;
+		    for(var i= 0; i < titleElements.length; i++){
+		        
+		        let titleHierarchy = i + 1;
+		        let titleElement = content.querySelectorAll(titleElements[i]);    
+		        
+		
+		        titleElement.forEach(function(element) {
+		
+		            // add classes to the element            element.classList.add("title-element");
+		            element.setAttribute("data-title-level", titleHierarchy);
+		
+		            // add id if doesn't exist            tocElementNbr++;
+		            idElement = element.id;
+		            if(idElement == ''){
+		                element.id = 'title-element-' + tocElementNbr;
+		            } 
+		            let newIdElement = element.id;
+		
+		        });
+		
+		    }
+		
+		    // create toc list    let tocElements = content.querySelectorAll(".title-element");  
+		
+		    for(var i= 0; i < tocElements.length; i++){
+		        let tocElement = tocElements[i];
+		        let tocNewLi = document.createElement("li");
+		        tocNewLi.classList.add("toc-element");
+		        tocNewLi.classList.add("toc-element-level-" + tocElement.dataset.titleLevel);
+		        tocNewLi.innerHTML = '<a href="#' + tocElement.id + '">' + tocElement.innerHTML + '</a>';
+		        tocUl.appendChild(tocNewLi);  
+		    }
+		
+		}
             
 	</script>