web/_javascript/commons/topbar-switcher.js

90 lines
2.4 KiB
JavaScript
Raw Normal View History

2022-10-25 14:26:44 +03:00
/**
* Hide Header on scroll down
*/
2022-10-25 14:26:44 +03:00
$(function () {
const $searchInput = $("#search-input");
const delta = ScrollHelper.getTopbarHeight();
2022-10-25 14:26:44 +03:00
let didScroll;
let lastScrollTop = 0;
2022-10-25 14:26:44 +03:00
function hasScrolled() {
let st = $(this).scrollTop();
2022-10-25 14:26:44 +03:00
/* Make sure they scroll more than delta */
if (Math.abs(lastScrollTop - st) <= delta) {
return;
}
2022-10-25 14:26:44 +03:00
if (st > lastScrollTop) { // Scroll Down
ScrollHelper.hideTopbar();
if ($searchInput.is(":focus")) {
$searchInput.trigger('blur'); /* remove focus */
2022-10-25 14:26:44 +03:00
}
} else { // Scroll up
// has not yet scrolled to the bottom of the screen, that is, there is still space for scrolling
if (st + $(window).height() < $(document).height()) {
if (ScrollHelper.hasScrollUpTask()) {
return;
}
if (ScrollHelper.topbarLocked()) { // avoid redundant scroll up event from smooth scrolling
ScrollHelper.unlockTopbar();
} else {
if (ScrollHelper.orientationLocked()) { // avoid device auto scroll up on orientation change
ScrollHelper.unLockOrientation();
} else {
ScrollHelper.showTopbar();
}
}
}
}
2022-10-25 14:26:44 +03:00
lastScrollTop = st;
2022-10-25 14:26:44 +03:00
} // hasScrolled()
2022-10-25 14:26:44 +03:00
function handleLandscape() {
if ($(window).scrollTop() === 0) {
return;
}
ScrollHelper.lockOrientation();
ScrollHelper.hideTopbar();
}
2022-10-25 14:26:44 +03:00
if (screen.orientation) {
screen.orientation.onchange = () => {
const type = screen.orientation.type;
if (type === "landscape-primary" || type === "landscape-secondary") {
handleLandscape();
}
};
} else {
// for the browsers that not support `window.screen.orientation` API
$(window).on("orientationchange", () => {
if ($(window).width() < $(window).height()) { // before rotating, it is still in portrait mode.
handleLandscape();
}
});
}
$(window).on('scroll',() => {
2022-10-25 14:26:44 +03:00
if (didScroll) {
return;
}
didScroll = true;
});
2022-10-25 14:26:44 +03:00
setInterval(() => {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
});