From 272cfc712fabb64e8f712587afb16ae409f90c5a Mon Sep 17 00:00:00 2001
From: Noah Lancien <noah.lancien@ldc.fr>
Date: Thu, 19 Sep 2024 12:45:57 +0200
Subject: [PATCH] fix: #134 - Updated static page subtitle field helper + added
 video in testimonies part

---
 .../sass/fo/partials/_testimonial-card.scss   | 12 ++++-
 .../sass/fo/utilities/_bootstrap-custom.scss  | 24 +++++++++
 resources/ts/fo/base/common.ts                | 26 +++++++++
 .../bo/pages/static_pages/form.blade.php      | 53 ++++++++++---------
 .../views/fo/pages/recruitment.blade.php      | 18 +++++++
 .../fo/partials/testimonial-card.blade.php    | 10 +++-
 6 files changed, 115 insertions(+), 28 deletions(-)

diff --git a/resources/sass/fo/partials/_testimonial-card.scss b/resources/sass/fo/partials/_testimonial-card.scss
index 7b96d50f..02c51329 100644
--- a/resources/sass/fo/partials/_testimonial-card.scss
+++ b/resources/sass/fo/partials/_testimonial-card.scss
@@ -1,7 +1,6 @@
-
 .testimonial-card {
     .testimonial-img {
-        clip-path: polygon(60% .2vw,100% 0,100% calc(100% - .2vw),70% calc(100% - .35vw),40% 100%,0 calc(100% - .2vw),0 .2vw,30% 0);
+        clip-path: polygon(60% .2vw, 100% 0, 100% calc(100% - .2vw), 70% calc(100% - .35vw), 40% 100%, 0 calc(100% - .2vw), 0 .2vw, 30% 0);
 
         &-wrapper {
             @include media-breakpoint-up(lg) {
@@ -36,4 +35,13 @@
             min-height: 5rem;
         }
     }
+
+    .fa-play {
+        width: 2rem;
+        height: 2rem;
+    }
+
+    .video-link {
+        cursor: pointer;
+    }
 }
diff --git a/resources/sass/fo/utilities/_bootstrap-custom.scss b/resources/sass/fo/utilities/_bootstrap-custom.scss
index 07fcfbbd..9c4f26ae 100644
--- a/resources/sass/fo/utilities/_bootstrap-custom.scss
+++ b/resources/sass/fo/utilities/_bootstrap-custom.scss
@@ -24,19 +24,43 @@
         .w#{$infix}-25 {
             width: 25% !important;
         }
+
         .w#{$infix}-50 {
             width: 50% !important;
         }
+
         .w#{$infix}-75 {
             width: 75% !important;
         }
+
         .w#{$infix}-100 {
             width: 100% !important;
         }
+
         .w#{$infix}-fit {
             width: fit-content !important;
         }
 
+        .h#{$infix}-25 {
+            height: 25% !important;
+        }
+
+        .h#{$infix}-50 {
+            height: 50% !important;
+        }
+
+        .h#{$infix}-75 {
+            height: 75% !important;
+        }
+
+        .h#{$infix}-100 {
+            height: 100% !important;
+        }
+
+        .h#{$infix}-fit {
+            height: fit-content !important;
+        }
+
         @each $prop, $unit in (width: vw, height: vh) {
             @each $size in [25, 50, 75, 100] {
                 .#{$unit}#{$infix}-#{$size} {
diff --git a/resources/ts/fo/base/common.ts b/resources/ts/fo/base/common.ts
index b3b5acc4..6f07a2e4 100644
--- a/resources/ts/fo/base/common.ts
+++ b/resources/ts/fo/base/common.ts
@@ -546,6 +546,32 @@ document.addEventListener("DOMContentLoaded", function () {
                 document.querySelector("#swiper-videos .swiper-slide-next")?.setAttribute("inert", "true");
             });
         }
+        if (swiper.el.id === "swiper-testimonials") {
+            swiper.on("slideChange", function() {
+                updateTestimonialVideoModal(swiper.slides[swiper.activeIndex]);
+            });
+        }
+    }
+
+    function updateTestimonialVideoModal(currentSlide: any) {
+        const videoLinkElement = currentSlide.querySelector(".video-link") as HTMLAnchorElement;
+        if (!videoLinkElement) {
+            return;
+        }
+        const videoModal = document.querySelector("#testimonial-video-modal") as HTMLDivElement;
+        if (!videoModal) {
+            return;
+        }
+        const modalLink = document.querySelector(".video-inlaid") as HTMLAnchorElement;
+        if (!modalLink) {
+            return;
+        }
+        modalLink.setAttribute("href", String(videoLinkElement.dataset.videoLink));
+        const iframe = modalLink.querySelector("iframe");
+        if (!iframe) {
+            return;
+        }
+        iframe.setAttribute("src", String(videoLinkElement.dataset.videoLink));
     }
 
     function eventBtnPlayPause(swiper: Swiper, btnPlayPause: HTMLElement | null) {
diff --git a/resources/views/bo/pages/static_pages/form.blade.php b/resources/views/bo/pages/static_pages/form.blade.php
index 1db6ea07..75b2be77 100644
--- a/resources/views/bo/pages/static_pages/form.blade.php
+++ b/resources/views/bo/pages/static_pages/form.blade.php
@@ -1,7 +1,6 @@
 @use('\App\Enums\StaticPageType', 'StaticPageType')
 <div class="row">
-    @if (!$staticPageModel->type->equals(StaticPageType::recipe) &&
-        !$staticPageModel->type->equals(StaticPageType::product))
+    @if (!$staticPageModel->type->equals(StaticPageType::recipe) && !$staticPageModel->type->equals(StaticPageType::product))
         {{-- SEO_TITLE --}}
         <div class="col-12 col-md-6 mb-3">
             <fieldset class="h-100 border p-3">
@@ -80,9 +79,10 @@
             </fieldset>
         </div>
     @endif
-    @if (!$staticPageModel->type->equals(StaticPageType::recipe) &&
-        !$staticPageModel->type->equals(StaticPageType::product) &&
-        !$staticPageModel->type->equals(StaticPageType::home))
+    @if (
+        !$staticPageModel->type->equals(StaticPageType::recipe) &&
+            !$staticPageModel->type->equals(StaticPageType::product) &&
+            !$staticPageModel->type->equals(StaticPageType::home))
         {{-- TITLE --}}
         <div class="col-12 col-md-6 mb-3">
             <fieldset class="h-100 border p-3">
@@ -112,12 +112,13 @@
             </fieldset>
         </div>
     @endif
-    @if (!$staticPageModel->type->equals(StaticPageType::recipe) &&
-        !$staticPageModel->type->equals(StaticPageType::product) &&
-        !$staticPageModel->type->equals(StaticPageType::legals) &&
-        !$staticPageModel->type->equals(StaticPageType::confidentiality) &&
-        !$staticPageModel->type->equals(StaticPageType::accessibility) &&
-        !$staticPageModel->type->equals(StaticPageType::selling))
+    @if (
+        !$staticPageModel->type->equals(StaticPageType::recipe) &&
+            !$staticPageModel->type->equals(StaticPageType::product) &&
+            !$staticPageModel->type->equals(StaticPageType::legals) &&
+            !$staticPageModel->type->equals(StaticPageType::confidentiality) &&
+            !$staticPageModel->type->equals(StaticPageType::accessibility) &&
+            !$staticPageModel->type->equals(StaticPageType::selling))
         {{-- SUBTITLE --}}
         <div class="col-12 col-md-6 mb-3">
             <fieldset class="h-100 border p-3">
@@ -142,7 +143,7 @@
                                     'model' => trans_choice('models.classes.static_page', 1),
                                 ]),
                                 'min' => 3,
