From 54bbd922dec3194658c1301966b8d4b4a4d26d3d Mon Sep 17 00:00:00 2001 From: Amandine Arias Date: Wed, 19 May 2021 13:15:58 +0200 Subject: [PATCH] refactor (photographer page) : improve comments (#3) --- js/gallery.js | 94 +++++---------------------------------------- js/lightbox.js | 88 ++++++++++++++++++++++++++++++------------ js/likes_counter.js | 35 ++++++++++++----- js/pro_page.js | 54 ++++++++++++++++---------- propage.html | 3 +- 5 files changed, 134 insertions(+), 140 deletions(-) diff --git a/js/gallery.js b/js/gallery.js index a74a7e7..2ca0a29 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -1,13 +1,15 @@ -// CREATION GALERIE VIRTUELLE +// SECTION GALERIE VIRTUELLE const sectionGallery = document.querySelector('.gallery'); // APPEL FONCTION elmtFactory () -// INJECTION DONNEES ELEMENT CORRESPONDANT +// CREATION D'UNE CARTE MEDIA TYPE +// INJECTION DONNEES DANS ELEMENT CORRESPONDANT const setGallery = (media) => { const gallery = elmtFactory( 'article', { class: 'gallery__card' }, elmtFactory('div', { + tabindex: '0', class: 'gallery__media', }, elmtFactory('a', { @@ -58,9 +60,11 @@ const setGallery = (media) => { const galleryMedia = gallery.querySelector('.gallery__link'); // console.log(galleryMedia); + // creation media IMAGE if (media.image != undefined) { // console.log(media.image); // recupere images let mediaType = elmtFactory('img', { + tabindex: "0", class: 'currentMedia', src: 'images/photos/' + `${media.image}`, alt: `${media.title}`, @@ -69,9 +73,11 @@ const setGallery = (media) => { galleryMedia.appendChild(mediaType); } - if (media.video != undefined) { + // creation media VIDEO + if (media.video != undefined) { // console.log(media.video); // recupere videos let mediaType = elmtFactory('video', { + tabindex: "0", class: 'currentMedia', src: 'images/videos/' + `${media.video}`, alt: `${media.title}`, @@ -80,86 +86,6 @@ const setGallery = (media) => { galleryMedia.appendChild(mediaType); } + // elmts galerie inseres dans section html sectionGallery.appendChild(gallery); }; - -// // CREATION GALERIE VIRTUELLE -// const sectionGallery = document.querySelector('.gallery'); - -// // APPEL FONCTION elmtFactory () -// // INJECTION DONNEES ELEMENT CORRESPONDANT -// const setGallery = (media) => { -// const gallery = elmtFactory( -// 'article', -// { class: 'gallery__card' }, -// elmtFactory('div', { -// class: 'gallery__media', -// }), -// elmtFactory( -// 'div', -// { class: 'gallery__content' }, - -// elmtFactory( -// 'div', -// { class: 'gallery__infos' }, -// elmtFactory( -// 'p', -// { -// class: 'gallery__title', -// tabindex: '0', -// }, -// `${media.title}` -// ) -// ), -// elmtFactory( -// 'div', -// { -// class: 'gallery__likes', -// }, -// elmtFactory('input', { -// class: 'gallery__likes--count', -// type: 'text', -// readonly: 'true', -// value: `${media.likes}`, -// }), -// elmtFactory( -// 'button', -// { class: 'gallery__likes--btn', role: 'button' }, -// elmtFactory('i', { -// class: 'fas fa-heart gallery__likes--icon', -// }) -// ) -// ) -// ) -// ); - -// // CREATION ELEMENT MEDIA SELON TYPE (image / video) -// const galleryMedia = gallery.querySelector('.gallery__media'); -// // console.log(galleryMedia); - -// if (media.image != undefined) { -// // console.log(media.image); // recupere images -// let mediaType = elmtFactory('img', { -// class: 'currentMedia', -// src: 'images/photos/' + `${media.image}`, -// alt: `${media.title}`, -// tabindex: '0', -// }); -// // console.log(mediaType); // cree element image -// galleryMedia.appendChild(mediaType); -// } - -// if (media.video != undefined) { -// // console.log(media.video); // recupere videos -// let mediaType = elmtFactory('video', { -// class: 'currentMedia', -// src: 'images/videos/' + `${media.video}`, -// alt: `${media.title}`, -// tabindex: '0', -// }); -// // console.log(mediaType); // cree element video -// galleryMedia.appendChild(mediaType); -// } - -// sectionGallery.appendChild(gallery); -// }; diff --git a/js/lightbox.js b/js/lightbox.js index 967472b..875ee4b 100644 --- a/js/lightbox.js +++ b/js/lightbox.js @@ -5,11 +5,9 @@ const lightboxMedia = document.querySelector('.lightbox__media'); const lightboxTitle = document.querySelector('.lightbox__title'); const prev = document.querySelector('.lightbox__prev'); const next = document.querySelector('.lightbox__next'); -const imageType = document.querySelector('#imageType'); const video = document.createElement('video'); -video.classList.add('lightbox__media') -video.id = 'videoType' -const videoType = document.querySelector('#videoType'); +video.classList.add('lightbox__media'); +video.id = 'videoType'; // LAUNCH LIGHTBOX const setLightbox = () => { @@ -20,62 +18,103 @@ const setLightbox = () => { let selectMedia = medias[i]; let selectedMediaIndex = i; - // quand click sur image - selectMedia.addEventListener('click', (e) => { - e.preventDefault(); + // quand click sur media + selectMedia.addEventListener('click', (event) => { + event.preventDefault(); + + // ---------- NE FONCTIONNE PAS ---------- // + // "click" sur btn = "entree" au clavier + // if (event.keycode == 13) selectMedia.click(); // NE FONCTIONNE PAS + + // affecte 'selected' au media choisi selectMedia.classList.add('selected'); // console.log(selectedMediaIndex); // index media choisi // console.log(selectMedia); // infos media choisi // OUVRE LA LIGHTBOX lightbox.style.display = 'flex'; + // lui affecte 'active' lightboxShow.classList.add('active'); - // AFFICHE LE MEDIA CHOISI + // GERE BTNS NAVIGATION ENTRE MEDIAS PRECEDENTS ET SUIVANTS + // btn "previous" invisible si 1er media choisi + if (selectedMediaIndex == 0) prev.style.display = 'none'; + // btn "next" visible quand index media < nb total medias + if (selectedMediaIndex < medias.length) next.style.display = 'block'; + // btn "next" invisible si dernier media choisi + if (selectedMediaIndex == medias.length - 1) next.style.display = 'none'; + // btn "previous" visible quand index media > 0 + if (selectedMediaIndex > 0) prev.style.display = 'block'; + + // AFFICHE MEDIA CHOISI showMedia(); + // IDENTIFIE MEDIA PRECEDENT // quand click sur prev - prev.addEventListener('click', (e) => { - e.preventDefault(); + prev.addEventListener('click', (event) => { + event.preventDefault(); + + // ---------- NE FONCTIONNE PAS ---------- // + // "fleche droite" au clavier = "click" sur btn + // if (event.keycode == 37) prev.click(); // NE FONCTIONNE PAS + + // retire 'selected' du media choisi selectMedia.classList.remove('selected'); - // index -1 + // lui affecte index -1 selectedMediaIndex--; - selectMedia = medias[selectedMediaIndex]; - selectMedia.classList.add('selected'); // console.log(selectedMediaIndex); // index media precedent + selectMedia = medias[selectedMediaIndex]; // console.log(selectMedia); // infos media precedent + // ajoute 'selected' au media precedant celui choisi + selectMedia.classList.add('selected'); + // AFFICHE LE MEDIA PRECEDENT showMedia(); - // gestion visibilite prev + next btn pour 1e et derniere image + // GERE BTNS NAVIGATION ENTRE MEDIAS PRECEDENTS ET SUIVANTS + // btn "previous" invisible si arrive au 1er media if (selectedMediaIndex == 0) prev.style.display = 'none'; + // btn "next" visible quand index media < nb total medias if (selectedMediaIndex < medias.length) next.style.display = 'block'; }); + + // IDENTIFIE MEDIA SUIVANT // quand click sur next - next.addEventListener('click', (e) => { - e.preventDefault(); + next.addEventListener('click', (event) => { + event.preventDefault(); + + // ---------- NE FONCTIONNE PAS ---------- // + // "fleche droite" au clavier = "click" sur btn + // if (event.keycode == 39) next.click(); // NE FONCTIONNE PAS + // if(event.keycode == 13) event.keycode == 39; // NE FONCTIONNE PAS + + // retire 'selected' du media choisi selectMedia.classList.remove('selected'); - // index +1 + // lui affecte index +1 selectedMediaIndex++; - selectMedia = medias[selectedMediaIndex]; - selectMedia.classList.add('selected'); // console.log(selectedMediaIndex); // index media suivant + selectMedia = medias[selectedMediaIndex]; // console.log(selectMedia); // infos media suivant + // ajoute 'selected' au media precedent celui choisi + selectMedia.classList.add('selected'); + // AFFICHE LE MEDIA SUIVANT showMedia(); - // gestion visibilite prev + next btn pour 1e et derniere image + // GERE BTNS NAVIGATION ENTRE MEDIAS PRECEDENTS ET SUIVANTS + // btn "next" invisible quand arrive au dernier media if (selectedMediaIndex == medias.length - 1) next.style.display = 'none'; + // btn "previous" visible quand index media > 0 if (selectedMediaIndex > 0) prev.style.display = 'block'; }); }); - // AFFICHE LE MEDIA CHOISI DANS LA LIGHTBOX + // AFFICHE MEDIA CHOISI DANS LIGHTBOX const showMedia = () => { // affiche titre media dans url window.location.hash = selectMedia.alt; @@ -86,19 +125,20 @@ const setLightbox = () => { // affiche media type video // console.log(typeof selectMedia.alt === 'undefined'); // true si media = video if (typeof selectMedia.alt === 'undefined') { - lightboxMedia.replaceWith(video) + lightboxMedia.replaceWith(video); video.src = selectMedia.src; video.alt = selectMedia.alt; lightboxTitle.textContent = selectMedia.alt; } else { - video.replaceWith(lightboxMedia) + video.replaceWith(lightboxMedia); } }; } }; // CLOSE LIGHTBOX -const closeLightbox = () => { +const closeLightbox = (event) => { + // if (event.keycode == 27) closeLightbox.onclick(); // NE FONCTIONNE PAS lightbox.style.display = 'none'; lightboxShow.classList.remove('active'); const medias = document.querySelectorAll('.currentMedia'); diff --git a/js/likes_counter.js b/js/likes_counter.js index 30737eb..2f7d8f9 100644 --- a/js/likes_counter.js +++ b/js/likes_counter.js @@ -5,25 +5,42 @@ const likesCount = () => { for (let i = 0; i < likes.length; i++) { let like = likes[i]; - like.setAttribute("aria-label", "likes") + // ajoute attributs ACCESSIBILITE + like.setAttribute('aria-label', 'likes'); + like.setAttribute('title', 'Add a like'); + like.addEventListener('click', (event) => { + // ajoute toggle "selected" like.classList.toggle('selected'); - let likeCounter = like.parentElement.children[0]; // au click sur "like", l'input "counter" prend le focus + // au click sur "like", focus sur input "counter" + let likeCounter = like.parentElement.children[0]; + // si "selected" if (like.classList.contains('selected')) { + // affiche mention dans url location.hash = "j'aime"; - likeCounter.value++; // incremente de 1 le compteur local de likes + // affiche info-bulle action + like.setAttribute('title', 'Remove like'); + // + 1 au compteur local + likeCounter.value++; + // change couleur likeCounter.style.color = '#db8876'; - totalCounter.value++; // incremente de 1 le compteur global de likes + // + 1 au compteur global + totalCounter.value++; } else { + // affiche mention dans url location.hash = "je n'aime plus"; - likeCounter.value--; // decremente de 1 le compteur local de likes + // affiche info-bulle action + like.setAttribute('title', 'Add a like'); + // - 1 au compteur local + likeCounter.value--; + // change couleur likeCounter.style.color = '#901c1c'; - totalCounter.value--; // decremente de 1 le compteur global de likes + // - 1 au compteur global + totalCounter.value--; } - // ACCESSIBILITE - // navigation clavier sur btn "like" : "entree" = "click" + // ACCESSIBILITE btn "like" navigation clavier + // "entree" = "click" if (event.keycode == 13) like.click(); }); } }; - diff --git a/js/pro_page.js b/js/pro_page.js index 1b86cdd..accd589 100644 --- a/js/pro_page.js +++ b/js/pro_page.js @@ -6,12 +6,13 @@ function fetchData() { fetch(url) .then((response) => response.json()) - // RECUPERATION DES DONNEES + // RECUPERE DONNEES .then((data) => { // console.log(data); + // ----- profile section ----- // // RECUPERE L'ID DU PHOTOGRAPHE QUAND SA CARTE EST CLIQUEE - // source index : CARD href = `propage.html?id=$photographers.id` + // via href photographer card (home page) const getId = (urlId, id) => { urlId = new URL(document.location).searchParams; id = urlId.get('id'); @@ -19,74 +20,84 @@ function fetchData() { }; console.log(getId()); // n° id - // CIBLE LES DONNEES EN FONCTION DU PHOTOGRAPHE CHOISI + // ----- gestion donnees ----- // + // RECUPERE LES DONNEES DU PHOTOGRAPHE CHOISI const photographerData = data.photographers.filter( (elmt) => elmt.id == getId() )[0]; console.log(photographerData); // array data by ID - // AFFICHE LE PROFIL DU PHOTOGRAPHE CORRESPONDANT + // AFFICHE SON PROFIL setId(photographerData); - // CIBLE LES MEDIA EN FONCTION DU PHOTOGRAPHE CHOISI + // RECUPERE SES MEDIAS const photographerWorks = data.media.filter( (elmt) => elmt.photographerId == getId() ); console.log(photographerWorks); // array media by ID - // AFFICHE LA GALLERIE SELON FILTRE CHOISI + // ----- gallery section ----- // + // AFFICHE SA GALLERIE SELON FILTRE CHOISI const gallery = document.getElementsByClassName('gallery')[0]; const galleryCard = document.getElementsByClassName('gallery__card'); const launchGallery = () => { for (let i = 0; i < photographerWorks.length; i++) { - // affiche la galerie triee par popularite (par defaut) + // affiche filtre par defaut dans url location.hash = 'filtre popularite'; + // affiche galerie triee par popularite (par defaut) setGallery(photographerWorks.sort(filterBy('likes', 'desc'))[i]); } for (const option of document.querySelectorAll('.filter__option')) { - option.addEventListener('click', function () { + option.addEventListener('click', () => { for (let j = 0; j < galleryCard.length; j++) { - // reset la gallerie si autre option choisie + // reset gallerie si autre option choisie while (galleryCard.length > 0) { gallery.removeChild(galleryCard[0]); } } for (let i = 0; i < photographerWorks.length; i++) { - // affiche la galerie triee par date + // si filtre "date" choisi if (option.classList.contains('filter__option--2')) { + // affiche filtre correspondant dans url location.hash = 'filtre date'; + // affiche galerie triee par date setGallery(photographerWorks.sort(filterBy('date', 'desc'))[i]); } - // affiche la galerie triee par titre + // si filtre "titre" choisi if (option.classList.contains('filter__option--3')) { + // affiche filtre correspondant dans url location.hash = 'filtre titre'; + // affiche galerie triee par titre setGallery(photographerWorks.sort(filterBy('title'))[i]); } - // affiche la galerie triee par popularite + // si filtre "popularite" choisi if (option.classList.contains('filter__option--1')) { + // affiche filtre correspondant dans url location.hash = 'filtre popularite'; + // affiche galerie triee par popularite setGallery( photographerWorks.sort(filterBy('likes', 'desc'))[i] ); } } - // COMPTE LES LIKES : INCREMENTE / DECREMENTE DE 1 AU CLIC + // ACTUALISE COMPTEUR DE LIKES likesCount(); - // AFFICHE LE MEDIA CHOISI DANS LA LIGHTBOX (galerie filtree) + // AFFICHE MEDIA CHOISI DANS LIGHTBOX (galerie filtree) setLightbox(); }); } - // COMPTE LES LIKES : INCREMENTE / DECREMENTE DE 1 AU CLIC + // ACTUALISE COMPTEUR DE LIKES likesCount(); - // AFFICHE LE MEDIA CHOISI DANS LA LIGHTBOX (galerie par defaut) + // AFFICHE MEDIA CHOISI DANS LIGHTBOX (galerie par defaut) setLightbox(); }; launchGallery(); - // AFFICHE LE NOMBRE TOTAL DE LIKES DU PHOTOGRAPHE + // ----- footer section ----- // + // AFFICHE NOMBRE TOTAL DE LIKES const totalLikesCounter = () => { const totalCounter = document.querySelector('#total-likes'); totalLikes = 0; @@ -95,16 +106,17 @@ function fetchData() { }; totalLikesCounter(); - // AFFICHE LE PRIX PAR JOUR - const pricePerDay = document.querySelector("#pricePerDay") + // AFFICHE PRIX PAR JOUR + const pricePerDay = document.querySelector('#pricePerDay'); pricePerDay.textContent = photographerData.price + ' € / jour'; - // AFFICHE LE NOM DU PHOTOGRAPHE EN TITRE DU FORMULAIRE DE CONTACT + // ----- contact form ----- // + // AFFICHE NOM PHOTOGRAPHE EN TITRE DU FORMULAIRE const formName = document.querySelector('.form__body--name'); formName.textContent = photographerData.name; }) - // AFFICHE LES ERREURS EN CONSOLE + // AFFICHE ERREURS CONSOLE .catch((error) => console.log(error.message)); } diff --git a/propage.html b/propage.html index 86310ed..0d52192 100644 --- a/propage.html +++ b/propage.html @@ -35,7 +35,7 @@
-

Trier par

+

Trier par