feat(landing): complete history carousel slides

assets/scripts/carousel.js

@@ -12,16 +12,20 @@ function isElementInViewport (el) {
 
 // little addon to enhance the carousel
 
+var carousels = document.querySelectorAll('.carousel');
 
-Array.from(document.getElementsByClassName("carousel")).forEach((carousel) => {
+// first addon to change "enabled" slide indicator (way to complicated)
+Array.from(carousels).forEach((carousel) => {
     let viewport = carousel.getElementsByClassName("carousel__viewport")[0];
     let slides = carousel.getElementsByClassName("carousel__slide");
     let nav_items = Array.from(carousel.getElementsByClassName("carousel__navigation-item"))
     let last_scroll_pos = null;
 
     viewport.onscroll = (_event) => {
-        let position =  slides.length * viewport.scrollLeft / viewport.scrollWidth;
+        let position =  Math.ceil(slides.length * viewport.scrollLeft / viewport.scrollWidth);
         let direction = last_scroll_pos == null || last_scroll_pos < viewport.scrollLeft;
+        console.log("direction", direction);
+        console.log("position", position);
         last_scroll_pos = viewport.scrollLeft;
 
         nav_items.forEach((item, index) => {
@@ -41,3 +45,52 @@ Array.from(document.getElementsByClassName("carousel")).forEach((carousel) => {
     }
 })
 
+
+// second addon to replace the anchor with javascript managed jump scroll
+
+// Iterate through each 'carousel__viewport' element
+carousels.forEach(function(carousel) {
+    var viewport = carousel.querySelector('.carousel__viewport')
+
+    // Get all elements with the class 'carousel__slide' within the current 'carousel__viewport'
+    var slides = viewport.querySelectorAll('.carousel__slide');
+
+    var prevButtons = viewport.querySelectorAll('.carousel__prev');
+    var nextButtons = viewport.querySelectorAll('.carousel__next');
+    var navigationButtons = carousel.querySelectorAll('.carousel__navigation-button');
+    console.log(prevButtons)
+    console.log(navigationButtons)
+
+    prevButtons.forEach(function(prevButton, index) {
+        // remove href, for css only carousel
+        prevButton.removeAttribute('href');
+        prevButton.addEventListener('click', function() {
+            console.log("Click of previous", index)
+
+            if (index == 0) {
+                viewport.scrollLeft = slides.length * slides[0].offsetWidth;
+                return;
+            }
+            viewport.scrollLeft -= slides[0].offsetWidth;
+        });
+    });
+
+    nextButtons.forEach(function(nextButton, index) {
+        nextButton.removeAttribute('href');
+        nextButton.addEventListener('click', function() {
+            if (index == slides.length-1) {
+                viewport.scrollLeft = 0;
+                return;
+            }
+            viewport.scrollLeft += slides[0].offsetWidth;
+        });
+    });
+
+    navigationButtons.forEach(function(btn, index) {
+        btn.removeAttribute('href');
+        btn.addEventListener('click', function() {
+            viewport.scrollLeft = slides[0].offsetWidth * index;
+        });
+    });
+});
+

layouts/index.html

@@ -2,7 +2,7 @@
     <div class="cover__container">
         <div class="cover__back" style="background-image: url('https://share.lefuturiste.fr/u/2478737d-7e5e-42cd-8764-d0136ef83546/cover_v2_01.jpg')">
             <video playsinline autoplay muted loop>
-                <source src="https://static.etoiledebethleem.fr/videos/cover_trailer.webm" type="video/webm">
+                <source src="https://static.etoiledebethleem.fr/videos/teaser_v5.mp4" type="video/webm">
             </video>
         </div>
         <div class="cover__overlay">
@@ -35,25 +35,25 @@
 		{{ partial "pagination.html" . }}
         */}}
 
-        {{ $slides_count := 4 }}
+        {{ $slides_count := 6 }}
         <section class="history-container" id="section-history">
             <div class="page-container">
-                <h2>Une histoire mouvementée...</h2>
+                <h2>La chapelle au fil du temps</h2>
             </div>
             <div class="carousel" aria-label="Histoire de la chapelle">
                 <ol class="carousel__viewport">
 
-                    <!-- Bourbon chateau, une crypte particulière, Les chartreux, Mignot et Villain -->
+                    <li id="history__slide0" tabindex="0" class="carousel__slide" data-slide-index="0">
-                    
-                    <li id="history__slide0" tabindex="0" class="carousel__slide">
                         <div class="slide-content history-component__container">
                             <div class="page-container slide-inner history-component__content">
                                 <div class="layout-grid-image third">
                                     <div>
                                         <h3>Charles de Bourbon, un esprit fondateur</h3>
                                         <p>
-                                            Il est le fondateur de la chapelle..
+                                            Dans les années 1570, le cardinal Charles Ier de Bourbon est alors archevèque de Rouen, 
-                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                            Probablement dans un contexte de guerre de religion, il cherche un moyen de revendiquer sa foi de chrétien catholique.
+                                            Il envoya par deux fois sont architecte en Judée pour y relever les plan de la grotte de la nativité à Bethléem.
+                                            La chapelle est construite et inaugurée en 1582.
                                         </p>
                                     </div>
                                     <div class="image-container">
@@ -70,57 +70,14 @@
                             </div>
                         </div>
                         <div class="carousel__snapper">
-                            <a href="#history__slide3"
+                            <a href="#history__slide5"
                                class="carousel__prev">Diapositive précédente</a>
                             <a href="#history__slide1"
                                class="carousel__next">Diapositive suivante</a>
                         </div>
                     </li>
 
-                    <li id="history__slide1" tabindex="0" class="carousel__slide">
+                    <li id="history__slide1" tabindex="0" class="carousel__slide" data-slide-index="1">
-                        <div class="slide-content history-component__container">
-                            <div class="page-container slide-inner history-component__content">
-                                <div>
-                                    <h3>Une crypte particulière</h3>
-                                    <p>
-                                        La crypte de la chapelle est un lieu unique : c'est une copie presque parfaite de la crypte de la nativité en Judée.
-                                        <!-- Le cardinal ayant envoyé deux fois son architecte en palestine pour faire les relevés, la crypte a Aubevoye est remarquablement similaire à sa jumelle de bethléem -->
-                                    </p>
-                                    <!-- image: porte d'entré crypte ancienne, je pense faire une double 
-                                     aussi: petit ange -->
-                                </div>
-                                <div class="image-container double-horizontal-image-container">
-                                    <figure class="slide-image image-with-caption">
-                                        {{ $image := resources.Get "images/crypte_entree_1.jpg" }}
-                                        {{ $caption := "L'entrée de la crypte" }}
-                                        <img
-                                            alt="{{ $caption }}"
-                                            src="{{ $image.RelPermalink }}"
-                                        />
-                                        <figcaption>{{ $caption }}</figcaption>
-                                    </figure>
-                                    <figure class="slide-image image-with-caption">
-                                        {{ $image := resources.Get "images/crypte_anges_1.jpg" }}
-                                        {{ $caption := "Les anges de la crypte" }}
-                                        <img
-                                            alt="{{ $caption }}"
-                                            src="{{ $image.RelPermalink }}"
-                                        />
-                                        <figcaption>{{ $caption }}</figcaption>
-                                    </figure>
-
-                                </div>
-                            </div>
-                        </div>
-                        <div class="carousel__snapper">
-                            <a href="#history__slide0"
-                               class="carousel__prev">Diapositive précédente</a>
-                            <a href="#history__slide2"
-                               class="carousel__next">Diapositive suivante</a>
-                        </div>
-                    </li>
-
-                    <li id="history__slide2" tabindex="0" class="carousel__slide">
                         <div class="slide-content history-component__container">
                             <div class="page-container slide-inner history-component__content">
                                 <div class="layout-grid-image half">
@@ -137,7 +94,7 @@
                                         {{ $image := resources.Get "images/la_chartreuse_1.jpg" }}
                                         <figure class="slide-image image-with-caption">
                                             <img
-                                                alt="Église de la chartreuse Bourbons-lez-Gaillon"
+                                                alt="Plan de l'église de la chartreuse Bourbons-lez-Gaillon, maintenant détruite."
                                                 src="{{ $image.RelPermalink }}"
                                             />
                                             <figcaption>Église de la chartreuse Bourbons-lez-Gaillon</figcaption>
@@ -146,6 +103,41 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="carousel__snapper">
+                            <a href="#history__slide0"
+                               class="carousel__prev">Diapositive précédente</a>
+                            <a href="#history__slide2"
+                               class="carousel__next">Diapositive suivante</a>
+                        </div>
+                    </li>
+
+
+                    <li id="history__slide2" tabindex="0" class="carousel__slide" data-slide-index="2">
+                        <div class="slide-content history-component__container">
+                            <div class="page-container slide-inner history-component__content">
+                                <div class="layout-grid-image half">
+                                    <div>
+                                        <h3>Restauration Mignot</h3>
+                                        <p>
+                                            Depuis la révolution, la chapelle passe de propriétaire en propriétaire, son état se dégrade.
+                                            M et Mme Mignot M. les nouveaux propriétaires renovent et transforment la chapelle et sa crypte.
+                                            La nef devient un lieu d'habitation et un grenier est construit.
+                                            En novembre 1895, la crypte est rendue au culte, suite à la consécration du vicaire général d'Évreux.
+                                        <p>
+                                    </div>
+                                    <div class="image-container">
+                                        {{ $image := resources.Get "images/chapelle_carte_postale_1.jpg" }}
+                                        <figure class="slide-image image-with-caption">
+                                            <img
+                                                alt="Carte postale de la façade sud de la chapelle en 1912."
+                                                src="{{ $image.RelPermalink }}"
+                                            />
+                                            <figcaption>La chapelle en 1912</figcaption>
+                                        </figure>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         <div class="carousel__snapper">
                             <a href="#history__slide1"
                                class="carousel__prev">Diapositive précédente</a>
@@ -154,25 +146,26 @@
                         </div>
                     </li>
 
-
+                    <li id="history__slide3" tabindex="0" class="carousel__slide" data-slide-index="3">
-                    <li id="history__slide3" tabindex="0" class="carousel__slide">
                         <div class="slide-content history-component__container">
                             <div class="page-container slide-inner history-component__content">
                                 <div class="layout-grid-image half">
                                     <div>
-                                        <h3>Restauration Mignot et Villain</h3>
+                                        <h3>Restauration Villain</h3>
                                         <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                                            De nouveau, la chapelle passe de propriétaire en propriétaire et se dégrade, en 1933 la crypte est inscrite au monument historiques.
+                                            En 1956, M. et Mme Villain natif de la région font l'acquisition du domaine et rénovent la chapelle jusqu'en 1959.
+                                            Le domaine est utilisé comme verger et chapelle et la crypte font l'objet d'un culte catholique, des baptême et des mariages y sont célébrés.
                                         <p>
                                     </div>
                                     <div class="image-container">
-                                        {{ $image := resources.Get "images/chapelle_carte_postale_1.jpg" }}
+                                        {{ $image := resources.Get "images/chapelle_1959.jpg" }}
                                         <figure class="slide-image image-with-caption">
                                             <img
-                                                alt="Portrait de Charles de Bourbon"
+                                                alt="Photo de la chapelle pendant la période Villain"
                                                 src="{{ $image.RelPermalink }}"
                                             />
-                                            <figcaption>La chapelle en 1912</figcaption>
+                                            <figcaption>La chapelle pendant la période Villain</figcaption>
                                         </figure>
                                     </div>
                                 </div>
@@ -181,10 +174,80 @@
                         <div class="carousel__snapper">
                             <a href="#history__slide2"
                                class="carousel__prev">Diapositive précédente</a>
+                            <a href="#history__slide4"
+                               class="carousel__next">Diapositive suivante</a>
+                        </div>
+                    </li>
+
+                    <li id="history__slide4" tabindex="0" class="carousel__slide" data-slide-index="4">
+                        <div class="slide-content history-component__container">
+                            <div class="page-container slide-inner history-component__content">
+                                <div class="layout-grid-image half">
+                                    <div>
+                                        <h3>La ruine</h3>
+                                        <p>
+                                            En 1982 la chapelle est vendu au notaire Mme. Bailleul en viager.
+                                            Par manque d'activités religieuses et depuis la mort de M. Villain en 1992, le domaine tombe dans l'abandon, la chapelle est régulièrement squatté, le mobilier pillé.
+                                            En juin 2000, un témoin rapporte que des saccages expéditifs ont été menés.
+                                            Depuis, la chapelle se dégrade alors très vite, le coté ouest de la toiture tombe en 2015. Les éléments font le reste et la nature reprend son droit.
+                                        <p>
+                                    </div>
+                                    <div class="image-container">
+                                        {{ $image := resources.Get "images/chapelle_2014_sud.jpg" }}
+                                        <figure class="slide-image image-with-caption">
+                                            <img
+                                                alt="Chapelle en mauvaise état en hiver derrière les arbres."
+                                                src="{{ $image.RelPermalink }}"
+                                            />
+                                            <figcaption>La chapelle en 2014 photographié par Guillaume Hylias</figcaption>
+                                        </figure>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel__snapper">
+                            <a href="#history__slide3"
+                               class="carousel__prev">Diapositive précédente</a>
+                            <a href="#history__slide5"
+                               class="carousel__next">Diapositive suivante</a>
+                        </div>
+                    </li>
+
+                    <li id="history__slide5" tabindex="0" class="carousel__slide" data-slide-index="5">
+                        <div class="slide-content history-component__container">
+                            <div class="page-container slide-inner history-component__content">
+                                <div class="layout-grid-image half">
+                                    <div>
+                                        <h3>Une renaissance</h3>
+
+                                        <p>
+                                            En 2021, grâce au changement de propriétaire du domaine, une association a vu le jour en 2022.
+                                            Elle dispose d'une délégation de maitrise d'ouvrage afin de sauvegarder ce qu'il reste de la chapelle et d'envisager une restauration.
+                                            L'association s'attelle à faire revivre le lieu en organisant des manifesations publiques.
+                                            Vous pouvez construire la suite de l'histoire avec nous! 
+                                        <p>
+                                    </div>
+                                    <div class="image-container">
+                                        {{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }}
+                                        <figure class="slide-image image-with-caption">
+                                            <img
+                                                alt="Photo de groupe de personnes impliqués dans l'association"
+                                                src="{{ $image.RelPermalink }}"
+                                            />
+                                            <figcaption>L'assemblée générale fondatrice de 2022</figcaption>
+                                        </figure>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel__snapper">
+                            <a href="#history__slide4"
+                               class="carousel__prev">Diapositive précédente</a>
                             <a href="#history__slide0"
                                class="carousel__next">Diapositive suivante</a>
                         </div>
                     </li>
+
                 </ol>
                 <aside class="carousel__navigation">
                     <ol class="carousel__navigation-list">
@@ -398,7 +461,6 @@
         </section>
 
 
-
         {{ $slides_count := len $.Site.Data.partners.people }}
         <section class="partners-container">
             <div class="page-container">
@@ -469,5 +531,6 @@
 
     {{ $js := resources.Get "scripts/carousel.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
     <script defer src="{{ $js.Permalink }}"></script>
+
 {{ end }}