From 651acb075cc0944ff8c820f23196780ec5f4cba5 Mon Sep 17 00:00:00 2001 From: Jarek Radosz Date: Sun, 2 Oct 2022 15:14:55 +0200 Subject: [PATCH] DEV: Initial tweaks --- .../discourse/initializers/disco-toc-main.js | 148 +++++++++--------- locales/en.yml | 4 +- test/acceptance/toc-test.js | 15 +- test/fixtures.js | 79 ++++++++++ 4 files changed, 159 insertions(+), 87 deletions(-) create mode 100644 test/fixtures.js diff --git a/javascripts/discourse/initializers/disco-toc-main.js b/javascripts/discourse/initializers/disco-toc-main.js index 13fd7ce..e843caf 100644 --- a/javascripts/discourse/initializers/disco-toc-main.js +++ b/javascripts/discourse/initializers/disco-toc-main.js @@ -11,65 +11,61 @@ export default { initialize() { withPluginApi("1.0.0", (api) => { + const autoTocTags = settings.auto_TOC_tags.split("|"); const autoTocCategoryIds = settings.auto_TOC_categories .split("|") .map((id) => parseInt(id, 10)); - const autoTocTags = settings.auto_TOC_tags.split("|"); - api.decorateCookedElement( (el, helper) => { - if (helper) { - const post = helper.getModel(); - if (post?.post_number !== 1) { - return; - } + const post = helper.getModel(); + if (post?.post_number !== 1) { + return; + } - const topicCategory = helper.getModel().topic.category_id; - const topicTags = helper.getModel().topic.tags; + const topicCategory = post.topic.category_id; + const topicTags = post.topic.tags; + const hasTOCmarkup = el?.querySelector(`[data-theme-toc="true"]`); + const tocCategory = autoTocCategoryIds?.includes(topicCategory); + const tocTag = topicTags?.some((tag) => autoTocTags?.includes(tag)); - const hasTOCmarkup = el?.querySelector(`[data-theme-toc="true"]`); - const tocCategory = autoTocCategoryIds?.includes(topicCategory); - const tocTag = topicTags?.some((tag) => autoTocTags?.includes(tag)); + if (!hasTOCmarkup && !tocCategory && !tocTag) { + document.body.classList.remove("d-toc-timeline-visible"); + return; + } - if (!hasTOCmarkup && !tocCategory && !tocTag) { - document.body.classList.remove("d-toc-timeline-visible"); - return; - } + let dTocHeadingSelectors = + ":scope > h1, :scope > h2, :scope > h3, :scope > h4, :scope > h5"; + const headings = el.querySelectorAll(dTocHeadingSelectors); - let dTocHeadingSelectors = - ":scope > h1, :scope > h2, :scope > h3, :scope > h4, :scope > h5"; - const headings = el.querySelectorAll(dTocHeadingSelectors); + if (headings.length < 1) { + return; + } - if (headings.length < 1) { - return; - } + headings.forEach((h, index) => { + // suffix uses index for non-Latin languages + const suffix = slugify(h.textContent) || index; + const id = + h.getAttribute("id") || slugify(`toc-${h.nodeName}-${suffix}`); - headings.forEach((h, index) => { - // suffix uses index for non-Latin languages - const suffix = slugify(h.textContent) || index; - const id = - h.getAttribute("id") || slugify(`toc-${h.nodeName}-${suffix}`); + h.setAttribute("id", id); + h.setAttribute("data-d-toc", id); + h.classList.add("d-toc-post-heading"); + }); - h.setAttribute("id", id); - h.setAttribute("data-d-toc", id); - h.classList.add("d-toc-post-heading"); - }); + el.classList.add("d-toc-cooked"); - el.classList.add("d-toc-cooked"); - - if (document.querySelector(".d-toc-wrapper")) { - this.insertTOC(headings); - } else { - // 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); - } + if (document.querySelector(".d-toc-wrapper")) { + this.insertTOC(headings); + } else { + // 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); } }, { @@ -83,11 +79,11 @@ export default { if (!document.querySelector(".d-toc-cooked")) { return; } - if (args.post.post_number === 1) { - document.body.classList.add("d-toc-timeline-visible"); - } else { - document.body.classList.remove("d-toc-timeline-visible"); - } + + document.body.classList.toggle( + "d-toc-timeline-visible", + args.post.post_number === 1 + ); }); api.onAppEvent("docs-topic:current-post-scrolled", () => { @@ -122,6 +118,7 @@ export default { const distance = Math.abs( domUtils.offset(heading).top - headerOffset() - window.scrollY ); + if (closestHeadingDistance == null || distance < closestHeadingDistance) { closestHeadingDistance = distance; closestHeading = heading; @@ -143,7 +140,9 @@ export default { if (!anchor) { return; } + anchor.parentElement.classList.add("direct-active"); + parentsUntil(anchor, "#d-toc", ".d-toc-item").forEach((liParent) => { liParent.classList.add("active"); }); @@ -153,11 +152,14 @@ export default { insertTOC(headings) { const dToc = document.createElement("div"); dToc.classList.add("d-toc-main"); - dToc.innerHTML = `
- ${iconHTML("downward")} - ${iconHTML("times")}
`; + dToc.innerHTML = ` +
+ ${iconHTML("downward")} + ${iconHTML("times")} +
+ `; const existing = document.querySelector(".d-toc-wrapper .d-toc-main"); if (existing) { @@ -187,15 +189,17 @@ export default { e.target.closest(".d-toc-item") && e.target.hasAttribute("data-d-toc") ) { - const target = `#${e.target.getAttribute("data-d-toc")}`; + const target = e.target.getAttribute("data-d-toc"); const scrollTo = domUtils.offset( - document.querySelector(`.d-toc-cooked ${target}`) + document.querySelector(`.d-toc-cooked #${target}`) ).top; + window.scrollTo({ top: scrollTo - headerOffset() - 10, behavior: "smooth", }); document.querySelector(".d-toc-wrapper").classList.remove("overlay"); + e.preventDefault(); return false; } @@ -207,15 +211,13 @@ export default { .querySelector(".d-toc-cooked") .getBoundingClientRect(); - if (rect) { - window.scrollTo({ - top: rect.bottom + window.scrollY - headerOffset() - 10, - behavior: "smooth", - }); + window.scrollTo({ + top: rect.bottom + window.scrollY - headerOffset() - 10, + behavior: "smooth", + }); - e.preventDefault(); - return false; - } + e.preventDefault(); + return false; } // close overlay @@ -297,23 +299,17 @@ export default { function parentsUntil(el, selector, filter) { const result = []; - const matchesSelector = - el.matches || - el.webkitMatchesSelector || - el.mozMatchesSelector || - el.msMatchesSelector; // match start from parent el = el.parentElement; - while (el && !matchesSelector.call(el, selector)) { - if (!filter) { + + while (el && !el.matches(selector)) { + if (!filter || el.matches(filter)) { result.push(el); - } else { - if (matchesSelector.call(el, filter)) { - result.push(el); - } } + el = el.parentElement; } + return result; } diff --git a/locales/en.yml b/locales/en.yml index da409b6..7b587ec 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -5,5 +5,5 @@ en: theme_metadata: settings: minimum_trust_level_to_create_TOC: The minimum trust level a user must have in order to see the TOC button in the composer - auto_TOC_categories: automaticlly enable TOC on topics in these categories - auto_TOC_tags: automaticlly enable TOC on topics with these tags + auto_TOC_categories: automatically enable TOC on topics in these categories + auto_TOC_tags: automatically enable TOC on topics with these tags diff --git a/test/acceptance/toc-test.js b/test/acceptance/toc-test.js index 0b38e69..3edeb9c 100644 --- a/test/acceptance/toc-test.js +++ b/test/acceptance/toc-test.js @@ -7,14 +7,11 @@ import { visit } from "@ember/test-helpers"; import { test } from "qunit"; import topicFixtures from "discourse/tests/fixtures/topic"; import { cloneJSON } from "discourse-common/lib/object"; - -const COOKED_WITH_HEADINGS = - '

\n帖子控制

\n

\nMeasure h2

\n

Jaracaca Swamp we gazed round the very evening light in some. HTML version of science far too late. Wait a snake and nearly half-past two terrible carnivorous dinosaur and distribute. Employers Liability Act you! Each of me see that the crudest pleasantry. Sonny my own special brain. Advancing in front of them and there?

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
questionsvanishcontention
nearerdepressedfrancisca
roomskennelgenesis
\n

\nUndeveloped h2

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.
\nCried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.
\nCried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

\nH1 second section

\n

\nUndeveloped 2 h2

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through.
\nYou’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

\nSubheading 3 h3

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

\nSubheading 3 long ass wire h3

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

\nAnother section h2

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

\nSubheading again then h3

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

\nSu-subbheading h4

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

\nSu-subalicions heading h4

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

\nSu-subalicions heading h4 quite long to test a real-life kind of scenario here then

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

\nSu-subalicions heading h4 also quite long to test a real-life kind of scenario here then

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

\n'; +import { COOKED_WITH_HEADINGS } from "../fixtures"; const TOC_MARKUP = '\n
'; const TOC_AUTO_CATEGORIES = "17|19|13"; const TOC_AUTO_TAGS = "docs|knowledge"; - const TOC_TOPIC_TAGS = ["design", "docs"]; const TOC_TOPIC_CATEGORY = 19; @@ -44,10 +41,10 @@ acceptance("DiscoTOC - main", function (needs) { "TOC above timeline has matching items" ); - const bquoteH2 = query(".topic-body blockquote h2"); - assert.ok(exists(bquoteH2), "blockquote H2 exists"); + const blockquoteH2 = query(".topic-body blockquote h2"); + assert.ok(exists(blockquoteH2), "blockquote H2 exists"); assert.equal( - bquoteH2.hasAttribute("data-d-toc"), + blockquoteH2.hasAttribute("data-d-toc"), false, "does not apply TOC to headings in blockquote" ); @@ -98,7 +95,7 @@ acceptance("DiscoTOC - with tags", function (needs) { ); }); - test("automaticly adds TOC based on tags", async function (assert) { + test("automatically adds TOC based on tags", async function (assert) { await visit("/t/internationalization-localization/280"); assert.ok(exists(".d-toc-wrapper #d-toc")); }); @@ -117,7 +114,7 @@ acceptance("DiscoTOC - with categories", function (needs) { ); }); - test("automaticly adds TOC based on category", async function (assert) { + test("automatically adds TOC based on category", async function (assert) { await visit("/t/internationalization-localization/280"); assert.ok(exists(".d-toc-wrapper #d-toc")); }); diff --git a/test/fixtures.js b/test/fixtures.js new file mode 100644 index 0000000..522061b --- /dev/null +++ b/test/fixtures.js @@ -0,0 +1,79 @@ +export const COOKED_WITH_HEADINGS = ` +

+ 帖子控制

+

+ Measure h2

+

Jaracaca Swamp we gazed round the very evening light in some. HTML version of science far too late. Wait a snake and nearly half-past two terrible carnivorous dinosaur and distribute. Employers Liability Act you! Each of me see that the crudest pleasantry. Sonny my own special brain. Advancing in front of them and there?

+
+ + + + + + + + + + + + + + + + + + + + +
questionsvanishcontention
nearerdepressedfrancisca
roomskennelgenesis
+

+ Undeveloped h2

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.
+ Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.
+ Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

+ H1 second section

+

+ Undeveloped 2 h2

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through.
+ You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

+ Subheading 3 h3

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

+ Subheading 3 long ass wire h3

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

+ Another section h2

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

+ Subheading again then h3

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

+ Su-subbheading h4

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

+ Su-subalicions heading h4

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

+ Su-subalicions heading h4 quite long to test a real-life kind of scenario here then

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

+ Su-subalicions heading h4 also quite long to test a real-life kind of scenario here then

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+

Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. You’ll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.

+ +`;