web/_javascript/commons/topbar-title.js

68 lines
1.8 KiB
JavaScript
Raw Normal View History

2019-09-30 15:38:41 +03:00
/*
* Top bar title auto change while scrolling up/down in mobile screens.
2019-09-30 15:38:41 +03:00
*/
$(function() {
const titleSelector = "div.post>h1:first-of-type";
const $pageTitle = $(titleSelector);
const $topbarTitle = $("#topbar-title");
if ($pageTitle.length === 0 /* on Home page */
|| $pageTitle.hasClass("dynamic-title")
|| $topbarTitle.is(":hidden")) {/* not in mobile views */
return;
}
2019-09-30 15:38:41 +03:00
const defaultTitleText = $topbarTitle.text().trim();
let pageTitleText = $pageTitle.text().trim();
let hasScrolled = false;
let lastScrollTop = 0;
2019-09-30 15:38:41 +03:00
if ($("#page-category").length || $("#page-tag").length) {
2020-08-19 07:26:45 +03:00
/* The title in Category or Tag page will be "<title> <count_of_posts>" */
if (/\s/.test(pageTitleText)) {
pageTitleText = pageTitleText.replace(/[0-9]/g, "").trim();
2019-09-30 15:38:41 +03:00
}
}
// When the page is scrolled down and then refreshed, the topbar title needs to be initialized
if ($pageTitle.offset().top < $(window).scrollTop()) {
$topbarTitle.text(pageTitleText);
}
let options = {
rootMargin: '-48px 0px 0px 0px', // 48px equals to the topbar height (3rem)
threshold: [0, 1]
};
let observer = new IntersectionObserver((entries) => {
if (!hasScrolled) {
hasScrolled = true;
return;
2019-09-30 15:38:41 +03:00
}
let curScrollTop = $(window).scrollTop();
let isScrollDown = lastScrollTop < curScrollTop;
lastScrollTop = curScrollTop;
let heading = entries[0];
if (isScrollDown) {
if (heading.intersectionRatio === 0) {
$topbarTitle.text(pageTitleText);
2019-09-30 15:38:41 +03:00
}
} else {
if (heading.intersectionRatio === 1) {
$topbarTitle.text(defaultTitleText);
2019-09-30 15:38:41 +03:00
}
}
}, options);
observer.observe(document.querySelector(titleSelector));
2019-09-30 15:38:41 +03:00
/* Click title will scroll to top */
$topbarTitle.click(function() {
2020-08-19 07:26:45 +03:00
$("body,html").animate({scrollTop: 0}, 800);
2019-09-30 15:38:41 +03:00
});
2021-01-23 10:07:18 +03:00
});