|
425 | 425 | } |
426 | 426 | }, |
427 | 427 |
|
| 428 | + tocScroll: function() { |
| 429 | + var toc = document.querySelector( '#toc' ); |
| 430 | + var tocPath = document.querySelector( '.toc-marker path' ); |
| 431 | + var tocItems; |
| 432 | + |
| 433 | + // Factor of screen size that the element must cross |
| 434 | + // before it's considered visible |
| 435 | + var TOP_MARGIN = 0.1, |
| 436 | + BOTTOM_MARGIN = 0.2; |
| 437 | + |
| 438 | + var pathLength; |
| 439 | + |
| 440 | + var lastPathStart, |
| 441 | + lastPathEnd; |
| 442 | + |
| 443 | + window.addEventListener( 'resize', drawPath, false ); |
| 444 | + window.addEventListener( 'scroll', sync, false ); |
| 445 | + |
| 446 | + drawPath(); |
| 447 | + |
| 448 | + function drawPath() { |
| 449 | + |
| 450 | + tocItems = [].slice.call( toc.querySelectorAll( 'li' ) ); |
| 451 | + |
| 452 | + // Cache element references and measurements |
| 453 | + tocItems = tocItems.map( function( item ) { |
| 454 | + var anchor = item.querySelector( 'a' ); |
| 455 | + var target = document.getElementById( anchor.getAttribute( 'href' ).slice( 1 ) ); |
| 456 | + |
| 457 | + return { |
| 458 | + listItem: item, |
| 459 | + anchor: anchor, |
| 460 | + target: target |
| 461 | + }; |
| 462 | + } ); |
| 463 | + |
| 464 | + // Remove missing targets |
| 465 | + tocItems = tocItems.filter( function( item ) { |
| 466 | + return !!item.target; |
| 467 | + } ); |
| 468 | + |
| 469 | + var path = []; |
| 470 | + var pathIndent; |
| 471 | + |
| 472 | + tocItems.forEach( function( item, i ) { |
| 473 | + |
| 474 | + var x = item.anchor.offsetLeft - 5, |
| 475 | + y = item.anchor.offsetTop, |
| 476 | + height = item.anchor.offsetHeight; |
| 477 | + |
| 478 | + if( i === 0 ) { |
| 479 | + path.push( 'M', x, y, 'L', x, y + height ); |
| 480 | + item.pathStart = 0; |
| 481 | + } |
| 482 | + else { |
| 483 | + // Draw an additional line when there's a change in |
| 484 | + // indent levels |
| 485 | + if( pathIndent !== x ) path.push( 'L', pathIndent, y ); |
| 486 | + |
| 487 | + path.push( 'L', x, y ); |
| 488 | + |
| 489 | + // Set the current path so that we can measure it |
| 490 | + tocPath.setAttribute( 'd', path.join( ' ' ) ); |
| 491 | + item.pathStart = tocPath.getTotalLength() || 0; |
| 492 | + |
| 493 | + path.push( 'L', x, y + height ); |
| 494 | + } |
| 495 | + |
| 496 | + pathIndent = x; |
| 497 | + |
| 498 | + tocPath.setAttribute( 'd', path.join( ' ' ) ); |
| 499 | + item.pathEnd = tocPath.getTotalLength(); |
| 500 | + |
| 501 | + } ); |
| 502 | + |
| 503 | + pathLength = tocPath.getTotalLength(); |
| 504 | + |
| 505 | + sync(); |
| 506 | + |
| 507 | + } |
| 508 | + |
| 509 | + function fixedTOC() { |
| 510 | + if ( $('.post-header').outerHeight(true) + 80 > $(window).scrollTop()) { |
| 511 | + $('#toc').css('top',$('.post-header').outerHeight(true)); |
| 512 | + $('#toc').css('position','absolute'); |
| 513 | + $('#toc').css('left','20px'); |
| 514 | + //console.log("top absolute | toc offset = ", $('#toc').offset().top, "scrollTop = ",$(window).scrollTop()); |
| 515 | + } else { |
| 516 | + // 把下面三行注释掉，让目录不固定。有些目录很长的文章，需要这样 |
| 517 | + $('#toc').css('top',0); |
| 518 | + $('#toc').css('position','fixed'); |
| 519 | + $('#toc').css('left','35px'); |
| 520 | + // console.log("top fixed | toc offset = ", $('#toc').offset().top, "scrollTop = ",$(window).scrollTop()); |
| 521 | + } |
| 522 | + |
| 523 | + if ($(window).scrollTop() + $(window).height() > $('.post-footer').offset().top) { |
| 524 | + $('#toc').css("visibility","hidden"); |
| 525 | + $('.toc-marker').css("visibility","hidden"); |
| 526 | + |
| 527 | + } else { |
| 528 | + $('#toc').css("visibility","visible"); |
| 529 | + $('.toc-marker').css("visibility","visible"); |
| 530 | + } |
| 531 | + |
| 532 | + } |
| 533 | + function sync() { |
| 534 | + |
| 535 | + fixedTOC(); |
| 536 | + |
| 537 | + var windowHeight = window.innerHeight; |
| 538 | + |
| 539 | + var pathStart = pathLength, |
| 540 | + pathEnd = 0; |
| 541 | + |
| 542 | + var visibleItems = 0; |
| 543 | + |
| 544 | + tocItems.forEach( function( item ) { |
| 545 | + |
| 546 | + var targetBounds = item.target.getBoundingClientRect(); |
| 547 | + |
| 548 | + if( targetBounds.bottom > windowHeight * TOP_MARGIN && targetBounds.top < windowHeight * ( 1 - BOTTOM_MARGIN ) ) { |
| 549 | + pathStart = Math.min( item.pathStart, pathStart ); |
| 550 | + pathEnd = Math.max( item.pathEnd, pathEnd ); |
| 551 | + |
| 552 | + visibleItems += 1; |
| 553 | + |
| 554 | + item.listItem.classList.add( 'visible' ); |
| 555 | + } |
| 556 | + else { |
| 557 | + item.listItem.classList.remove( 'visible' ); |
| 558 | + } |
| 559 | + |
| 560 | + } ); |
| 561 | + |
| 562 | + // Specify the visible path or hide the path altogether |
| 563 | + // if there are no visible items |
| 564 | + if( visibleItems > 0 && pathStart < pathEnd ) { |
| 565 | + if( pathStart !== lastPathStart || pathEnd !== lastPathEnd ) { |
| 566 | + tocPath.setAttribute( 'stroke-dashoffset', '1' ); |
| 567 | + tocPath.setAttribute( 'stroke-dasharray', '1, '+ pathStart +', '+ ( pathEnd - pathStart ) +', ' + pathLength ); |
| 568 | + tocPath.setAttribute( 'opacity', 1 ); |
| 569 | + } |
| 570 | + } |
| 571 | + else { |
| 572 | + tocPath.setAttribute( 'opacity', 0 ); |
| 573 | + } |
| 574 | + |
| 575 | + lastPathStart = pathStart; |
| 576 | + lastPathEnd = pathEnd; |
| 577 | + |
| 578 | + } |
| 579 | + }, |
| 580 | + |
428 | 581 | initTOC: function() { |
429 | 582 | //初始化 toc 插件 |
430 | 583 | $('#toc').initTOC({ |
431 | | - selector: "h1, h2, h3, h4, h5, h6", |
| 584 | + selector: "h2, h3, h4, h5, h6", |
432 | 585 | scope: "article", |
433 | 586 | overwrite: false, |
434 | 587 | prefix: "toc" |
435 | 588 | }); |
436 | | - $('#toc').css('top',$('.post-header').outerHeight(true)); |
437 | 589 | }, |
438 | 590 |
|
439 | 591 | init: function () { |
|
451 | 603 | themeApp.scrollTop(); |
452 | 604 | themeApp.scrollDown(); |
453 | 605 | themeApp.initTOC(); |
| 606 | + themeApp.tocScroll(); |
454 | 607 | } |
455 | 608 | }; |
456 | 609 | /*=========================== |
|
0 commit comments