Merge branch 'master' of gitlab.pagedmedia.org:tools/experiments

notes-float/README.md

+# Float notes
+
+a script proposal using float for notes.
\ No newline at end of file

notes-float/css/interface.css

+/* To define how the book look on the screen: */
+
+:root {
+
+
+    /* color for the interface */
+    --color-background: rgba(0, 0, 0, 0.2);
+    --color-marginBox: transparent;
+    --color-pageBox: transparent;
+    --color-paper: white;
+
+    /* color used for the baseline */
+    --color-baseline: transparent;
+  
+
+ 
+    /* fonts for the book */
+
+
+
+    /* colors */
+
+
+    /* typographic related variables */
+    --font-size: 12px;
+    --font-lineHeight: 16px;
+    
+}
+
+
+@media screen {
+    body {
+        background-color: var(--color-background);
+    }
+    .pagedjs_pages {
+        display: flex;
+        width: calc(var(--width) * 2);
+        flex: 0;
+        flex-wrap: wrap;
+        margin: 0 auto;
+        margin-bottom: 3em;
+    }
+    .pagedjs_page {
+        background-color: var(--color-paper);
+        box-shadow: 0 0 0 2px var(--color-pageBox);
+        margin: 0;
+        flex-shrink: 0;
+        flex-grow: 0;
+        margin-top: 10mm;
+    }
+    .pagedjs_first_page {
+        margin-left: var(--width);
+    }
+
+
+    
+    /* uncomment for recto/verso book. 
+    --------------------------------------------------- */
+    /* .pagedjs_pages {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .pagedjs_first_page {
+        margin-left: 0;
+    }
+
+    .pagedjs_page {
+        margin: 0 auto;
+        margin-top: 10mm;
+    } */
+}
\ No newline at end of file

notes-float/css/style-pagedjs-default.css

+
+
+:root{
+	--pagedjs_notes-area-page-left-width: 100%;
+	--pagedjs_notes-area-page-right-width: 100%;
+	--pagedjs_notes-area-page-left-maxHeight: 100%;
+	--pagedjs_notes-area-page-right-maxHeight: 100%;
+}
+
+.pagedjs_left_page .pagedjs_area-notes {
+	width: var(--pagedjs_notes-area-page-left-width);
+	max-height: var(--pagedjs_notes-area-page-left-maxHeight);
+}
+
+.pagedjs_right_page .pagedjs_area-notes {
+	width: var(--pagedjs_notes-area-page-right-width);
+	width: var(--pagedjs_notes-area-page-right-maxHeight);
+}
+
+.pagedjs_area-notes::before{
+	content: "---";
+}
+
+body {
+	counter-reset: pagedjsMarkerNote pagedjsCallNote;
+}
+
+.pagedjs_note{ 
+	display: block;
+	counter-increment: pagedjsMarkerNote; 
+}
+.pagedjs_callnote{
+	counter-increment: pagedjsCallNote;
+	vertical-align:super;
+}
+
+.pagedjs_callnote::before{ content: counter(pagedjsCallNote); }
+.pagedjs_note::before{ content: counter(pagedjsMarkerNote) ". ";}
+
+
+
+/* 
+Proposal about specs (spread declared)
+-------------------------------------
+
+@page:left{
+	@note {
+		float: bottom left;
+		width: 150px;
+  }
+}
+
+@page:right{
+	@note {
+		float: bottom right;
+		width: 150px;
+  }
+}
+
+.sidenote{ float: note; }
+
+
+Proposal about specs (spread declared)
+-------------------------------------
+
+@page{
+	@note {
+		float: bottom outside;
+  }
+}
+
+*/
\ No newline at end of file

notes-float/css/style.css

