summaryrefslogtreecommitdiff
path: root/_includes/sidebar/article-menu.html
diff options
context:
space:
mode:
authorJeffrey Tse <jeffreytse.mail@gmail.com>2019-09-11 12:19:34 +0800
committerJeffrey Tse <jeffreytse.mail@gmail.com>2019-09-11 12:21:17 +0800
commit61eae5c5f9881cab29712f6e696085baa977e1f9 (patch)
treebb301b58b94fee5dcefbdfae8f0c8fc13ee5bd21 /_includes/sidebar/article-menu.html
parentcd3a8163dd997d0a7c4d320816651efa8f7dce60 (diff)
release: v1.0.0
Diffstat (limited to '_includes/sidebar/article-menu.html')
-rw-r--r--_includes/sidebar/article-menu.html59
1 files changed, 59 insertions, 0 deletions
diff --git a/_includes/sidebar/article-menu.html b/_includes/sidebar/article-menu.html
new file mode 100644
index 0000000..aa4184d
--- /dev/null
+++ b/_includes/sidebar/article-menu.html
@@ -0,0 +1,59 @@
+<style type="text/css" media="screen">
+.post-menu ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+</style>
+
+<div class="post-menu">
+ <div class="post-menu-title">Contents</div>
+ <div class="post-menu-content"></div>
+</div>
+
+<script>
+ 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>');
+ });
+
+ menu.innerHTML = '<ul>' + menuHTML + '</ul>';
+
+ // The anchor offsetHeight
+ var headerHeight = 0;
+ var header = document.querySelector('header');
+ if (header) {
+ offsetHeight = header.offsetHeight + 12;
+ }
+
+ // 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;
+ }
+ break;
+ }
+ }
+ if (lastActive && changed) {
+ lastActive.classList.remove('active');
+ }
+ event.preventDefault();
+ });
+</script>