admin/e-cosplay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(MainframeEmailEditor): Ajoute l'édition des colonnes 50/50 avec couleurs et espacements.

Browse Source
This commit is contained in:
Serreau Jovann
2025-08-04 15:10:35 +02:00
parent d8ec096db5
commit d93b038574
2 changed files with 183 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/admin.scss
View File

@@ -72,6 +72,20 @@ input {
top: 0;
right: 0;
border-left: 1px solid #cdcdcd;
.col{
border-top: 1px solid #cdcdcd;
margin-top: 0.5rem;
span {
color: black;
font-weight: bold;
text-align: center;
text-transform: uppercase;
width: 100%;
font-size: 1.25rem;
display: block;
}
}
.td {
font-weight: bold;
color: black;
@@ -101,24 +115,32 @@ input {
transform: translate(-50%, -50%);
font-weight: bold;
}
.top1,
.top2,
.top {
position: absolute;
left: 50%;
top: 10px;
transform: translate(-50%,15px);
}
.left1,
.left2,
.left {
position: absolute;
left: 30%;
top: 50%;
transform: translateY(-50%);
}
.right1,
.right2,
.right {
position: absolute;
right: 30%;
top: 50%;
transform: translateY(-50%);
}
.bottom1,
.bottom2,
.bottom {
position: absolute;
left: 50%;

161
assets/class/MainframeEmailEditor.js
View File

@@ -110,6 +110,7 @@ export class MainframeEmailEditor extends HTMLElement {
} else if (type == "5050col") {
name = "2 Colonne"
config = {
backgroundColor: '#ffffff',
backgroundColor_1: '#ffffff',
paddingLeft_1: 0,
paddingRight_1: 0,
@@ -157,6 +158,166 @@ export class MainframeEmailEditor extends HTMLElement {
</div>
`;
if (type == "5050col") {
let templateCol = document.createElement("div");
templateCol.classList = "grid grid-cols-2 gap-2 p-2";
templateCol.style.background = config.backgroundColor;
element.querySelector('.area-block-body').appendChild(templateCol);
let ulCol1 = document.createElement("ul");
ulCol1.style.background = config.backgroundColor_1;
templateCol.appendChild(ulCol1);
let ulCol2 = document.createElement("ul");
ulCol2.style.background = config.backgroundColor_2;
templateCol.appendChild(ulCol2);
let edit = element.querySelector('.edit');
edit.addEventListener('click', (event) => {
event.preventDefault();
edit.addEventListener('updateArea', (event) => {
element.setAttribute('config', JSON.stringify(event.detail));
})
let sideModal = document.createElement('div');
sideModal.classList ="side-modal";
sideModal.innerHTML = `
<div class="closed-btn">Fermer</div>
<div class="input-background">
<label>Fond de zone</label>
<input type="color" class="areaColor" required value="${config.backgroundColor}">
</div>
<div class="col">
<span>Colonne 1 </span>
<div class="input-background">
<label>Fond de zone</label>
<input type="color" class="areaColorCol1" required value="${config.backgroundColor_1}">
</div>
<div class="input-padding">
<label class="td">Espacement</label>
<div class="display">
<div class="center">Module</div>
<div class="top1">${config.paddingTop_1}px</div>
<div class="bottom1">${config.paddingBottom_1}px</div>
<div class="left1">${config.paddingLeft_1}px</div>
<div class="right1">${config.paddingRight_1}px</div>
</div>
<div class="input grid grid-cols-2">
<div class="vl">
<label>Haut</label>
<input type="range" min="0" max="50" step="5" class="top_input1" value="${config.paddingTop_1}">
</div>
<div class="vl">
<label>Bas</label>
<input type="range" min="0" max="50" step="5" class="bot_input1" value="${config.paddingBottom_1}">
</div>
<div class="vl">
<label>Gauche</label>
<input type="range" min="0" max="50" step="5" class="left_input1" value="${config.paddingLeft_1}">
</div>
<div class="vl">
<label>Droite</label>
<input type="range" min="0" max="50" step="5" class="right_input1" value="${config.paddingRight_1}">
</div>
</div>
</div>
</div>
<div class="col">
<span>Colonne 2 </span>
<div class="input-background">
<label>Fond de zone</label>
<input type="color" class="areaColorCol2" required value="${config.backgroundColor_1}">
</div>
<div class="input-padding">
<label class="td">Espacement</label>
<div class="display">
<div class="center">Module</div>
<div class="top2">${config.paddingTop_2}px</div>
<div class="bottom2">${config.paddingBottom_2}px</div>
<div class="left2">${config.paddingLeft_2}px</div>
<div class="right2">${config.paddingRight_2}px</div>
</div>
<div class="input grid grid-cols-2">
<div class="vl">
<label>Haut</label>
<input type="range" min="0" max="50" step="5" class="top_input2" value="${config.paddingTop_2}">
</div>
<div class="vl">
<label>Bas</label>
<input type="range" min="0" max="50" step="5" class="bot_input2" value="${config.paddingBottom_2}">
</div>
<div class="vl">
<label>Gauche</label>
<input type="range" min="0" max="50" step="5" class="left_input2" value="${config.paddingLeft_2}">
</div>
<div class="vl">
<label>Droite</label>
<input type="range" min="0" max="50" step="5" class="right_input2" value="${config.paddingRight_2}">
</div>
</div>
</div>
</div>
`;
sideModal.querySelector('.top_input1').addEventListener('input',(event)=>{
sideModal.querySelector('.top1').innerHTML = event.target.value+"px";
})
sideModal.querySelector('.top_input2').addEventListener('input',(event)=>{
sideModal.querySelector('.top2').innerHTML = event.target.value+"px";
})
sideModal.querySelector('.bot_input1').addEventListener('input',(event)=>{
sideModal.querySelector('.bottom1').innerHTML = event.target.value+"px";
})
sideModal.querySelector('.bot_input2').addEventListener('input',(event)=>{
sideModal.querySelector('.bottom2').innerHTML = event.target.value+"px";
})
sideModal.querySelector('.left_input1').addEventListener('input',(event)=>{
sideModal.querySelector('.left1').innerHTML = event.target.value+"px";
})
sideModal.querySelector('.left_input2').addEventListener('input',(event)=>{
sideModal.querySelector('.left2').innerHTML = event.target.value+"px";
})
sideModal.querySelector('.right_input1').addEventListener('input',(event)=>{
sideModal.querySelector('.right1').innerHTML = event.target.value+"px";
})
sideModal.querySelector('.right_input2').addEventListener('input',(event)=>{
sideModal.querySelector('.right2').innerHTML = event.target.value+"px";
})
sideModal.querySelector('.areaColor').addEventListener('input',(event)=>{
element.querySelector('.area-block-body').querySelector('.grid').style.background = event.target.value;
})
sideModal.querySelector('.areaColorCol1').addEventListener('input',(event)=>{
element.querySelector('.area-block-body').querySelector('.grid').querySelectorAll('ul')[0].style.background = event.target.value;
})
sideModal.querySelector('.areaColorCol2').addEventListener('input',(event)=>{
element.querySelector('.area-block-body').querySelector('.grid').querySelectorAll('ul')[1].style.background = event.target.value;
})
sideModal.querySelector('.closed-btn').addEventListener('click', (event) => {
event.preventDefault();
sideModal.remove();
edit.dispatchEvent(new CustomEvent('updateArea',{
detail: {
backgroundColor: sideModal.querySelector('.areaColor').value,
backgroundColor_1: sideModal.querySelector('.areaColorCol1').value,
backgroundColor_2: sideModal.querySelector('.areaColorCol2').value,
paddingTop_1: sideModal.querySelector('.top_input1').value,
paddingTop_2: sideModal.querySelector('.top_input2').value,
paddingBottom_1: sideModal.querySelector('.bot_input1').value,
paddingBottom_2: sideModal.querySelector('.bot_input2').value,
paddingLeft_1: sideModal.querySelector('.right_input1').value,
paddingLeft_2: sideModal.querySelector('.right_input2').value,
paddingRight_1: sideModal.querySelector('.right_input1').value,
paddingRight_2: sideModal.querySelector('.right_input2').value,
}
}));
})
modal.appendChild(sideModal);
});
}
if (type == "1col") {
let ulCol = document.createElement("ul");
ulCol.style.background = config.backgroundColor;