From f77160cf17fdce2c06976ed24a77c84ae3f41ff7 Mon Sep 17 00:00:00 2001 From: nael Date: Tue, 30 Apr 2019 14:08:52 +0200 Subject: [PATCH] fix timeline WIP #2685 @3.30 --- .../cube/src/Elementor/Widgets/Timeline.php | 2 +- .../c6/resources/assets/scripts/script.js | 65 +++++++++---------- 2 files changed, 30 insertions(+), 37 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 a0afed8..c0cc7cd 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 .= '
  • ' . $arr[0] . '
  • '; + $res .= '
  • ' . $arr[0] . '
  • '; } $res .= ''; // .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 9ec8062..a57a489 100644 --- 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 -- 2.39.5