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

refactor: simplify basic layout (#1039)

Browse Source 
A dynamically expanding/collapsing topbar is difficult to maintain and not very useful.
This commit is contained in:
Cotes Chung
2023-05-17 01:59:34 +08:00
committed by GitHub
parent 52f5ee9cd3
commit d81f836b06
11 changed files with 26 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
_javascript/modules/components/back-to-top.js
View File

@@ -4,10 +4,7 @@
export function back2top() {
$(window).on('scroll', () => {
if (
$(window).scrollTop() > 50 &&
$('#sidebar-trigger').css('display') === 'none'
) {
if ($(window).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();

66
_javascript/modules/components/convert-title.js
View File

@@ -1,66 +0,0 @@
/**
* Top bar title auto change while scrolling up/down in mobile screens.
*/
const titleSelector = 'div.post>h1:first-of-type';
const $pageTitle = $(titleSelector);
const $topbarTitle = $('#topbar-title');
const defaultTitleText = $topbarTitle.text().trim();
export function convertTitle() {
if (
$pageTitle.length === 0 /* on Home page */ ||
$pageTitle.hasClass('dynamic-title') ||
$topbarTitle.is(':hidden')
) {
/* not in mobile views */
return;
}
let pageTitleText = $pageTitle.text().trim();
let hasScrolled = false;
let lastScrollTop = 0;
if ($('#page-category').length || $('#page-tag').length) {
/* The title in Category or Tag page will be "<title> <count_of_posts>" */
if (/\s/.test(pageTitleText)) {
pageTitleText = pageTitleText.replace(/[0-9]/g, '').trim();
}
}
// 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;
}
let curScrollTop = $(window).scrollTop();
let isScrollDown = lastScrollTop < curScrollTop;
lastScrollTop = curScrollTop;
let heading = entries[0];
if (isScrollDown) {
if (heading.intersectionRatio === 0) {
$topbarTitle.text(pageTitleText);
}
} else {
if (heading.intersectionRatio === 1) {
$topbarTitle.text(defaultTitleText);
}
}
}, options);
observer.observe(document.querySelector(titleSelector));
/* Click title will scroll to top */
$topbarTitle.on('click', () => window.scrollTo(0, 0));
}

6
_javascript/modules/components/search-display.js
View File

@@ -4,7 +4,7 @@
const $btnSbTrigger = $('#sidebar-trigger');
const $btnSearchTrigger = $('#search-trigger');
const $btnCancel = $('#search-cancel');
const $main = $('#main');
const $content = $('#main>.row');
const $topbarTitle = $('#topbar-title');
const $searchWrapper = $('#search-wrapper');
const $resultWrapper = $('#search-result-wrapper');
@@ -58,7 +58,7 @@ class ResultSwitch {
// the block method must be called before $(#main) unloaded.
ScrollBlocker.on();
$resultWrapper.removeClass(C_UNLOADED);
$main.addClass(C_UNLOADED);
$content.addClass(C_UNLOADED);
ScrollBlocker.resultVisible = true;
}
}
@@ -70,7 +70,7 @@ class ResultSwitch {
$hints.removeClass(C_UNLOADED);
}
$resultWrapper.addClass(C_UNLOADED);
$main.removeClass(C_UNLOADED);
$content.removeClass(C_UNLOADED);
// now the release method must be called after $(#main) display
ScrollBlocker.off();

99
_javascript/modules/components/topbar-switcher.js
View File

@@ -1,99 +0,0 @@
/**
* Hide Header on scroll down
*/
import ScrollHelper from './utils/scroll-helper';
const $searchInput = $('#search-input');
const delta = ScrollHelper.getTopbarHeight();
let lastScrollTop = 0;
function hasScrolled() {
let st = $(window).scrollTop();
/* Make sure they scroll more than delta */
if (Math.abs(lastScrollTop - st) <= delta) {
return;
}
if (st > lastScrollTop) {
/* Scroll down */
ScrollHelper.hideTopbar();
if ($searchInput.is(':focus')) {
$searchInput.trigger('blur'); /* remove focus */
}
} 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();
}
}
}
}
lastScrollTop = st;
} // hasScrolled()
function handleLandscape() {
if ($(window).scrollTop() === 0) {
return;
}
ScrollHelper.lockOrientation();
ScrollHelper.hideTopbar();
}
export function switchTopbar() {
const orientation = screen.orientation;
let didScroll = false;
const handleOrientationChange = () => {
const type = orientation.type;
if (type === 'landscape-primary' || type === 'landscape-secondary') {
handleLandscape();
}
};
const handleWindowChange = () => {
if ($(window).width() < $(window).height()) {
// before rotating, it is still in portrait mode.
handleLandscape();
}
};
const handleScroll = () => {
didScroll = true;
};
const checkScroll = () => {
if (didScroll) {
hasScrolled();
didScroll = false;
}
};
if (orientation) {
orientation.addEventListener('change', handleOrientationChange);
} else {
// for the browsers that not support `window.screen.orientation` API
$(window).on('orientationchange', handleWindowChange);
}
$(window).on('scroll', handleScroll);
setInterval(checkScroll, 250);
}

64
_javascript/modules/components/utils/scroll-helper.js
View File

@@ -1,64 +0,0 @@
/**
* A tool for smooth scrolling and topbar switcher
*/
const ATTR_TOPBAR_VISIBLE = 'data-topbar-visible';
const $body = $('body');
const $topbarWrapper = $('#topbar-wrapper');
export default class ScrollHelper {
static scrollUpCount = 0; // the number of times the scroll up was triggered by ToC or anchor
static topbarIsLocked = false;
static orientationIsLocked = false;
static hideTopbar() {
$body.attr(ATTR_TOPBAR_VISIBLE, 'false');
}
static showTopbar() {
$body.attr(ATTR_TOPBAR_VISIBLE, 'true');
}
// scroll up
static addScrollUpTask() {
ScrollHelper.scrollUpCount += 1;
if (!ScrollHelper.topbarIsLocked) {
ScrollHelper.topbarIsLocked = true;
}
}
static popScrollUpTask() {
ScrollHelper.scrollUpCount -= 1;
}
static hasScrollUpTask() {
return ScrollHelper.scrollUpCount > 0;
}
static topbarLocked() {
return ScrollHelper.topbarIsLocked === true;
}
static unlockTopbar() {
ScrollHelper.topbarIsLocked = false;
}
static getTopbarHeight() {
return $topbarWrapper.outerHeight();
}
// orientation change
static orientationLocked() {
return ScrollHelper.orientationIsLocked === true;
}
static lockOrientation() {
ScrollHelper.orientationIsLocked = true;
}
static unLockOrientation() {
ScrollHelper.orientationIsLocked = false;
}
}