start lightbox

Kherset · Sep 29, 2023 · 9c5a2b5 · 9c5a2b5
1 parent 979fecb
commit 9c5a2b5
Show file tree

Hide file tree

Showing 7 changed files with 283 additions and 39 deletions.
diff --git a/css/lightbox.css b/css/lightbox.css
@@ -0,0 +1,88 @@
+/* Styles pour la lightbox */
+#lightbox {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(192,192,192,0.9);
+  text-align: center;
+  z-index: 2;
+}
+.lightbox-content{
+  display: flex;
+  flex-direction: column;
+  height: 95%;
+  left: 15%;
+  position: fixed;
+  top: 3%;
+  width: 80%;
+}
+
+.lightbox-carrousel {
+  height: 100%;
+  display: flex;
+}
+
+.close-button {
+  position: fixed;
+  top: 5%;
+  right: auto;
+  font-size: 40px;
+  color: #901C1C;
+  cursor: pointer;
+}
+
+.panels-lightbox {
+  align-items: center;
+  background-color: white;
+  color: #901C1C;
+  display: flex;
+  font-size: 40px;
+  height: 100%;
+  justify-content: center;
+  width: 5%;
+}
+.left-panel-lightbox{
+  border-top-left-radius: 5px;
+}
+
+.right-panel-lightbox {
+  border-top-right-radius: 5px;
+}
+
+#previous-arrow, #next-arrow {
+  cursor: pointer;
+  font-size: 40px;
+}
+
+.lightbox-media-container{
+  background-color: white;
+  display: block;
+  height: 100%;
+  width: 80%;
+}
+
+.lightbox-media {
+  border-radius: 10px;
+  height: 95%;
+  margin-top: 20px;
+  object-fit: center;
+  width: 99%;
+  box-sizing: content-box;
+}
+
+.lightbox-text {
+  align-items: center;
+  background-color: white;
+  border-bottom-left-radius: 5px ;
+  border-bottom-right-radius: 5px ;
+  color: #901C1C;
+  display: flex;
+  font-size: 20px;
+  height: 5%;
+  justify-content: center;
+  margin-top: -20px;
+  width: 90%;
+}
diff --git a/css/photographer.css b/css/photographer.css
@@ -288,3 +288,40 @@ form input {
   }
 
 /****************** Medias ******************/
+
+/****************** Red Card ******************/
+.red-card {
+  background-color: #DB8876;
+  bottom: 0;
+  display: flex;
+  font-size: 18px;
+  height: 50px;
+  justify-content: space-around;
+  position: fixed;
+  right: 50px;
+  width: 300px;
+}
+
+.likes-card {
+  align-items: center;
+  display: flex;
+  width: 35%;
+}
+
+.likes-sum {
+  margin-right: 5px;
+}
+
+.daily-rate {
+  width: 35%;
+}
+
+.price-tag {
+  align-items: center;
+  color: black;
+  display: flex;
+  justify-content: flex-end;
+  height: 100%;
+  width: 100%;
+}
+/****************** Red Card ******************/
diff --git a/css/style.css b/css/style.css
@@ -1,4 +1,5 @@
 @import url("photographer.css");
+@import url("lightbox.css");
 
 /* Reset CSS */
   html, body, div, span, applet, object, iframe,

diff --git a/photographer.html b/photographer.html
@@ -13,6 +13,7 @@
       <a href="index.html" class="homepage-link" aria-label="Logo du site redirigeant vers la page d'accueil"> <img src="assets/medias/logo.png" class="logo" alt="Fisheye Home page"/> </a>
     </nav>
 
+<!-------------------------- Header -------------------------->
       <header>
         <div class="photographer-content">
             <h2 class="photographer-name"></h2>
@@ -25,11 +26,30 @@ <h3 class="photographer-location"></h3>
         <img class="photographer-photo">
       </header>
 
