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

membres.html

@@ -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>

src/js/membres/membres.js

@@ -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);
@@ -314,3 +338,17 @@ 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';
+        });
+    }
+}