* @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'];
}
/**
$res = '<div class="timeline-wrapper">';
$res .= '<div class="year">';
$items = $this->get_settings('items');
- $res .= '<ul>';
+ $res .= '<nav id="timeline-nav">';
foreach ($items as $index => $item) {
$arr = explode(' ', trim($item['title'])); // select the first word
- $res .= '<li class="year-item" data-year="' . $index . '">' . $arr[0] . '</li>';
+ $res .= '<a class="year-item" href="#year-' . $index . '">' . $arr[0] . '</a>';
}
- $res .= '</ul>'; // .year-item
+ $res .= '</nav>';
$res .= '</div>'; // .year
$res .= '<div class="timeline">';
foreach ($items as $index => $item) {
- $res .= '<div id="#'.$index.'" class="timeline-item" data-timeline="' . $index . '">';
+ $res .= '<div id="year-'.$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']);
// 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');
"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",
"yargs": "~11.0.0"
},
"dependencies": {
- "jquery": "^3.3.1"
+ "gumshoejs": "^5.1.1",
+ "jquery": "^3.3.1",
+ "smooth-scroll": "^16.0.3"
}
}
"customizer": [
"./scripts/customizer.js"
],
- "script": [
- "./scripts/script.js"
+ "timeline": [
+ "./scripts/timeline.js"
]
},
"publicPath": "/wp-content/themes/c6",
+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
+++ /dev/null
-// 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
--- /dev/null
+import scrollSpy from 'simple-scrollspy';
+
+scrollSpy('#timeline-nav', {
+ offset: -200,
+ sectionClass: '.timeline-item',
+ menuActiveTarget: '.year-item',
+});
.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
&-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
list-style none
margin-left: 0.35em
li
- margin-bottom: 1em
+ margin-bottom: 1.8em
max-width: 960px
position: relative
&::before
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
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"
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"
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"
projects / c6-wordpress.git / commitdiff