Discource-C
/
DiscoTOC
mirror of https://github.com/discourse/DiscoTOC.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Issue when used with loading slider component (#22)

This commit is contained in:
Penar Musaraj 2022-01-19 08:45:58 -05:00 committed by GitHub
parent e044017955
commit aa35509588
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
javascripts/discourse/initializers/disco-toc-main.js
View File

@ -1,6 +1,7 @@
import domUtils from "discourse-common/utils/dom-utils";
import { headerOffset } from "discourse/lib/offset-calculator";
import { iconHTML } from "discourse-common/lib/icon-library";
import { later } from "@ember/runloop";
import { slugify } from "discourse/lib/utilities";
import { withPluginApi } from "discourse/lib/plugin-api";
import I18n from "I18n";
@ -19,6 +20,7 @@ export default {
}
if (!el.querySelector(`[data-theme-toc="true"]`)) {
document.body.classList.remove("d-toc-timeline-visible");
return;
}
@ -42,32 +44,18 @@ export default {
el.classList.add("d-toc-cooked");
const dToc = document.createElement("div");
dToc.classList.add("d-toc-main");
dToc.innerHTML = `<div class="d-toc-icons">
<a href="" class="scroll-to-bottom" title="${I18n.t(
themePrefix("post_bottom_tooltip")
)}">${iconHTML("downward")}</a>
<a href="" class="d-toc-close">${iconHTML("times")}</a></div>`;
const existing = document.querySelector(
".d-toc-wrapper .d-toc-main"
);
if (existing) {
document
.querySelector(".d-toc-wrapper")
.replaceChild(dToc, existing);
if (document.querySelector(".d-toc-wrapper")) {
this.insertTOC(headings);
} else {
document.querySelector(".d-toc-wrapper").appendChild(dToc);
// try again if decoration happens while outlet is not rendered
// this is due to core resetting `canRender` for topic-navigation
// when transitioning between topics
later(() => {
if (document.querySelector(".d-toc-wrapper")) {
this.insertTOC(headings);
}
}, 300);
}
const startingLevel =
parseInt(headings[0].tagName.substring(1), 10) - 1;
let result = document.createElement("div");
result.setAttribute("id", "d-toc");
buildTOC(headings, result, startingLevel || 1);
document.querySelector(".d-toc-main").appendChild(result);
document.addEventListener("click", this.clickTOC, false);
}
},
{
@ -93,6 +81,10 @@ export default {
return;
}
if (!document.querySelector(".d-toc-cooked")) {
return;
}
const headings = document.querySelectorAll(".d-toc-post-heading");
let closestHeadingDistance = null;
let closestHeading = null;
@ -122,6 +114,9 @@ export default {
`#d-toc a[data-d-toc="${closestHeading.getAttribute("id")}"]`
);
if (!anchor) {
return;
}
anchor.parentElement.classList.add("direct-active");
parentsUntil(anchor, "#d-toc", ".d-toc-item").forEach((liParent) => {
liParent.classList.add("active");
@ -136,6 +131,31 @@ export default {
});
},
insertTOC(headings) {
const dToc = document.createElement("div");
dToc.classList.add("d-toc-main");
dToc.innerHTML = `<div class="d-toc-icons">
<a href="" class="scroll-to-bottom" title="${I18n.t(
themePrefix("post_bottom_tooltip")
)}">${iconHTML("downward")}</a>
<a href="" class="d-toc-close">${iconHTML("times")}</a></div>`;
const existing = document.querySelector(".d-toc-wrapper .d-toc-main");
if (existing) {
document.querySelector(".d-toc-wrapper").replaceChild(dToc, existing);
} else {
document.querySelector(".d-toc-wrapper").appendChild(dToc);
}
const startingLevel = parseInt(headings[0].tagName.substring(1), 10) - 1;
let result = document.createElement("div");
result.setAttribute("id", "d-toc");
buildTOC(headings, result, startingLevel || 1);
document.querySelector(".d-toc-main").appendChild(result);
document.addEventListener("click", this.clickTOC, false);
document.body.classList.add("d-toc-timeline-visible");
},
clickTOC(e) {
if (!document.body.classList.contains("d-toc-timeline-visible")) {
return;