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

✨ feat(MainframeEmailEditor.js): Ajoute la gestion des modèles de configuration d'e-mails.

Browse Source
This commit is contained in:
Serreau Jovann
2025-08-04 16:43:46 +02:00
parent a46bea09fa
commit c404c969db
1 changed files with 572 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

573
assets/class/MainframeEmailEditor.js
View File

@@ -118,7 +118,6 @@ export class MainframeEmailEditor extends HTMLElement {
let results = [];
evt.to.querySelectorAll('li').forEach((ele, pos) => {
if (ele.classList.contains('area-item')) {
let type = ele.classList[1];
let element = document.createElement('li');
element.classList = "area-block";
@@ -716,6 +715,578 @@ export class MainframeEmailEditor extends HTMLElement {
});
this.appendChild(modal);
let cf = JSON.parse(configTemplate);
Object.entries(cf).forEach(([key, value]) => {
if(value.type == "1col") {
let config = {
backgroundColor: value.config.backgroundColor,
paddingLeft: value.config.paddingLeft,
paddingRight: value.config.paddingRight,
paddingTop: value.config.paddingTop,
paddingBottom: value.config.paddingBottom,
}
let element = document.createElement('li');
element.classList = "area-block";
element.setAttribute('type', value.type);
element.setAttribute('config', JSON.stringify(config));
element.innerHTML = `
<div class="area-block-header">
<div class="area-name">1 Colonne</div>
<div class="area-settings">
<button class="edit">Modifier</button>
<button class="remove">X</button>
</div>
</div>
<div class="area-block-body">
</div>
`;
content.append(element);
element.querySelector('.remove').addEventListener('click', (e) => {
e.preventDefault();
element.remove();
})
let ulCol = document.createElement("ul");
ulCol.style.background = config.backgroundColor;
element.querySelector('.area-block-body').appendChild(ulCol);
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="input-padding">
<label class="td">Espacement</label>
<div class="display">
<div class="center">Module</div>
<div class="top">${config.paddingTop}px</div>
<div class="bottom">${config.paddingBottom}px</div>
<div class="left">${config.paddingLeft}px</div>
<div class="right">${config.paddingRight}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_input" value="${config.paddingTop}">
</div>
<div class="vl">
<label>Bas</label>
<input type="range" min="0" max="50" step="5" class="bot_input" value="${config.paddingBottom}">
</div>
<div class="vl">
<label>Gauche</label>
<input type="range" min="0" max="50" step="5" class="left_input" value="${config.paddingLeft}">
</div>
<div class="vl">
<label>Droite</label>
<input type="range" min="0" max="50" step="5" class="right_input" value="${config.paddingRight}">
</div>
</div>
</div>
`;
sideModal.querySelector('.right_input').addEventListener('input',(event)=>{
sideModal.querySelector('.right').innerHTML = event.target.value+"px";
element.querySelector('ul').style.paddingRight = event.target.value+"px";
})
sideModal.querySelector('.left_input').addEventListener('input',(event)=>{
sideModal.querySelector('.left').innerHTML = event.target.value+"px";
element.querySelector('ul').style.paddingLeft = event.target.value+"px";
})
sideModal.querySelector('.bot_input').addEventListener('input',(event)=>{
sideModal.querySelector('.bottom').innerHTML = event.target.value+"px";
element.querySelector('ul').style.paddingBottom = event.target.value+"px";
})
sideModal.querySelector('.top_input').addEventListener('input',(event)=>{
sideModal.querySelector('.top').innerHTML = event.target.value+"px";
element.querySelector('ul').style.paddingTop = event.target.value+"px";
})
sideModal.querySelector('.areaColor').addEventListener('input',(event)=>{
element.querySelector('ul').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,
paddingLeft: sideModal.querySelector('.left_input').value,
paddingRight: sideModal.querySelector('.right_input').value,
paddingTop: sideModal.querySelector('.top_input').value,
paddingBottom: sideModal.querySelector('.bot_input').value,
}
}));
})
modal.appendChild(sideModal);
})
}
if(value.type == "5050col") {
let config = {
backgroundColor: value.config.backgroundColor,
backgroundColor_1: value.config.backgroundColor_1,
paddingLeft_1: value.config.paddingLeft_1,
paddingRight_1: value.config.paddingRight_1,
paddingTop_1: value.config.paddingTop_1,
paddingBottom_1: value.config.paddingBottom_1,
backgroundColor_2: value.config.backgroundColor_2,
paddingLeft_2: value.config.paddingLeft_2,
paddingRight_2: value.config.paddingRight_2,
paddingTop_2: value.config.paddingTop_2,
paddingBottom_2: value.config.paddingBottom_2,
}
let element = document.createElement('li');
element.classList = "area-block";
element.setAttribute('type', value.type);
element.setAttribute('config', JSON.stringify(config));
element.innerHTML = `
<div class="area-block-header">
<div class="area-name">2 Colonne</div>
<div class="area-settings">
<button class="edit">Modifier</button>
<button class="remove">X</button>
</div>
</div>
<div class="area-block-body">
</div>
`;
content.append(element);
element.querySelector('.remove').addEventListener('click', (e) => {
e.preventDefault();
element.remove();
})
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(value.type == "505050col") {
let config = {
backgroundColor: value.config.backgroundColor,
backgroundColor_1: value.config.backgroundColor_1,
paddingLeft_1: value.config.paddingLeft_1,
paddingRight_1: value.config.paddingRight_1,
paddingTop_1: value.config.paddingTop_1,
paddingBottom_1: value.config.paddingBottom_1,
backgroundColor_2: value.config.backgroundColor_2,
paddingLeft_2: value.config.paddingLeft_2,
paddingRight_2: value.config.paddingRight_2,
paddingTop_2: value.config.paddingTop_2,
paddingBottom_2: value.config.paddingBottom_2,
backgroundColor_3: value.config.backgroundColor_3,
paddingLeft_3: value.config.paddingLeft_3,
paddingRight_3: value.config.paddingRight_3,
paddingTop_3: value.config.paddingTop_3,
paddingBottom_3: value.config.paddingBottom_3,
}
let element = document.createElement('li');
element.classList = "area-block";
element.setAttribute('type', value.type);
element.setAttribute('config', JSON.stringify(config));
element.innerHTML = `
<div class="area-block-header">
<div class="area-name">3 Colonne</div>
<div class="area-settings">
<button class="edit">Modifier</button>
<button class="remove">X</button>
</div>
</div>
<div class="area-block-body">
</div>
`;
content.append(element);
element.querySelector('.remove').addEventListener('click', (e) => {
e.preventDefault();
element.remove();
})
let templateCol = document.createElement("div");
templateCol.classList = "grid grid-cols-3 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 ulCol3 = document.createElement("ul");
ulCol3.style.background = config.backgroundColor_3;
templateCol.appendChild(ulCol3);
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_2}">
</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 class="col">
<span>Colonne 3 </span>
<div class="input-background">
<label>Fond de zone</label>
<input type="color" class="areaColorCol3" required value="${config.backgroundColor_3}">
</div>
<div class="input-padding">
<label class="td">Espacement</label>
<div class="display">
<div class="center">Module</div>
<div class="top3">${config.paddingTop_3}px</div>
<div class="bottom3">${config.paddingBottom_3}px</div>
<div class="left3">${config.paddingLeft_3}px</div>
<div class="right3">${config.paddingRight_3}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_input3" value="${config.paddingTop_3}">
</div>
<div class="vl">
<label>Bas</label>
<input type="range" min="0" max="50" step="5" class="bot_input3" value="${config.paddingBottom_3}">
</div>
<div class="vl">
<label>Gauche</label>
<input type="range" min="0" max="50" step="5" class="left_input3" value="${config.paddingLeft_3}">
</div>
<div class="vl">
<label>Droite</label>
<input type="range" min="0" max="50" step="5" class="right_input3" value="${config.paddingRight_3}">
</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('.top_input3').addEventListener('input',(event)=>{
sideModal.querySelector('.top3').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('.bot_input3').addEventListener('input',(event)=>{
sideModal.querySelector('.bottom3').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('.left_input3').addEventListener('input',(event)=>{
sideModal.querySelector('.left3').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('.right_input3').addEventListener('input',(event)=>{
sideModal.querySelector('.right3').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('.areaColorCol3').addEventListener('input',(event)=>{
element.querySelector('.area-block-body').querySelector('.grid').querySelectorAll('ul')[2].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,
backgroundColor_3: sideModal.querySelector('.areaColorCol3').value,
paddingTop_1: sideModal.querySelector('.top_input1').value,
paddingTop_2: sideModal.querySelector('.top_input2').value,
paddingTop_3: sideModal.querySelector('.top_input3').value,
paddingBottom_1: sideModal.querySelector('.bot_input1').value,
paddingBottom_2: sideModal.querySelector('.bot_input2').value,
paddingBottom_3: sideModal.querySelector('.bot_input3').value,
paddingLeft_1: sideModal.querySelector('.right_input1').value,
paddingLeft_2: sideModal.querySelector('.right_input2').value,
paddingLeft_3: sideModal.querySelector('.right_input3').value,
paddingRight_1: sideModal.querySelector('.right_input1').value,
paddingRight_2: sideModal.querySelector('.right_input2').value,
paddingRight_3: sideModal.querySelector('.right_input3').value,
}
}));
})
modal.appendChild(sideModal);
});
}
})
})
this.appendChild(button);
}