Skip to content

Commit

Permalink
refactor (photographer page) : improve comments (#3)
Browse files Browse the repository at this point in the history
  • Loading branch information
@codexarama
codexarama committed May 19, 2021
1 parent b3655e3 commit 54bbd92
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 140 deletions.
94 changes: 10 additions & 84 deletions js/gallery.js
View file
Original file line number Diff line number Diff line change
@@ -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', {
Expand Down Expand Up @@ -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}`,
Expand All @@ -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}`,
Expand All @@ -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);
// };
88 changes: 64 additions & 24 deletions js/lightbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -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;
Expand All @@ -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');
Expand Down
35 changes: 26 additions & 9 deletions js/likes_counter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
}
};

Loading

0 comments on commit 54bbd92

Please sign in to comment.