malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add smooth scrolling to all page anchors

Browse Source
This commit is contained in:
Tetrakern 2023-06-17 10:49:18 +02:00
parent abd190c3c8
commit 5066aa19e7
7 changed files with 25 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
includes/functions/_content_helpers.php
View File

@ -830,7 +830,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start();
// Start HTML ---> ?>
<a href="#top" onclick="return fcn_scrollToAnchor(this)" aria-label="<?php _e( 'Scroll to top of the chapter', 'fictioneer' ); ?>" class="micro-menu__up up" tabindex="-1"><i class="fa-solid fa-caret-up"></i></a>
<a href="#top" data-block="center" aria-label="<?php _e( 'Scroll to top of the chapter', 'fictioneer' ); ?>" class="micro-menu__up up" tabindex="-1"><i class="fa-solid fa-caret-up"></i></a>
<?php // <--- End HTML
$micro_menu['top'] = ob_get_clean();

2
includes/functions/_utility.php
View File

@ -1360,7 +1360,7 @@ if ( ! function_exists( 'fictioneer_bbcodes' ) ) {
'<span class="comment-image-consent-wrapper"><button class="button _secondary" title="$1" onclick="fcn_revealCommentImage(this);">' . _x( '<i class="fa-solid fa-image"></i> Show Image', 'Comment image consent wrapper button.', 'fictioneer' ) . '</button><img class="comment-image" data-src="$1"></span>',
"<a href=\"$1\" rel=\"noreferrer noopener nofollow\">$1</a>",
"<a href=\"$1\" rel=\"noreferrer noopener nofollow\">$5</a>",
'<a href="#$1" class="comment-anchor">:anchor:</a>'
'<a href="#$1" data-block="center" class="comment-anchor">:anchor:</a>'
);
// Pattern replace

4
includes/functions/hooks/_chapter_hooks.php
View File

@ -208,11 +208,11 @@ if ( ! function_exists( 'fictioneer_chapter_nav_buttons' ) ) {
<?php endif; ?>
<?php if ( $location === 'top' ) : ?>
<div class="tooltipped" data-tooltip="<?php esc_attr_e( 'Scroll to bottom', 'fictioneer' ); ?>">
<a href="#bottom" onclick="return fcn_scrollToAnchor(this)" aria-label="<?php _e( 'Scroll to bottom of the chapter', 'fictioneer' ); ?>" name="top" class="anchor button _secondary"><i class="fa-solid fa-caret-down"></i></a>
<a href="#bottom" data-block="center" aria-label="<?php _e( 'Scroll to bottom of the chapter', 'fictioneer' ); ?>" name="top" class="anchor button _secondary"><i class="fa-solid fa-caret-down"></i></a>
</div>
<?php else : ?>
<div class="tooltipped" data-tooltip="<?php esc_attr_e( 'Scroll to top', 'fictioneer' ); ?>">
<a href="#top" onclick="return fcn_scrollToAnchor(this)" aria-label="<?php _e( 'Scroll to top of the chapter', 'fictioneer' ); ?>" name="bottom" class="anchor button _secondary"><i class="fa-solid fa-caret-up"></i></a>
<a href="#top" data-block="center" aria-label="<?php _e( 'Scroll to top of the chapter', 'fictioneer' ); ?>" name="bottom" class="anchor button _secondary"><i class="fa-solid fa-caret-up"></i></a>
</div>
<?php endif; ?>
<?php if ( $args['next_index'] ) : ?>

2
js/application.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/utility.min.js vendored
View File

File diff suppressed because one or more lines are too long

19
src/js/application.js
View File

@ -1883,3 +1883,22 @@ _$$('.modal-toggle').forEach(element => {
close?.blur();
});
});
// =============================================================================
// SCROLL TO ANCHORS
// =============================================================================
fcn_theBody.addEventListener('click', event => {
const trigger = event.target.closest('[href]'),
href = trigger?.getAttribute('href');
if (trigger && trigger.tagName === 'A' && href.startsWith('#') && href.length > 1 && href !== '#respond') {
const target = href.replace('#', ''),
targetElement = _$$(`[name="${target}"], #${target}`)[0];
if (targetElement) {
event.preventDefault();
targetElement.scrollIntoView({ behavior: 'smooth', block: trigger.dataset?.block ?? 'start' });
}
}
});

18
src/js/utility.js
View File

@ -745,24 +745,6 @@ function fcn_ariaCheckedUpdate(source) {
}
}
// =============================================================================
// SCROLL ANCHOR INTO VIEW
// =============================================================================
/*
* Scroll smoothly to anchor.
*
* @since 5.2.0
* @param {HTMLElement} source - Clicked element.
*
* @return false
*/
function fcn_scrollToAnchor(source) {
_$(`[name="${source.getAttribute('href').replace('#', '')}"]`).scrollIntoView({ behavior: 'smooth', block: 'center' });
return false; // Prevent default link behavior
}
// =============================================================================
// SCREEN COLLISION DETECTION
// =============================================================================