Skip to content

Commit 3662d59

Browse files
halfrosthalfrost
committed
1. Fix TOC hashtag conflict
2. always show TOC path
1 parent 2101667 commit 3662d59

File tree

2 files changed

+139
-145
lines changed

2 files changed

+139
-145
lines changed

‎assets/js/app.bundle.min.js‎

100755100644
Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/index.js‎

Lines changed: 138 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
/*====================================================
22
TABLE OF CONTENT
3-
1. function declearetion
4-
2. Initialization
3+
1. global var
4+
2. function declearetion
5+
3. Initialization
56
====================================================*/
67
(function ($) {
78
/*===========================
89
1. function declearetion
910
===========================*/
11+
var toc, tocPath, tocItems, pathLength, lastPathStart, lastPathEnd;
12+
// Factor of screen size that the element must cross
13+
// before it's considered visible
14+
var TOP_MARGIN = 0.1, BOTTOM_MARGIN = 0.2;
15+
/*===========================
16+
2. function declearetion
17+
===========================*/
1018
var ImageSmartLoader = {
1119
isWebPSupported: false,
1220
isImageCompressed: false,
@@ -426,165 +434,147 @@
426434
},
427435

428436
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-
437+
console.log("调用了 tocScroll");
438+
toc = document.querySelector( '#toc' );
439+
tocPath = document.querySelector( '.toc-marker path' );
446440
if (toc != null) {
447-
drawPath();
441+
window.addEventListener( 'resize', themeApp.drawPath, false );
442+
window.addEventListener( 'scroll', themeApp.syncTOC, false );
443+
themeApp.drawPath();
444+
}
445+
},
446+
447+
fixedTOC: function(){
448+
console.log("调用了 fixedTOC");
449+
if ( $('.post-header').outerHeight(true) + 80 > $(window).scrollTop()) {
450+
$('#toc').css('top',$('.post-header').outerHeight(true));
451+
$('#toc').css('position','absolute');
452+
$('#toc').css('left','20px');
453+
// $('#toc').css('right','20px');
454+
//console.log("top absolute | toc offset = ", $('#toc').offset().top, "scrollTop = ",$(window).scrollTop());
455+
} else {
456+
// 把下面三行注释掉，让目录不固定。有些目录很长的文章，需要这样
457+
$('#toc').css('top',0);
458+
$('#toc').css('position','fixed');
459+
$('#toc').css('left','35px');
460+
// $('#toc').css('right','30px');
461+
// console.log("top fixed | toc offset = ", $('#toc').offset().top, "scrollTop = ",$(window).scrollTop());
448462
}
449463

450-
function drawPath() {
451-
452-
tocItems = [].slice.call( toc.querySelectorAll( 'li' ) );
453-
454-
// Cache element references and measurements
455-
tocItems = tocItems.map( function( item ) {
456-
var anchor = item.querySelector( 'a' );
457-
var target = document.getElementById( anchor.getAttribute( 'href' ).slice( 1 ) );
458-
459-
return {
460-
listItem: item,
461-
anchor: anchor,
462-
target: target
463-
};
464-
} );
465-
466-
// Remove missing targets
467-
tocItems = tocItems.filter( function( item ) {
468-
return !!item.target;
469-
} );
470-
471-
var path = [];
472-
var pathIndent;
473-
474-
tocItems.forEach( function( item, i ) {
475-
476-
var x = item.anchor.offsetLeft - 5,
477-
y = item.anchor.offsetTop,
478-
height = item.anchor.offsetHeight;
479-
480-
if( i === 0 ) {
481-
path.push( 'M', x, y, 'L', x, y + height );
482-
item.pathStart = 0;
483-
}
484-
else {
485-
// Draw an additional line when there's a change in
486-
// indent levels
487-
if( pathIndent !== x ) path.push( 'L', pathIndent, y );
488-
489-
path.push( 'L', x, y );
490-
491-
// Set the current path so that we can measure it
492-
tocPath.setAttribute( 'd', path.join( ' ' ) );
493-
item.pathStart = tocPath.getTotalLength() || 0;
494-
495-
path.push( 'L', x, y + height );
496-
}
497-
498-
pathIndent = x;
499-
500-
tocPath.setAttribute( 'd', path.join( ' ' ) );
501-
item.pathEnd = tocPath.getTotalLength();
502-
503-
} );
504-
505-
pathLength = tocPath.getTotalLength();
506-
507-
sync();
508-
464+
if ($(window).scrollTop() + $(window).height() > $('.post-footer').offset().top) {
465+
$('#toc').css("visibility","hidden");
466+
$('.toc-marker').css("visibility","hidden");
467+
} else {
468+
$('#toc').css("visibility","visible");
469+
$('.toc-marker').css("visibility","visible");
509470
}
471+
},
472+
473+
drawPath: function(){
474+
console.log("调用了 drawPath");
475+
tocItems = [].slice.call( toc.querySelectorAll( 'li' ) );
476+
477+
// Cache element references and measurements
478+
tocItems = tocItems.map( function( item ) {
479+
var anchor = item.querySelector( 'a' );
480+
var target = document.getElementById( anchor.getAttribute( 'href' ).slice( 1 ) );
481+
482+
return {
483+
listItem: item,
484+
anchor: anchor,
485+
target: target
486+
};
487+
} );
488+
489+
// Remove missing targets
490+
tocItems = tocItems.filter( function( item ) {
491+
return !!item.target;
492+
} );
493+
494+
var path = [];
495+
var pathIndent;
510496

511-
function fixedTOC() {
512-
if ( $('.post-header').outerHeight(true) + 80 > $(window).scrollTop()) {
513-
$('#toc').css('top',$('.post-header').outerHeight(true));
514-
$('#toc').css('position','absolute');
515-
$('#toc').css('left','20px');
516-
//console.log("top absolute | toc offset = ", $('#toc').offset().top, "scrollTop = ",$(window).scrollTop());
517-
} else {
518-
// 把下面三行注释掉，让目录不固定。有些目录很长的文章，需要这样
519-
$('#toc').css('top',0);
520-
$('#toc').css('position','fixed');
521-
$('#toc').css('left','35px');
522-
// console.log("top fixed | toc offset = ", $('#toc').offset().top, "scrollTop = ",$(window).scrollTop());
497+
tocItems.forEach( function( item, i ) {
498+
499+
var x = item.anchor.offsetLeft - 5,
500+
y = item.anchor.offsetTop,
501+
height = item.anchor.offsetHeight;
502+
503+
if( i === 0 ) {
504+
path.push( 'M', x, y, 'L', x, y + height );
505+
item.pathStart = 0;
523506
}
524-
525-
if ($(window).scrollTop() + $(window).height() > $('.post-footer').offset().top) {
526-
$('#toc').css("visibility","hidden");
527-
$('.toc-marker').css("visibility","hidden");
528-
} else {
529-
$('#toc').css("visibility","visible");
530-
$('.toc-marker').css("visibility","visible");
507+
else {
508+
// Draw an additional line when there's a change in
509+
// indent levels
510+
if( pathIndent !== x ) path.push( 'L', pathIndent, y );
511+
512+
path.push( 'L', x, y );
513+
514+
// Set the current path so that we can measure it
515+
tocPath.setAttribute( 'd', path.join( ' ' ) );
516+
item.pathStart = tocPath.getTotalLength() || 0;
517+
518+
path.push( 'L', x, y + height );
531519
}
520+
521+
pathIndent = x;
522+
523+
tocPath.setAttribute( 'd', path.join( ' ' ) );
524+
item.pathEnd = tocPath.getTotalLength();
525+
526+
} );
527+
528+
pathLength = tocPath.getTotalLength();
529+
themeApp.syncTOC();
530+
},
531+
532+
syncTOC: function () {
533+
console.log("调用了 syncTOC");
534+
if (tocItems == null) {
535+
return;
532536
}
533-
function sync() {
534-
if (tocItems == null) {
535-
return;
536-
}
537-
fixedTOC();
538-
var windowHeight = window.innerHeight;
539-
540-
var pathStart = pathLength,
541-
pathEnd = 0;
542-
543-
var visibleItems = 0;
544-
545-
tocItems.forEach( function( item ) {
546-
547-
var targetBounds = item.target.getBoundingClientRect();
548-
549-
if( targetBounds.bottom > windowHeight * TOP_MARGIN && targetBounds.top < windowHeight * ( 1 - BOTTOM_MARGIN ) ) {
550-
pathStart = Math.min( item.pathStart, pathStart );
551-
pathEnd = Math.max( item.pathEnd, pathEnd );
552-
553-
visibleItems += 1;
554-
555-
item.listItem.classList.add( 'visible' );
556-
}
557-
else {
558-
item.listItem.classList.remove( 'visible' );
559-
}
560-
561-
} );
562-
563-
// Specify the visible path or hide the path altogether
564-
// if there are no visible items
565-
if( visibleItems > 0 && pathStart < pathEnd ) {
566-
if( pathStart !== lastPathStart || pathEnd !== lastPathEnd ) {
567-
tocPath.setAttribute( 'stroke-dashoffset', '1' );
568-
tocPath.setAttribute( 'stroke-dasharray', '1, '+ pathStart +', '+ ( pathEnd - pathStart ) +', ' + pathLength );
569-
tocPath.setAttribute( 'opacity', 1 );
570-
}
537+
themeApp.fixedTOC();
538+
var windowHeight = window.innerHeight;
539+
var pathStart = pathLength,
540+
pathEnd = 0;
541+
var visibleItems = 0;
542+
console.log('tocItems = ', tocItems);
543+
tocItems.forEach( function( item ) {
544+
var targetBounds = item.target.getBoundingClientRect();
545+
if( targetBounds.bottom > windowHeight * TOP_MARGIN && targetBounds.top < windowHeight * ( 1 - BOTTOM_MARGIN ) ) {
546+
pathStart = Math.min( item.pathStart, pathStart );
547+
pathEnd = Math.max( item.pathEnd, pathEnd );
548+
visibleItems += 1;
549+
item.listItem.classList.add( 'visible' );
571550
}
572551
else {
573-
tocPath.setAttribute( 'opacity', 0 );
552+
item.listItem.classList.remove( 'visible' );
574553
}
575-
576-
lastPathStart = pathStart;
577-
lastPathEnd = pathEnd;
578-
579-
}
554+
} );
555+
// Specify the visible path or hide the path altogether
556+
// if there are no visible items
557+
if( visibleItems > 0 && pathStart < pathEnd ) {
558+
if( pathStart !== lastPathStart || pathEnd !== lastPathEnd ) {
559+
tocPath.setAttribute( 'stroke-dashoffset', '1' );
560+
tocPath.setAttribute( 'stroke-dasharray', '1, '+ pathStart +', '+ ( pathEnd - pathStart ) +', ' + pathLength );
561+
//tocPath.setAttribute( 'opacity', 1 );
562+
}
563+
}
564+
else {
565+
//tocPath.setAttribute( 'opacity', 0 );
566+
}
567+
568+
lastPathStart = pathStart;
569+
lastPathEnd = pathEnd;
580570
},
581571

582572
initTOC: function() {
583573
//初始化 toc 插件
584574
$('#toc').initTOC({
585575
selector: "h2, h3, h4, h5, h6",
586576
scope: "article",
587-
overwrite: false,
577+
overwrite: true,
588578
prefix: "toc"
589579
});
590580
},
@@ -608,7 +598,7 @@
608598
}
609599
};
610600
/*===========================
611-
2. Initialization
601+
3. Initialization
612602
===========================*/
613603
$(document).ready(function () {
614604
themeApp.init();
@@ -834,6 +824,10 @@
834824
$(document).ready(function() {
835825
console.log("document ready 了么？");
836826
update();
827+
if (toc != null) {
828+
console.log("document ready 中调用了 syncTOC");
829+
themeApp.syncTOC();
830+
}
837831
});
838832

839833
return this;

0 commit comments

Comments
 (0)