From 9f4d328b8984c424f8ea3fc95e86baf41a5411b1 Mon Sep 17 00:00:00 2001 From: nael Date: Mon, 6 May 2019 18:13:35 +0200 Subject: [PATCH] WIP #2685 @7 --- .../cube/src/Elementor/Widgets/Timeline.php | 19 ++++-- wp-content/themes/c6/app/setup.php | 1 - wp-content/themes/c6/package.json | 5 +- .../themes/c6/resources/assets/config.json | 4 +- .../resources/assets/scripts/routes/common.js | 6 ++ .../c6/resources/assets/scripts/script.js | 68 ------------------- .../c6/resources/assets/scripts/timeline.js | 7 ++ .../assets/styles/widgets/timeline.styl | 34 ++++------ wp-content/themes/c6/yarn.lock | 15 ++++ 9 files changed, 63 insertions(+), 96 deletions(-) delete mode 100644 wp-content/themes/c6/resources/assets/scripts/script.js create mode 100644 wp-content/themes/c6/resources/assets/scripts/timeline.js 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 c0cc7cd..709efd3 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php @@ -44,7 +44,16 @@ class Timeline extends Widget_Base * @return array Widget scripts dependencies. */ public function get_script_depends() { - return []; + + wp_register_script( + 'cube-timeline', + \App\asset_path('scripts/timeline.js'), + ['jquery'], // Dependencies + null, // Version + true // In footer? + ); + + return ['cube-timeline']; } /** @@ -122,20 +131,20 @@ class Timeline extends Widget_Base $res = '
'; $res .= '
'; $items = $this->get_settings('items'); - $res .= '
    '; + $res .= '
'; // .year-item + $res .= ''; $res .= '
'; // .year $res .= '
'; foreach ($items as $index => $item) { - $res .= '
'; + $res .= '
'; $res .= '

' . $item['title'] . '

'; $res .= '

' . $item['subtitle'] . '