+
+
+
+
+
+:root{
+	--pagedjs_notes-area-page-left: 60mm;
+	--pagedjs_notes-area-page-right: 60mm;
+}
+
+
+
+
+@page {
+    size: 160mm 210mm;
+    margin: 15mm 15mm;
+
+}
+
+
+ @page:left{
+ 	margin-top:15mm;
+ 	margin-bottom:15mm;
+ 	margin-left:50mm;
+	margin-right: 15mm;
+
+ }
+
+@page:right{
+  	margin-top:15mm;
+  	margin-bottom:15mm;
+		margin-right:50mm;
+		margin-left: 15mm;
+ }
+
+ #cover-page{
+	/*break-after: right;*/
+	break-after: left;
+}
+
+ p{ 
+	 font-family: Georgia, 'Times New Roman', Times, serif;
+	 margin-top: 0; 
+	 margin-bottom: 0;
+	 text-align: justify;
+	 font-size: 14px;
+	 line-height: 16px;
+	 text-indent: 16px;
+}
+
+
+.pagedjs_note{
+	font-family: Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	font-size: 14px;
+	 line-height: 16px;
+	 margin-bottom: 16px;
+}
+
+
+
+.pagedjs_left_page .pagedjs_area-notes {
+	position: relative;
+	left: -35mm;
+	margin-right: -35mm;
+	/* box-shadow: 0 0 0 1px #e6e6e6; */
+	padding-right: 6mm;
+	padding-left: 6mm;
+	
+}
+
+.pagedjs_right_page .pagedjs_area-notes {
+	width: 150px;
+	position: relative;
+	right: -35mm;
+	margin-left: -35mm;
+	/* box-shadow: 0 0 0 1px #e6e6e6; */
+	padding-left: 12mm;
+
+	
+}
+
+
+.pagedjs_callnote, .pagedjs_note::before{ 
+	font-family: Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	vertical-align: baseline;
+	font-size: 8px;
+	line-height: 9px;
+	background-color: black;
+	color: white;
+	padding: 2px 6px;
+
+
+
+	
+
+}
+.pagedjs_callnote{
+	display: inline-block;
+	position: relative; 
+	top: -3px;
+	margin-left: 3px;
+}
+.pagedjs_note::before{
+	content: counter(pagedjsMarkerNote);
+	display: inline-block;
+	position : absolute;
+	left: -6mm; 
+}
+
+.pagedjs_area-notes::before{
+	content: none;
+}
+
+@page:first{
+	margin: 10mm 30mm;
+}
+
+#cover-page h1{ 
+	font-family: Georgia, 'Times New Roman', Times, serif;
+	font-size: 40px;
+	text-align: center;
+	font-weight: normal;
+	margin-top: 20mm;
+}
+
+#cover-page h1 small{
+	display: block;
+	font-size: 20px;
+	margin-top: 32px;
+}
+
+#author{ 
+	margin-top: 250px;
+	font-family: Georgia, 'Times New Roman', Times, serif;
+	font-size: 25px;
+	text-align: center;
+
+}
+
+
+#editor{
+	width: 100%;
+	position: absolute;
+	bottom: 0;
+	
+}
+#editor p{
+	font-family: Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	text-align: center;
+}
+
+#editor::before{
+	content: "";
+	display: block;
+	border-top: 1px solid black;
+	width: 100%;
+	margin: 0 auto;
+	padding-bottom: 16px;
+}
+
+.chapter h1{
+	margin-top: 50px;
+	margin-bottom: 120px;
+	font-family: Georgia, 'Times New Roman', Times, serif;
+	font-size: 25px;
+	font-weight: normal;
+	text-align: center;
+}
+
+.chapter h1 small{
+	display: block;
+	margin-bottom: 16px;
+	font-family: Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	text-align: center;
+	font-size: 16px;
+}

notes-float/js/floatNotes.js

