DEV: Update heading positions when navigating directly between topics (#92)

This commit is contained in:
Sérgio Saquetim 2024-08-14 11:52:43 -03:00 committed by GitHub
parent f2b78d45e8
commit 8657f64cdc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 6 deletions

View File

@ -2,6 +2,7 @@ import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking"; import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object"; import { action } from "@ember/object";
import didInsert from "@ember/render-modifiers/modifiers/did-insert"; import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import didUpdate from "@ember/render-modifiers/modifiers/did-update";
import { service } from "@ember/service"; import { service } from "@ember/service";
import { headerOffset } from "discourse/lib/offset-calculator"; import { headerOffset } from "discourse/lib/offset-calculator";
import { debounce } from "discourse-common/utils/decorators"; import { debounce } from "discourse-common/utils/decorators";
@ -154,7 +155,11 @@ export default class TocContents extends Component {
{{#unless @renderTimeline}} {{#unless @renderTimeline}}
<TocMiniButtons @renderTimeline={{@renderTimeline}} @postID={{@postID}} /> <TocMiniButtons @renderTimeline={{@renderTimeline}} @postID={{@postID}} />
{{/unless}} {{/unless}}
<div id="d-toc" {{didInsert this.setup}}> <div
id="d-toc"
{{didInsert this.setup}}
{{didUpdate this.updateHeadingPositions @postID}}
>
{{#each @tocStructure as |heading|}} {{#each @tocStructure as |heading|}}
<ul class="d-toc-heading"> <ul class="d-toc-heading">

View File

@ -14,7 +14,7 @@ RSpec.describe "DiscoTOC", system: true do
:post, :post,
raw: raw:
"<div data-theme-toc='true'></div>\n\n# Heading 1\nContent for the first heading\n## Heading 2\nContent for the second heading\n### Heading 3\nContent for the third heading\n# Heading 4\nContent for the fourth heading", "<div data-theme-toc='true'></div>\n\n# Heading 1\nContent for the first heading\n## Heading 2\nContent for the second heading\n### Heading 3\nContent for the third heading\n# Heading 4\nContent for the fourth heading",
topic: topic_1, topic: topic_1
) )
end end
@ -23,7 +23,7 @@ RSpec.describe "DiscoTOC", system: true do
:post, :post,
raw: raw:
"\n# Heading 1\nContent for the first heading\n## Heading 2\nContent for the second heading\n### Heading 3\nContent for the third heading\n# Heading 4\nContent for the fourth heading", "\n# Heading 1\nContent for the first heading\n## Heading 2\nContent for the second heading\n### Heading 3\nContent for the third heading\n# Heading 4\nContent for the fourth heading",
topic: topic_2, topic: topic_2
) )
end end
@ -32,7 +32,7 @@ RSpec.describe "DiscoTOC", system: true do
:post, :post,
raw: raw:
"intentionally \n long \n content \n so \n there's \n plenty \n to be \n scrolled \n past \n which \n will \n force \n the \n timeline \n to \n hide \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll ", "intentionally \n long \n content \n so \n there's \n plenty \n to be \n scrolled \n past \n which \n will \n force \n the \n timeline \n to \n hide \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll ",
topic: topic_1, topic: topic_1
) )
end end
@ -41,7 +41,7 @@ RSpec.describe "DiscoTOC", system: true do
:post, :post,
raw: raw:
"<div data-theme-toc='true'></div>\n\n# Heading For Reply 1\nContent for the first heading\n## Heading For Reply 2\nContent for the second heading\n### Heading For Reply 3\nContent for the third heading\n# Heading For Reply 4\nContent for the fourth heading", "<div data-theme-toc='true'></div>\n\n# Heading For Reply 1\nContent for the first heading\n## Heading For Reply 2\nContent for the second heading\n### Heading For Reply 3\nContent for the third heading\n# Heading For Reply 4\nContent for the fourth heading",
topic: topic_1, topic: topic_1
) )
end end
@ -50,7 +50,7 @@ RSpec.describe "DiscoTOC", system: true do
:post, :post,
raw: raw:
"intentionally \n long \n content \n so \n there's \n plenty \n to be \n scrolled \n past \n which \n will \n force \n the \n timeline \n to \n hide \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll ", "intentionally \n long \n content \n so \n there's \n plenty \n to be \n scrolled \n past \n which \n will \n force \n the \n timeline \n to \n hide \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll \n scroll ",
topic: topic_1, topic: topic_1
) )
end end
@ -94,6 +94,30 @@ RSpec.describe "DiscoTOC", system: true do
expect(page).to have_no_css(".d-toc-item.d-toc-h1") expect(page).to have_no_css(".d-toc-item.d-toc-h1")
end end
it "table of contents updates the highlighted section after navigating directly to other topic" do
source_topic = Fabricate(:topic, category: category, tags: [tag])
Fabricate(
:post,
topic: source_topic,
raw:
"<div data-theme-toc='true'></div>\n\n# Heading 1 on the source topic\nContent for the first heading\n## Heading 2\nContent for the second heading\n### Heading 3\nContent for the third heading\n# Heading 4\nContent for the fourth heading\n<a href=c>Other topic</a>"
)
visit("/t/#{source_topic.id}")
expect(page).to have_css(
".d-toc-item.d-toc-h1.active a[data-d-toc='toc-h1-heading-1-on-the-source-topic']"
)
find("a[href='/t/#{topic_1.slug}/#{topic_1.id}'").click
expect(page).to have_css(
".d-toc-item.d-toc-h1.active a[data-d-toc='toc-h1-heading-1']"
)
expect(page).to have_no_css(
"a[data-d-toc='toc-h1-heading-1-on-the-source-topic']"
)
end
it "timeline will appear without markup if auto_TOC_categories is set to the topic's category" do it "timeline will appear without markup if auto_TOC_categories is set to the topic's category" do
theme.update_setting(:auto_TOC_categories, "#{category.id}") theme.update_setting(:auto_TOC_categories, "#{category.id}")
theme.save! theme.save!