refactor(build): modularize JS code
- replace gulp with rollup - remove JS output from repo
This commit is contained in:
109
_javascript/modules/components/smooth-scroll.js
Normal file
109
_javascript/modules/components/smooth-scroll.js
Normal file
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
Safari doesn't support CSS `scroll-behavior: smooth`,
|
||||
so here is a compatible solution for all browser to smooth scrolling
|
||||
|
||||
See: <https://css-tricks.com/snippets/jquery/smooth-scrolling/>
|
||||
|
||||
Warning: It must be called after all `<a>` tags (e.g., the dynamic TOC) are ready.
|
||||
*/
|
||||
import ScrollHelper from './utils/scroll-helper';
|
||||
|
||||
export function smoothScroll() {
|
||||
const $topbarTitle = $('#topbar-title');
|
||||
const REM = 16; // in pixels
|
||||
const ATTR_SCROLL_FOCUS = 'scroll-focus';
|
||||
const SCOPE = "a[href*='#']:not([href='#']):not([href='#0'])";
|
||||
|
||||
$(SCOPE).on('click', function (event) {
|
||||
if (
|
||||
this.pathname.replace(/^\//, '') !== location.pathname.replace(/^\//, '')
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (location.hostname !== this.hostname) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hash = decodeURI(this.hash);
|
||||
let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
|
||||
let toFootnote = toFootnoteRef ? false : RegExp(/^#fn:/).test(hash);
|
||||
let selector = '#' + $.escapeSelector(hash.substring(1));
|
||||
let $target = $(selector);
|
||||
|
||||
let isMobileViews = $topbarTitle.is(':visible');
|
||||
let isPortrait = $(window).width() < $(window).height();
|
||||
|
||||
if (typeof $target === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (history.pushState) {
|
||||
/* add hash to URL */
|
||||
history.pushState(null, null, hash);
|
||||
}
|
||||
|
||||
let curOffset = $(window).scrollTop();
|
||||
let destOffset = ($target.offset().top -= REM / 2);
|
||||
|
||||
if (destOffset < curOffset) {
|
||||
// scroll up
|
||||
ScrollHelper.hideTopbar();
|
||||
ScrollHelper.addScrollUpTask();
|
||||
|
||||
if (isMobileViews && isPortrait) {
|
||||
destOffset -= ScrollHelper.getTopbarHeight();
|
||||
}
|
||||
} else {
|
||||
// scroll down
|
||||
if (isMobileViews && isPortrait) {
|
||||
destOffset -= ScrollHelper.getTopbarHeight();
|
||||
}
|
||||
}
|
||||
|
||||
$('html').animate(
|
||||
{
|
||||
scrollTop: destOffset
|
||||
},
|
||||
500,
|
||||
() => {
|
||||
$target.trigger('focus');
|
||||
|
||||
/* clean up old scroll mark */
|
||||
const $scroll_focus = $(`[${ATTR_SCROLL_FOCUS}=true]`);
|
||||
if ($scroll_focus.length) {
|
||||
$scroll_focus.attr(ATTR_SCROLL_FOCUS, 'false');
|
||||
}
|
||||
|
||||
/* Clean :target links */
|
||||
const $target_links = $(':target');
|
||||
if ($target_links.length) {
|
||||
/* element that visited by the URL with hash */
|
||||
$target_links.attr(ATTR_SCROLL_FOCUS, 'false');
|
||||
}
|
||||
|
||||
/* set scroll mark to footnotes */
|
||||
if (toFootnote || toFootnoteRef) {
|
||||
$target.attr(ATTR_SCROLL_FOCUS, 'true');
|
||||
}
|
||||
|
||||
if ($target.is(':focus')) {
|
||||
/* Checking if the target was focused */
|
||||
return false;
|
||||
} else {
|
||||
$target.attr(
|
||||
'tabindex',
|
||||
'-1'
|
||||
); /* Adding tabindex for elements not focusable */
|
||||
$target.trigger('focus'); /* Set focus again */
|
||||
}
|
||||
|
||||
if (ScrollHelper.hasScrollUpTask()) {
|
||||
ScrollHelper.popScrollUpTask();
|
||||
}
|
||||
}
|
||||
);
|
||||
}); /* click() */
|
||||
}
|
||||
Reference in New Issue
Block a user