1439 lines
95 KiB
JavaScript
1439 lines
95 KiB
JavaScript
import {disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks} from 'body-scroll-lock';
|
|
import sortable from "sortablejs/src/Sortable.js";
|
|
|
|
import {
|
|
InlineEditor,
|
|
Autosave,
|
|
Bold,
|
|
Code,
|
|
Essentials,
|
|
FontBackgroundColor,
|
|
FontColor,
|
|
FontFamily,
|
|
FontSize,
|
|
Highlight,
|
|
ImageEditing,
|
|
ImageUtils,
|
|
Italic,
|
|
Paragraph,
|
|
RemoveFormat,
|
|
Strikethrough,
|
|
Subscript,
|
|
Superscript,
|
|
Underline
|
|
} from '../editor/ckeditor5.js';
|
|
import translations from '../editor/translations/fr.js';
|
|
|
|
export class MainframeEmailEditor extends HTMLElement {
|
|
connectedCallback() {
|
|
|
|
let template = document.body.querySelector('#template_content')
|
|
let configTemplate = template.getAttribute('value');
|
|
|
|
|
|
|
|
let element = this;
|
|
let button = document.createElement('button');
|
|
button.innerText = "Modifier le template";
|
|
button.classList = "px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition font-semibold w-full"
|
|
button.addEventListener('click', (event) => {
|
|
|
|
disableBodyScroll(this)
|
|
event.preventDefault();
|
|
|
|
console.warn("Created modal editor")
|
|
console.warn("created topbar control")
|
|
console.warn("updated left color area")
|
|
console.warn("create center area")
|
|
console.warn("create left color")
|
|
|
|
|
|
let modal = document.createElement('div');
|
|
modal.classList.add("email-builder-modal");
|
|
modal.innerHTML = `
|
|
<div class="email-builder-toolbar">
|
|
<h2>EsyMail - Editor</h2>
|
|
<div class="email-builder-actions">
|
|
<a class="save px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white transition font-semibold">
|
|
Sauvegarder
|
|
</a>
|
|
<a class="closed px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white transition font-semibold">
|
|
Fermer
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="email-content grid grid-cols-5 grid-rows-1 gap-4">
|
|
<ul class="area">
|
|
<li class="area-item 1col">
|
|
<span>100%</span>
|
|
</li>
|
|
<li class="area-item 5050col">
|
|
<span>50% / 50% Colonne</span>
|
|
</li>
|
|
<li class="area-item 505050col">
|
|
<span>50% / 50% / 50% Colonne</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="content col-span-3"></ul>
|
|
<ul class="module col-start-5">
|
|
<li class="module-item text">
|
|
<span>Texte</span>
|
|
</li>
|
|
<li class="module-item image">
|
|
<span>Image</span>
|
|
</li>
|
|
<li class="module-item social">
|
|
<span>Réseaux Sociaux</span>
|
|
</li>
|
|
<li class="module-item lien">
|
|
<span>Lien</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
`;
|
|
|
|
let content = modal.querySelector('.content');
|
|
|
|
let save = modal.querySelector('.save');
|
|
save.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
modal.remove();
|
|
|
|
let configs = {};
|
|
content.querySelectorAll('.area-block').forEach((block,posBlock) => {
|
|
configs[posBlock] = {
|
|
type: block.getAttribute('type'),
|
|
config: JSON.parse(block.getAttribute('config')),
|
|
modules: {}
|
|
}
|
|
})
|
|
console.log(configs);
|
|
|
|
template.setAttribute('value',JSON.stringify(configs));
|
|
template.value = JSON.stringify(configs);
|
|
|
|
})
|
|
let closed = modal.querySelector('.closed');
|
|
|
|
closed.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
modal.remove();
|
|
enableBodyScroll(this)
|
|
})
|
|
|
|
|
|
let area = modal.querySelector('.area');
|
|
let module = modal.querySelector('.module');
|
|
new sortable(area, {
|
|
sort: false,
|
|
group: {
|
|
name: 'area',
|
|
pull: 'clone',
|
|
put: false,
|
|
},
|
|
});
|
|
new sortable(content, {
|
|
group: {
|
|
name: 'area',
|
|
revertClone: true,
|
|
},
|
|
onSort: function (/**Event*/evt) {
|
|
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";
|
|
element.setAttribute('type', type);
|
|
|
|
let config = {}
|
|
let name = "";
|
|
if (type == "1col") {
|
|
name = "1 Colonne"
|
|
config = {
|
|
backgroundColor: '#ffffff',
|
|
paddingLeft: 0,
|
|
paddingRight: 0,
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
}
|
|
} else if (type == "5050col") {
|
|
name = "2 Colonne"
|
|
config = {
|
|
backgroundColor: '#ffffff',
|
|
backgroundColor_1: '#ffffff',
|
|
paddingLeft_1: 0,
|
|
paddingRight_1: 0,
|
|
paddingTop_1: 0,
|
|
paddingBottom_1: 0,
|
|
backgroundColor_2: '#ffffff',
|
|
paddingLeft_2: 0,
|
|
paddingRight_2: 0,
|
|
paddingTop_2: 0,
|
|
paddingBottom_2: 0,
|
|
}
|
|
}
|
|
if (type == "505050col") {
|
|
name = "3 Colonne"
|
|
config = {
|
|
backgroundColor: '#ffffff',
|
|
backgroundColor_1: '#ffffff',
|
|
paddingLeft_1: 0,
|
|
paddingRight_1: 0,
|
|
paddingTop_1: 0,
|
|
paddingBottom_1: 0,
|
|
backgroundColor_2: '#ffffff',
|
|
paddingLeft_2: 0,
|
|
paddingRight_2: 0,
|
|
paddingTop_2: 0,
|
|
paddingBottom_2: 0,
|
|
backgroundColor_3: '#ffffff',
|
|
paddingLeft_3: 0,
|
|
paddingRight_3: 0,
|
|
paddingTop_3: 0,
|
|
paddingBottom_3: 0,
|
|
}
|
|
}
|
|
element.setAttribute('config', JSON.stringify(config));
|
|
|
|
element.innerHTML = `
|
|
<div class="area-block-header">
|
|
<div class="area-name">${name}</div>
|
|
<div class="area-settings">
|
|
<button class="edit">Modifier</button>
|
|
<button class="remove">X</button>
|
|
</div>
|
|
</div>
|
|
<div class="area-block-body">
|
|
|
|
</div>
|
|
`;
|
|
|
|
if (type == "505050col") {
|
|
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);
|
|
});
|
|
|
|
}
|
|
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;
|
|
element.querySelector('.area-block-body').appendChild(ulCol);
|
|
|
|
|
|
new sortable(ulCol,{
|
|
group: {
|
|
name: 'module',
|
|
revertClone: true,
|
|
},
|
|
onSort:(event)=>{
|
|
let configModules = {};
|
|
event.to.querySelectorAll('li').forEach((eleModule, posModule) => {
|
|
if(eleModule.classList.contains('module-item')){
|
|
let mType = eleModule.classList[1];
|
|
let moduleItem = document.createElement('div');
|
|
moduleItem.classList = 'md-ctrl '+mType;
|
|
let name = "";
|
|
if(mType == "text")
|
|
name = "Texte"
|
|
if(mType == "image")
|
|
name = "Image"
|
|
if(mType == "lien")
|
|
name = "Lien"
|
|
if(mType == "social")
|
|
name = "Réseaux Sociaux"
|
|
moduleItem.innerHTML = `<span>${name}</span><div class="actions">I X</div>`;
|
|
eleModule.replaceWith(moduleItem);
|
|
}
|
|
});
|
|
console.log(configModules)
|
|
}
|
|
})
|
|
|
|
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);
|
|
})
|
|
}
|
|
|
|
ele.replaceWith(element);
|
|
element.querySelector('.remove').addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
element.remove();
|
|
})
|
|
results.push({
|
|
pos: pos,
|
|
elt: element,
|
|
})
|
|
} else {
|
|
results.push({
|
|
pos: pos,
|
|
elt: ele
|
|
})
|
|
}
|
|
})
|
|
}
|
|
});
|
|
new sortable(module, {
|
|
sort: false,
|
|
group: {
|
|
name: 'module',
|
|
pull: 'clone',
|
|
put: false,
|
|
},
|
|
});
|
|
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);
|
|
|
|
new sortable(ulCol,{
|
|
sort: true,
|
|
group: {
|
|
name: 'module',
|
|
revertClone: true,
|
|
},
|
|
onSort:(event)=>{
|
|
let configModules = {};
|
|
event.to.querySelectorAll('li').forEach((eleModule, posModule) => {
|
|
if(eleModule.classList.contains('module-item')){
|
|
let mType = eleModule.classList[1];
|
|
let moduleItem = document.createElement('div');
|
|
moduleItem.classList = 'md-ctrl '+mType;
|
|
let name = "";
|
|
if(mType == "text")
|
|
name = "Texte"
|
|
if(mType == "image")
|
|
name = "Image"
|
|
if(mType == "lien")
|
|
name = "Lien"
|
|
if(mType == "social")
|
|
name = "Réseaux Sociaux"
|
|
moduleItem.innerHTML = `<span>${name}</span><div class="actions">
|
|
<button class="edit-module">Modifier</button>
|
|
<button class="remove-module">X</button>
|
|
</div>`;
|
|
moduleItem.querySelector('.edit-module').addEventListener('click', (e)=>{
|
|
e.preventDefault();
|
|
let sideEditor = document.createElement('div');
|
|
sideEditor.classList = "side-editor";
|
|
sideEditor.innerHTML = `
|
|
<div class="closed-btn-m">Fermer</div>
|
|
text -> editor
|
|
image -> upload
|
|
link -> input + opt button
|
|
social -> fb / insta / linkedin / tiktok
|
|
`;
|
|
if(mType == "text") {
|
|
let textarea = document.createElement('div');
|
|
textarea.classList = "editor-container editor-container_inline-editor";
|
|
textarea.innerHTML = `<div class="editor-container__editor"><div id="editor"></div></div>`;
|
|
|
|
sideEditor.appendChild(textarea);
|
|
|
|
const LICENSE_KEY = 'GPL';
|
|
const editorConfig = {
|
|
toolbar: {
|
|
items: [
|
|
'undo',
|
|
'redo',
|
|
'|',
|
|
'fontSize',
|
|
'fontFamily',
|
|
'fontColor',
|
|
'fontBackgroundColor',
|
|
'|',
|
|
'bold',
|
|
'italic',
|
|
'underline',
|
|
'strikethrough',
|
|
'subscript',
|
|
'superscript',
|
|
'code',
|
|
'removeFormat',
|
|
'|',
|
|
'highlight'
|
|
],
|
|
shouldNotGroupWhenFull: false
|
|
},
|
|
plugins: [
|
|
Autosave,
|
|
Bold,
|
|
Code,
|
|
Essentials,
|
|
FontBackgroundColor,
|
|
FontColor,
|
|
FontFamily,
|
|
FontSize,
|
|
Highlight,
|
|
ImageEditing,
|
|
ImageUtils,
|
|
Italic,
|
|
Paragraph,
|
|
RemoveFormat,
|
|
Strikethrough,
|
|
Subscript,
|
|
Superscript,
|
|
Underline
|
|
],
|
|
fontFamily: {
|
|
supportAllValues: true
|
|
},
|
|
fontSize: {
|
|
options: [10, 12, 14, 'default', 18, 20, 22],
|
|
supportAllValues: true
|
|
},
|
|
initialData:
|
|
"<h2>Congratulations on setting up CKEditor 5! 🎉</h2>\n<p>\n\tYou've successfully created a CKEditor 5 project. This powerful text editor\n\twill enhance your application, enabling rich text editing capabilities that\n\tare customizable and easy to use.\n</p>\n<h3>What's next?</h3>\n<ol>\n\t<li>\n\t\t<strong>Integrate into your app</strong>: time to bring the editing into\n\t\tyour application. Take the code you created and add to your application.\n\t</li>\n\t<li>\n\t\t<strong>Explore features:</strong> Experiment with different plugins and\n\t\ttoolbar options to discover what works best for your needs.\n\t</li>\n\t<li>\n\t\t<strong>Customize your editor:</strong> Tailor the editor's\n\t\tconfiguration to match your application's style and requirements. Or\n\t\teven write your plugin!\n\t</li>\n</ol>\n<p>\n\tKeep experimenting, and don't hesitate to push the boundaries of what you\n\tcan achieve with CKEditor 5. Your feedback is invaluable to us as we strive\n\tto improve and evolve. Happy editing!\n</p>\n<h3>Helpful resources</h3>\n<p>\n\t<i>An editor without the </i><code>Link</code>\n\t<i>plugin? That's brave! We hope the links below will be useful anyway </i>😉\n</p>\n<ul>\n\t<li>📝 Trial sign up: https://portal.ckeditor.com/checkout?plan=free,</li>\n\t<li>📕 Documentation: https://ckeditor.com/docs/ckeditor5/latest/installation/index.html,</li>\n\t<li>⭐️ GitHub (star us if you can!): https://github.com/ckeditor/ckeditor5,</li>\n\t<li>🏠 CKEditor Homepage: https://ckeditor.com,</li>\n\t<li>🧑💻 CKEditor 5 Demos: https://ckeditor.com/ckeditor-5/demo/</li>\n</ul>\n<h3>Need help?</h3>\n<p>\n\tSee this text, but the editor is not starting up? Check the browser's\n\tconsole for clues and guidance. It may be related to an incorrect license\n\tkey if you use premium features or another feature-related requirement. If\n\tyou cannot make it work, file a GitHub issue, and we will help as soon as\n\tpossible!\n</p>\n",
|
|
language: 'fr',
|
|
licenseKey: LICENSE_KEY,
|
|
placeholder: 'Type or paste your content here!',
|
|
translations: [translations]
|
|
};
|
|
InlineEditor.create(textarea, editorConfig);
|
|
|
|
}
|
|
sideEditor.querySelector('.closed-btn-m').addEventListener('click', (e)=>{
|
|
e.preventDefault();
|
|
sideEditor.remove();
|
|
})
|
|
modal.appendChild(sideEditor);
|
|
})
|
|
moduleItem.querySelector('.remove-module').addEventListener('click', (e)=>{
|
|
e.preventDefault();
|
|
moduleItem.remove();
|
|
})
|
|
eleModule.replaceWith(moduleItem);
|
|
}
|
|
});
|
|
|
|
}
|
|
})
|
|
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);
|
|
}
|
|
}
|