Fixed TOC content

halfrost · Feb 2, 2021 · 7f65aa9 · 7f65aa9
1 parent 301b078
commit 7f65aa9
Show file tree

Hide file tree

Showing 8 changed files with 281 additions and 70 deletions.
diff --git a/assets/js/app.bundle.min.js b/assets/js/app.bundle.min.js
diff --git a/assets/js/index.js b/assets/js/index.js
@@ -425,15 +425,167 @@
             }
         },
 
+        tocScroll: function() {
+            var toc = document.querySelector( '#toc' );
+            var tocPath = document.querySelector( '.toc-marker path' );
+            var tocItems;
+
+            // Factor of screen size that the element must cross
+            // before it's considered visible
+            var TOP_MARGIN = 0.1,
+                BOTTOM_MARGIN = 0.2;
+
+            var pathLength;
+
+            var lastPathStart,
+                lastPathEnd;
+
+            window.addEventListener( 'resize', drawPath, false );
+            window.addEventListener( 'scroll', sync, false );
+
+            drawPath();
+
+            function drawPath() {
+
+                tocItems = [].slice.call( toc.querySelectorAll( 'li' ) );
+
+                // Cache element references and measurements
+                tocItems = tocItems.map( function( item ) {
+                    var anchor = item.querySelector( 'a' );
+                    var target = document.getElementById( anchor.getAttribute( 'href' ).slice( 1 ) );
+
+                    return {
+                        listItem: item,
+                        anchor: anchor,
+                        target: target
+                    };
+                } );
+
+                // Remove missing targets
+                tocItems = tocItems.filter( function( item ) {
+                    return !!item.target;
+                } );
+
+                var path = [];
+                var pathIndent;
+
+                tocItems.forEach( function( item, i ) {
+
+                    var x = item.anchor.offsetLeft - 5,
+                        y = item.anchor.offsetTop,
+                        height = item.anchor.offsetHeight;
+
+                    if( i === 0 ) {
+                        path.push( 'M', x, y, 'L', x, y + height );
+                        item.pathStart = 0;
+                    }
+                    else {
+                        // Draw an additional line when there's a change in
+                        // indent levels
+                        if( pathIndent !== x ) path.push( 'L', pathIndent, y );
+
+                        path.push( 'L', x, y );
+
+                        // Set the current path so that we can measure it
+                        tocPath.setAttribute( 'd', path.join( ' ' ) );
+                        item.pathStart = tocPath.getTotalLength() || 0;
+
+                        path.push( 'L', x, y + height );
+                    }
+
+                    pathIndent = x;
+
+                    tocPath.setAttribute( 'd', path.join( ' ' ) );
+                    item.pathEnd = tocPath.getTotalLength();
+
+                } );
+
+                pathLength = tocPath.getTotalLength();
+
+                sync();
+
+            }
+
+            function fixedTOC() {
+                if ( $('.post-header').outerHeight(true) + 80 > $(window).scrollTop()) {
+                    $('#toc').css('top',$('.post-header').outerHeight(true));
+                    $('#toc').css('position','absolute');
+                    $('#toc').css('left','20px');
+                    //console.log("top absolute | toc offset = ", $('#toc').offset().top, "scrollTop = ",$(window).scrollTop());
+                } else {
+                    // 把下面三行注释掉，让目录不固定。有些目录很长的文章，需要这样
+                    $('#toc').css('top',0);
+                    $('#toc').css('position','fixed');
+                    $('#toc').css('left','35px');
+                    // console.log("top fixed | toc offset = ", $('#toc').offset().top, "scrollTop = ",$(window).scrollTop());
+                }
+
+                if ($(window).scrollTop() + $(window).height() > $('.post-footer').offset().top) {
+                    $('#toc').css("visibility","hidden");
+                    $('.toc-marker').css("visibility","hidden");
+
+                } else {
+                    $('#toc').css("visibility","visible");
+                    $('.toc-marker').css("visibility","visible");
+                }
+
+            }
+            function sync() {
+
+                fixedTOC();
+
+                var windowHeight = window.innerHeight;
+
+                var pathStart = pathLength,
+                    pathEnd = 0;
+
+                var visibleItems = 0;
+
+                tocItems.forEach( function( item ) {
+
+                    var targetBounds = item.target.getBoundingClientRect();
+
+                    if( targetBounds.bottom > windowHeight * TOP_MARGIN && targetBounds.top < windowHeight * ( 1 - BOTTOM_MARGIN ) ) {
+                        pathStart = Math.min( item.pathStart, pathStart );
+                        pathEnd = Math.max( item.pathEnd, pathEnd );
+
+                        visibleItems += 1;
+
+                        item.listItem.classList.add( 'visible' );
+                    }
+                    else {
+                        item.listItem.classList.remove( 'visible' );
+                    }
+
+                } );
+
+                // Specify the visible path or hide the path altogether
+                // if there are no visible items
+                if( visibleItems > 0 && pathStart < pathEnd ) {
+                    if( pathStart !== lastPathStart || pathEnd !== lastPathEnd ) {
+                        tocPath.setAttribute( 'stroke-dashoffset', '1' );
+                        tocPath.setAttribute( 'stroke-dasharray', '1, '+ pathStart +', '+ ( pathEnd - pathStart ) +', ' + pathLength );
+                        tocPath.setAttribute( 'opacity', 1 );
+                    }
+                }
+                else {
+                    tocPath.setAttribute( 'opacity', 0 );
+                }
+
+                lastPathStart = pathStart;
+                lastPathEnd = pathEnd;
+
+            }        
+        },
+
         initTOC: function() {
             //初始化 toc 插件
             $('#toc').initTOC({
-                selector: "h1, h2, h3, h4, h5, h6",
+                selector: "h2, h3, h4, h5, h6",
                 scope: "article",
                 overwrite: false,
                 prefix: "toc"
             });
-            $('#toc').css('top',$('.post-header').outerHeight(true));
         },
 
         init: function () {
@@ -451,6 +603,7 @@
             themeApp.scrollTop();
             themeApp.scrollDown();
             themeApp.initTOC();
+            themeApp.tocScroll();
         }
     };
     /*===========================

diff --git a/assets/js/vendor/jquery.toc.js b/assets/js/vendor/jquery.toc.js
@@ -33,7 +33,7 @@
      */
     var createList = function ($wrapper, count) {
         while (count--) {
-            $wrapper = $('<ol/>').appendTo($wrapper);
+            $wrapper = $('<ul/>').appendTo($wrapper);
 
             if (count) {
                 $wrapper = $('<li/>').appendTo($wrapper);
@@ -92,7 +92,7 @@
         var selector = options.selector;
         var scope = options.scope;
 
-        var $ret = $('<ol/>');
+        var $ret = $('<ul/>');
         var $wrapper = $ret;
         var $lastLi = null;
 

diff --git a/assets/scss/components/_common.scss b/assets/scss/components/_common.scss
@@ -285,79 +285,134 @@ hr {
 }
 
 
-#toc
-{
-    display: none; 
-    visibility: hidden;
-    float: right;
-    width: 20%;
-    padding: 0 20px 0 0;
-    position: absolute;
-    right: 20px;
-}
+// #toc
+// {
+//     display: none; 
+//     visibility: hidden;
+//     float: right;
+//     width: 20%;
+//     padding: 0 20px 0 0;
+//     // position: absolute;
+//     position: fixed;
+//     right: 20px;
+// }
 
-#toc ol
-{
-    margin: 0 0 0 1em;
-    padding: 0; 
+// #toc ol
+// {
+//     margin: 0 0 0 1em;
+//     padding: 0; 
 
-    list-style: none;
-}
+//     list-style: none;
+// }
 
-#toc li
-{
-    position: relative; 
+// #toc li
+// {
+//     position: relative; 
 
-    padding: 0;
-}
+//     padding: 0;
+// }
 
-#toc li:before
-{
-    position: absolute;
-    top: .5em; 
-    left: -1em;
+// #toc li:before
+// {
+//     position: absolute;
+//     top: .5em; 
+//     left: -1em;
 
-    border: 5px dashed transparent;
-    border-left: 5px solid #57a3e8;
-}
+//     border: 5px dashed transparent;
+//    border-left: 5px solid #57a3e8;
+// }
 
-#toc li:before
-{
-    overflow: hidden; 
+// #toc li:before
+// {
+//     overflow: hidden; 
 
-    width: 0;
-    height: 0;
+//     width: 0;
+//     height: 0;
 
-    content: '';
-}
+//     content: '';
+// }
 
-#toc a
-{
-    display: block;
-    overflow: hidden;
+// #toc a
+// {
+//     display: block;
+//     overflow: hidden;
 
-    max-height: 2em;
+//     max-height: 2em;
 
-    cursor: pointer;
-    transition: color .3s; 
-    white-space: nowrap;
-    text-decoration: none;
-    text-overflow: ellipsis;
+//     cursor: pointer;
+//     transition: color .3s; 
+//     white-space: nowrap;
+//     text-decoration: none;
+//     text-overflow: ellipsis;
 
-    color: #6aa7c0;
-}
+//     color: #6aa7c0;
+// }
+
+// #toc a:hover
+// {
+//     color: #f3a01e;
+// }
+
+// #toc h4
+// {
+//     font-size: 18px;
+//     margin: .75em 0;
+//     padding-bottom: .25em;
+//     color: #3b3b3b;
+// }
+
+// @media only screen and (min-width: 1570px) {
+//     #toc {
+//       visibility: visible;
+//       display: block; 
+//     } 
+// }
 
-#toc a:hover
-{
-    color: #f3a01e;
+#toc {
+	padding: 1em;
+    line-height: 2;
+    display: none; 
+    visibility: hidden;
+    width: 20%;
+    position: fixed;
+    // float: right;
+    // right: 20px;
+    left: 20px;
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	ul ul {
+		padding-left: 2em;
+	}
+
+	li a {
+		display: inline-block;
+		color: var(--text-body);
+		text-decoration: none;
+		transition: all 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000);
+	}
+
+	li.visible>a {
+		color: #fda403;
+		transform: translate( 5px );
+	}
 }
 
-#toc h4
-{
-    font-size: 18px;
-    margin: .75em 0;
-    padding-bottom: .25em;
-    color: #3b3b3b;
+.toc-marker {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+
+	path {
+		transition: all 0.3s ease;
+	}
 }
 
 @media only screen and (min-width: 1570px) {