396 lines
12 KiB
HTML
396 lines
12 KiB
HTML
<script type="text/discourse-plugin" version="0.1">
|
|
const minimumOffset = require("discourse/lib/offset-calculator").minimumOffset;
|
|
const { iconHTML } = require("discourse-common/lib/icon-library");
|
|
const { run } = Ember;
|
|
|
|
const mobileView = $("html").hasClass("mobile-view");
|
|
|
|
const linkIcon = iconHTML(settings.anchor_icon);
|
|
const closeIcon = iconHTML("times");
|
|
const dtocIcon = iconHTML("align-left");
|
|
const currUser = api.getCurrentUser();
|
|
const currUserTrustLevel = currUser ? currUser.trust_level : "";
|
|
const minimumTrustLevel = settings.minimum_trust_level_to_create_TOC;
|
|
|
|
const SCROLL_THROTTLE = 300;
|
|
const SMOOTH_SCROLL_SPEED = 300;
|
|
const TOC_ANIMATION_SPEED = 300;
|
|
|
|
const cleanUp = item => {
|
|
const cleanItem = item
|
|
.trim()
|
|
.toLowerCase()
|
|
.replace(
|
|
/[\{\}\[\]\\\/\<\>\(\)\|\+\?\*\^\'\`\'\"\.\_\$\s~!@#%&,;:=]/gi,
|
|
"-"
|
|
)
|
|
.replace(/\-\-+/g, "-")
|
|
.replace(/^\-/, "")
|
|
.replace(/\-$/, "");
|
|
|
|
return cleanItem;
|
|
};
|
|
|
|
const setUpTocItem = function (item) {
|
|
const unique = item.attr("id");
|
|
const text = item.text();
|
|
|
|
const tocItem = $("<li/>", {
|
|
class: "d-toc-item",
|
|
"data-d-toc": unique
|
|
});
|
|
|
|
tocItem.append(
|
|
$("<a/>", {
|
|
text: text
|
|
})
|
|
);
|
|
|
|
return tocItem;
|
|
};
|
|
|
|
(function (dToc) {
|
|
dToc($, window);
|
|
$.widget("discourse.dToc", {
|
|
_create: function () {
|
|
this.generateDtoc();
|
|
this.setEventHandlers();
|
|
},
|
|
|
|
generateDtoc: function () {
|
|
const self = this;
|
|
|
|
const primaryHeadings = $(this.options.cooked).find(
|
|
this.options.selectors.substr(0, this.options.selectors.indexOf(","))
|
|
);
|
|
|
|
self.element.addClass("d-toc");
|
|
|
|
primaryHeadings.each(function (index) {
|
|
const selectors = self.options.selectors,
|
|
ul = $("<ul/>", {
|
|
id: `d-toc-top-heading-${index}`,
|
|
class: "d-toc-heading"
|
|
});
|
|
|
|
ul.append(setUpTocItem($(this)));
|
|
self.element.append(ul);
|
|
|
|
$(this)
|
|
.nextUntil(this.nodeName.toLowerCase())
|
|
.each(function () {
|
|
const headings = $(this).find(selectors).length
|
|
? $(this).find(selectors)
|
|
: $(this).filter(selectors);
|
|
|
|
headings.each(function () {
|
|
self.nestTocItem.call(this, self, ul);
|
|
});
|
|
});
|
|
});
|
|
},
|
|
|
|
nestTocItem: function (self, ul) {
|
|
const index = $(this).index(self.options.selectors);
|
|
const previousHeader = $(self.options.selectors).eq(index - 1);
|
|
const previousTagName = previousHeader.prop("tagName").charAt(1);
|
|
|
|
const currentTagName = $(this).prop("tagName").charAt(1);
|
|
|
|
if (currentTagName < previousTagName) {
|
|
self.element
|
|
.find(`.d-toc-subheading[data-tag="${currentTagName}"]`)
|
|
.last()
|
|
.append(setUpTocItem($(this)));
|
|
} else if (currentTagName === previousTagName) {
|
|
ul.find(".d-toc-item")
|
|
.last()
|
|
.after(setUpTocItem($(this)));
|
|
} else {
|
|
ul.find(".d-toc-item")
|
|
.last()
|
|
.after(
|
|
$("<ul/>", {
|
|
class: "d-toc-subheading",
|
|
"data-tag": currentTagName
|
|
})
|
|
)
|
|
.next(".d-toc-subheading")
|
|
.append(setUpTocItem($(this)));
|
|
}
|
|
},
|
|
|
|
setEventHandlers: function () {
|
|
const self = this;
|
|
|
|
const dtocMobile = () => {
|
|
$(".d-toc").toggleClass("d-toc-mobile");
|
|
};
|
|
|
|
this.element.on("click.d-toc", "li", function () {
|
|
self.element.find(".d-toc-active").removeClass("d-toc-active");
|
|
$(this).addClass("d-toc-active");
|
|
if (mobileView) {
|
|
dtocMobile();
|
|
} else {
|
|
let elem = $(`li[data-d-toc="${$(this).attr("data-d-toc")}"]`);
|
|
self.triggerShowHide(elem);
|
|
}
|
|
|
|
self.scrollTo($(this));
|
|
});
|
|
|
|
$("#main").on(
|
|
"click.toggleDtoc",
|
|
".d-toc-toggle, .d-toc-close, .post-bottom-wrapper a",
|
|
dtocMobile
|
|
);
|
|
|
|
const onScroll = () => {
|
|
run.throttle(this, self.highlightItemsOnScroll, self, SCROLL_THROTTLE);
|
|
};
|
|
|
|
$(window).on("scroll.d-toc", onScroll);
|
|
},
|
|
|
|
highlightItemsOnScroll: self => {
|
|
$("html, body")
|
|
.promise()
|
|
.done(function () {
|
|
const winScrollTop = $(window).scrollTop();
|
|
const anchors = $(self.options.cooked).find("[data-d-toc]");
|
|
|
|
let closestAnchorDistance = null;
|
|
let closestAnchorIdx = null;
|
|
|
|
anchors.each(function (idx) {
|
|
const distance = Math.abs(
|
|
$(this).offset().top - minimumOffset() - winScrollTop
|
|
);
|
|
if (
|
|
closestAnchorDistance == null ||
|
|
distance < closestAnchorDistance
|
|
) {
|
|
closestAnchorDistance = distance;
|
|
closestAnchorIdx = idx;
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
|
|
const anchorText = $(anchors[closestAnchorIdx]).attr("data-d-toc");
|
|
const elem = $(`li[data-d-toc="${anchorText}"]`);
|
|
|
|
if (elem.length) {
|
|
self.element.find(".d-toc-active").removeClass("d-toc-active");
|
|
elem.addClass("d-toc-active");
|
|
}
|
|
|
|
if (!mobileView) {
|
|
self.triggerShowHide(elem);
|
|
}
|
|
});
|
|
},
|
|
|
|
triggerShowHide: function (elem) {
|
|
if (
|
|
elem.parent().is(".d-toc-heading") ||
|
|
elem.next().is(".d-toc-subheading")
|
|
) {
|
|
this.showHide(elem.next(".d-toc-subheading"));
|
|
} else if (elem.parent().is(".d-toc-subheading")) {
|
|
this.showHide(elem.parent());
|
|
}
|
|
},
|
|
|
|
showHide: function (elem) {
|
|
return elem.is(":visible") ? this.hide(elem) : this.show(elem);
|
|
},
|
|
|
|
hide: function (elem) {
|
|
const target = $(".d-toc-subheading")
|
|
.not(elem)
|
|
.not(elem.parents(".d-toc-subheading:has(.d-toc-active)"));
|
|
|
|
return target.slideUp(TOC_ANIMATION_SPEED);
|
|
},
|
|
|
|
show: function (elem) {
|
|
return elem.slideDown(TOC_ANIMATION_SPEED);
|
|
},
|
|
|
|
scrollTo: function (elem) {
|
|
const currentDiv = $(`[data-d-toc="${elem.attr("data-d-toc")}"]`);
|
|
|
|
$("html, body").animate(
|
|
{
|
|
scrollTop: `${currentDiv.offset().top - minimumOffset()}`
|
|
},
|
|
{
|
|
duration: SMOOTH_SCROLL_SPEED
|
|
}
|
|
);
|
|
},
|
|
|
|
setOptions: () => {
|
|
$.Widget.prototype._setOptions.apply(this, arguments);
|
|
}
|
|
});
|
|
})(() => {});
|
|
|
|
api.decorateCooked(
|
|
$elem => {
|
|
run.scheduleOnce("actions", () => {
|
|
if ($elem.hasClass("d-editor-preview")) return;
|
|
if (!$elem.parents("article#post_1").length) return;
|
|
|
|
const dToc = $elem.find(`[data-theme-toc="true"]`);
|
|
|
|
if (!dToc.length) return this;
|
|
const body = $elem;
|
|
body.find("div, aside, blockquote, article, details").each(function () {
|
|
$(this)
|
|
.children("h1,h2,h3,h4,h5,h6")
|
|
.each(function () {
|
|
$(this).replaceWith(
|
|
`<div class="d-toc-ignore">${$(this).html()}</div>`
|
|
);
|
|
});
|
|
});
|
|
|
|
body.append(`<span id="bottom-anchor" class="d-toc-igonore"></span>`);
|
|
|
|
let dTocHeadingSelectors = "h1,h2,h3,h4,h5,h6";
|
|
if (!body.has(">h1").length) {
|
|
dTocHeadingSelectors = "h2,h3,h4,h5,h6";
|
|
if (!body.has(">h2").length) {
|
|
dTocHeadingSelectors = "h3,h4,h5,h6";
|
|
if (!body.has(">h3").length) {
|
|
dTocHeadingSelectors = "h4,h5,h6";
|
|
if (!body.has(">h4").length) {
|
|
dTocHeadingSelectors = "h5,h6";
|
|
if (!body.has(">h5").length) {
|
|
dTocHeadingSelectors = "h6";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body.find(dTocHeadingSelectors).each(function () {
|
|
if ($(this).hasClass("d-toc-ignore")) return;
|
|
const heading = $(this);
|
|
|
|
let id = heading.attr("id") || "";
|
|
|
|
if (!id.length) {
|
|
id = cleanUp(heading.text());
|
|
}
|
|
|
|
heading
|
|
.attr({
|
|
id: id,
|
|
"data-d-toc": id
|
|
})
|
|
.addClass("d-toc-post-heading");
|
|
});
|
|
|
|
body
|
|
.addClass("d-toc-cooked")
|
|
.prepend(
|
|
`<span class="d-toc-toggle">
|
|
${dtocIcon} ${I18n.t(themePrefix("table_of_contents"))}
|
|
</span>`
|
|
)
|
|
.parents(".regular")
|
|
.addClass("d-toc-regular")
|
|
.parents("article")
|
|
.addClass("d-toc-article")
|
|
.append(
|
|
`<div class="d-toc-main">
|
|
<div class="post-bottom-wrapper dekstop">
|
|
<a href="#bottom-anchor" title="${I18n.t(
|
|
themePrefix("post_bottom_tooltip")
|
|
)}">${iconHTML("downward")}</a>
|
|
</div>
|
|
<ul id="d-toc">
|
|
<div class="d-toc-close-wrapper mobile">
|
|
<div class="post-bottom-wrapper">
|
|
<a href="#bottom-anchor" title="${I18n.t(
|
|
themePrefix("post_bottom_tooltip")
|
|
)}">${iconHTML("downward")}</a>
|
|
</div>
|
|
<div class="d-toc-close">
|
|
${closeIcon}
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
`
|
|
)
|
|
|
|
.parents(".topic-post")
|
|
.addClass("d-toc-post")
|
|
.parents("body")
|
|
.addClass("d-toc-timeline");
|
|
|
|
$("#d-toc").dToc({
|
|
cooked: body,
|
|
selectors: dTocHeadingSelectors
|
|
});
|
|
});
|
|
},
|
|
{ id: "disco-toc" }
|
|
);
|
|
|
|
api.cleanupStream(() => {
|
|
$(window).off("scroll.d-toc");
|
|
$("#main").off("click.toggleDtoc");
|
|
$(".d-toc-timeline").removeClass("d-toc-timeline d-toc-timeline-visible");
|
|
});
|
|
|
|
api.onAppEvent("topic:current-post-changed", post => {
|
|
if (!$(".d-toc-timeline").length) return;
|
|
run.scheduleOnce("afterRender", () => {
|
|
if (post.post.post_number <= 2) {
|
|
$("body").removeClass("d-toc-timeline-visible");
|
|
$(".d-toc-toggle").fadeIn(100);
|
|
} else {
|
|
$("body").addClass("d-toc-timeline-visible");
|
|
$(".d-toc-toggle").fadeOut(100);
|
|
}
|
|
});
|
|
});
|
|
|
|
if (currUserTrustLevel >= minimumTrustLevel) {
|
|
if (!I18n.translations[I18n.currentLocale()].js.composer) {
|
|
I18n.translations[I18n.currentLocale()].js.composer = {};
|
|
}
|
|
I18n.translations[I18n.currentLocale()].js.composer.contains_dtoc = " ";
|
|
|
|
api.addToolbarPopupMenuOptionsCallback(() => {
|
|
const composerController = api.container.lookup("controller:composer");
|
|
return {
|
|
action: "insertDtoc",
|
|
icon: "align-left",
|
|
label: themePrefix("insert_table_of_contents"),
|
|
condition: composerController.get("model.canCategorize")
|
|
};
|
|
});
|
|
|
|
api.modifyClass("controller:composer", {
|
|
pluginId: "DiscoTOC",
|
|
|
|
actions: {
|
|
insertDtoc() {
|
|
this.get("toolbarEvent").applySurround(
|
|
`<div data-theme-toc="true">`,
|
|
`</div>`,
|
|
"contains_dtoc"
|
|
);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|