Skip to content

Commit

Permalink
Merge pull request #18 from pierrickmartinet/develop
Browse files Browse the repository at this point in the history
Feat: Fonctionnalité d'ajout d'une image dans la gallerie avec la bon…
  • Loading branch information
pierrickmartinet authored Mar 30, 2021
2 parents e4f17ac + 0fcaa09 commit 5c2951a
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 29 deletions.
18 changes: 18 additions & 0 deletions gallerie.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,29 @@ <h2 class="icon">Menu<span>∆</span></h2>

<main>
<h1>Gallerie</h1>
<!-- Icon -->
<div id="divIconGallery">
<img class="iconGalleryMosaic" src="images/mosaicIcon.svg" alt="icone affichage mosaïque">
<img class="iconGalleryColumn" src="images/columnIcon.svg" alt="icone affichage colonne">
<img class="iconGalleryAdd" src="images/addIcon.svg" alt="icone ajout d'une image">
</div>

<!-- Formulaire d'ajout d'une image -->
<div class="divContainerFormGallery divContainerFormGalleryNone">
<div id="divFormGallery">
<h2 class="form titleFont">Poste ton image !</h2>
<form id="formGallery">
<div class="form">
<input type="text" name="url" id="url" placeholder="Enter the URL">
</div>
<div class="form">
<input type="submit" value="Envoyer">
</div>
</form>
</div>
</div>

<!-- Gallerie d'image -->
<div id="imgGallery">
<img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery1.jpg" alt="Image de chuck Norris">
<img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery2.jpg" alt="Image de chuck Norris">
Expand Down
111 changes: 84 additions & 27 deletions scriptGallerie.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,46 +18,103 @@ $(document).ready(function () {
})


// Affichage du formulaire d'ajout au click sur le "+"


// La variable galleryForm prend pour valeur la div du formulaire de la page Gallerie
let galleryForm = document.querySelector('.divContainerFormGallery');
// La variable iconGalleryAdd prend pour valeur l'icon iconGalleryAdd
let iconGalleryAdd = document.querySelector('.iconGalleryAdd');


iconGalleryAdd.addEventListener('click', (e) => {


// Si la valeur de la classe de la div du galleryForm est égale à "les deux classes présentes" OU "la classe None"
if ((galleryForm.classList.value === "divContainerFormGallery divContainerFormGalleryNone") || (galleryForm.classList.value === "divContainerFormGalleryNone")) {
// Alors, enlève la classe None et ajoute la classe divContainerFormGallery (Ajoute le formulaire)
galleryForm.classList.remove("divContainerFormGalleryNone");
galleryForm.classList.add("divContainerFormGallery");

} else {
// Sinon enlève la classe divContainerFormGallery et ajoute la classe None (Cache le formulaire)
galleryForm.classList.remove("divContainerFormGallery");
galleryForm.classList.add("divContainerFormGalleryNone");
}

})


// Gallerie d'image


// La variable iconGalleryMosaic prend pour valeur l'icon inconGalleryMosaic
let iconGalleryMosaic = document.querySelector('.iconGalleryMosaic');
// La variable iconGalleryColumn prend pour valeur l'icon inconGalleryColumn
let iconGalleryColumn = document.querySelector('.iconGalleryColumn');

// La variable imgGallery prend pour valeur un tableau avec les images de la div portant l'id imgGallery
let imgGallery = document.querySelectorAll('#imgGallery img');


// Listener sur l'icon Mosaïque au click de la souris (l'évenement se passe lorsque l'utilisateur clique sur l'icon)
iconGalleryMosaic.addEventListener('click', (e) => {
index = 0;
// Au moment ou l'utilisateur clique sur l'icon, pour chaque image, supression de la classe colonne et ajout de la classe Mosaïque tant qu'il y a des images
while(index < imgGallery.length){
imgGallery[index].classList.remove("imgGalleryColumn");
imgGallery[index].classList.add("imgGalleryMosaic");
index = index + 1;
}

})
function addImageGallery() {
// La variable imgGallery prend pour valeur un tableau avec les images de la div portant l'id imgGallery
let imgGallery = document.querySelectorAll('#imgGallery img');

// Listener sur l'icon Colonne au click de la souris (l'évenement se passe lorsque l'utilisateur clique sur l'icon)
iconGalleryColumn.addEventListener('click', (e) => {
index = 0;
// Au moment ou l'utilisateur clique sur l'icon, pour chaque image, supression de la classe Mosaïque et ajout de la classe Colonne tant qu'il y a des images
while(index < imgGallery.length){
imgGallery[index].classList.remove("imgGalleryMosaic");
imgGallery[index].classList.add("imgGalleryColumn");
index = index + 1;
}

})
// Listener sur l'icon Mosaïque au click de la souris (l'évenement se passe lorsque l'utilisateur clique sur l'icon)
iconGalleryMosaic.addEventListener('click', (e) => {
index = 0;
// Au moment ou l'utilisateur clique sur l'icon, pour chaque image, supression de la classe colonne et ajout de la classe Mosaïque tant qu'il y a des images
while (index < imgGallery.length) {
imgGallery[index].classList.remove("imgGalleryColumn");
imgGallery[index].classList.add("imgGalleryMosaic");
index = index + 1;
}

})

// Listener sur l'icon Colonne au click de la souris (l'évenement se passe lorsque l'utilisateur clique sur l'icon)
iconGalleryColumn.addEventListener('click', (e) => {
index = 0;
// Au moment ou l'utilisateur clique sur l'icon, pour chaque image, supression de la classe Mosaïque et ajout de la classe Colonne tant qu'il y a des images
while (index < imgGallery.length) {
imgGallery[index].classList.remove("imgGalleryMosaic");
imgGallery[index].classList.add("imgGalleryColumn");
index = index + 1;
}

})
}

addImageGallery();


// Ajout d'une image

// Affichage du formulaire d'ajout
// Formulaire en HTML / CSS qui s'affiche au click du +

// Ajout de l'image à la gallerie
// Incorporer l'image au bon endroit avec comme source l'url de l'image stocké dans une variable


// Incorporer l'image au bon endroit avec comme source de l'image l'url de l'image choisie stocké dans une variable
// Lélément form du bloc HTML de la page Gallerie éxécutera cette action (la fonction(e)) lors de l'envoi
formGallery.onsubmit = function (e) {

// preventDefault permet d'annuler le rechargement de la page par défaut du bouton envoyer du formulaire
e.preventDefault();

// La variable addImage prend pour valeur l'url saisie dans le champ du formulaire formGallery
let addImage = document.getElementById('url').value;

// La variable imgGallery prend pour valeur un tableau avec les images de la div portant l'id imgGallery (pour vérification du format d'affichage)
let testImageGallery = document.querySelectorAll('#imgGallery img');

// Si lors de l'ajout les images déjà présentes ont la classe colonne et mosaic ou juste colonne
if ((testImageGallery[0].classList.value === "imgGalleryColumn imgGalleryMosaic") || (testImageGallery[0].classList.value === "imgGalleryColumn")) {
// Alors rajoute l'image avec le format colonne
$('<img class="imgGalleryColumn" src="' + addImage + '" alt="Image ajouté">').prependTo('#imgGallery');
} else {
// Sinon rajoute l'image avec le format Mosaïque
$('<img class="imgGalleryMosaic" src="' + addImage + '" alt="Image ajouté">').prependTo('#imgGallery');
}
addImageGallery();
}

});
1 change: 0 additions & 1 deletion scriptIndex.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ $(document).ready(function () {
form.onsubmit = function (e) {
// preventDefault permet d'annuler le rechargement de la page par défaut du bouton envoyer du formulaire
e.preventDefault();
console.log(e);
// la variable name prend pour valeur la valeur de l'input du DOM avec l'id name
let name = document.getElementById('name').value;
// la variable joke prend pour valeur la valeur de l'input du DOM avec l'id joke
Expand Down
25 changes: 24 additions & 1 deletion style.css
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ justify-content: center;
}


/* Formulaire */
/* Formulaire Index */

.form{
display: flex;
Expand All @@ -156,6 +156,26 @@ justify-content: center;
padding: 10px 0px;
}

/* Formulaire gallerie */

.divContainerFormGallery{
display: flex;
justify-content: center;
}

.divContainerFormGalleryNone{
display: none;
}

#divFormGallery{
border: 4px solid;
border-radius: 50px;
background-color: #CCDAD1;
padding: 1% 0%;
margin: 1% 0%;
height: auto;
width: 50%;
}

/* Gallery image */

Expand Down Expand Up @@ -184,16 +204,19 @@ justify-content: center;
.iconGalleryMosaic{
width: 5%;
height: auto;
cursor: pointer;
}

.iconGalleryColumn{
width: 5%;
height: auto;
cursor: pointer;
}

.iconGalleryAdd{
width: 5%;
height: auto;
cursor: pointer;
}

#divIconGallery{
Expand Down

0 comments on commit 5c2951a

Please sign in to comment.