+/* createNoteElement _______________________________________________________________
+____________________________________________________________________________________*/
+
+function createNoteElements(elem){
+    let notes = document.getElementsByClassName(elem); 
+  
+    for(let i = 0; i < notes.length; i++) {
+        let note = notes[i];
+        note.classList.add("pagedjs_note");
+		note.style.position = "absolute";
+		
+		let callNote = document.createElement("span");
+		callNote.className = 'pagedjs_callnote';
+		note.parentNode.insertBefore(callNote, note);
+    }
+
+}
+
+
+/* registerHandlerNote _______________________________________________________________
+______________________________________________________________________________________*/
+
+function registerHandlerNote(){
+
+	class notesFloat extends Paged.Handler {
+		constructor(chunker, polisher, caller) {
+			super(chunker, polisher, caller);
+		}
+		afterRendered(pages) {
+			makeNoteArea({
+				notesAreaPageLeft: 'bottom left',
+				notesAreaPageRight: 'bottom right'
+			});
+		
+		}
+	}
+	Paged.registerHandlers(notesFloat);
+
+}
+
+
+/* addStyleNotesArea _______________________________________________________________
+____________________________________________________________________________________*/
+
+function addStyleNotesArea(notesArea){
+
+	switch (notesArea.notesAreaPageLeft) {
+		case 'bottom':
+		case 'bottom left':
+		case 'bottom outside':
+			let cssLeftBottom = '.pagedjs_left_page .pagedjs_area-notes{ width: var(--pagedjs_notes-area-page-left); float: left; clear: both; } .pagedjs_left_page .pagedjs_area-notes-hackBottom{ width: 0px; float: left; clear: both; }';
+			addcss(cssLeftBottom);
+			break;
+		case 'bottom right':
+		case 'bottom inside':
+			let cssLeftBottomRight = '.pagedjs_left_page .pagedjs_area-notes{ width: var(--pagedjs_notes-area-page-left); float: right; clear: both; } .pagedjs_area-notes-hackBottom{ width: 0px; float: right; clear: both; }';
+			addcss(cssLeftBottomRight);
+			break;
+		case 'top':
+		case 'top left':
+		case 'top outside':
+			let cssLeftTop = '.pagedjs_left_page .pagedjs_area-notes{ width: var(--pagedjs_notes-area-page-left); float: left; clear: both; }';
+			addcss(cssLeftTop);
+			break;
+		case 'top right':
+		case 'top inside':
+			let cssLeftTopRight = '.pagedjs_left_page .pagedjs_area-notes{ width: var(--pagedjs_notes-area-page-left); float: right; clear: both; }';
+			addcss(cssLeftTopRight);
+			break;
+		default:
+			let cssLeftDefault = '.pagedjs_left_page .pagedjs_area-notes{ width: var(--pagedjs_notes-area-page-left); float: left; clear: both; } .pagedjs_area-notes-hackBottom{ width: 0px; float: left; clear: both; }';
+			addcss(cssLeftDefault);
+	}
+	
+
+	switch (notesArea.notesAreaPageRight) {
+		case 'bottom':
+		case 'bottom left':
+		case 'bottom inside':
+			let cssRightBottom = '.pagedjs_right_page .pagedjs_area-notes{ width: var(--pagedjs_notes-area-page-right); float: left; clear: both; } .pagedjs_right_page .pagedjs_area-notes-hackBottom{ width: 0px; float: left; clear: both; }';
+			addcss(cssRightBottom);
+			break;
+		case 'bottom right':
+		case 'bottom outside':
+			let cssRightBottomRight = '.pagedjs_right_page .pagedjs_area-notes{ width: var(--pagedjs_notes-area-page-right); float: right; clear: both; } .pagedjs_right_page .pagedjs_area-notes-hackBottom{ width: 0px; float: right; clear: both; }';
+			addcss(cssRightBottomRight);
+			break;
+		case 'top':
+		case 'top left':
+		case 'top inside':
+			let cssRightTop = '.pagedjs_right_page .pagedjs_area-notes{ width: var(--pagedjs_notes-area-page-right); float: left; clear: both; }';
+			addcss(cssRightTop);
+			break;
+		case 'top right':
+		case 'top outside':
+			let cssRightTopRight = '.pagedjs_right_page .pagedjs_area-notes{ width: var(--pagedjs_notes-area-page-right); float: right; clear: both; }';
+			addcss(cssRightTopRight);
+			break;
+		default:
+			let cssRightDefault = '.pagedjs_right_page .pagedjs_area-notes{ width: var(--pagedjs_notes-area-page-right); float: left; clear: both; } .pagedjs_right_page .pagedjs_area-notes-hackBottom{ width: 0px; float: left; clear: both; }';
+			addcss(cssRightDefault);
+	}
+}
+
+
+
+
+/* makeNoteArea _______________________________________________________________
+____________________________________________________________________________________*/
+
+function makeNoteArea(config){
+
+	addStyleNotesArea(config);
+		
+	let pages = document.getElementsByClassName('pagedjs_page');
+	let classPageLeft = "pagedjs_left_page";
+	let classPageRight = "pagedjs_right_page";
+	
+
+	for (let p = 0; p < pages.length; p++) {
+
+		
+		const page = pages[p];
+		let pageContentTrue = page.getElementsByClassName('pagedjs_page_content')[0] 
+		console.log(page.getElementsByClassName('pagedjs_page_content')[0]);
+
+		if(pageContentTrue.lenght != '0') {
+		/* don't work */
+			
+			let contentPage = page.getElementsByClassName('pagedjs_page_content')[0];
+
+			/* create notes areas */
+			
+			let target = contentPage.children[0];
+
+			let notesAreaHack = document.createElement("div");
+			notesAreaHack.className = 'pagedjs_area-notes-hackBottom';
+			target.parentNode.insertBefore(notesAreaHack, target);
+
+			let notesArea = document.createElement("div");
+			notesArea.className = 'pagedjs_area-notes';
+			target.parentNode.insertBefore(notesArea, target);
+
+
+			/* Move notes in notes area */
+
+			let notes = page.getElementsByClassName('pagedjs_note');
+			
+			for (let i = 0; i < notes.length; i++) {
+
+				let note =  notes[i];
+				let area = page.getElementsByClassName('pagedjs_area-notes')[0];
+				let areaBottomHack = page.getElementsByClassName('pagedjs_area-notes-hackBottom')[0];
+				
+				area.appendChild(note);
+				note.style.position = "relative";
+				
+				if(page.classList.contains(classPageLeft)){
+					if(
+						config.notesAreaPageLeft == 'top' 
+						|| config.notesAreaPageLeft == 'top left'
+						|| config.notesAreaPageLeft == 'top right'
+						|| config.notesAreaPageLeft == 'top inside'
+						|| config.notesAreaPageLeft == 'top outside'
+					){				
+						areaBottomHack.style.height = '0px';
+					}else{
+						areaBottomHack.style.height = contentPage.offsetHeight - area.offsetHeight + 'px';	
+						// need redo chunker
+					}
+					
+				}else{
+					if(
+						config.notesAreaPageRight == 'top' 
+						|| config.notesAreaPageRight == 'top left'
+						|| config.notesAreaPageRight == 'top right'
+						|| config.notesAreaPageRight == 'top inside'
+						|| config.notesAreaPageRight == 'top outside'
+					){				
+						areaBottomHack.style.height = '0px';
+					}else{
+						areaBottomHack.style.height = contentPage.offsetHeight - area.offsetHeight + 'px';	
+						// need redo chunker
+					}
+				}
+
+			}/* for notes*/
+
+		}
+
+	}/* for pages*/
+
+}
+
+
+
+function addcss(css){
+    var head = document.getElementsByTagName('head')[0];
+    var s = document.createElement('style');
+    s.setAttribute('type', 'text/css');
+    if (s.styleSheet) {   // IE
+        s.styleSheet.cssText = css;
+    } else {// the world
+        s.appendChild(document.createTextNode(css));
+    }
+    head.appendChild(s);
+}
+
+

notes-float/js/inlinenotes.js

+function inlinenotes(){
+    let notesCall = document.getElementsByClassName('afnanch');
+
+	for(let i = 0; i < notesCall.length; ++i){
+        let noteCall = notesCall[i];
+       // console.log(noteCall);
+        let idNote = noteCall.href.split("#")[1];
+        
+        let span = document.createElement("span");
+        span.className = 'sidenote';
+        span.id = 'span-' + idNote;
+        noteCall.parentNode.insertBefore(span, noteCall);
+        noteCall.parentNode.removeChild(noteCall);
+        
+        let noteMarker = document.getElementById(idNote);
+        let noteContent = noteMarker.parentNode.innerHTML;
+        span.innerHTML = noteContent;
+
+        let noteMarkerSpan = document.getElementById(idNote);
+        document.getElementById(idNote).parentNode.removeChild(noteMarkerSpan);
+		
+    }
+    
+    let listNote = document.getElementById('list-footnote');
+    listNote.parentNode.removeChild(listNote);
+
+}
+
+