From 2cf88dffdebe1372f50724d5e5b613c746be930b Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Sun, 12 Apr 2026 23:47:04 +0200 Subject: [PATCH] toc --- assets/css/chapter-header.css | 6 +- assets/css/figures.css | 8 +- assets/css/portfolio.css | 15 --- assets/css/print.css | 110 +-------------------- assets/css/running-page.css | 8 +- assets/css/toc.css | 143 +++++++++++++++++++++++++++ assets/css/variables.css | 1 + assets/js/plugins/decor-subtitles.js | 21 ++-- assets/js/plugins/toc.js | 15 ++- assets/pagedjs/interface.js | 2 +- site/templates/print.php | 2 +- 11 files changed, 177 insertions(+), 154 deletions(-) create mode 100644 assets/css/toc.css diff --git a/assets/css/chapter-header.css b/assets/css/chapter-header.css index 3778efe..d1798c6 100644 --- a/assets/css/chapter-header.css +++ b/assets/css/chapter-header.css @@ -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; */ } diff --git a/assets/css/figures.css b/assets/css/figures.css index 20deed9..f3818b0 100644 --- a/assets/css/figures.css +++ b/assets/css/figures.css @@ -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; } diff --git a/assets/css/portfolio.css b/assets/css/portfolio.css index 68cb5c9..3016876 100644 --- a/assets/css/portfolio.css +++ b/assets/css/portfolio.css @@ -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; -} */ diff --git a/assets/css/print.css b/assets/css/print.css index 097bbc3..fc1c603 100644 --- a/assets/css/print.css +++ b/assets/css/print.css @@ -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; -} - - - diff --git a/assets/css/running-page.css b/assets/css/running-page.css index 39a58eb..ff0dde0 100644 --- a/assets/css/running-page.css +++ b/assets/css/running-page.css @@ -110,10 +110,4 @@ content: none; } -} - -/* TEMP */ -@page entretien{ - --sign-color: var(--red); -} - +} \ No newline at end of file diff --git a/assets/css/toc.css b/assets/css/toc.css new file mode 100644 index 0000000..4e5f487 --- /dev/null +++ b/assets/css/toc.css @@ -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; +} + diff --git a/assets/css/variables.css b/assets/css/variables.css index b35cb93..8e13c90 100644 --- a/assets/css/variables.css +++ b/assets/css/variables.css @@ -20,6 +20,7 @@ --fs-nav: 11px; --fs-subtitle: 16px; --fs-notes: 11px; + --fs-title: 22px; --red: #ff665e; --green: #44d62c; diff --git a/assets/js/plugins/decor-subtitles.js b/assets/js/plugins/decor-subtitles.js index 549f3fa..796d825 100644 --- a/assets/js/plugins/decor-subtitles.js +++ b/assets/js/plugins/decor-subtitles.js @@ -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); diff --git a/assets/js/plugins/toc.js b/assets/js/plugins/toc.js index 197fc36..49037ac 100644 --- a/assets/js/plugins/toc.js +++ b/assets/js/plugins/toc.js @@ -97,8 +97,19 @@ function createToc(config) { } } - tocNewLi.innerHTML = - '' + tocElement.innerHTML + ''; + 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 = + '' + + (chapterType ? '' + (symbol ? '' + symbol + '' : '') + '' + chapterType + ' ' + (symbol ? '' + symbol + '' : '') + '' : '') + + '' + tocElement.innerHTML + '' + + (author ? '' + author + '' : '') + + ''; tocUl.appendChild(tocNewLi) } diff --git a/assets/pagedjs/interface.js b/assets/pagedjs/interface.js index 3167a68..8bdd184 100644 --- a/assets/pagedjs/interface.js +++ b/assets/pagedjs/interface.js @@ -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) => { }); }); diff --git a/site/templates/print.php b/site/templates/print.php index feb11c4..4820f05 100644 --- a/site/templates/print.php +++ b/site/templates/print.php @@ -15,7 +15,7 @@
-

Sommaire =>

+

Sommaire