debut d'integration de la version terminal
This commit is contained in:
sarahgarcin1
parent
00edad1729
commit
54ce5faf08
146 changed files with 2532 additions and 40285 deletions
32
assets/js/plugins/decor-blockquote.js
Normal file
32
assets/js/plugins/decor-blockquote.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
class blockquoteDecor extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.symbol = ".";
|
||||
}
|
||||
afterPageLayout(pageElement, page, breakToken) {
|
||||
let blockquotes = pageElement.querySelectorAll("blockquote");
|
||||
blockquotes.forEach((blockquote) => {
|
||||
const container = document.createElement("div");
|
||||
container.className = "before-blockquote_container";
|
||||
const inner = document.createElement("div");
|
||||
inner.className = "before-blockquote";
|
||||
inner.textContent = this.symbol.repeat(300);
|
||||
container.appendChild(inner);
|
||||
blockquote.insertBefore(container, blockquote.firstChild);
|
||||
container.style.height = `${blockquote.offsetHeight}px`;
|
||||
|
||||
const containerAfter = document.createElement("div");
|
||||
containerAfter.className = "after-blockquote_container";
|
||||
const innerAfter = document.createElement("div");
|
||||
innerAfter.className = "after-blockquote";
|
||||
innerAfter.textContent = this.symbol.repeat(300);
|
||||
containerAfter.appendChild(innerAfter);
|
||||
blockquote.insertBefore(containerAfter, container.nextSibling);
|
||||
containerAfter.style.height = `${blockquote.offsetHeight}px`;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Paged.registerHandlers(blockquoteDecor);
|
||||
55
assets/js/plugins/decor-num-pages.js
Normal file
55
assets/js/plugins/decor-num-pages.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
class numPagesDecor extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
afterRendered(pages){
|
||||
let totalPages = pages.length;
|
||||
let symbol = "+";
|
||||
pages.forEach(function(page){
|
||||
let pageElement = page.element;
|
||||
const numPage = parseInt(pageElement.dataset.pageNumber);
|
||||
|
||||
const area = pageElement.querySelector(".pagedjs_area");
|
||||
if (area) {
|
||||
const container = document.createElement("div");
|
||||
container.className = "running-page_container";
|
||||
|
||||
const progress = (numPage / totalPages) * 100;
|
||||
|
||||
const symbols = document.createElement("div");
|
||||
symbols.className = "symbols";
|
||||
symbols.style.width = `${progress}%`;
|
||||
symbols.style.wordBreak = "break-all";
|
||||
symbols.style.overflowWrap = "anywhere";
|
||||
|
||||
const dots = document.createElement("div");
|
||||
dots.className = "dots";
|
||||
dots.textContent = ".".repeat(100);
|
||||
|
||||
const runningPage = document.createElement("div");
|
||||
runningPage.className = "running-page";
|
||||
runningPage.appendChild(symbols);
|
||||
runningPage.appendChild(dots);
|
||||
container.appendChild(runningPage);
|
||||
area.after(container);
|
||||
|
||||
symbols.textContent = symbol;
|
||||
const baseHeight = symbols.offsetHeight;
|
||||
let count = 1;
|
||||
while (count < 2000) {
|
||||
count++;
|
||||
symbols.textContent = symbol.repeat(count);
|
||||
if (symbols.offsetHeight > baseHeight) {
|
||||
symbols.textContent = symbol.repeat(count - 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Paged.registerHandlers(numPagesDecor);
|
||||
152
assets/js/plugins/decor-subtitles.js
Normal file
152
assets/js/plugins/decor-subtitles.js
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
class subtitlesDecor extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.symbol = "/";
|
||||
}
|
||||
|
||||
createDecor(symbol, sizes, sizeClass, baseClass = "decor-h3") {
|
||||
const div = document.createElement("div");
|
||||
div.className = `${baseClass} ${sizeClass}`;
|
||||
sizes.forEach((n, i) => {
|
||||
const line = document.createElement("div");
|
||||
line.dataset.count = i + 1;
|
||||
line.textContent = symbol.repeat(n);
|
||||
div.appendChild(line);
|
||||
});
|
||||
return div;
|
||||
}
|
||||
|
||||
createLine(symbol, nodes) {
|
||||
const line = document.createElement("span");
|
||||
line.className = "subtitle-line";
|
||||
|
||||
const spanBefore = document.createElement("span");
|
||||
spanBefore.className = "subtitle-before";
|
||||
spanBefore.textContent = symbol.repeat(3);
|
||||
line.appendChild(spanBefore);
|
||||
|
||||
const spanText = document.createElement("span");
|
||||
spanText.className = "subtitle-text";
|
||||
nodes.forEach(node => spanText.appendChild(node));
|
||||
line.appendChild(spanText);
|
||||
|
||||
const spanAfter = document.createElement("span");
|
||||
spanAfter.className = "subtitle-after";
|
||||
spanAfter.textContent = "";
|
||||
line.appendChild(spanAfter);
|
||||
|
||||
return line;
|
||||
}
|
||||
|
||||
|
||||
processTitle(subtitle, symbol, withDecor, isLeft) {
|
||||
if (subtitle.querySelector(".subtitle-line")) return;
|
||||
|
||||
const children = Array.from(subtitle.childNodes);
|
||||
|
||||
// Découper en segments à chaque <br>
|
||||
const segments = [];
|
||||
let current = [];
|
||||
children.forEach(node => {
|
||||
if (node.nodeName === "BR") {
|
||||
segments.push(current);
|
||||
current = [];
|
||||
} else {
|
||||
current.push(node);
|
||||
}
|
||||
});
|
||||
segments.push(current);
|
||||
|
||||
// Reconstruire le titre avec des .subtitle-line
|
||||
subtitle.innerHTML = "";
|
||||
segments.filter(seg => seg.length > 0).forEach(nodes => {
|
||||
const line = this.createLine(symbol, nodes);
|
||||
subtitle.appendChild(line);
|
||||
|
||||
const spanAfter = line.querySelector(".subtitle-after");
|
||||
const baseHeight = line.offsetHeight;
|
||||
let count = 0;
|
||||
// subtitle-after → Ajouter des symboles à la ligne en vérifiant la hauteur de la ligne, si la ligne devient plus haute, supprimer le dernier symbole ajouté
|
||||
while (count < 300) {
|
||||
count++;
|
||||
spanAfter.textContent = symbol.repeat(count);
|
||||
if (line.offsetHeight > baseHeight) {
|
||||
spanAfter.textContent = symbol.repeat(count - 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (withDecor) {
|
||||
const smallSizes = [1, 2, 3, 2, 1];
|
||||
const bigSizes = [1, 2, 3, 4, 5, 4, 3, 2, 1];
|
||||
let firstDecor, secondDecor;
|
||||
if (isLeft) {
|
||||
firstDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
|
||||
secondDecor = this.createDecor(symbol, bigSizes, "decor-h3_big");
|
||||
} else {
|
||||
firstDecor = this.createDecor(symbol, bigSizes, "decor-h3_big");
|
||||
secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
|
||||
}
|
||||
const container = document.createElement("div");
|
||||
container.className = "h3_container " + subtitle.className;
|
||||
subtitle.className = "";
|
||||
subtitle.parentNode.insertBefore(container, subtitle);
|
||||
container.appendChild(firstDecor);
|
||||
container.appendChild(secondDecor);
|
||||
container.appendChild(subtitle);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
beforeParsed(content){
|
||||
content.querySelectorAll("h3").forEach(subtitle => {
|
||||
const next = subtitle.nextElementSibling;
|
||||
if (next) next.classList.add("following-h3");
|
||||
});
|
||||
content.querySelectorAll("h4").forEach(subtitle => {
|
||||
const next = subtitle.nextElementSibling;
|
||||
if (next) next.classList.add("following-h4");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken) {
|
||||
const symbol = this.symbol;
|
||||
const isLeft = pageElement.classList.contains("pagedjs_left_page");
|
||||
|
||||
pageElement.querySelectorAll("h3").forEach(subtitle => {
|
||||
this.processTitle(subtitle, symbol, true, isLeft);
|
||||
});
|
||||
|
||||
pageElement.querySelectorAll("h4").forEach(subtitle => {
|
||||
this.processTitle(subtitle, symbol, false, isLeft);
|
||||
const container = document.createElement("div");
|
||||
container.className = "h4_container " + subtitle.className;
|
||||
subtitle.className = "";
|
||||
subtitle.parentNode.insertBefore(container, subtitle);
|
||||
container.appendChild(subtitle);
|
||||
});
|
||||
|
||||
pageElement.querySelectorAll("h6").forEach(h6 => {
|
||||
if (h6.closest(".h6_container")) return;
|
||||
const smallSizes = [1, 2, 3, 2, 1];
|
||||
const bigSizes = [1, 2, 3, 4, 5, 4, 3, 2, 1];
|
||||
const firstDecor = isLeft
|
||||
? this.createDecor(symbol, smallSizes, "decor-h6_small", "decor-h6")
|
||||
: this.createDecor(symbol, bigSizes, "decor-h6_big", "decor-h6");
|
||||
const container = document.createElement("div");
|
||||
container.className = "h6_container " + h6.className;
|
||||
h6.className = "";
|
||||
h6.parentNode.insertBefore(container, h6);
|
||||
container.appendChild(firstDecor);
|
||||
container.appendChild(h6);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Paged.registerHandlers(subtitlesDecor);
|
||||
217
assets/js/plugins/followingNotes.js
Normal file
217
assets/js/plugins/followingNotes.js
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
/**
|
||||
* @name FollowingNotes
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/followingNotes/ }
|
||||
*/
|
||||
|
||||
class followingNotes extends Paged.Handler {
|
||||
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.notesClass = ".inline-note";
|
||||
this.newNotesClass = "following-note";
|
||||
// this.reset = this.parameters?.reset;
|
||||
// this.align = this.parameters?.align;
|
||||
this.followingNoteOverflow = new Set();
|
||||
}
|
||||
|
||||
beforeParsed(content) {
|
||||
|
||||
console.log("floatnotes");
|
||||
|
||||
let newNotesClass = this.newNotesClass;
|
||||
resetCounter(content, this.reset, this.notesClass);
|
||||
createCallandMarker(content, this.notesClass, newNotesClass);
|
||||
|
||||
|
||||
let notes = content.querySelectorAll(this.notesClass);
|
||||
notes.forEach(function (note) {
|
||||
let paragraph = note.closest("p");
|
||||
if (!paragraph) return;
|
||||
|
||||
let container = paragraph.nextElementSibling;
|
||||
if (!container || !container.classList.contains("container-following-note")) {
|
||||
container = document.createElement("div");
|
||||
container.classList.add("container-following-note");
|
||||
paragraph.after(container);
|
||||
}
|
||||
|
||||
container.appendChild(note);
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
Paged.registerHandlers(followingNotes);
|
||||
|
||||
|
||||
/// FUNCTIONS -----------------------------------------------------
|
||||
|
||||
|
||||
// RESET COUNTER
|
||||
|
||||
function resetCounter(content, reset, notesClass){
|
||||
|
||||
if(reset && reset != ""){
|
||||
const elements = content.querySelectorAll(reset + ", " + notesClass);
|
||||
let resetEligible = false;
|
||||
elements.forEach(element => {
|
||||
if (element.matches(reset)) {
|
||||
resetEligible = true;
|
||||
} else if (resetEligible && element.matches(notesClass)) {
|
||||
element.dataset.resetCounterFollowingNote = true;
|
||||
resetEligible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// CALL & MARKER
|
||||
function createCallandMarker(content, notesClass, newNotesClass){
|
||||
|
||||
let notes = content.querySelectorAll(notesClass);
|
||||
let resetNum = 0;
|
||||
|
||||
notes.forEach(function (note, index) {
|
||||
|
||||
if (note.dataset.resetCounterFollowingNote === "true") {
|
||||
resetNum = index;
|
||||
}
|
||||
let num = index + 1 - resetNum;
|
||||
|
||||
note.classList.add(newNotesClass);
|
||||
note.dataset.counterNote = num;
|
||||
|
||||
// call
|
||||
let ref_note = document.createElement('span');
|
||||
ref_note.className = newNotesClass + "_call";
|
||||
ref_note.dataset.counterNote = num;
|
||||
ref_note.innerHTML = num;
|
||||
|
||||
// wrap preceding word + call in .wrapper__note-call
|
||||
let wrapper = document.createElement('span');
|
||||
wrapper.className = 'wrapper__note-call';
|
||||
|
||||
let prevSibling = note.previousSibling;
|
||||
if (prevSibling && prevSibling.nodeType === Node.TEXT_NODE) {
|
||||
let text = prevSibling.textContent;
|
||||
let m = text.match(/^([\s\S]*\s)(\S+\s*)$/);
|
||||
if (m) {
|
||||
let before = m[1];
|
||||
let extracted = m[2];
|
||||
|
||||
// Si le dernier mot extrait est uniquement », prendre aussi le mot d'avant
|
||||
if (/^»\s*$/.test(extracted)) {
|
||||
let m2 = before.trimEnd().match(/^([\s\S]*\s|)(\S+)$/);
|
||||
if (m2) {
|
||||
let spaceBetween = before.slice(m2[1].length + m2[2].length);
|
||||
before = m2[1];
|
||||
extracted = m2[2] + spaceBetween + extracted;
|
||||
}
|
||||
}
|
||||
|
||||
prevSibling.textContent = before;
|
||||
wrapper.appendChild(document.createTextNode(extracted));
|
||||
} else {
|
||||
prevSibling.textContent = '';
|
||||
wrapper.appendChild(document.createTextNode(text));
|
||||
}
|
||||
}
|
||||
|
||||
wrapper.appendChild(ref_note);
|
||||
note.after(wrapper);
|
||||
|
||||
// marker + content note wrapped in body_note
|
||||
let marker_note = document.createElement('span');
|
||||
marker_note.className = newNotesClass + "_marker";
|
||||
//marker_note.innerHTML = num + ". ";
|
||||
marker_note.innerHTML = num;
|
||||
|
||||
let body_note = document.createElement('div');
|
||||
body_note.className = 'body_note';
|
||||
while (note.firstChild) {
|
||||
body_note.appendChild(note.firstChild);
|
||||
}
|
||||
body_note.prepend(marker_note);
|
||||
note.appendChild(body_note);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// MARGINS
|
||||
|
||||
function marginNoteTop(elem) {
|
||||
let marginTop = parseInt(window.getComputedStyle(elem).marginTop, 10)
|
||||
return marginTop;
|
||||
}
|
||||
|
||||
function marginNoteBottom(elem) {
|
||||
let marginBottom = parseInt(window.getComputedStyle(elem).marginBottom, 10)
|
||||
return marginBottom;
|
||||
}
|
||||
|
||||
function biggestMargin(a, b) {
|
||||
let margin;
|
||||
let marginBottom = marginNoteBottom(a);
|
||||
let marginTop = marginNoteTop(b);
|
||||
if (marginBottom > marginTop) {
|
||||
margin = marginBottom;
|
||||
} else {
|
||||
margin = marginTop;
|
||||
}
|
||||
return margin;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function checkOverflownote(notesClass, pageElement, maxHeight, arrayOverflow, container) {
|
||||
let notes = pageElement.querySelectorAll(notesClass);
|
||||
|
||||
let notesHeightAll = [];
|
||||
|
||||
for (let n = 0; n < notes.length; ++n) {
|
||||
|
||||
// Add height of the notes to array notesHeightAll
|
||||
let noteHeight = notes[n].offsetHeight;
|
||||
notesHeightAll.push(noteHeight);
|
||||
// Add margins of the notes to array notesHeightAll
|
||||
if (n >= 1) {
|
||||
let margins = biggestMargin(notes[n - 1], notes[n]);
|
||||
notesHeightAll.push(margins);
|
||||
}
|
||||
}
|
||||
|
||||
// If notes on page
|
||||
if (notesHeightAll.length > 0) {
|
||||
|
||||
// Calculate if all notes fit on the page;
|
||||
let reducer = (accumulator, currentValue) => accumulator + currentValue;
|
||||
let allHeight = notesHeightAll.reduce(reducer);
|
||||
let paddingTop = getComputedStyle(container).paddingTop;
|
||||
let paddingContainer = parseInt(paddingTop);
|
||||
|
||||
let totalHeight = allHeight + paddingContainer;
|
||||
|
||||
if (totalHeight > maxHeight) {
|
||||
|
||||
let lastNote = notes[notes.length - 1];
|
||||
arrayOverflow.add(lastNote);
|
||||
lastNote.remove();
|
||||
|
||||
checkOverflownote(notesClass, pageElement, maxHeight, arrayOverflow, container);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue