wip #7067 @7:00

diff --git a/wp-content/themes/CCV/resources/assets/scripts/patient-tour.js b/wp-content/themes/CCV/resources/assets/scripts/patient-tour.js
index 5ad50f0b9ffacc9edf5c677dd6f5d35418afc6b1..1405525beaaba67662d9cbc379408fa4e3e75471 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/scripts/patient-tour.js
+++ b/wp-content/themes/CCV/resources/assets/scripts/patient-tour.js
@@ -7,9 +7,27 @@
 
             const swiper = new Swiper(elementSelector, swiperSettings);
 
-            //const lastBullet = $(elementSelector).find(".patient-tour-item").last().get(0).getBoundingClientRect()
+            $(document).on("mousemove", function( e ) {
+                let pageX = e.pageX,
+                    coordSwiper = $(elementSelector).get(0).getBoundingClientRect()
 
-            //console.log(lastBullet)
+                let formule = Math.max(0, pageX - coordSwiper.x) / coordSwiper.width,
+                    progress = Math.min(formule, 1)
+
+                swiper.setProgress(progress, 10)
+
+                document.querySelector(':root').style.setProperty('--progress-swiper', progress*100+'%');
+                $("[data-group]").removeClass("active")
+                $("[data-group=0-5]").addClass("active")
+                if(progress*100 >= 50) {
+                    $("[data-group=6-12]").addClass("active")
+                }
+
+                if (progress*100 >= 90) {
+                    $("[data-group=13-17]").addClass("active")
+                }
+
+            })
         });
     });
 })(jQuery);
\ No newline at end of file

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/patient-tour.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/patient-tour.styl
index 79a265ffb37af9034bf5b3f3890118d28b0554c1..7ac0efb9bb5c4d2b57ed3e274f1edd7120bf14c8 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/patient-tour.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/patient-tour.styl
@@ -1,10 +1,15 @@
 $breakpoint-timeline-horizontal = 768px // When timeline changes to mobile view
+:root
+  --progress-swiper: 0
 
 .patient-tour
   width: calc(100% - calc(192px * 2)) !important
   margin: 0 auto
   overflow-x: visible
 
+  +below($breakpoint-timeline-horizontal)
+    width: 90%
+
   &-item
     @apply bg-white flex-col items-center
     //horizontal-spacing(12.5vw)
@@ -101,15 +106,25 @@ $breakpoint-timeline-horizontal = 768px // When timeline changes to mobile view
       display: none
 
     // Timeline horizontal line
-    &:before
+    &:before,
+    &:after
       content: ''
       position: absolute
       top: r(32px)
       left: 0
       right: 0
       height: r(10px)
+
+    &:before
       background: #EDEDF4
+      z-index: -2
+
+    &:after
+      background: #ffbf29
       z-index: -1
+      width: var(--progress-swiper)
+      border-top-right-radius: 5px
+      border-bottom-right-radius: 5px
 
 
     &-bullet
@@ -189,6 +204,7 @@ $breakpoint-timeline-horizontal = 768px // When timeline changes to mobile view
       &-title
         display: block
         text-align: center
+        position: relative
         .active &
           color: #FFBF29
 
@@ -211,6 +227,7 @@ $breakpoint-timeline-horizontal = 768px // When timeline changes to mobile view
     &-title
       @apply font-body mt-2 mb-6 text-sm font-light
       min-height: 52px
+      max-height: 52px
       //max-width: 8em
 
     .bullet

diff --git a/wp-content/themes/CCV/resources/views/widgets/patient-tour.blade.php b/wp-content/themes/CCV/resources/views/widgets/patient-tour.blade.php
index 6419cf3d1765f85732f7fa5c2e5bea73c5a20b7b..307a9761b6009a5b893cd8018ac76312ee2f4315 100644 (file)
--- a/wp-content/themes/CCV/resources/views/widgets/patient-tour.blade.php
+++ b/wp-content/themes/CCV/resources/views/widgets/patient-tour.blade.php
@@ -4,6 +4,7 @@
     'slidesPerView' => 'auto',
     'loop' => false,
     'effect' => 'slide',
+    'watchSlidesProgress' => true,
     'touchEventsTarget' => 'wrapper', // Fix pagination links sometimes going to wrong place
     'navigation' => [
       'nextEl' => '.patient-tour-next',
@@ -35,19 +36,19 @@
   <div class="patient-tour-next">@svg('carousel-next', 'stroke-current')</div>--}}
 </div>
 <div class="patient-tour-pagination mb-2v mt-10">
-    <div class="patient-tour-pagination-bullet active">
+    <div class="patient-tour-pagination-bullet active" data-group="0-5">
         <span class="bullet"></span>
         <span class="patient-tour-pagination-bullet-title">
             pre-operative phase - UK
         </span>
     </div>
-    <div class="patient-tour-pagination-bullet">
+    <div class="patient-tour-pagination-bullet" data-group="6-12">
         <span class="bullet"></span>
         <span class="patient-tour-pagination-bullet-title">
             Surgery phase - France
         </span>
     </div>
-    <div class="patient-tour-pagination-bullet">
+    <div class="patient-tour-pagination-bullet" data-group="13-17">
         <span class="bullet"></span>
         <span class="patient-tour-pagination-bullet-title">
             recovery phase - UK