'; $res .= wp_get_attachment_image($item['image']['id'], 'large', false, ['class' => 'timeline-item-img']); diff --git a/wp-content/themes/c6/app/setup.php b/wp-content/themes/c6/app/setup.php index e4f8b9c..e28f182 100644 --- a/wp-content/themes/c6/app/setup.php +++ b/wp-content/themes/c6/app/setup.php @@ -15,7 +15,6 @@ add_action('wp_enqueue_scripts', function () { // is always loaded afterwards, allowing us to override the default styles. On 404 pages, this wasn't happening. wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), ['elementor-frontend'], null); wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true); - wp_enqueue_script('sage/script.js', asset_path('scripts/script.js'), ['jquery'], null, true); if (is_single() && comments_open() && get_option('thread_comments')) { wp_enqueue_script('comment-reply'); diff --git a/wp-content/themes/c6/package.json b/wp-content/themes/c6/package.json index a6f8342..46a110e 100644 --- a/wp-content/themes/c6/package.json +++ b/wp-content/themes/c6/package.json @@ -65,6 +65,7 @@ "rupture": "^0.7.1", "sass-loader": "~6.0", "sidr": "^2.2.1", + "simple-scrollspy": "^2.0.1", "style-loader": "^0.22.1", "stylelint": "^8.4.0", "stylelint-config-standard": "~18.2.0", @@ -81,6 +82,8 @@ "yargs": "~11.0.0" }, "dependencies": { - "jquery": "^3.3.1" + "gumshoejs": "^5.1.1", + "jquery": "^3.3.1", + "smooth-scroll": "^16.0.3" } } diff --git a/wp-content/themes/c6/resources/assets/config.json b/wp-content/themes/c6/resources/assets/config.json index 0e82b77..873edff 100644 --- a/wp-content/themes/c6/resources/assets/config.json +++ b/wp-content/themes/c6/resources/assets/config.json @@ -7,8 +7,8 @@ "customizer": [ "./scripts/customizer.js" ], - "script": [ - "./scripts/script.js" + "timeline": [ + "./scripts/timeline.js" ] }, "publicPath": "/wp-content/themes/c6", diff --git a/wp-content/themes/c6/resources/assets/scripts/routes/common.js b/wp-content/themes/c6/resources/assets/scripts/routes/common.js index 3acfc95..2c599f5 100644 --- a/wp-content/themes/c6/resources/assets/scripts/routes/common.js +++ b/wp-content/themes/c6/resources/assets/scripts/routes/common.js @@ -1,6 +1,12 @@ +import SmoothScroll from 'smooth-scroll'; + export default { init() { // JavaScript to be fired on all pages + new SmoothScroll('a[href*="#"]', { + speed: 300, + offset: 0, + }); }, finalize() { // JavaScript to be fired on all pages, after page specific JS is fired diff --git a/wp-content/themes/c6/resources/assets/scripts/script.js b/wp-content/themes/c6/resources/assets/scripts/script.js deleted file mode 100644 index a57a489..0000000 --- a/wp-content/themes/c6/resources/assets/scripts/script.js +++ /dev/null @@ -1,68 +0,0 @@ -// import $ from 'jquery'; - -// smooth scroll on click function -$(document).ready(function () { - let timeline = $('.timeline-item'), - nav = $('.year-item'), - nav_height = nav.outerHeight(), - currentPosition = $(this).scrollTop(); - - console.log('current position : ' + currentPosition); - - 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 ); - - 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 - -// fonction scroll spy -$(window).on('scroll', function () { - let timeline = $('.timeline-item'), - nav = $('.year-item'), - nav_height = nav.outerHeight(), - currentPosition = $(this).scrollTop(); - - console.log('current position : ' + currentPosition); - - timeline.each(function () { - // on detecte le top et bottom de chaque section timeline - let top = $(this).offset().top - nav_height, - bottom = top + $(this).outerHeight(); - - // 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 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'); - } - }); - } - }); -}); \ No newline at end of file diff --git a/wp-content/themes/c6/resources/assets/scripts/timeline.js b/wp-content/themes/c6/resources/assets/scripts/timeline.js new file mode 100644 index 0000000..9231055 --- /dev/null +++ b/wp-content/themes/c6/resources/assets/scripts/timeline.js @@ -0,0 +1,7 @@ +import scrollSpy from 'simple-scrollspy'; + +scrollSpy('#timeline-nav', { + offset: -200, + sectionClass: '.timeline-item', + menuActiveTarget: '.year-item', +}); 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 08ce8ff..6503d1e 100644 --- a/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl +++ b/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl @@ -6,21 +6,18 @@ .year position: sticky - height: 0% + align-self flex-start 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 -.year-item.active - font-size: $font-size-small - color: $colors.orange + @media (max-width: 425px) + display: none + &-item + display: block + margin-bottom: 24px + text-align: right + &.active + font-size: $font-size-small + color: $colors.orange .timeline display: flex @@ -30,16 +27,17 @@ &-item margin-bottom: 4em &-title - margin-top: 10px + margin-top: 15px + margin-bottom: 0,8888em &-subtitle font-size: $font-size-medium - margin: 48px 0 + margin-bottom: 1.333em &-img margin-bottom: 48px &-body p max-width: 960px - margin-bottom: 48px + margin-bottom: 3em h4 font-size: $font-size-small font-weight: lighter @@ -49,7 +47,7 @@ list-style none margin-left: 0.35em li - margin-bottom: 1em + margin-bottom: 1.8em max-width: 960px position: relative &::before @@ -61,7 +59,5 @@ position: absolute left: -1.6em top: 12px - &:first-of-type - margin-top: 1em &:last-of-type margin-bottom: 0 \ No newline at end of file diff --git a/wp-content/themes/c6/yarn.lock b/wp-content/themes/c6/yarn.lock index 6edb26b..e2a3514 100644 --- a/wp-content/themes/c6/yarn.lock +++ b/wp-content/themes/c6/yarn.lock @@ -4171,6 +4171,11 @@ gulplog@^1.0.0: dependencies: glogg "^1.0.0" +gumshoejs@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/gumshoejs/-/gumshoejs-5.1.1.tgz#b67564fdec7bd8be8e2eaf02cc01f7c9fd7f8ce0" + integrity sha512-aQvXoMH/EbYGf7aRtpKhyvrYpBw7X+nMvdBg/dH3TOeqeM5BsDQKVaDRVsiv2AqLLj26h/WMBUsYgjT4oyIGKg== + har-schema@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92" @@ -8590,6 +8595,11 @@ signal-exit@^3.0.0, signal-exit@^3.0.2: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0= +simple-scrollspy@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/simple-scrollspy/-/simple-scrollspy-2.0.1.tgz#9399290d1a96c58f13913f80ecfa3afbe9bb34df" + integrity sha512-fb/Ze/qnfK3/EABCsZXBWVVSlZkU+2bAM4g3cHJloOCZi9keufxIvoXvF6LtFcYezA9FJfGMMASAv2Z1ct6xoQ== + simple-swizzle@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" @@ -8609,6 +8619,11 @@ slice-ansi@1.0.0: dependencies: is-fullwidth-code-point "^2.0.0" +smooth-scroll@^16.0.3: + version "16.0.3" + resolved "https://registry.yarnpkg.com/smooth-scroll/-/smooth-scroll-16.0.3.tgz#5914e0e4050a5313102d734140ddee0267526fd7" + integrity sha512-Wnhk3tWeqVJRrSUxeLQ4r7MNQvc9MNlswyWfKqAQ9cc37D8VqTco/CicWcdHzSFEC4/9/kPPK3uY6oyY+mdRYg== + snapdragon-node@^2.0.1: version "2.1.1" resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b" -- 2.39.5