-                                'max' => 255,
+                                'max' => 500,
                             ]),
                             'placeholder' => __(':field :inter:model', [
                                 'field' => str(__('validation.custom.subtitle'))->ucfirst(),
@@ -155,10 +156,11 @@
             </fieldset>
         </div>
     @endif
-    @if (!$staticPageModel->type->equals(StaticPageType::recruitment) &&
-        !$staticPageModel->type->equals(StaticPageType::recipe) &&
-        !$staticPageModel->type->equals(StaticPageType::product) &&
-        !$staticPageModel->type->equals(StaticPageType::home))
+    @if (
+        !$staticPageModel->type->equals(StaticPageType::recruitment) &&
+            !$staticPageModel->type->equals(StaticPageType::recipe) &&
+            !$staticPageModel->type->equals(StaticPageType::product) &&
+            !$staticPageModel->type->equals(StaticPageType::home))
         {{-- CONTENT --}}
         <div class="col-12 mb-3">
             <fieldset class="border p-3">
@@ -189,15 +191,16 @@
             </fieldset>
         </div>
     @endif
-    @if (!$staticPageModel->type->equals(StaticPageType::recipes) &&
-        !$staticPageModel->type->equals(StaticPageType::recipe) &&
-        !$staticPageModel->type->equals(StaticPageType::products) &&
-        !$staticPageModel->type->equals(StaticPageType::product) &&
-        !$staticPageModel->type->equals(StaticPageType::home) &&
-        !$staticPageModel->type->equals(StaticPageType::legals) &&
-        !$staticPageModel->type->equals(StaticPageType::confidentiality) &&
-        !$staticPageModel->type->equals(StaticPageType::accessibility) &&
-        !$staticPageModel->type->equals(StaticPageType::selling))
+    @if (
+        !$staticPageModel->type->equals(StaticPageType::recipes) &&
+            !$staticPageModel->type->equals(StaticPageType::recipe) &&
+            !$staticPageModel->type->equals(StaticPageType::products) &&
+            !$staticPageModel->type->equals(StaticPageType::product) &&
+            !$staticPageModel->type->equals(StaticPageType::home) &&
+            !$staticPageModel->type->equals(StaticPageType::legals) &&
+            !$staticPageModel->type->equals(StaticPageType::confidentiality) &&
+            !$staticPageModel->type->equals(StaticPageType::accessibility) &&
+            !$staticPageModel->type->equals(StaticPageType::selling))
         {{-- PICTURE SECTION --}}
         <div class="col-12 pb-3">
             <fieldset class="h-100 border p-3">
diff --git a/resources/views/fo/pages/recruitment.blade.php b/resources/views/fo/pages/recruitment.blade.php
index ab008ba7..10592e93 100644
--- a/resources/views/fo/pages/recruitment.blade.php
+++ b/resources/views/fo/pages/recruitment.blade.php
@@ -129,6 +129,24 @@
                 </div>
             </div>
         </section>
+        {{-- Video Modal --}}
+        <div class="modal fade translate-middle top-50 start-50" id="testimonial-video-modal" aria-labelledby="testimonialVideoModalLabel"
+            aria-hidden="true" tabindex="-1">
+            <div class="modal-dialog modal-lg modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="video-inlaid ratio ratio-16x9" type="youtube"
+                            href="https://www.youtube.com/embed/{{ $testimonialModels->first()->video_id }}"></div>
+                    </div>
+                    <div class="modal-footer">
+                        <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">{{ __('Fermer') }}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     @endif
     {{-- ADVANTAGES --}}
     <section class="joinus mb-3" id="recruitment-advantages">
diff --git a/resources/views/fo/partials/testimonial-card.blade.php b/resources/views/fo/partials/testimonial-card.blade.php
index c4147d8c..c9081855 100644
--- a/resources/views/fo/partials/testimonial-card.blade.php
+++ b/resources/views/fo/partials/testimonial-card.blade.php
@@ -1,12 +1,20 @@
 <div class="testimonial-card bottom-left-shadow h-100 w-lg-75 ms-lg-auto">
     <div class="position-relative d-flex justify-content-center testimonial-img-wrapper">
         <div class="line-border-small w-fit bg-white p-2">
+            @if (!empty($model->video_id))
+                <a class="video-link" data-bs-toggle="modal" data-bs-target="#testimonial-video-modal"
+                    data-video-link="https://www.youtube.com/embed/{{ $model->video_id }}">
+                    <i class="fa-solid fa-xl fa-play position-absolute z-1 rounded-circle translate-middle top-50 start-50 bg-white p-3"></i>
+            @endif
             <img class="w-100 line-border-medium testimonial-img" src="{{ asset($model->picture) }}" title="{{ $model->picture_title }}"
                 alt="{{ $model->picture_alt }}" />
+            @if (!empty($model->video_id))
+                </a>
+            @endif
         </div>
     </div>
     <div
-        class="line-border-medium position-relative d-flex flex-column testimonial-card-bottom-part px-lg-5 px-lg-4 pb-lg-4 bg-light px-3 pt-4">
+        class="line-border-medium position-relative d-flex flex-column testimonial-card-bottom-part px-lg-5 px-lg-4 pb-lg-4 bg-light h-lg-100 px-3 pt-4">
         <p class="text-uppercase fs-3 f-bourton-base mb-1">
             {{ $model->identity }}
         </p>