f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-22 23:53:12 +00:00
Code Issues Packages Releases Activity

Hide topbar when mobile orientation in landscape mode (resolve #459)

Browse Source
This commit is contained in:
Cotes Chung
2022-01-09 19:09:29 +08:00
parent 9620eddd12
commit 2cef631385
14 changed files with 186 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
_javascript/utils/smooth-scroll.js
View File

@@ -8,21 +8,16 @@
*/
$(function() {
const $topbarWrapper = $("#topbar-wrapper");
const topbarHeight = $topbarWrapper.outerHeight();
const $topbarTitle = $("#topbar-title");
const ATTR_TOC_SCROLLING = "toc-scrolling-up";
const SCROLL_MARK = "scroll-focus";
const REM = 16; // in pixels
let tocScrollUpCount = 0;
const ATTR_SCROLL_FOCUS = "scroll-focus";
$("a[href*='#']")
.not("[href='#']")
.not("[href='#0']")
.click(function(event) {
if (this.pathname.replace(/^\//, "") !== location.pathname.replace(/^\//, "")) {
if (this.pathname.replace(/^\//, "") !==
location.pathname.replace(/^\//, "")) {
return;
}
@@ -36,9 +31,8 @@ $(function() {
let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
let $target = $(selector);
let parent = $(this).parent().prop("tagName");
let isAnchor = RegExp(/^H\d/).test(parent);
let isMobileViews = !$topbarTitle.is(":hidden");
let isMobileViews = $topbarTitle.is(":visible");
let isPortrait = $(window).width() < $(window).height();
if (typeof $target === "undefined") {
return;
@@ -50,26 +44,20 @@ $(function() {
history.pushState(null, null, hash);
}
let curOffset = isAnchor ? $(this).offset().top : $(window).scrollTop();
let curOffset = $(window).scrollTop();
let destOffset = $target.offset().top -= REM / 2;
if (destOffset < curOffset) { // scroll up
if (!isAnchor && !toFootnote) { // trigger by ToC item
if (!isMobileViews) { // on desktop/tablet screens
$topbarWrapper.removeClass("topbar-down").addClass("topbar-up");
// Send message to `${JS_ROOT}/commons/topbar-switch.js`
$topbarWrapper.attr(ATTR_TOC_SCROLLING, true);
tocScrollUpCount += 1;
}
ScrollHelper.hideTopbar();
ScrollHelper.addScrollUpTask();
if (isMobileViews && isPortrait) {
destOffset -= ScrollHelper.getTopbarHeight();
}
if ((isAnchor || toFootnoteRef) && isMobileViews) {
destOffset -= topbarHeight;
}
} else {
if (isMobileViews) {
destOffset -= topbarHeight;
} else { // scroll down
if (isMobileViews && isPortrait) {
destOffset -= ScrollHelper.getTopbarHeight();
}
}
@@ -79,18 +67,18 @@ $(function() {
$target.focus();
/* clean up old scroll mark */
if ($(`[${SCROLL_MARK}=true]`).length) {
$(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false);
if ($(`[${ATTR_SCROLL_FOCUS}=true]`).length) {
$(`[${ATTR_SCROLL_FOCUS}=true]`).attr(ATTR_SCROLL_FOCUS, false);
}
/* Clean :target links */
if ($(":target").length) { /* element that visited by the URL with hash */
$(":target").attr(SCROLL_MARK, false);
$(":target").attr(ATTR_SCROLL_FOCUS, false);
}
/* set scroll mark to footnotes */
if (toFootnote || toFootnoteRef) {
$target.attr(SCROLL_MARK, true);
$target.attr(ATTR_SCROLL_FOCUS, true);
}
if ($target.is(":focus")) { /* Checking if the target was focused */
@@ -100,12 +88,8 @@ $(function() {
$target.focus(); /* Set focus again */
}
if (typeof $topbarWrapper.attr(ATTR_TOC_SCROLLING) !== "undefined") {
tocScrollUpCount -= 1;
if (tocScrollUpCount <= 0) {
$topbarWrapper.attr(ATTR_TOC_SCROLLING, "false");
}
if (ScrollHelper.hasScrollUpTask()) {
ScrollHelper.popScrollUpTask();
}
});
}); /* click() */