+  <!-------------------------- Form Modal -------------------------->
+    <div id="contact_modal">
+			<div class="modal">
+				<header>
+          <h2>Contactez-moi</h2>
+          <img src="assets/icons/close.svg" onclick="closeModal()" />
+        </header>
+				<form>
+					<div>
+						<label>Prénom</label>
+						<input />
+					</div>
+          <button class="contact_button">Envoyer</button>
+				</form>
+			</div>
+		</div>
+  <!-------------------------- Form Modal -------------------------->
+<!-------------------------- Header -------------------------->
+
+<!-------------------------- Main -------------------------->
+  <!-------------------------- Sort-By Elements -------------------------->
       <main id="main">
       <div class="sort_by">
         <h4 class="sort_title">Trier par </h4>
-
-
         <div class="dropdown">
           <button class="dropbtn"><span>Popularité</span> &#9660;</button>
           <div class="dropdown-content">
@@ -38,35 +58,52 @@ <h4 class="sort_title">Trier par </h4>
           </div>
         </div>
       </div>
+  <!-------------------------- Sort-By Elements -------------------------->
 
+  <!-------------------------- Medias Container -------------------------->
       <section id="medias-container">
-
       </section>
-    </main>
+  <!-------------------------- Medias Container -------------------------->
 
+  <!-------------------------- Red Card Element -------------------------->
+      <div class="red-card">
+        <span class="likes-card">
+          <p class="likes-sum"></p>
+          <i class="fa-solid fa-heart like-icon-red-card"></i>
+        </span>
+        <span class="daily-rate">
+          <p class="price-tag"></p>
+        </span>
+      </div>
+  <!-------------------------- Red Card Element -------------------------->
+    </main>
+<!-------------------------- Main -------------------------->
 
 
-    <!-- Modal -->
-    <div id="contact_modal">
-			<div class="modal">
-				<header>
-          <h2>Contactez-moi</h2>
-          <img src="assets/icons/close.svg" onclick="closeModal()" />
-        </header>
-				<form>
-					<div>
-						<label>Prénom</label>
-						<input />
-					</div>
-          <button class="contact_button">Envoyer</button>
-				</form>
-			</div>
-		</div>
-    <!-- Modal -->
 
+<!-------------------------- Lightbox -------------------------->
+    <div id="lightbox">
+      <div class="lightbox-content">
+        <div class="lightbox-carrousel">
+          <div class="panels-lightbox left-panel-lightbox">
+            <i class="fa-solid fa-chevron-left" id="previous-arrow"></i>
+          </div>
+          <div class="lightbox-media-container">
+            <img src="assets/medias/527/Travel_Road_into_Hill.jpg" alt="" class="lightbox-media">
+          </div>
+          <div class="panels-lightbox right-panel-lightbox">
+            <i class="fa-solid fa-x close-button" id="close-lightbox"></i>
+            <i class="fa-solid fa-chevron-right" id="next-arrow"></i>
+          </div>
+        </div>
+        <div class="lightbox-text"> Arc-en-ciel</div>
+      </div>
+    </div>
+<!-------------------------- Lightbox -------------------------->
 
     <script src="scripts/templates/photographer.js" ></script>
     <script src="scripts/utils/contactForm.js" ></script>
     <script src="scripts/pages/photographer.js" ></script>
+    <script src="scripts/utils/lightbox.js" ></script>
   </body>
 </html>
