valentin_le_moign/carnet_atterrissage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

corrigé les pbs sur les encarts + ajouts d'un style de photos + fonts fonctionnent sur chromium

Browse Source
This commit is contained in:
Valentin
2023-07-23 06:13:14 +02:00
parent fd20768958
commit a698a118df
9 changed files with 211 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+10
View File
@@ -52,13 +52,18 @@ saut de ligne dans texte libre (à la fin de chaque ligne) : `<br>`
`[latour]`
`[latour_nohead]`
`[lampe]`
`[lampe_nohead]`
`[bibliographie]`
### IMAGES
`[imgsmall]`
`[imgsmall_bottom]`
![imgsmall](screenshots/smallimg.png)
`[fullpage2imgs]`
@@ -94,6 +99,11 @@ saut de ligne dans texte libre (à la fin de chaque ligne) : `<br>`
`[imgfullspreadright_bleed]`
![imgfullspreadright_bleed](screenshots/imgfullspreadright_bleed.png)
`[doublepage_bigleft]`
![doublepage_bigleft](screenshots/doublepage_bigleft.png)
`[doublepage_bigright]`
### BREAK-PAGE
Pas d'élément avant le bloc : `[breakbefore][/breakbefore]`
screenshots/doublepage_bigleft.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 752 KiB

user/data/feed/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml
+2 -2
View File
@@ -1,4 +1,4 @@
last_checked: 1689988930
last_checked: 1690072671
data:
-
title: 'macOS 13.0 Ventura Apache Setup: Upgrading Homebrew'
@@ -24,7 +24,7 @@ data:
title: 'Big changes for Email plugin'
url: 'https://getgrav.org/blog/new-email-plugin'
date: 1665048600
nicetime: '9 months ago'
nicetime: '10 months ago'
-
title: 'Skeleton Build Automation'
url: 'https://getgrav.org/blog/skeletons-build-automation'
user/data/flex/indexes/pages.json
+1 -1
View File
File diff suppressed because one or more lines are too long
user/data/notifications/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml
+1 -1
View File
@@ -1,4 +1,4 @@
last_checked: 1689988929
last_checked: 1690085460
data:
feed:
-
user/themes/carnet-atterrissage/assets/lampe.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 22 KiB

user/themes/carnet-atterrissage/css/mep_carnet.css
+102 -26
View File
@@ -177,6 +177,10 @@ h4 {
hyphens: auto;
}
.free {
margin-bottom: 12px;
}
.labeur p:before {
content: '+ ';
font-weight: bold;
@@ -196,20 +200,39 @@ h4 {
padding-left: 3mm;
}
.latour, .lampe {
.latour, .lampe,
.latour_nohead, .lampe_nohead {
font-family: 'Novel';
font-weight: normal;
margin-top: 20mm;
margin-top: 0mm !important;
margin-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
margin-right: -16mm;
margin-bottom: 20mm;
margin-bottom: 0mm !important;
line-height: 12pt;
font-size: 8pt;
padding-right: 18mm;
padding-right: 23mm;
width: 142mm;
padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
padding-bottom: 10mm;
padding-top: 10mm;
padding-bottom: 8mm;
padding-top: 8mm;
background-color: beige;
max-height: 198mm;
}
.latour p:last-of-type,
.lampe p:last-of-type,
.latour_nohead p:last-of-type,
.lampe_nohead p:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
}
.latour ul, .latour ol,
.lampe ul, .lampe ol,
.latour_nohead ul, .latour_nohead ol,
.lampe_nohead ul, .lampe_nohead ol {
padding-left: 0;
list-style-position: inside;
}
.encart-split {
@@ -218,20 +241,13 @@ h4 {
background-color: beige;
}
.pagedjs_left_page .latour, .pagedjs_left_page .lampe {
.pagedjs_left_page .latour, .pagedjs_left_page .lampe,
.pagedjs_left_page .latour_nohead, .pagedjs_left_page .lampe_nohead {
padding-right: 10mm;
width: 128.375mm;
}
.latour[data-split-original="true"] {
padding-bottom: 1mm !important;
}
.latour[data-split-from] {
padding-top: 1mm !important;
}
.latour-header, .lampe-header {
.encart-header {
display: flex;
flex-direction: row;
align-items: center;
@@ -239,18 +255,12 @@ h4 {
font-weight: bold;
}
.latour-header img:first-of-type,
.lampe-header img:first-of-type {
.encart-header img:first-of-type {
margin-top: 1mm;
margin-right: 2mm;
width: 8mm;
}
.lampe {
padding-top: 3mm;
padding-bottom: 3mm;
}
.bibliographie {
column-count: 2;
column-gap: var(--guts);
@@ -264,11 +274,17 @@ img {
width: 100%;
}
.imgsmall {
.imgsmall,
.imgsmall_bottom {
padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
}
.imgsmall img {
.imgsmall_bottom {
break-after: page;
}
.imgsmall img,
.imgsmall_bottom img {
width: 100%;
}
@@ -329,10 +345,14 @@ img {
width: calc(62.5% - 2mm);
}
.imgfullspreadleft,
.imgfullspreadright,
.imgfullspreadright_bleedtop,
.imgfullspreadright_bleed {
.imgfullspreadright_bleed,
.doublepage_bigleft,
.doublepage_bigright {
break-before: left;
break-after: left;
width: 149mm;
@@ -408,4 +428,60 @@ img {
height: 198mm;
width: auto;
margin-left: -141mm;
}
.doublepage_bigleft,
.doublepage_bigright {
height: 128mm !important;
}
.doublepage_bigleft img,
.doublepage_bigright img {
height: 100%;
width: auto;
}
.overflow_bigimgleft,
.overflow_bigimgright {
height: 128mm !important;
}
.overflow_bigimgleft {
margin-left: -157mm;
}
.overflow_bigimgright {
display: flex;
justify-content: flex-end;
}
.doublepage_bigright img {
margin-left: 106mm;
}
.overflow_bigimgleft img,
.overflow_bigimgright img {
height: 100%;
width: auto;
}
.dp_sm_img {
position: absolute;
width: calc((var(--pagedjs-pagebox-width) / var(--cols)) * 4);
height: 71mm !important;
}
.pagedjs_right_page .dp_sm_img {
right: 0;
}
.pagedjs_left_page .dp_sm_img {
left: 0;
}
.dp_sm_img img {
position: absolute;
bottom: 0;
width: 100%;
}
user/themes/carnet-atterrissage/js/layout.js
+56 -45
View File
@@ -43,9 +43,19 @@ class setMarginTexts extends Paged.Handler {
}
// images collées en bas
let bottomImgs = document.querySelectorAll('.bottomimg, .tripleimgs_bottom, .tripleimgs2_bottom');
for (let i = 0; i < bottomImgs.length; i++) {
let page = bottomImgs[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
bottomImgs[i].style.transform = 'translateY(' + (page.getBoundingClientRect().bottom - bottomImgs[i].lastElementChild.getBoundingClientRect().bottom) + 'px)';
for (let bottomImg of bottomImgs) {
let pageBottom = bottomImg.closest('.pagedjs_area').getBoundingClientRect().bottom;
bottomImg.style.transform = 'translateY(' + (pageBottom - bottomImg.lastElementChild.getBoundingClientRect().bottom) + 'px)';
}
let bottomVignettes = document.querySelectorAll('.imgsmall_bottom'); // pour les images en bas dans les pages avec du texte
for (let bottomVignette of bottomVignettes) {
let pageBottom = bottomVignette.closest('.pagedjs_area').getBoundingClientRect().bottom;
let textBottom = bottomVignette.previousElementSibling.getBoundingClientRect().bottom;
let vignetteSize = bottomVignette.getBoundingClientRect().height;
if (bottomVignette.previousElementSibling.classList.contains('labeur')) {
bottomVignette.style.marginTop = `${(pageBottom - textBottom) - vignetteSize}px`;
}
bottomVignette.style.transform = 'translateY(12px)';
}
// éléments justifiés pas nécessaires
let justifiedSplitEl = document.querySelectorAll("[data-align-last-split-element='justify']");
@@ -58,10 +68,10 @@ class setMarginTexts extends Paged.Handler {
}
}
// images fullspread
let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright, .imgfullspreadright_bleedtop, .imgfullspreadright_bleed');
let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright, .imgfullspreadright_bleedtop, .imgfullspreadright_bleed, .doublepage_bigleft, .doublepage_bigright');
for (let i = 0; i < fullspreadEl.length; i++) {
let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src');
let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelectorAll('.pagedjs_page_content');
let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelector('.pagedjs_page_content');
let imgOverflowEl = document.createElement('div');
if (fullspreadEl[i].classList.contains('imgfullspreadleft')) {
imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right');
@@ -71,18 +81,37 @@ class setMarginTexts extends Paged.Handler {
imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleedtop-right');
} else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleed-right');
} else if (fullspreadEl[i].classList.contains('doublepage_bigleft')) {
imgOverflowEl.setAttribute('class', 'overflow_bigimgleft');
} else if (fullspreadEl[i].classList.contains('doublepage_bigright')) {
imgOverflowEl.setAttribute('class', 'overflow_bigimgright');
}
let imgOverflow = document.createElement('img');
imgOverflow.src = imgSrc;
imgOverflowEl.append(imgOverflow);
nextPage[0].append(imgOverflowEl);
nextPage.append(imgOverflowEl);
if (fullspreadEl[i].classList.contains('imgfullspreadright')
|| fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')
|| fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
let imgMargin = imgOverflowEl.getBoundingClientRect().right - fullspreadEl[i].firstElementChild.getBoundingClientRect().right;
fullspreadEl[i].firstElementChild.style.marginLeft = imgMargin + 'px';
}
if (fullspreadEl[i].classList.contains('doublepage_bigleft') || fullspreadEl[i].classList.contains('doublepage_bigright')) {
let smallImgSrc = fullspreadEl[i].lastElementChild.getAttribute('src');
fullspreadEl[i].lastElementChild.remove();
let smallImg = document.createElement('img');
smallImg.setAttribute('src', smallImgSrc);
let smallImgEl = document.createElement('div');
smallImgEl.classList.add('dp_sm_img');
smallImgEl.append(smallImg);
if (fullspreadEl[i].classList.contains('doublepage_bigleft')) {
nextPage.append(smallImgEl);
} else {
fullspreadEl[i].parentElement.append(smallImgEl);
}
}
}
// fullpage img page gauche
let fullPageImg = document.getElementsByClassName('fullpageimage');
for (let i = 0; i < fullPageImg.length; i++) {
@@ -91,57 +120,43 @@ class setMarginTexts extends Paged.Handler {
fullPageImg[i].style.marginLeft = '-22mm';
}
}
// encarts bleed
let encarts = document.querySelectorAll('.latour, .lampe');
for (let i = 0; i < encarts.length; i++) {
if (encarts[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
.classList.contains('pagedjs_right_page')) {
encarts[i].style.marginRight = '-22mm';
encarts[i].style.paddingRight = '22mm';
// encarts
let encarts = document.querySelectorAll('.latour, .lampe, .latour_nohead, .lampe_nohead');
for (let encart of encarts) {
if (encart.previousElementSibling != null) {
encart.style.marginTop = '10mm';
}
if (encarts[i].hasAttribute('data-split-original')) {
if (encart.nextElementSibling != null) {
encart.style.marginBottom = '10mm';
}
if (encart.hasAttribute('data-split-to')) {
let plainColor = document.createElement('div');
let plainHeight = encarts[i]
.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
.getBoundingClientRect().bottom - encarts[i].getBoundingClientRect().bottom;
plainColor.setAttribute('class', 'encart-split');
if (encarts[i]
.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
.classList.contains('pagedjs_right_page')) {
let plainHeight = encart.closest('.pagedjs_sheet').getBoundingClientRect().bottom - encart.getBoundingClientRect().bottom;
if (encart.closest('.pagedjs_page').classList.contains('pagedjs_right_page')) {
plainColor.style.width = "149mm";
} else {
plainColor.style.width = "129mm";
}
plainColor.style.height = plainHeight + "px";
encarts[i].parentNode.append(plainColor);
} else if (encarts[i].hasAttribute('data-split-from')) {
plainColor.style.height = `${plainHeight}px`;
encart.parentNode.append(plainColor);
}
if (encart.hasAttribute('data-split-from')) {
let plainColor = document.createElement('div');
plainColor.setAttribute('class', 'encart-split');
if (encarts[i]
.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
.classList.contains('pagedjs_right_page')) {
if (encart.closest('.pagedjs_page').classList.contains('pagedjs_right_page')) {
plainColor.style.width = "149mm";
} else {
plainColor.style.width = "129mm";
}
plainColor.style.height = "22mm";
plainColor.style.top = "-22mm";
encarts[i].parentNode.prepend(plainColor);
}
if (encarts[i].previousElementSibling === null) {
encarts[i].style.marginTop = '0';
if (encarts[i].hasAttribute('data-split-original')) {
encarts[i].parentElement.style.height = '214mm';
encarts[i].style.paddingBottom = '0 !important';
encarts[i].style.height = "100%";
encarts[i].nextElementSibling.style.height = '22mm';
encarts[i].nextElementSibling.style.bottom = '-22mm';
encarts[i].nextElementSibling.style.right = '-28.5mm';
}
encart.parentNode.prepend(plainColor);
}
}
// TITRES ATELIERS
let h3s = document.querySelectorAll('h3');
for (let h3 of h3s) {
@@ -149,7 +164,6 @@ class setMarginTexts extends Paged.Handler {
let coverPhoto;
let photoContainer = h3.nextElementSibling;
if (h3.nextSibling?.children.length === 2) {
console.log('2 toffs');
coverPhoto = h3.nextElementSibling.children[1];
let coverDessin = document.createElement('img');
coverDessin.setAttribute('src', photoContainer.firstElementChild.getAttribute('src'));
@@ -158,7 +172,6 @@ class setMarginTexts extends Paged.Handler {
coverDessin.style.height = 'auto';
photoContainer.firstElementChild.remove();
} else {
console.log('1 toff');
coverPhoto = h3.nextElementSibling.firstChild;
}
photoContainer.style.position = 'absolute';
@@ -189,8 +202,6 @@ class setMarginTexts extends Paged.Handler {
nextContainer.append(nextImg);
h3.closest('.pagedjs_page').nextElementSibling?.querySelector('.pagedjs_page_content').append(nextContainer);
} else {
console.log('0 toff');
}
h3.style.position = 'absolute';
h3.style.top = `${(h3.closest('.pagedjs_page_content').offsetHeight - h3.offsetHeight) / 3}px`;
@@ -335,7 +346,7 @@ class setMarginTexts extends Paged.Handler {
link.style.color = partieColor;
}
let lightColor = partieColor.slice(0, -1) + ', 0.1)';
let encarts = page.querySelectorAll('.lampe, .latour, .encart-split');
let encarts = page.querySelectorAll('.lampe, .latour, .lampe_nohead, .latour_nohead, .encart-split');
for (let encart of encarts) {
encart.style.backgroundColor = lightColor;
}
user/themes/carnet-atterrissage/js/parsing.js
+39 -30
View File
@@ -6,9 +6,12 @@ let baliseWords = [
'temps',
'moment',
'latour',
'latour_nohead',
'lampe',
'lampe_nohead',
'bibliographie',
'imgsmall',
'imgsmall_bottom',
'fullpage2imgs',
'fullpageimage',
'tripleimgs',
@@ -21,7 +24,9 @@ let baliseWords = [
'imgfullspreadright_bleedtop',
'imgfullspreadright_bleed',
'breakbefore',
'breakafter'
'breakafter',
`doublepage_bigright`,
`doublepage_bigleft`
];
var bodyContent = $('#body').html();
@@ -52,42 +57,46 @@ for(let i = 0; i < moments.length; i++) {
// cleaner le balisage des éléments contenant plusieurs paragraphes
let contentToParse = [];
let labeurs = document.getElementsByClassName("labeur");
for(let i = 0; i < labeurs.length; i++) {
contentToParse.push(labeurs[i]);
let labeurs = document.querySelectorAll('.labeur');
for(let labeur of labeurs) {
contentToParse.push(labeur);
}
// créer header icons pour encarts
let latours = document.getElementsByClassName("latour");
for(let i = 0; i < latours.length; i++) {
contentToParse.push(latours[i]);
let encarts = document.querySelectorAll('.latour, .latour_nohead, .lampe, .lampe_nohead');
for(let encart of encarts) {
contentToParse.push(encart);
let headContent = latours[i].firstChild
let headerEl = document.createElement('div');
headerEl.setAttribute('class', 'latour-header')
let iconImg = document.createElement('img');
let headContent = encart.firstChild
let headerEl = document.createElement('div');
headerEl.setAttribute('class', 'encart-header')
let iconImg = document.createElement('img');
if (encart.classList.contains('latour') || encart.classList.contains('latour')) {
iconImg.setAttribute('src', '/user/themes/carnet-atterrissage/assets/map.png');
headerEl.append(iconImg);
headerEl.append(headContent);
latours[i].firstChild?.remove();
latours[i].prepend(headerEl);
}
let lampes = document.getElementsByClassName("lampe");
for(let i = 0; i < lampes.length; i++) {
contentToParse.push(lampes[i]);
let headContent = lampes[i].firstChild
let headerEl = document.createElement('div');
headerEl.setAttribute('class', 'lampe-header')
let iconImg = document.createElement('img');
} else if (encart.classList.contains('lampe') || encart.classList.contains('lampe_nohead')) {
iconImg.setAttribute('src', '/user/themes/carnet-atterrissage/assets/lampe.png');
headerEl.append(iconImg);
headerEl.append(headContent);
}
lampes[i].firstChild?.remove();
lampes[i].prepend(headerEl);
if (encart.classList.contains('latour_nohead') || encart.classList.contains('lampe_nohead')) {
headerEl.style.flexDirection = 'column';
headerEl.style.alignItems = 'flex-start';
headerEl.style.fontWeight = 'normal';
iconImg.style.marginBottom = '2mm';
encart.style.paddingTop = '5mm';
encart.style.paddingBottom = '5mm';
iconImg.style.margin = '0';
iconImg.style.marginBottom = '2.5mm';
}
headerEl.append(iconImg);
headerEl.append(headContent);
encart.firstChild?.remove();
encart.prepend(headerEl);
if (encart.querySelector('.encart-header').nextElementSibling == null) {
encart.querySelector('.encart-header').style.marginBottom = '0';
}
}
for(let i = 0; i < contentToParse.length; i++) {