| 325 | | /* ----------------------------------------------------------------------------------------------- |
| 326 | | Smooth Scroll |
| 327 | | --------------------------------------------------------------------------------------------------- */ |
| 328 | | |
| 329 | | twentytwenty.smoothScroll = { |
| 330 | | |
| 331 | | init: function() { |
| 332 | | // Scroll to anchor |
| 333 | | this.scrollToAnchor(); |
| 334 | | |
| 335 | | // Scroll to element |
| 336 | | this.scrollToElement(); |
| 337 | | }, |
| 338 | | |
| 339 | | // Scroll to anchor |
| 340 | | scrollToAnchor: function() { |
| 341 | | var anchorElements = document.querySelectorAll( 'a[href*="#"]' ); |
| 342 | | var anchorElementsList = Array.prototype.slice.call( anchorElements ); |
| 343 | | anchorElementsList.filter( function( element ) { |
| 344 | | if ( element.href === '#' || element.href === '#0' || element.id === 'cancel-comment-reply-link' || element.classList.contains( 'do-not-scroll' ) || element.classList.contains( 'skip-link' ) ) { |
| 345 | | return false; |
| 346 | | } |
| 347 | | return true; |
| 348 | | } ).forEach( function( element ) { |
| 349 | | element.addEventListener( 'click', function( event ) { |
| 350 | | var target, scrollOffset, originalOffset, adminBar, scrollSpeed, additionalOffset; |
| 351 | | |
| 352 | | // On-page links |
| 353 | | if ( window.location.hostname === event.target.hostname ) { |
| 354 | | // Figure out element to scroll to |
| 355 | | target = window.location.hash !== '' && document.querySelector( window.location.hash ); |
| 356 | | target = target ? target : event.target.hash !== '' && document.querySelector( event.target.hash ); |
| 357 | | |
| 358 | | // Does a scroll target exist? |
| 359 | | if ( target ) { |
| 360 | | // Only prevent default if animation is actually gonna happen |
| 361 | | event.preventDefault(); |
| 362 | | |
| 363 | | // Get options |
| 364 | | additionalOffset = event.target.dataset.additionalOffset; |
| 365 | | scrollSpeed = event.target.dataset.scrollSpeed ? event.target.dataset.scrollSpeed : 500; |
| 366 | | |
| 367 | | // Determine offset |
| 368 | | |
| 369 | | adminBar = document.querySelector( '#wpadminbar' ); |
| 370 | | |
| 371 | | originalOffset = target.getBoundingClientRect().top + window.pageYOffset; |
| 372 | | scrollOffset = additionalOffset ? originalOffset + additionalOffset : originalOffset; |
| 373 | | |
| 374 | | if ( adminBar && event.target.className === 'to-the-top' ) { |
| 375 | | scrollOffset = scrollOffset - adminBar.getBoundingClientRect().height; |
| 376 | | } |
| 377 | | |
| 378 | | twentytwentyScrollTo( scrollOffset, null, scrollSpeed ); |
| 379 | | |
| 380 | | window.location.hash = event.target.hash.slice( 1 ); |
| 381 | | } |
| 382 | | } |
| 383 | | } ); |
| 384 | | } ); |
| 385 | | }, |
| 386 | | |
| 387 | | // Scroll to element |
| 388 | | scrollToElement: function() { |
| 389 | | var scrollToElement = document.querySelector( '*[data-scroll-to]' ); |
| 390 | | |
| 391 | | if ( scrollToElement ) { |
| 392 | | scrollToElement.addEventListener( 'click', function( event ) { |
| 393 | | var originalOffset, additionalOffset, scrollOffset, scrollSpeed, |
| 394 | | // Figure out element to scroll to |
| 395 | | target = event.target.dataset.twentytwentyScrollTo; |
| 396 | | |
| 397 | | // Make sure said element exists |
| 398 | | if ( target ) { |
| 399 | | event.preventDefault(); |
| 400 | | |
| 401 | | // Get options |
| 402 | | additionalOffset = event.target.dataset.additionalOffset; |
| 403 | | scrollSpeed = event.target.dataset.scrollSpeed ? event.target.dataset.scrollSpeed : 500; |
| 404 | | |
| 405 | | // Determine offset |
| 406 | | originalOffset = target.getBoundingClientRect().top + window.pageYOffset; |
| 407 | | scrollOffset = additionalOffset ? originalOffset + additionalOffset : originalOffset; |
| 408 | | |
| 409 | | twentytwentyScrollTo( scrollOffset, null, scrollSpeed ); |
| 410 | | } |
| 411 | | } ); |
| 412 | | } |
| 413 | | } |
| 414 | | |
| 415 | | }; // twentytwenty.smoothScroll |
| 416 | | |