Commit c08d0c9e authored by Julie Blanc's avatar Julie Blanc
Browse files

[notes-float] add functions from pagedjs footnote branch

parent 9df86ed6
......@@ -73,7 +73,7 @@ class NotesFloat extends Paged.Handler {
this.notesConfig = {
positionLeft: 'bottom left',
positionRight: 'bottom right',
width: 200
width: 150
}
}
......@@ -89,59 +89,180 @@ class NotesFloat extends Paged.Handler {
)
addStyleNotesArea(this.notesConfig);
}
afterParsed(parsed) {
// add data-note: footnote
Array.prototype.forEach.call(
parsed.querySelectorAll(`.pagedjs_note`),
elem => {
elem.setAttribute("data-note", "float-note");
this.processFootnoteContainer(elem); // from paged.js footnote code
}
)
}
processFootnoteContainer(node) {
// Find the container
let element = node.parentElement;
let prevElement;
// Walk up the dom until we find a container element
while (element) {
if (isContainer(element)) {
// Add flag to the previous non-container element that will render with children
prevElement.setAttribute("data-has-notes", "true");
break;
}
prevElement = element;
element = element.parentElement;
// If no containers were found and there are no further parents flag the last element
if (!element) {
prevElement.setAttribute("data-has-notes", "true");
}
}
}
renderNode(node) {
// if element is a note or contains a note we create a pagedjs_notes-area
if (
node.nodeType === 1 &&
(node.querySelector(`.${NOTE_CLASS}`) || node.className.includes(NOTE_CLASS))
// to do here: check if the paragraph with a note is going to be chuncked
// if it's the case : check if the note is on first part of the paragraph or the second
) {
const note = node.querySelector(`.${NOTE_CLASS}`) || node;
// change the positionning of the note
note.style.position = 'relative';
note.style.display = 'block';
// store the data-id of the note in a set
let noteId = note.dataset.id;
if(!this.notesId.includes(noteId)){
this.notesId.push(noteId);
if (node.nodeType == 1) {
// Get all notes
let notes;
// Ingnore html element nodes, like mathml
if (!node.dataset) {
return;
}
if (node.dataset.note === "float-note") {
notes = [node];
} else if (node.dataset.hasNotes) {
notes = node.querySelectorAll("[data-note='float-note']");
}
if (notes && notes.length) {
this.findVisibleFootnotes(notes, node); // from paged.js footnote code
}
// to check if it has already added to a notes-area
if(!document.querySelectorAll('.pagedjs_notes-area [data-id="' + noteId + '"]').length >= 1){
}
}
findVisibleFootnotes(notes, node) {
let area, size, right;
area = node.closest(".pagedjs_page_content");
size = area.getBoundingClientRect();
right = size.left + size.width;
for (let i = 0; i < notes.length; ++i) {
let currentNote = notes[i];
let bounds = currentNote.getBoundingClientRect();
let left = bounds.left;
if (left < right) {
// Add call for the note
this.moveNote(currentNote, node.closest(".pagedjs_area"), true);
}
}
}
moveNote(node, pageArea, needsNoteCall) {
const parent = pageArea.querySelectorAll('.pagedjs_page_content')[0];
let notesArea = document.createElement('div');
notesArea.className = 'pagedjs_notes-area';
// if page content has no notes area then create it
if (parent.querySelector('.pagedjs_notes-area') === null) {
parent.insertBefore(notesArea, parent.children[0]);
notesArea.style.width = this.notesConfig.width;
} else {
notesArea = parent.querySelector('.pagedjs_notes-area');
}
if (!isElement(node)) {
return;
}
// Check if note already exists for overflow
let existing = notesArea.querySelector(`[data-ref="${node.dataset.ref}"]`);
if (existing) {
// Remove the note from the flow but no need to render it again
node.remove();
return;
}
// Add the note node
notesArea.appendChild(node);
// change the positionning of the note
node.style.position = 'relative';
node.style.display = 'block';
// find if we are on the left or right page
const page = node.closest('.pagedjs_page');
const isLeft = page.className.includes('pagedjs_left_page');
// find if this page has position bottom
const pageConf = isLeft ? this.notesConfig['positionLeft'] : this.notesConfig['positionRight'];
// if so displace the height of the element
if (pageConf.includes('bottom')) {
notesArea.style.marginTop = parent.offsetHeight - notesArea.clientHeight + 'px';
}
}
// renderNode(node) {
// // if element is a note or contains a note we create a pagedjs_notes-area
// if (
// node.nodeType === 1 &&
// (node.querySelector(`.${NOTE_CLASS}`) || node.className.includes(NOTE_CLASS))
// // to do here: check if the paragraph with a note is going to be chuncked
// // if it's the case : check if the note is on first part of the paragraph or the second
// ) {
// const note = node.querySelector(`.${NOTE_CLASS}`) || node;
// // change the positionning of the note
// note.style.position = 'relative';
// note.style.display = 'block';
// // store the data-id of the note in a set
// let noteId = note.dataset.id;
// if(!this.notesId.includes(noteId)){
// this.notesId.push(noteId);
// }
// // to check if it has already added to a notes-area
// if(!document.querySelectorAll('.pagedjs_notes-area [data-id="' + noteId + '"]').length >= 1){
// find page content
const parent = node.closest('.pagedjs_page_content');
let notesArea = document.createElement('div');
notesArea.className = 'pagedjs_notes-area';
// if page content has no notes area then create it
if (parent.querySelector('.pagedjs_notes-area') === null) {
parent.insertBefore(notesArea, parent.children[0]);
notesArea.style.width = this.notesConfig.width;
// // find page content
// const parent = node.closest('.pagedjs_page_content');
// let notesArea = document.createElement('div');
// notesArea.className = 'pagedjs_notes-area';
// // if page content has no notes area then create it
// if (parent.querySelector('.pagedjs_notes-area') === null) {
// parent.insertBefore(notesArea, parent.children[0]);
// notesArea.style.width = this.notesConfig.width;
} else {
notesArea = parent.querySelector('.pagedjs_notes-area');
}
// move the note to the container
notesArea.appendChild(note);
// find if we are on the left or right page
const page = node.closest('.pagedjs_page');
const isLeft = page.className.includes('pagedjs_left_page');
// find if this page has position bottom
const pageConf = isLeft ? this.notesConfig['positionLeft'] : this.notesConfig['positionRight'];
// if so displace the height of the element
if (pageConf.includes('bottom')) {
notesArea.style.marginTop = parent.offsetHeight - notesArea.clientHeight + 'px';
}
// } else {
// notesArea = parent.querySelector('.pagedjs_notes-area');
// }
// // move the note to the container
// notesArea.appendChild(note);
// // find if we are on the left or right page
// const page = node.closest('.pagedjs_page');
// const isLeft = page.className.includes('pagedjs_left_page');
// // find if this page has position bottom
// const pageConf = isLeft ? this.notesConfig['positionLeft'] : this.notesConfig['positionRight'];
// // if so displace the height of the element
// if (pageConf.includes('bottom')) {
// notesArea.style.marginTop = parent.offsetHeight - notesArea.clientHeight + 'px';
// }
} else {
// remove the note if already exist
node.remove();
}
// } else {
// // remove the note if already exist
// node.remove();
// }
}
}
// }
// }
afterPageLayout(pages) {
......@@ -150,3 +271,81 @@ class NotesFloat extends Paged.Handler {
Paged.registerHandlers(NotesFloat);
/* import { isContainer, isElement } from "../../utils/dom"; */
function isContainer(node) {
let container;
if (typeof node.tagName === "undefined") {
return true;
}
if (node.style && node.style.display === "none") {
return false;
}
switch (node.tagName) {
// Inline
case "A":
case "ABBR":
case "ACRONYM":
case "B":
case "BDO":
case "BIG":
case "BR":
case "BUTTON":
case "CITE":
case "CODE":
case "DFN":
case "EM":
case "I":
case "IMG":
case "INPUT":
case "KBD":
case "LABEL":
case "MAP":
case "OBJECT":
case "Q":
case "SAMP":
case "SCRIPT":
case "SELECT":
case "SMALL":
case "SPAN":
case "STRONG":
case "SUB":
case "SUP":
case "TEXTAREA":
case "TIME":
case "TT":
case "VAR":
case "P":
case "H1":
case "H2":
case "H3":
case "H4":
case "H5":
case "H6":
case "FIGCAPTION":
case "BLOCKQUOTE":
case "PRE":
case "LI":
case "TR":
case "DT":
case "DD":
case "VIDEO":
case "CANVAS":
container = false;
break;
default:
container = true;
}
return container;
}
function isElement(node) {
return node && node.nodeType === 1;
}
\ No newline at end of file
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