Commit 2f946caa authored by julien's avatar julien

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

parents 7b7ccacc b7f81686
# Float notes
a script proposal using float for notes.
\ No newline at end of file
/* 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
: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
: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;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
/* 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);
}
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);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment