Commit cc37575c authored by Julien Ait azzouzene's avatar Julien Ait azzouzene
Browse files

✨ feat: la liste des recettes s'affiche progressivement

parent 169afb7a

assets/css/styles.css

+4 −0
Original line number Diff line number Diff line
@@ -7,3 +7,7 @@ footer{ 
  width: auto;

}



.hidden{

  display: none;

}

assets/js/listeRecette.js

0 → 100644
+29 −0
Original line number Diff line number Diff line 
// Éléments du DOM



let conteneurRecette = document.getElementById("conteneurRecette");

let divsRecettes = conteneurRecette.children;

let boutonPlus = document.getElementById("boutonPlus");





let nombreRecettesTotal = divsRecettes.length;

let nombresRecettesAffiches = 0;



afficherPlusRecettes();



boutonPlus.addEventListener("click", afficherPlusRecettes);



function afficherPlusRecettes(){

    if(nombresRecettesAffiches >= nombreRecettesTotal){

        return;

    }



    for(let i = nombresRecettesAffiches; i < nombresRecettesAffiches + 10; i++){

        divsRecettes[i].setAttribute("style", "display: block");

        if(nombresRecettesAffiches + i + 1 >= nombreRecettesTotal){

            boutonPlus.setAttribute("style", "display: none");

            return;

        }

    }



    nombresRecettesAffiches += 10;

}
 
 No newline at end of file

templates/carteRecette.php

+17 −17
Original line number Diff line number Diff line
@@ -11,7 +11,7 @@ require_once './src/model/tag.php'; 


function afficher($recette){

    $lienRecette = ".?action=detail-recette&idRecette=".$recette->getId()?>

    <div class="col">

    <div class="col hidden">

        <a href="<?= $lienRecette ?>" style="all: unset; cursor: pointer">

            <div class="d-flex flex-column flex-lg-row" style="border : 2px solid black; border-radius : 6px" > 

                <div class="w-100" style="max-width: initial;"><img class="rounded img-fluid d-block w-100 fit-cover" style="height: 200px;" src= "<?=$recette->getImage()?>">

templates/layout.php

+1 −0
Original line number Diff line number Diff line
@@ -58,5 +58,6 @@ 
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

    <script src="assets/js/Simple-Slider-swiper-bundle.min.js"></script>

    <script src="assets/js/Simple-Slider.js"></script>

    <?php if(isset($script)) echo $script ?>

</body>

</html>
 
 No newline at end of file

templates/nosRecettes.php

+4 −2
Original line number Diff line number Diff line
@@ -10,6 +10,8 @@ require_once 'src/model/recette.php'; 
function afficherListeRecettes($recettes){

    $titre = 'Nos Recettes';



    $script = '<script src="assets/js/listeRecette.js"></script>';



    // ob_start crée un buffer qui va récupérer tout ce qui est censé être affiché (echo + HTML) 

    ob_start();

    ?>
@@ -21,7 +23,7 @@ function afficherListeRecettes($recettes){ 
                    <p class="w-lg-50">Les recettes pour vos p'tits gloutons, certifiées savoureux par notre équipe de cuistots du dimanche</p>

                </div>

            </div>

            <div class="row gy-4 row-cols-1 row-cols-md-2">

            <div class="row gy-4 row-cols-1 row-cols-md-2" id="conteneurRecette">

                <?php

                foreach($recettes as $recette){

                    if($recette->estValide()){
@@ -31,7 +33,7 @@ function afficherListeRecettes($recettes){ 
                ?>

            </div>

        </div>

        <div class="container py-4 py-xl-5"><button class="btn btn-primary" type="button" style="width: 3em;height: 3em;border-radius: 50%;font-size: 34px;padding-bottom: 10px;margin: auto;display: block;">+</button></div>

        <div id="boutonPlus" class="container py-4 py-xl-5"><button class="btn btn-primary" type="button" style="width: 3em;height: 3em;border-radius: 50%;font-size: 34px;padding-bottom: 10px;margin: auto;display: block;">+</button></div>

        <script src="assets/bootstrap/js/bootstrap.min.js"></script>

        <script src="assets/js/Simple-Slider-swiper-bundle.min.js"></script>

        <script src="assets/js/Simple-Slider.js"></script>