groupe1cir1n/groupe1CIR1Njs
1
0
Fork 0
mirror of https://github.com/groupe1cir1n/groupe1CIR1Njs.git synced 2026-01-18 16:37:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

add the possiblilty to edit the name and fix the click outside the modal to close the modal

Browse Source
This commit is contained in:
Félix MARQUET
2023-05-31 01:35:27 +02:00
parent de7135284d
commit 9673b2af23
2 changed files with 51 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
membres.html
View File

@@ -54,7 +54,7 @@
<img src="src/img/card/ayoub.png" alt="Ayoub Karine" class="cardImg">
</div>
<div class="BigCardHover">
<h2>Ayoub Karine</h2>
<h2 class="name">Ayoub Karine</h2>
<p class="CardDesc">Enseignant chercheur<br>ISEN Yncréa Ouest -Nantes<br><a href="mailto:ayoub.karine@isen-ouest.ycnrea.fr" class="CardDesc">ayoub.karine[at]isen-ouest.ycnrea.fr</a></p>
<div class="line"></div>
<div class="Icons">
@@ -80,7 +80,7 @@
<img src="src/img/card/ayoub.png" alt="Ayoub Karine" class="cardImg">
</div>
<div class="BigCardHover">
<h2>Ayoub Karine</h2>
<h2 class="name">Ayoub Karine</h2>
<p class="CardDesc">Enseignant chercheur<br>ISEN Yncréa Ouest -Nantes<br><a href="mailto:ayoub.karine@isen-ouest.ycnrea.fr" class="CardDesc">ayoub.karine[at]isen-ouest.ycnrea.fr</a></p>
<div class="line"></div>
<div class="Icons">
@@ -103,7 +103,7 @@
<div class="BigCard Card">
<img src="src/img/card/maher.png" alt="Maher Jridi" class="cardImg">
<div class="BigCardHover">
<h2>Maher Jridi</h2>
<h2 class="name">Maher Jridi</h2>
<p class="CardDesc">Enseignant chercheur, HDR<br>ISEN Yncréa Ouest -Nantes<br><a href="mailto:maher.jridi@isen-ouest.ycnrea.fr" class="CardDesc">maher.jridi[at]isen-ouest.ycnrea.fr</a></p>
<div class="line"></div>
<div class="Icons">
@@ -124,7 +124,7 @@
<div class="BigCard">
<img src="src/img/card/maher.png" alt="Maher Jridi" class="cardImg">
<div class="BigCardHover">
<h2>Maher Jridi</h2>
<h2 class="name">Maher Jridi</h2>
<p class="CardDesc">Enseignant chercheur, HDR<br>ISEN Yncréa Ouest -Nantes<br><a href="mailto:maher.jridi@isen-ouest.ycnrea.fr" class="CardDesc">maher.jridi[at]isen-ouest.ycnrea.fr</a></p>
<div class="line"></div>
<div class="Icons">
@@ -147,7 +147,7 @@
<div class="SmallCard Card">
<img alt="Sylvain Lefebvre" class="cardImg">
<div class="BigCardHover">
<h2>Sylvain Lefebvre</h2>
<h2 class="name">Sylvain Lefebvre</h2>
<p class="CardDesc">Période: 01/2022 au 04/2023<br>Projet : Industrie 4.0<br>ISEN Yncréa Ouest –Nantes<br><a href="mailto:sylvain.lefebvre@isen-ouest.yncrea.fr" class="CardDesc">sylvain.lefebvre[at]isen-ouest.yncrea.fr</a></p>
</div>
</div>
@@ -157,7 +157,7 @@
<div class="SmallCard">
<img alt="Sylvain Lefebvre" class="cardImg">
<div class="BigCardHover">
<h2>Sylvain Lefebvre</h2>
<h2 class="name">Sylvain Lefebvre</h2>
<p class="CardDesc">Période: 01/2022 au 04/2023<br>Projet : Industrie 4.0<br>ISEN Yncréa Ouest –Nantes<br><a href="mailto:sylvain.lefebvre@isen-ouest.yncrea.fr" class="CardDesc">sylvain.lefebvre[at]isen-ouest.yncrea.fr</a></p>
</div>
</div>
@@ -169,7 +169,7 @@
<div class="SmallCard Card">
<img src="src/img/card/salima.png" alt="Salima Bourbia" class="cardImg">
<div class="BigCardHover">
<h2>Salima Bourbia</h2>
<h2 class="name">Salima Bourbia</h2>
<p class="CardDesc">Inscrit depuis: 12/2020<br>Encadrants: Ayoub Karine, Maher Jridi<br>ISEN Yncréa Ouest –Nantes<br>Sujet : Evaluation de la qualité des nuages de points 3D</p>
</div>
</div>
@@ -179,7 +179,7 @@
<div class="SmallCard">
<img src="src/img/card/salima.png" alt="Salima Bourbia" class="cardImg">
<div class="BigCardHover">
<h2>Salima Bourbia</h2>
<h2 class="name">Salima Bourbia</h2>
<p class="CardDesc">Inscrit depuis: 12/2020<br>Encadrants: Ayoub Karine, Maher Jridi<br>ISEN Yncréa Ouest –Nantes<br>Sujet : Evaluation de la qualité des nuages de points 3D</p>
</div>
</div>
@@ -191,7 +191,7 @@
<div class="SmallCard Card">
<img src="src/img/card/djamel.png" alt="Djamel Benarab" class="cardImg">
<div class="BigCardHover">
<h2>Djamel Benarab</h2>
<h2 class="name">Djamel Benarab</h2>
<p class="CardDesc">Thèse soutenue le 02/12/2016<br>Sujet : Suivi automatique de nageurs à partir des séquences vidéo : application à l'analyse des performances<br>Encadrants : Ayman Alfalou, Thibault Napoléon, Antoine Verney, Philippe Hellard<br>Poste actuel : Ingénieur R&D chez Diota</p>
</div>
</div>
@@ -201,7 +201,7 @@
<div class="SmallCard">
<img src="src/img/card/djamel.png" alt="Djamel Benarab" class="cardImg">
<div class="BigCardHover">
<h2>Djamel Benarab</h2>
<h2 class="name">Djamel Benarab</h2>
<p class="CardDesc">Thèse soutenue le 02/12/2016<br>Sujet : Suivi automatique de nageurs à partir des séquences vidéo : application à l'analyse des performances<br>Encadrants : Ayman Alfalou, Thibault Napoléon, Antoine Verney, Philippe Hellard<br>Poste actuel : Ingénieur R&D chez Diota</p>
</div>
</div>
@@ -213,7 +213,7 @@
<div class="SmallCard Card">
<img src="src/img/card/salima.png" alt="Salima Bourbia" class="cardImg">
<div class="BigCardHover">
<h2>Salima Bourbia</h2>
<h2 class="name">Salima Bourbia</h2>
<p class="CardDesc">Inscrit depuis: 12/2020<br>Encadrants: Ayoub Karine, Maher Jridi<br>ISEN Yncréa Ouest –Nantes<br>Sujet : Evaluation de la qualité des nuages de points 3D</p>
</div>
</div>
@@ -223,7 +223,7 @@
<div class="SmallCard">
<img src="src/img/card/salima.png" alt="Salima Bourbia" class="cardImg">
<div class="BigCardHover">
<h2>Salima Bourbia</h2>
<h2 class="name">Salima Bourbia</h2>
<p class="CardDesc">Inscrit depuis: 12/2020<br>Encadrants: Ayoub Karine, Maher Jridi<br>ISEN Yncréa Ouest –Nantes<br>Sujet : Evaluation de la qualité des nuages de points 3D</p>
</div>
</div>

