From 6927690ce4fa914eee15dc716cd63af1570d572c Mon Sep 17 00:00:00 2001
From: nael <nael@cubedesigners.com>
Date: Mon, 29 Apr 2019 18:15:36 +0200
Subject: [PATCH] WIP #2685 @7

---
 .../cube/src/Elementor/Widgets/Timeline.php   |  4 +-
 .../c6/resources/assets/scripts/script.js     | 75 +++++++++++++++----
 .../assets/styles/widgets/timeline.styl       | 15 ++--
 3 files changed, 71 insertions(+), 23 deletions(-)

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 2ab95ff..a0afed8 100644
--- 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>' . $arr[0] . '</a></li>';
+            $res .= '<li class="year-item" data-year="' . $index . '"><a href="#'.$index.'">' . $arr[0] . '</a></li>';
 
         }
         $res .= '</ul>'; // .year-item
@@ -135,7 +135,7 @@ class Timeline extends Widget_Base
 
         foreach ($items as $index => $item) {
 
-            $res .= '<div class="timeline-item" data-timeline="' . $index . '">';
+            $res .= '<div id="#'.$index.'" class="timeline-item" data-timeline="' . $index . '">';
             $res .= '<h2 class="timeline-item-title">' . $item['title'] . '</h2>';
             $res .= '<h3 class="timeline-item-subtitle">' . $item['subtitle'] . '</h3>';
             $res .= wp_get_attachment_image($item['image']['id'], 'large', false, ['class' => 'timeline-item-img']);
diff --git a/wp-content/themes/c6/resources/assets/scripts/script.js b/wp-content/themes/c6/resources/assets/scripts/script.js
index 4fdd9db..9ec8062 100644
--- a/wp-content/themes/c6/resources/assets/scripts/script.js
+++ b/wp-content/themes/c6/resources/assets/scripts/script.js
@@ -1,30 +1,75 @@
 // import $ from 'jquery';
 
-// console.log('wesh');
+// let navigation = $('.year-item');
 
-let link = $('.year-item');
+// 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);
+//     }
+// });
 
-link.on('click', function() {
-    let target = $(this).data('year');
+// //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');
+// });
 
-    alert(target);
+
+// 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);
 });
 
+
+$('.year-item:first').addClass('active');   // add class active to the first year-item
+
+// fonction scroll spy
 $(window).on('scroll', function () {
-    var sections = $('.timeline-item')
-        , nav = $('.year-item')
-        , nav_height = nav.outerHeight()
-        , cur_pos = $(this).scrollTop();
-    sections.each(function() {
-        var top = $(this).offset().top - nav_height,
+    let timeline = $('.timeline-item'),
+        nav = $('.year-item'),
+        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();
 
-        if (cur_pos >= top && cur_pos <= bottom) {
-            nav.find('a').removeClass('active');
-            sections.removeClass('active');
+        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');
-            // nav.data('year').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 () {
+
+                if (thing.data('timeline') === $(this).data('year')) {
+                    nav.removeClass('active');
+                    $(this).addClass('active');
+                }
+            });
+            // console.log($(this).data('timeline'));
         }
     });
 });
\ No newline at end of file
diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl b/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
index 633ae0b..08ce8ff 100644
--- a/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
@@ -7,17 +7,20 @@
 .year
   position: sticky
   height: 0%
-  padding: 1rem 5.375rem
-  top: 0
+  padding: 0 5.375rem
+  top: 149px
   ul
     list-style: none
     li
       margin-bottom: 24px
       cursor: pointer
       text-align: right
-      &:first-of-type
-        font-size: $font-size-small
-        color: $colors.orange
+      //&:first-of-type
+      //  font-size: $font-size-small
+      //  color: $colors.orange
+.year-item.active
+  font-size: $font-size-small
+  color: $colors.orange
 
 .timeline
   display: flex
@@ -27,7 +30,7 @@
   &-item
     margin-bottom: 4em
     &-title
-      margin: 0
+      margin-top: 10px
     &-subtitle
       font-size: $font-size-medium
       margin: 48px 0
-- 
2.39.5