toc js 整理
This commit is contained in:
liuzhihang
parent
f7bd196c56
commit
fac6dc30f3
|
|
@ -23,56 +23,111 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function S() {
|
function scrollFnToDo() {
|
||||||
var t = document.getElementById("card-toc"), r = t.getElementsByClassName("toc-content")[0],
|
const $cardTocLayout = document.getElementById("card-toc");
|
||||||
s = r.querySelectorAll(".toc-link"), c = document.getElementById("article-container");
|
const $cardToc = $cardTocLayout.getElementsByClassName("toc-content")[0];
|
||||||
|
const $tocLink = $cardToc.querySelectorAll(".toc-link");
|
||||||
|
const $article = document.getElementById("article-container");
|
||||||
window.tocScrollFn = function () {
|
window.tocScrollFn = function () {
|
||||||
return btf.throttle(function () {
|
return btf.throttle(function () {
|
||||||
var t = window.scrollY || document.documentElement.scrollTop;
|
const currentTop = window.scrollY || document.documentElement.scrollTop;
|
||||||
e(t), i(t)
|
scrollPercent(currentTop)
|
||||||
}, 100)()
|
findHeadPosition(currentTop);
|
||||||
};
|
}, 100)();
|
||||||
|
}
|
||||||
window.addEventListener("scroll", tocScrollFn);
|
window.addEventListener("scroll", tocScrollFn);
|
||||||
var e = function (t) {
|
|
||||||
var e = c.clientHeight, n = document.documentElement.clientHeight,
|
function scrollPercent(currentTop) {
|
||||||
o = (t - c.offsetTop) / (n < e ? e - n : document.documentElement.scrollHeight - n),
|
const docHeight = $article.clientHeight;
|
||||||
i = Math.round(100 * o), a = 100 < i ? 100 : i <= 0 ? 0 : i;
|
const winHeight = document.documentElement.clientHeight;
|
||||||
r.setAttribute("progress-percentage", a)
|
const headerHeight = $article.offsetTop;
|
||||||
}, o = function () {
|
const scrollPercent = (currentTop - headerHeight) /
|
||||||
t.style.animation = "toc-close .2s", setTimeout(function () {
|
(winHeight < docHeight ? docHeight - winHeight : document.documentElement.scrollHeight - winHeight);
|
||||||
t.style.cssText = "opacity:''; animation: ''; right: ''"
|
const scrollPercentRounded = Math.round(100 * scrollPercent);
|
||||||
}, 100)
|
const percentage = 100 < scrollPercentRounded ? 100 : scrollPercentRounded <= 0 ? 0 : scrollPercentRounded;
|
||||||
};
|
$cardToc.setAttribute("progress-percentage", percentage);
|
||||||
document.getElementById("mobile-toc-button").addEventListener("click", function () {
|
}
|
||||||
("0" === window.getComputedStyle(t).getPropertyValue("opacity") ? n : o)()
|
|
||||||
|
var l = GLOBAL_CONFIG.isanchor
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
$cardTocLayout.style.animation = "toc-close .2s";
|
||||||
|
setTimeout(function () {
|
||||||
|
$cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''";
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
function open() {
|
||||||
|
$cardTocLayout.style.cssText = "animation: toc-open .3s; opacity: 1; right: 45px";
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
document.getElementById("mobile-toc-button")
|
||||||
|
.addEventListener("click", function () {
|
||||||
|
("0" === window.getComputedStyle($cardTocLayout).getPropertyValue("opacity")
|
||||||
|
? open()
|
||||||
|
: close())();
|
||||||
});
|
});
|
||||||
r.addEventListener("click", function (t) {
|
// toc 元素点击
|
||||||
t.preventDefault();
|
$cardToc.addEventListener("click", e => {
|
||||||
var e = t.target.classList.contains("toc-link") ? t.target : t.target.parentElement;
|
e.preventDefault();
|
||||||
btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI(e.getAttribute("href")).replace("#", ""))), 300), window.innerWidth < 900 && o()
|
const $target = e.target.classList.contains("toc-link") ? e.target : e.target.parentElement;
|
||||||
|
btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute("href")).replace("#", ""))), 300);
|
||||||
|
window.innerWidth < 900 && close();
|
||||||
});
|
});
|
||||||
var d = c.querySelectorAll("h1,h2,h3,h4,h5,h6"), u = "", i = function (n) {
|
|
||||||
if (0 === s.length || 0 === n) return !1;
|
// find head position & add active class
|
||||||
var t, e, o = "", i = "";
|
const list = $article.querySelectorAll("h1,h2,h3,h4,h5,h6");
|
||||||
if (d.forEach(function (t, e) {
|
let detectItem = "";
|
||||||
n > btf.getEleTop(t) - 80 && (o = "#" + encodeURI(t.getAttribute("id")), i = e)
|
const findHeadPosition = function (top) {
|
||||||
}), u !== i) {
|
if (0 === $tocLink.length || 0 === top) return !1;
|
||||||
if (l && (t = o, window.history.replaceState && t !== window.location.hash && (t = t || location.pathname, e = GLOBAL_CONFIG_SITE.title, window.history.replaceState({
|
var t,
|
||||||
url: location.href, title: e
|
e,
|
||||||
}, e, t))), "" === o) return r.querySelectorAll(".active").forEach(function (t) {
|
o = "",
|
||||||
t.classList.remove("active")
|
i = "";
|
||||||
}), void (u = i);
|
if ((list.forEach(function (ele, index) {
|
||||||
u = i, r.querySelectorAll(".active").forEach(function (t) {
|
top > btf.getEleTop(ele) - 80 &&
|
||||||
t.classList.remove("active")
|
((o = "#" + encodeURI(ele.getAttribute("id"))), (i = index));
|
||||||
|
}), detectItem !== i)
|
||||||
|
) {
|
||||||
|
if (
|
||||||
|
(l &&
|
||||||
|
((t = o),
|
||||||
|
window.history.replaceState &&
|
||||||
|
t !== window.location.hash &&
|
||||||
|
((t = t || location.pathname),
|
||||||
|
(e = GLOBAL_CONFIG_SITE.title),
|
||||||
|
window.history.replaceState(
|
||||||
|
{url: location.href, title: e},
|
||||||
|
e,
|
||||||
|
t
|
||||||
|
))),
|
||||||
|
"" === o)
|
||||||
|
)
|
||||||
|
return (
|
||||||
|
$cardToc.querySelectorAll(".active").forEach(function (t) {
|
||||||
|
t.classList.remove("active");
|
||||||
|
}),
|
||||||
|
void (detectItem = i)
|
||||||
|
);
|
||||||
|
(detectItem = i),
|
||||||
|
$cardToc.querySelectorAll(".active").forEach(function (t) {
|
||||||
|
t.classList.remove("active");
|
||||||
});
|
});
|
||||||
var a = s[i];
|
var a = $tocLink[i];
|
||||||
a.classList.add("active"), setTimeout(function () {
|
a.classList.add("active"),
|
||||||
|
setTimeout(function () {
|
||||||
var t, e;
|
var t, e;
|
||||||
t = a.getBoundingClientRect().top, e = r.scrollTop, t > document.documentElement.clientHeight - 100 && (r.scrollTop = e + 150), t < 100 && (r.scrollTop = e - 150)
|
(t = a.getBoundingClientRect().top),
|
||||||
|
(e = $cardToc.scrollTop),
|
||||||
|
t > document.documentElement.clientHeight - 100 &&
|
||||||
|
($cardToc.scrollTop = e + 150),
|
||||||
|
t < 100 && ($cardToc.scrollTop = e - 150);
|
||||||
}, 0);
|
}, 0);
|
||||||
for (var c = a.parentNode; !c.matches(".toc"); c = c.parentNode) c.matches("li") && c.classList.add("active")
|
for (var c = a.parentNode; !c.matches(".toc"); c = c.parentNode)
|
||||||
}
|
c.matches("li") && c.classList.add("active");
|
||||||
}
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
var d = !1, n = function () {
|
var d = !1, n = function () {
|
||||||
|
|
@ -111,7 +166,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||||
f.style.overflow = "", f.style.paddingRight = "", btf.fadeOut(u, .5), d.classList.remove("open")
|
f.style.overflow = "", f.style.paddingRight = "", btf.fadeOut(u, .5), d.classList.remove("open")
|
||||||
}
|
}
|
||||||
|
|
||||||
adjustMenu(), document.getElementById("nav").classList.add("show"), GLOBAL_CONFIG_SITE.isPost ? (GLOBAL_CONFIG_SITE.isToc && S(), void 0 !== GLOBAL_CONFIG.noticeOutdate && (r = GLOBAL_CONFIG.noticeOutdate, (s = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)) >= r.limitDay && ((a = document.createElement("div")).className = "post-outdate-notice", a.textContent = r.messagePrev + " " + s + " " + r.messageNext, c = document.getElementById("article-container"), "top" === r.position ? c.insertBefore(a, c.firstChild) : c.appendChild(a))), GLOBAL_CONFIG.relativeDate.post && I(document.querySelectorAll("#post-meta time"))) : (GLOBAL_CONFIG.relativeDate.homepage && I(document.querySelectorAll("#recent-posts time")), !GLOBAL_CONFIG.runtime || (i = document.getElementById("runtimeshow")) && (o = i.getAttribute("data-publishDate"), i.innerText = btf.diffDate(o) + " " + GLOBAL_CONFIG.runtime), (n = document.getElementById("last-push-date")) && (e = n.getAttribute("data-lastPushDate"), n.innerText = btf.diffDate(e, !0)), (t = document.querySelectorAll("#aside-cat-list .card-category-list-item.parent i")).length && t.forEach(function (t) {
|
adjustMenu(), document.getElementById("nav").classList.add("show"), GLOBAL_CONFIG_SITE.isPost ? (GLOBAL_CONFIG_SITE.isToc && scrollFnToDo(), void 0 !== GLOBAL_CONFIG.noticeOutdate && (r = GLOBAL_CONFIG.noticeOutdate, (s = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)) >= r.limitDay && ((a = document.createElement("div")).className = "post-outdate-notice", a.textContent = r.messagePrev + " " + s + " " + r.messageNext, c = document.getElementById("article-container"), "top" === r.position ? c.insertBefore(a, c.firstChild) : c.appendChild(a))), GLOBAL_CONFIG.relativeDate.post && I(document.querySelectorAll("#post-meta time"))) : (GLOBAL_CONFIG.relativeDate.homepage && I(document.querySelectorAll("#recent-posts time")), !GLOBAL_CONFIG.runtime || (i = document.getElementById("runtimeshow")) && (o = i.getAttribute("data-publishDate"), i.innerText = btf.diffDate(o) + " " + GLOBAL_CONFIG.runtime), (n = document.getElementById("last-push-date")) && (e = n.getAttribute("data-lastPushDate"), n.innerText = btf.diffDate(e, !0)), (t = document.querySelectorAll("#aside-cat-list .card-category-list-item.parent i")).length && t.forEach(function (t) {
|
||||||
t.addEventListener("click", function (t) {
|
t.addEventListener("click", function (t) {
|
||||||
t.preventDefault();
|
t.preventDefault();
|
||||||
this.classList.toggle("expand");
|
this.classList.toggle("expand");
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue