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

change class subtitles

Browse source
This commit is contained in:
Julie Blanc 2026-03-16 15:27:31 +01:00
parent 7851d1a4ec
commit 1783105175
2 changed files with 14 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

12
maquette-tests/assets/css/subtitles.css
View file

@ -16,31 +16,31 @@ h3, h4{
} }
.h3-before, .subtitle-before,
.h3-after{ .subtitle-after{
letter-spacing:var(--sign-spacing); letter-spacing:var(--sign-spacing);
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
line-height: var(--sign-baseline); line-height: var(--sign-baseline);
} }
.h3-line { .subtitle-line {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.h3-before{ .subtitle-before{
padding-right: 0.75ch; padding-right: 0.75ch;
} }
.h3-after{ .subtitle-after{
padding-left: 0.75ch; padding-left: 0.75ch;
position: relative; position: relative;
left: 6px; left: 6px;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.h3-text{ .subtitle-text{
/* background-color: yellow; */ /* background-color: yellow; */
flex-grow: 2; flex-grow: 2;
} }

16
maquette-tests/js/decor-subtitles.js
View file

@ -23,20 +23,20 @@ export default class itemsDecor extends Handler {
createLine(symbol, nodes) { createLine(symbol, nodes) {
const line = document.createElement("span"); const line = document.createElement("span");
line.className = "h3-line"; line.className = "subtitle-line";
const spanBefore = document.createElement("span"); const spanBefore = document.createElement("span");
spanBefore.className = "h3-before"; spanBefore.className = "subtitle-before";
spanBefore.textContent = symbol.repeat(3); spanBefore.textContent = symbol.repeat(3);
line.appendChild(spanBefore); line.appendChild(spanBefore);
const spanText = document.createElement("span"); const spanText = document.createElement("span");
spanText.className = "h3-text"; spanText.className = "subtitle-text";
nodes.forEach(node => spanText.appendChild(node)); nodes.forEach(node => spanText.appendChild(node));
line.appendChild(spanText); line.appendChild(spanText);
const spanAfter = document.createElement("span"); const spanAfter = document.createElement("span");
spanAfter.className = "h3-after"; spanAfter.className = "subtitle-after";
spanAfter.textContent = ""; spanAfter.textContent = "";
line.appendChild(spanAfter); line.appendChild(spanAfter);
@ -44,7 +44,7 @@ export default class itemsDecor extends Handler {
} }
processTitle(subtitle, symbol, withDecor, isLeft) { processTitle(subtitle, symbol, withDecor, isLeft) {
if (subtitle.querySelector(".h3-line")) return; if (subtitle.querySelector(".subtitle-line")) return;
const children = Array.from(subtitle.childNodes); const children = Array.from(subtitle.childNodes);
@ -61,16 +61,16 @@ export default class itemsDecor extends Handler {
}); });
segments.push(current); segments.push(current);
// Reconstruire le titre avec des .h3-line // Reconstruire le titre avec des .subtitle-line
subtitle.innerHTML = ""; subtitle.innerHTML = "";
segments.filter(seg => seg.length > 0).forEach(nodes => { segments.filter(seg => seg.length > 0).forEach(nodes => {
const line = this.createLine(symbol, nodes); const line = this.createLine(symbol, nodes);
subtitle.appendChild(line); subtitle.appendChild(line);
const spanAfter = line.querySelector(".h3-after"); const spanAfter = line.querySelector(".subtitle-after");
const baseHeight = line.offsetHeight; const baseHeight = line.offsetHeight;
let count = 0; let count = 0;
// h3-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é // 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) { while (count < 300) {
count++; count++;
spanAfter.textContent = symbol.repeat(count); spanAfter.textContent = symbol.repeat(count);