diff --git a/scripts/pages/photographer.js b/scripts/pages/photographer.js
@@ -27,7 +27,7 @@
           });
 
           if (photographer) {
-            console.log("Photographer found :", photographer);
+            // console.log("Photographer found :", photographer);
             return photographer;
           } else {
             console.log("No photographer found with the ID", id);
@@ -69,12 +69,21 @@ async function displayMedias() {
   medias.forEach(media => {
     createMedias(media)
   });
-
+  AddOrRemoveLike()
+  openLightbox()
 }
 
+async function displayRedCard() {
+  const photographer = await getPhotographersById(id)
+  const medias = await getMedias();
+  redCard(photographer, medias)
+}
 
 
-
-
+function buildPage() {
 displayPhotographer()
 displayMedias()
+displayRedCard()
+}
+
+buildPage()
diff --git a/scripts/templates/photographer.js b/scripts/templates/photographer.js
@@ -65,28 +65,76 @@ function createMedias(data) {
   const likesElement = document.createElement('div');
   likesElement.className ='likes'
 
-  // Create number of number of like element
+  // Create number of like element
   const mediaNumber = document.createElement('p');
   mediaNumber.className ='likes-number'
   mediaNumber.textContent = likes;
 
   // Create item icon
-  const likesIcon = document.createElement('p')
-  likesIcon.className ='likes-icon'
-  likesIcon.innerHTML = '<i class="fa-solid fa-heart"></i>'
+  const likesIcon = document.createElement('i')
+  likesIcon.className ='fa-solid fa-heart likes-icon'
 
 
 
   // Building page
-  mediasContainer.appendChild(article)
-  article.appendChild(imageContainer)
-  imageContainer.appendChild(mediaElement)
-  article.appendChild(itemContent)
-  itemContent.appendChild(mediaTitle)
-  itemContent.appendChild(likesElement)
-  likesElement.appendChild(mediaNumber)
-  likesElement.appendChild(likesIcon)
-
-  // article.appendChild()
+    mediasContainer.appendChild(article)
+    article.appendChild(imageContainer)
+    imageContainer.appendChild(mediaElement)
+    article.appendChild(itemContent)
+    itemContent.appendChild(mediaTitle)
+    itemContent.appendChild(likesElement)
+    likesElement.appendChild(mediaNumber)
+    likesElement.appendChild(likesIcon)
+
+}
+
+
+
+
+function redCard(dataPhotographer, dataMedia) {
+  // Calculate sum of medias' likes.
+    let likes = 0;
+    const mediasbyID = dataMedia.filter(media => media.photographerId === id)
+    for (let i = 0; i < mediasbyID.length; i++) {
+      likes += mediasbyID[i].likes;
+    }
+    const likesSum = document.querySelector('.likes-sum')
+    likesSum.textContent = `${likes}`
+
+  // Display the photographer's price.
+    const price = dataPhotographer.price;
+    const priceTag = document.querySelector('.price-tag')
+    priceTag.textContent = `${price}€ / jour`
+}
+
+function AddOrRemoveLike() {
+    // Sélectionnez tous les boutons "J'aime" sur la page
+const likeButtons = document.querySelectorAll('.likes-icon');
+
+// Ajoutez un gestionnaire d'événements à chaque bouton "J'aime"
+likeButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+        // Trouvez le compteur de likes associé à ce bouton
+        console.log('Clique')
+        const likeCount = button.parentElement.querySelector('.likes-number');
+
+        // Obtenez le nombre actuel de likes depuis le compteur
+        let currentLikes = parseInt(likeCount.textContent);
+
+        // Vérifiez si le bouton a la classe "liked" pour déterminer si l'utilisateur a déjà aimé
+        if (button.classList.contains('liked')) {
+            // Diminue le nombre de likes si l'utilisateur a déjà aimé
+            currentLikes--;
+            button.classList.remove('liked');
+        } else {
+            // Augmente le nombre de likes si l'utilisateur n'a pas encore aimé
+            currentLikes++;
+            button.classList.add('liked');
+        }
+
+        // Mettez à jour le compteur de likes avec la nouvelle valeur
+        likeCount.textContent = currentLikes;
+    });
+});
 
 }
diff --git a/scripts/utils/lightbox.js b/scripts/utils/lightbox.js
@@ -0,0 +1,24 @@
+// Open lightbox
+const lightbox = document.getElementById('lightbox')
+
+async function openLightbox() {
+  const medias = document.querySelectorAll('.media-item')
+  const lightboxMedia = document.querySelector('.lightbox-media')
+  medias.forEach(media => {
+    media.addEventListener('click', () => {
+
+    lightbox.style.display = 'block';
+    lightboxMedia.src = media.src
+    console.log(lightboxMedia.src)
+    console.log(media.src)
+    })
+  });
+  // console.log(medias)
+}
+
+// Close lightbox
+const close = document.getElementById('close-lightbox')
+close.addEventListener('click', function() {
+  console.log('Coucou')
+  lightbox.style.display = 'none'
+})