fix timeline WIP #2685 @3.30

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
index a0afed8a7166047163bda15ce991cb5e0e81615d..c0cc7cd27d630e9e238c0e1cfae2b93725ee8dbe 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
@@ -126,7 +126,7 @@ class Timeline extends Widget_Base
         foreach ($items as $index => $item) {
 
             $arr = explode(' ', trim($item['title'])); // select the first word
-            $res .= '<li class="year-item" data-year="' . $index . '"><a href="#'.$index.'">' . $arr[0] . '</a></li>';
+            $res .= '<li class="year-item" data-year="' . $index . '">' . $arr[0] . '</li>';
 
         }
         $res .= '</ul>'; // .year-item

diff --git a/wp-content/themes/c6/resources/assets/scripts/script.js b/wp-content/themes/c6/resources/assets/scripts/script.js
index 9ec8062afd7b1780770cd9d954c54a96af12ce81..a57a489c80517d49fa27d3923fdf498c5236c32c 100644 (file)
--- a/wp-content/themes/c6/resources/assets/scripts/script.js
+++ b/wp-content/themes/c6/resources/assets/scripts/script.js
@@ -1,38 +1,37 @@
 // import $ from 'jquery';
 
-// let navigation = $('.year-item');
+// smooth scroll on click function
+$(document).ready(function () {
+    let timeline = $('.timeline-item'),
+        nav = $('.year-item'),
+        nav_height = nav.outerHeight(),
+        currentPosition = $(this).scrollTop();
 
-// navigation.on('click',function(e){
-//     e.preventDefault();
-//     var target = $($(this).attr('href'));
-//     if(target.length){
-//         var scrollTo = target.offset().top;
-//         $('body, html').animate({scrollTop: scrollTo+'px'}, 800);
-//     }
-// });
+    console.log('current position : ' + currentPosition);
 
-// //TODO : ON CLICK REDIRECT TO THE RIGHT SECTION
-// navigation.on('click', function() {
-//     let target = $(this).data('year');
-//     alert(target);
-//     // $('html, body').animate({
-//     //     scrollTop: $(target).offset().top(),
-//     // },'slow');
-// });
+    timeline.each(function () {
+        // on detecte le top et bottom de chaque section timeline
+        let top = $(this).offset().top - nav_height,
+            bottom = top + $(this).outerHeight();
 
+        console.log('top : ' + top + '  ----  ' + 'bottom : ' + bottom );
 
-// smoothscroll on click bug
-$('.year-item ').on('click', function() {
-    let hash = $(this).data('year');
-    let $toElement = $('a[href=#'+hash+']');
-    let toPosition = $toElement.offset().top;
-    $('html,body').animate(
-    {
-            scrollTop: toPosition,
-    },500);
-    console.log(toPosition);
-});
+        let thing = $(this);
 
+        nav.each(function () {
+            $(this).on('click',function () {
+                if (thing.data('timeline') === $(this).data('year')) {
+                    // alert(top);
+                    let scrollValue = top +2; // la valeur top est une valeur arrondie, on ajoute +1 pour que le scroll se synchonise avec la liste des années.
+                    $('html,body').animate(
+                    {
+                            scrollTop: scrollValue,
+                    },600);
+                }
+            });
+        })
+    });
+});
 
 $('.year-item:first').addClass('active');   // add class active to the first year-item
 
@@ -43,33 +42,27 @@ $(window).on('scroll', function () {
         nav_height = nav.outerHeight(),
         currentPosition = $(this).scrollTop();
 
-    // see the current position on scroll
     console.log('current position : ' + currentPosition);
 
-    // pour chaque element timeline
     timeline.each(function () {
         // on detecte le top et bottom de chaque section timeline
         let top = $(this).offset().top - nav_height,
             bottom = top + $(this).outerHeight();
 
-        console.log('top : ' + top + '  ----  ' + 'bottom : ' + bottom);
-
         // si la position actuel est supérieur ou egale au top ET inferieur ou egale au bottom alors on ajoute la class active sur l"élément timeline-item en question
         if (currentPosition >= top && currentPosition <= bottom) {
 
             timeline.removeClass('active');
             $(this).addClass('active');
-
             let thing = $(this);
-            // on attribut la class active a l'element ''year-item'' uniquement si les element data attribute de timeline-item ET year-item ont la meme valeur
-            nav.each(function () {
 
+            // on attribut la class active a l'element ''year-item'' uniquement si les elements data attribute de timeline-item ET year-item ont la meme valeur
+            nav.each(function () {
                 if (thing.data('timeline') === $(this).data('year')) {
                     nav.removeClass('active');
                     $(this).addClass('active');
                 }
             });
-            // console.log($(this).data('timeline'));
         }
     });
 });
\ No newline at end of file