toc
This commit is contained in:
Julie Blanc
parent
6a45e2bf36
commit
2cf88dffde
11 changed files with 177 additions and 154 deletions
|
|
@ -8,15 +8,11 @@
|
|||
}
|
||||
|
||||
.chapter-header .hgroup {
|
||||
font-size: 22px;
|
||||
font-size: var(--fs-title);
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
top: calc(var(--baseline)*-0.25 - 2px);
|
||||
/* margin-bottom: calc(var(--baseline)*3 + 13px); */
|
||||
/*padding-right: calc(var(--unit)*2);*/
|
||||
position: relative;
|
||||
/* padding-left: 15px; */
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,13 +9,15 @@ figcaption{
|
|||
}
|
||||
|
||||
figcaption::before{
|
||||
content: "*";
|
||||
font-family: var(--sign-family);
|
||||
content: "(>)";
|
||||
/* font-family: var(--sign-family); */
|
||||
font-size: var(--fs-notes);
|
||||
/* font-family: var(--sign-family);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
line-height: var(--sign-baseline); */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -146,10 +146,6 @@
|
|||
#fig-iyo-bisseck-1{
|
||||
break-before: right;
|
||||
}
|
||||
/* #fig-iyo-bisseck-3{
|
||||
break-before: page;
|
||||
} */
|
||||
|
||||
|
||||
#fig-iyo-bisseck-3 img{
|
||||
object-fit: contain;
|
||||
|
|
@ -174,17 +170,6 @@ break-before: right;
|
|||
object-position: 0px calc(var(--pagedjs-margin-top) + var(--bleed-images));
|
||||
}
|
||||
|
||||
/* #fig-iyo-bisseck-6 img{
|
||||
object-fit: contain;
|
||||
width: 80%;
|
||||
position: relative;
|
||||
left: calc(10% - var(--bleed-images));
|
||||
|
||||
} */
|
||||
|
||||
/* #fig-iyo-bisseck-6, #fig-iyo-bisseck-7{
|
||||
break-before: page;
|
||||
} */
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@
|
|||
font-size: var(--font-size);
|
||||
color: var(--sign-color);
|
||||
font-family: var(--sign-family);
|
||||
/*margin-left: -12px;*/
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -166,11 +165,10 @@
|
|||
|
||||
|
||||
@page:blank {
|
||||
/* @top-left { content: none;}
|
||||
@top-left { content: none;}
|
||||
@top-left-corner { content: none;}
|
||||
@top-right { content: none; }
|
||||
@top-center { content: none;}
|
||||
@bottom-center { content: none; } */
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -254,121 +252,15 @@
|
|||
|
||||
|
||||
[data-chapter="essai"]{
|
||||
--sign-color: var(--blue);
|
||||
page: essai;
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
|
||||
@page essai{
|
||||
--sign-color: var(--blue);
|
||||
}
|
||||
|
||||
[data-chapter="entretien"]{
|
||||
--sign-color: var(--red);
|
||||
page: entretien;
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
@page entretien{
|
||||
--sign-color: var(--red);
|
||||
}
|
||||
|
||||
/* [data-chapter="portfolio"]{
|
||||
--sign-color: var(--green);
|
||||
--sign-color: rgb(117, 47, 47);
|
||||
page: portfolio;
|
||||
break-before: left;
|
||||
}
|
||||
|
||||
@page portfolio{
|
||||
--sign-color: var(--green);
|
||||
--sign-color: white;
|
||||
background-color: white;
|
||||
} */
|
||||
|
||||
/* ------- TABLE OF CONTENTS --------- */
|
||||
.toc{
|
||||
break-before: left;
|
||||
font-family: var(--fontTitle);
|
||||
text-align: left;
|
||||
font-size: var(--font-size);
|
||||
page: toc;
|
||||
}
|
||||
|
||||
@page toc{
|
||||
margin-top: 10mm;
|
||||
margin-bottom: 10mm;
|
||||
@top-left { content: none;}
|
||||
@top-left-corner { content: none;}
|
||||
@top-right { content: none; }
|
||||
@top-center { content: none;}
|
||||
@bottom-center { content: none; }
|
||||
@bottom-right-corner { content: none; }
|
||||
}
|
||||
|
||||
.toc h2{
|
||||
font-family: var(--fontTitle);
|
||||
text-align: left;
|
||||
font-size: var(--font-size);
|
||||
margin-bottom: var(--baseline);
|
||||
}
|
||||
|
||||
/* counters */
|
||||
#list-toc-generated{
|
||||
counter-reset: counterTocLevel1;
|
||||
list-style: none;
|
||||
overflow-x: visible !important;
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element-level-1{
|
||||
counter-increment: counterTocLevel1;
|
||||
margin-bottom: calc(var(--baseline) * 1);
|
||||
}
|
||||
|
||||
.toc-essai a span{
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.toc-entretien a span{
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.toc-portfolio a span{
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
#list-toc-generated a{
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin-left: 70px;
|
||||
width: calc(100% - 70px);
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element a::before{
|
||||
content: target-counter(attr(href), page);
|
||||
position: absolute;
|
||||
left:0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#list-toc-generated li span{
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#list-toc-generated li span::before{
|
||||
content: "//////// essai //////////////////////////////////////////";
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element a span::after{
|
||||
content: "— Auteur du texte";
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -110,10 +110,4 @@
|
|||
content: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* TEMP */
|
||||
@page entretien{
|
||||
--sign-color: var(--red);
|
||||
}
|
||||
|
||||
}
|
||||
143
assets/css/toc.css
Normal file
143
assets/css/toc.css
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
|
||||
/* ------- TABLE OF CONTENTS --------- */
|
||||
.toc{
|
||||
break-before: right;
|
||||
font-family: var(--fontTitle);
|
||||
text-align: left;
|
||||
font-size: var(--font-size);
|
||||
page: toc;
|
||||
}
|
||||
|
||||
@page toc{
|
||||
margin-top: 10mm;
|
||||
margin-bottom: 10mm;
|
||||
@top-left { content: none;}
|
||||
@top-left-corner { content: none;}
|
||||
@top-right { content: none; }
|
||||
@top-center { content: none;}
|
||||
@bottom-center { content: none; }
|
||||
@bottom-right-corner { content: none; }
|
||||
}
|
||||
|
||||
.toc h2{
|
||||
font-size: var(--fs-title);
|
||||
font-family: var(--fontTitle);
|
||||
/* margin-left: calc(var(--unit)*1); */
|
||||
text-align: center;
|
||||
/* margin-bottom: calc(var(--baseline)*2); */
|
||||
}
|
||||
|
||||
.toc h2::after{
|
||||
content: "/ / / /";
|
||||
display: block;
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: calc(var(--sign-baseline) * 1);
|
||||
max-width: 1ch;
|
||||
margin-top: 0.5rem;
|
||||
/* margin-bottom: 0.5rem; */
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
|
||||
#list-toc-generated a{
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin-left: calc(var(--unit)*1);
|
||||
width: calc(100% - var(--unit));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element a::before{
|
||||
content: target-counter(attr(href), page);
|
||||
position: absolute;
|
||||
left: calc(var(--unit)*-1);
|
||||
top: calc(var(--baseline)*1.5 + 1px);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#list-toc-generated li .toc-title,
|
||||
#list-toc-generated li .toc-author,
|
||||
#list-toc-generated li .toc-type{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#list-toc-generated li{
|
||||
break-inside: avoid;
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
}
|
||||
|
||||
#list-toc-generated li .toc-type{
|
||||
margin-bottom: calc(var(--baseline)*0.5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#list-toc-generated li .toc-title{
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--baseline)*0.25);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.toc-type-symbole_before,
|
||||
.toc-type-symbole_after{
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: calc(var(--sign-baseline) * 1);
|
||||
|
||||
}
|
||||
|
||||
.toc-type-symbole_before{
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.toc-type .text{
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1rem;
|
||||
font-size: 0.9em;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.toc-type{
|
||||
white-space: nowrap;
|
||||
margin-left: calc(var(--unit)*-1);
|
||||
}
|
||||
|
||||
.toc-type::before{
|
||||
content: "////";
|
||||
font-size: var(--sign-size);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: calc(var(--sign-baseline) * 1);
|
||||
|
||||
}
|
||||
|
||||
[data-toc-chapter="entretien"]::after,
|
||||
[data-toc-chapter="portfolio"]::after{
|
||||
content: " /////////////////";
|
||||
left: -6px;
|
||||
}
|
||||
|
||||
[data-toc-chapter="essai"]::after{
|
||||
content: " ///////////////////";
|
||||
left: -6px;
|
||||
}
|
||||
.toc-type::after{
|
||||
font-size: var(--sign-size);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: calc(var(--sign-baseline) * 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
--fs-nav: 11px;
|
||||
--fs-subtitle: 16px;
|
||||
--fs-notes: 11px;
|
||||
--fs-title: 22px;
|
||||
|
||||
--red: #ff665e;
|
||||
--green: #44d62c;
|
||||
|
|
|
|||
|
|
@ -16,22 +16,22 @@ class subtitlesDecor extends Paged.Handler {
|
|||
return div;
|
||||
}
|
||||
|
||||
createLine(symbol, nodes) {
|
||||
createLine(symbol, nodes, prefix = "subtitle") {
|
||||
const line = document.createElement("span");
|
||||
line.className = "subtitle-line";
|
||||
line.className = `${prefix}-line`;
|
||||
|
||||
const spanBefore = document.createElement("span");
|
||||
spanBefore.className = "subtitle-before";
|
||||
spanBefore.className = `${prefix}-before`;
|
||||
spanBefore.textContent = symbol.repeat(3);
|
||||
line.appendChild(spanBefore);
|
||||
|
||||
const spanText = document.createElement("span");
|
||||
spanText.className = "subtitle-text";
|
||||
spanText.className = `${prefix}-text`;
|
||||
nodes.forEach(node => spanText.appendChild(node));
|
||||
line.appendChild(spanText);
|
||||
|
||||
const spanAfter = document.createElement("span");
|
||||
spanAfter.className = "subtitle-after";
|
||||
spanAfter.className = `${prefix}-after`;
|
||||
spanAfter.textContent = "";
|
||||
line.appendChild(spanAfter);
|
||||
|
||||
|
|
@ -39,8 +39,8 @@ class subtitlesDecor extends Paged.Handler {
|
|||
}
|
||||
|
||||
|
||||
processTitle(subtitle, symbol, withDecor, isLeft) {
|
||||
if (subtitle.querySelector(".subtitle-line")) return;
|
||||
processTitle(subtitle, symbol, withDecor, isLeft, prefix = "subtitle") {
|
||||
if (subtitle.querySelector(`.${prefix}-line`)) return;
|
||||
|
||||
const children = Array.from(subtitle.childNodes);
|
||||
|
||||
|
|
@ -57,16 +57,15 @@ class subtitlesDecor extends Paged.Handler {
|
|||
});
|
||||
segments.push(current);
|
||||
|
||||
// Reconstruire le titre avec des .subtitle-line
|
||||
// Reconstruire le titre avec des .{prefix}-line
|
||||
subtitle.innerHTML = "";
|
||||
segments.filter(seg => seg.length > 0).forEach(nodes => {
|
||||
const line = this.createLine(symbol, nodes);
|
||||
const line = this.createLine(symbol, nodes, prefix);
|
||||
subtitle.appendChild(line);
|
||||
|
||||
const spanAfter = line.querySelector(".subtitle-after");
|
||||
const spanAfter = line.querySelector(`.${prefix}-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);
|
||||
|
|
|
|||
|
|
@ -97,8 +97,19 @@ function createToc(config) {
|
|||
}
|
||||
}
|
||||
|
||||
tocNewLi.innerHTML =
|
||||
'<a class="toc-link" href="#' + tocElement.id + '">' + tocElement.innerHTML + '</a>';
|
||||
const chapter = tocElement.closest('.chapter');
|
||||
const author = chapter?.querySelector('.nav-author')?.textContent || '';
|
||||
const chapterType = chapter?.dataset.chapter || '';
|
||||
tocNewLi.dataset.author = author;
|
||||
if (chapterType) tocNewLi.classList.add('toc-' + chapterType);
|
||||
const typeSymbols = { entretien: '@', portfolio: '+', essai: '*' };
|
||||
const symbol = typeSymbols[chapterType] || '';
|
||||
tocNewLi.innerHTML =
|
||||
'<a class="toc-link" href="#' + tocElement.id + '">' +
|
||||
(chapterType ? '<span class="toc-type" data-toc-chapter="' + chapterType + '">' + (symbol ? '<span class="toc-type-symbole_before">' + symbol + '</span>' : '') + '<span class="text">' + chapterType + ' </span>' + (symbol ? '<span class="toc-type-symbole_after">' + symbol + '</span>' : '') + '</span>' : '') +
|
||||
'<span class="toc-title">' + tocElement.innerHTML + '</span>' +
|
||||
(author ? '<span class="toc-author">' + author + '</span>' : '') +
|
||||
'</a>';
|
||||
|
||||
tocUl.appendChild(tocNewLi)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
|
|||
let book_content = flowBook.content;
|
||||
let paged = new Paged.Previewer();
|
||||
|
||||
paged.preview(book_content, ["assets/css/print-template.css", "assets/css/main.css", "assets/css/print.css", 'assets/css/blockquote.css', 'assets/css/chapter-header.css', 'assets/css/entretiens.css', 'assets/css/notes.css', 'assets/css/figures.css', 'assets/css/portfolio.css', "assets/css/running-page.css", 'assets/css/subtitles.css', 'assets/css/text.css', 'assets/css/typesetting.css',], document.querySelector("#renderbook")).then((flow) => {
|
||||
paged.preview(book_content, ["assets/css/print-template.css", "assets/css/main.css", "assets/css/print.css", "assets/css/toc.css", 'assets/css/blockquote.css', 'assets/css/chapter-header.css', 'assets/css/entretiens.css', 'assets/css/notes.css', 'assets/css/figures.css', 'assets/css/portfolio.css', "assets/css/running-page.css", 'assets/css/subtitles.css', 'assets/css/text.css', 'assets/css/typesetting.css',], document.querySelector("#renderbook")).then((flow) => {
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="blank-page"></div>
|
||||
|
||||
<section class="toc">
|
||||
<h2>Sommaire =></h2>
|
||||
<h2>Sommaire</h2>
|
||||
<article id="table-of-contents"></article>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue