summaryrefslogtreecommitdiff
path: root/_includes
diff options
context:
space:
mode:
Diffstat (limited to '_includes')
-rw-r--r--_includes/extensions/hashlocate.html31
-rw-r--r--_includes/head.html3
-rw-r--r--_includes/sidebar/article-menu.html77
-rw-r--r--_includes/views/header.html17
4 files changed, 62 insertions, 66 deletions
diff --git a/_includes/extensions/hashlocate.html b/_includes/extensions/hashlocate.html
index d44b249..6faf553 100644
--- a/_includes/extensions/hashlocate.html
+++ b/_includes/extensions/hashlocate.html
@@ -7,30 +7,31 @@
return;
}
- var headerHeight = 0;
var header = document.querySelector('header');
- if (header) {
- headerHeight = header.offsetHeight;
- }
- var supportPageOffset = window.pageXOffset !== undefined;
- var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
-
- var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
- var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+ var scrollPos = getScrollPos();
+ var offsetY = element.offsetTop - (header.offsetTop + header.offsetHeight + 20);
- var offsetY = element.offsetTop - headerHeight - 12;
- if (y === offsetY) {
+ if (offsetY == scrollPos.y) {
return;
}
- window.scrollTo(x, offsetY);
+ if (header.offsetTop == 0 && offsetY > scrollPos.y) {
+ offsetY += header.offsetHeight;
+ } else if (header.offsetTop < 0 && offsetY < scrollPos.y) {
+ offsetY -= header.offsetHeight;
+ }
+
+ smoothScrollTo(offsetY);
}
// The first event occurred
- if (window.location.hash) {
- hashLocate(window.location.hash);
- }
+ window.addEventListener('load', function(event) {
+ if (window.location.hash) {
+ hashLocate(window.location.hash);
+ }
+ });
+ // The first event occurred
window.addEventListener('click', function(event) {
if (event.target.matches('a')) {
hashLocate(event.target.getAttribute('href'));
diff --git a/_includes/head.html b/_includes/head.html
index 770a7bf..be3be7a 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -6,7 +6,8 @@
{%- seo -%}
<link rel="shortcut icon" href="{{ site.favicon }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+ <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+ <script src="{{ "/assets/js/main.js" | relative_url }}"></script>
{%- feed_meta -%}
{%- if jekyll.environment == 'production' and site.google_analytics -%}
{%- include extensions/google-analytics.html -%}
diff --git a/_includes/sidebar/article-menu.html b/_includes/sidebar/article-menu.html
index aa4184d..7f83160 100644
--- a/_includes/sidebar/article-menu.html
+++ b/_includes/sidebar/article-menu.html
@@ -12,48 +12,49 @@
</div>
<script>
- var menu = document.querySelector(".post-menu .post-menu-content");
- var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");
+ function generateContent() {
+ var menu = document.querySelector(".post-menu .post-menu-content");
+ var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");
- // Generate post menu
- var menuHTML = '';
- headings.forEach(function (h) {
- menuHTML += (
- '<li class="h-' + h.tagName.toLowerCase() + '">'
- + '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
- });
+ // Generate post menu
+ var menuHTML = '';
+ for (var i = 0; i < headings.length; i++) {
+ var h = headings[i];
+ menuHTML += (
+ '<li class="h-' + h.tagName.toLowerCase() + '">'
+ + '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
+ }
- menu.innerHTML = '<ul>' + menuHTML + '</ul>';
+ menu.innerHTML = '<ul>' + menuHTML + '</ul>';
- // The anchor offsetHeight
- var headerHeight = 0;
- var header = document.querySelector('header');
- if (header) {
- offsetHeight = header.offsetHeight + 12;
- }
+ // The header element
+ var header = document.querySelector('header.site-header');
- // Active the menu item
- window.addEventListener('scroll', function (event) {
- var lastActive = menu.querySelector('.active');
- var changed = true;
- for (var i = headings.length - 1; i >= 0; i--) {
- var h = headings[i];
- var clientRect = h.getBoundingClientRect();
- if (clientRect.top < offsetHeight) {
- var id = 'h-' + h.getAttribute('id');
- var curActive = menu.querySelector('a[href="#' + id + '"]');
- if (curActive) {
- curActive.classList.add('active');
- }
- if (lastActive == curActive) {
- changed = false;
+ // Active the menu item
+ window.addEventListener('scroll', function (event) {
+ var lastActive = menu.querySelector('.active');
+ var changed = true;
+ for (var i = headings.length - 1; i >= 0; i--) {
+ var h = headings[i];
+ var clientRect = h.getBoundingClientRect();
+ var headerHeight = header.offsetTop + header.offsetHeight + 20;
+ if (clientRect.top <= headerHeight) {
+ var id = 'h-' + h.getAttribute('id');
+ var curActive = menu.querySelector('a[href="#' + id + '"]');
+ if (curActive) {
+ curActive.classList.add('active');
+ }
+ if (lastActive == curActive) {
+ changed = false;
+ }
+ break;
}
- break;
}
- }
- if (lastActive && changed) {
- lastActive.classList.remove('active');
- }
- event.preventDefault();
- });
+ if (lastActive && changed) {
+ lastActive.classList.remove('active');
+ }
+ event.preventDefault();
+ });
+ }
+ generateContent();
</script>
diff --git a/_includes/views/header.html b/_includes/views/header.html
index 835d4cb..f23401f 100644
--- a/_includes/views/header.html
+++ b/_includes/views/header.html
@@ -62,21 +62,14 @@
<script>
(function() {
- var supportPageOffset = window.pageXOffset !== undefined;
- var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
-
- function scrollY() {
- return supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
- }
-
- var lastScrollY = scrollY();
- var dataset = document.documentElement.dataset;
+ var lastScrollY = getScrollPos().y;
+ var documentElement = document.documentElement;
function storeScrollData() {
- var y = scrollY();
+ var y = getScrollPos().y;
{%- if banner and header_transparent -%}
- dataset.headerTransparent = "";
+ documentElement.setAttribute("data-header-transparent", "");
{%- endif -%}
var scrollStatus = "";
@@ -91,7 +84,7 @@
}
lastScrollY = y;
- dataset.scrollStatus = scrollStatus;
+ documentElement.setAttribute("data-scroll-status", scrollStatus);
}
window.addEventListener('scroll', function(e) {
generated by cgit v1.2.3 (git 2.39.1) at 2024-10-18 18:21:06 +0000