40
src/js/membres/membres.js
View File

@@ -2,6 +2,23 @@
let editMode = false;
//Verifie si toute la page est chargée
document.addEventListener('DOMContentLoaded', function() {
// Attends la fin du chargement des éléments modaux
const modals = document.querySelectorAll('.modal');
modals.forEach(function(modal) {
// Ferme la modal lorsque vous cliquez sur le bouton de fermeture
const closeButton = modal.querySelector('.close');
closeButton.addEventListener('click', function() {
modal.style.display = 'none';
});
// Ferme la modal lorsque vous cliquez en dehors de celle-ci
window.addEventListener('click', function(event) {
if (event.target === modal) {
modal.style.display = 'none';
}
});
});
//Attends la fin du loader pour afficher le bouton
setTimeout(function () {
//Création du bouton Mode édition
@@ -30,10 +47,13 @@ document.addEventListener('DOMContentLoaded', function() {
editButton.style.background = '#48435C';
const removeMemberButton = document.getElementById('addMemberButton');
removeMemberButton.remove();
//Appel de la fonction editName pour désactiver la modification du nom
editName();
const MembersJS = document.querySelectorAll('.NewMembresJS')
MembersJS.forEach(function(element) {
const deleteButton = document.getElementById('deleteButton')
deleteButton.remove();
});
}
@@ -63,6 +83,7 @@ document.addEventListener('DOMContentLoaded', function() {
addMemberButton.style.cursor = 'pointer';
addMemberButton.addEventListener('click', function() {
addMember();
editName();
});
document.body.appendChild(addMemberButton);
let MembersJS = document.querySelectorAll('.NewMembresJS')
@@ -80,6 +101,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
element.appendChild(deleteButton);
});
editName();
} else {
alert('Mot de passe du profil administrateur incorrect !');
console.error('Mot de passe du profil administrateur incorrect !');
@@ -232,6 +254,7 @@ function addMember() {
//Ajout du nom de la nouvelle carte
const memberName = document.createElement('h2');
memberName.innerText = 'Nom du membre';
memberName.className = 'name';
CardHover.appendChild(memberName);
newCard.appendChild(CardHover);
@@ -273,6 +296,7 @@ function addMember() {
//Ajoout du nom du modal
const modalName = document.createElement('h2');
modalName.innerText = 'Nom du membre';
modalName.className = 'name';
modalHover.appendChild(modalName);
@@ -313,4 +337,18 @@ cards.forEach(function(card) {
closeBtns.forEach(function(btn) {
btn.addEventListener('click', closeModal);
});
});
function editName(){
const nameElements = document.querySelectorAll('.name');
if(editMode === true){
nameElements.forEach(function(nameElement){
nameElement.contentEditable = 'true';
});
}
else{
nameElements.forEach(function(nameElement){
nameElement.contentEditable = 'false';
});
}
}