Skip to content

Commit

Permalink
fix (modal) : lightbox issues (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
@codexarama
codexarama committed May 19, 2021
1 parent 023359d commit a051f1b
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 144 deletions.
188 changes: 46 additions & 142 deletions js/lightbox.js
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,50 @@
// DOM ELEMENTS
const lightbox = document.querySelector('.lightbox__modal');
let lightboxShow = document.querySelector('.lightbox__show');
// const lightboxTitle = document.querySelector('.lightbox__title');
const lightboxShow = document.querySelector('.lightbox__show');
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');

// const typeImage = document.querySelectorAll('img')
// const typeImage = document.querySelector('.currentMedia img')
// console.log(typeImage);

// LAUNCH LIGHTBOX
const setLightbox = () => {
const medias = document.querySelectorAll('.gallery__link');
const medias = document.querySelectorAll('.currentMedia');
// console.log(medias);

for (let j = 0; j < medias.length; j++) {
let selectMedia = medias[j];
// console.log(selectMedia);
let selectedMedia = selectMedia.querySelector('.currentMedia');
// console.log(selectedMedia);
let selectMediaIndex = j;
let selectedMediaIndex = selectMediaIndex;
// console.log(selectedMediaIndex);
for (let i = 0; i < medias.length; i++) {
let selectMedia = medias[i];
let selectedMediaIndex = i;

// quand click sur image
selectMedia.addEventListener('click', (e) => {
e.preventDefault();
selectMedia.classList.add('selected');
// console.log(selectedMediaIndex); // index media choisi
// console.log(selectMedia); // infos media choisi

// IDENTIFIE LE MEDIA CHOISI
// quand click sur media
selectMedia.addEventListener('click', (event) => {
event.preventDefault();
// OUVRE LA LIGHTBOX
lightboxShow.classList.add('active');
lightbox.style.display = 'flex';

// affecte 'selected' au media choisi
selectedMedia.classList.add('selected');

// // RESET LA LIGHTBOX
// // ----------- NE FONCTIONNE PAS ---------- //
// const lightboxMedia = document.querySelectorAll('lightbox__media');
// for (let i = 0; i < lightboxMedia.length; i++) {
// if (lightboxMedia.length > 0) lightboxShow.removeChild(img);
// // if (lightboxMedia.length > 0) lightboxShow.removeChild(lightboxMedia);
// }
lightboxShow.classList.add('active');

// AFFICHE LE MEDIA CHOISI
showMedia();

// IDENTIFIE LE MEDIA PRECEDENT
// quand click sur prev
prev.addEventListener('click', (e) => {
e.preventDefault();
selectMedia.classList.remove('selected');

// retire 'selected' du media choisi
selectedMedia.classList.remove('selected');

// lui affecte index -1
// index -1
selectedMediaIndex--;
selectMedia = medias[selectedMediaIndex];
selectMedia.classList.add('selected');
// console.log(selectedMediaIndex); // index media precedent

// ajoute 'selected' au media precedent celui choisi
selectedMedia.classList.add('selected');

selectedMedia =
medias[selectedMediaIndex].querySelector('.currentMedia');
// console.log(selectedMedia); // infos media precedent
// console.log(selectMedia); // infos media precedent

// AFFICHE LE MEDIA PRECEDENT
showMedia();
Expand All @@ -70,25 +53,17 @@ const setLightbox = () => {
if (selectedMediaIndex == 0) prev.style.display = 'none';
if (selectedMediaIndex < medias.length) next.style.display = 'block';
});

// IDENTIFIE LE MEDIA SUIVANT
// quand click sur next
next.addEventListener('click', (e) => {
e.preventDefault();
selectMedia.classList.remove('selected');

// retire 'selected' du media choisi
selectedMedia.classList.remove('selected');

// lui affecte index -1
// index +1
selectedMediaIndex++;
selectMedia = medias[selectedMediaIndex];
selectMedia.classList.add('selected');
// console.log(selectedMediaIndex); // index media suivant

// ajoute 'selected' au media suivant celui choisi
selectedMedia.classList.add('selected');

selectedMedia =
medias[selectedMediaIndex].querySelector('.currentMedia');
// console.log(selectedMedia); // infos media suivant
// console.log(selectMedia); // infos media suivant

// AFFICHE LE MEDIA SUIVANT
showMedia();
Expand All @@ -102,93 +77,22 @@ const setLightbox = () => {

// AFFICHE LE MEDIA CHOISI DANS LA LIGHTBOX
const showMedia = () => {
// // RESET LA LIGHTBOX
// // ----------- NE FONCTIONNE PAS ---------- //
// // Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'
// const lightboxMedia = document.querySelectorAll('.lightbox__media');
// for (let i = 0; i < lightboxMedia.length; i++) {
// if (lightboxMedia.length > 0) lightboxShow.removeChild(lightboxMedia);
// }

// SELON SON TYPE
// image
const imageType = selectMedia.querySelector('img.currentMedia');
console.log(imageType);
if (imageType) {
showImage();
// affiche titre media dans url
window.location.hash = selectMedia.alt;
// affiche media + titre dans lightbox
lightboxMedia.src = selectMedia.src;
lightboxMedia.alt = selectMedia.alt;
lightboxTitle.textContent = selectMedia.alt;
// affiche media type video
// console.log(typeof selectMedia.alt === 'undefined'); // true si media = video
if (typeof selectMedia.alt === 'undefined') {
lightboxMedia.replaceWith(video)
video.src = selectMedia.src;
video.alt = selectMedia.alt;
lightboxTitle.textContent = selectMedia.alt;
} else {
video.replaceWith(lightboxMedia)
}

// video
const videoType = selectMedia.querySelector('video.currentMedia');
console.log(videoType);
if (videoType) {
showVideo();
// showVideo() && lightboxShow.removeChild(img); // NE REMOVE PAS
}
};

// lightboxShow.removeChild(video); // BUG
// lightboxShow.removeChild(img); // BUG

const showImage = (image, title) => {
// RESET LA LIGHTBOX
// ----------- NE FONCTIONNE PAS ---------- //
// Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'
const lightboxMedia = document.querySelectorAll('.lightbox__media');
console.log(lightboxMedia);
// lightboxShow = lightboxMedia.parentNode;
// console.log(lightboxShow); // ok

for (let i = 0; i < lightboxMedia.length; i++) {
console.log(lightboxShow); // ok // apparait quand length > 0
// if (lightboxMedia.length > 0) image.replaceWith(lightboxMedia);
// if (lightboxMedia.length > 0) lightboxMedia.replaceWith(image); // lightboxMedia.replaceWith is not a function
// if (lightboxMedia.length > 0) image.replaceWith(image); // Cannot read property 'replaceWith' of undefined
// if (lightboxMedia.length > 0) lightboxShow.removeChild(lightboxMedia);
// if (lightboxMedia.length > 0) lightboxShow.parentNode.removeChild(lightboxMedia);
// while (lightboxMedia.length > 0) image.replaceWith(lightboxMedia);
// while (lightboxMedia.length > 0) lightboxShow.removeChild(lightboxMedia);
// while (lightboxMedia.length > 0) lightboxShow.parentNode.removeChild(lightboxMedia);
// Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'
}

// CREATION elmt IMAGE
image = document.createElement('img');
image.setAttribute('id', 'lightbox__img');
image.setAttribute('class', 'lightbox__media');
lightboxShow.appendChild(image);

// image.replaceWith(image) // NE FONCTIONNE PAS

// AFFICHE image
image.src = selectedMedia.src;
image.alt = selectedMedia.alt;

// CREATION elmt TITRE
title = document.createElement('p');
title.setAttribute('id', 'media__title');
title.setAttribute('class', 'lightbox__title');
lightboxShow.appendChild(title);
title.textContent = selectedMedia.alt;
};

const showVideo = (video, title) => {
// CREATION elmt VIDEO
video = document.createElement('video');
video.setAttribute('id', 'lightbox__video');
video.setAttribute('class', 'lightbox__media');
lightboxShow.appendChild(video);

// AFFICHE video
video.src = selectedMedia.src;
video.alt = selectedMedia.alt;

// CREATION elmt TITRE
title = document.createElement('p');
title.setAttribute('id', 'media__title');
title.setAttribute('class', 'lightbox__title');
lightboxShow.appendChild(title);
title.textContent = selectedMedia.alt;
};
}
};
Expand Down
4 changes: 2 additions & 2 deletions propage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@
<i class="fas fa-times"></i>
</button>
<div aria-label="image closeup view" class="lightbox__show">
<!-- <img src="" alt="" class="lightbox__media"> -->
<!-- <p class="lightbox__title"></p> -->
<img src="" alt="" id="imageType" class="lightbox__media">
<p class="lightbox__title"></p>
</div>
<button title="Previous image" role="button" class="lightbox__btn lightbox__prev">
<i class="fas fa-chevron-left"></i>
Expand Down

0 comments on commit a051f1b

Please sign in to comment.