Julie/decor-6-expe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

blockauote

Browse source
This commit is contained in:
Julie Blanc 2026-03-16 14:52:34 +01:00
parent 56d11343f8
commit f255ad6733
8 changed files with 97 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

4
maquette-tests/assets/css/03_layout.css
View file

@ -196,6 +196,10 @@
position: running(decor);
}
.pagedjs_area{
position: relative;
}
.pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after{
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;

47
maquette-tests/assets/css/blockquote.css Normal file
View file

@ -0,0 +1,47 @@
blockquote{
/* padding-left: 3ch; */
margin-top: calc(var(--baseline)*1);
margin-bottom: calc(var(--baseline)*1);
padding-left: calc(var(--unit)*0.75);
padding-right: calc(var(--unit)*0.75);
}
blockquote p::before{
display: none;
}
.before-blockquote_container,
.after-blockquote_container{
position: absolute;
overflow: hidden;
}
.before-blockquote_container{
left: 0px;
}
.after-blockquote_container{
right: -10px;
}
.after-blockquote,
.before-blockquote{
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline);
word-break: break-all;
width: calc(var(--unit)*0.5 + 4px);
overflow-wrap: anywhere;
position: relative;
top: -3px;
}

16
maquette-tests/assets/css/item-decor.css
View file

@ -1,16 +0,0 @@
.item-decor{
font-family: var(--sans);
font-weight: 400;
font-size: 12px;
position: absolute;
}
.pagedjs_left_page .item-decor{
left: -12mm;
}
.pagedjs_right_page .item-decor{
right: -12mm;
}

3
maquette-tests/assets/css/running-page.css
View file

@ -24,7 +24,6 @@
padding-left: 11px;
padding-right: 6px;
display: flex;
/* background-color: yellow; */
}
.running-page .symbols{
@ -34,7 +33,7 @@
.running-page .dots{
position: relative;
top: -5px;
left: -10px;
left: -5px;
}
.pagedjs_right_page .running-page_container .running-page{

35
maquette-tests/assets/css/text.css
View file

@ -14,13 +14,14 @@
p::before{
content: "............";
content: "...........";
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline);
position: relative;
top: -3px;
padding-right: 8px;
/* position: absolute;
left: 0; */
}
@ -32,41 +33,17 @@ p::before{
blockquote p{
/* font-family: var(--mono); */
}
blockquote{
padding-left: 3ch;
/* font-style: italic; */
margin-top: calc(var(--baseline)*0.5);
margin-bottom: calc(var(--baseline)*0.5);
}
blockquote::before{
content: "> > > > > > > > > >";
display: block;
width: 1ch;
position: absolute;
left: 0;
font-family: var(--mono);
font-size: var(--fs-nav);
font-style: normal;
}
.chapter > :first-child{
/* .chapter > :first-child{
margin-top: 0px;
}
.pagedjs_area{
position: relative;
}
*/

6
maquette-tests/csspageweaver/manifest.json
View file

@ -27,7 +27,7 @@
"assets/css/02_body.css",
"assets/css/03_layout.css",
"assets/css/chapter-header.css",
"assets/css/item-decor.css",
"assets/css/blockquote.css",
"assets/css/notes.css",
"assets/css/text.css",
"assets/css/subtitles.css",
@ -35,8 +35,8 @@
],
"hook": [
"/js/decor-subtitles.js",
"/js/decor-num-pages.js"
"/js/decor-num-pages.js",
"/js/decor-blockquote.js"
]
}

33
maquette-tests/js/decor-blockquote.js Normal file
View file

@ -0,0 +1,33 @@
import { Handler } from '/csspageweaver/lib/paged.esm.js';
export default class itemsDecor extends 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`;
});
}
}

6
maquette-tests/js/decor-num-pages.js
View file

@ -10,9 +10,9 @@ export default class itemsDecor extends Handler {
afterPageLayout(pageElement, page, breakToken) {
const numPage = parseInt(pageElement.dataset.pageNumber);
const half = this.totalPages / 2;
const isFirstHalf = numPage <= half;
console.log(numPage, isFirstHalf ? "première moitié" : "deuxième moitié");
// const half = this.totalPages / 2;
// const isFirstHalf = numPage <= half;
// console.log(numPage, isFirstHalf ? "première moitié" : "deuxième moitié");
const area = pageElement.querySelector(".pagedjs_area");
if (area) {