Skip to content

Commit 20d3843

Browse files
pzuraqpzuraq
committed
[feat] General On This Page Index
Adds a general On This Page index which looks at the `main` section on the page to find any `h2`/`h3` elements and create a table of contents out of them. Notes: * H1 was omitted because it would be redundant, H1 is semantically meant to be the title of the page * Uses a MutationObserver to update the index when changes occur that weren't caused by routing. This happens in API docs with the toggles.
1 parent 7aea51a commit 20d3843

File tree

30 files changed

+481
-240
lines changed

30 files changed

+481
-240
lines changed

‎addon/components/api/x-class/component.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import Component from '@ember/component';
22
import { computed } from '@ember/object';
3+
import { or } from '@ember/object/computed';
34
import { capitalize } from '@ember/string';
45
import { memberFilter } from '../../../utils/computed';
56

67
import layout from './template';
78

89
export default Component.extend({
910
layout,
11+
tagName: '',
1012

1113
showInherited: false,
1214
showProtected: false,
@@ -17,6 +19,13 @@ export default Component.extend({
1719
methods: memberFilter('class', 'methods'),
1820
fields: memberFilter('class', 'fields'),
1921

22+
hasToggles: or(
23+
'component.hasInherited',
24+
'component.hasProtected',
25+
'component.hasPrivate',
26+
'component.hasDeprecated',
27+
),
28+
2029
hasContents: computed('class', {
2130
get() {
2231
let klass = this.get('class');

‎addon/components/api/x-class/template.hbs‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,23 @@
44
<div data-test-class-description>{{{class.description}}}</div>
55

66
{{#if hasContents}}
7-
<div class="flex flex-row-reverse">
8-
{{api/x-index
9-
options=(hash
10-
inherited=inherited
11-
protected=protected
12-
private=private
13-
deprecated=deprecated
14-
)
15-
16-
onOptionToggle=(action 'updateFilter')
17-
18-
sections=(hash
19-
constructors=constructors
20-
fields=fields
21-
accessors=accessors
22-
methods=methods
7+
{{#if hasToggles}}
8+
{{api/x-toggles
9+
toggles=(hash
10+
inherited=(if component.hasInherited showInherited)
11+
protected=(if component.hasProtected showProtected)
12+
private=(if component.hasPrivate showPrivate)
13+
deprecated=(if component.hasDeprecated showDeprecated)
2314
)
2415
}}
16+
{{/if}}
2517

26-
{{api/x-sections
27-
sections=(hash
28-
constructors=class.constructors
29-
fields=class.fields
30-
accessors=class.accessors
31-
methods=class.methods
32-
)
33-
}}
34-
</div>
18+
{{api/x-sections
19+
sections=(hash
20+
constructors=class.constructors
21+
fields=class.fields
22+
accessors=class.accessors
23+
methods=class.methods
24+
)
25+
}}
3526
{{/if}}

‎addon/components/api/x-component/component.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import Component from '@ember/component';
22
import { computed } from '@ember/object';
3-
import { alias } from '@ember/object/computed';
3+
import { alias, or } from '@ember/object/computed';
44
import { capitalize } from '@ember/string';
55
import { memberFilter } from '../../../utils/computed';
66

77
import layout from './template';
88

99
export default Component.extend({
1010
layout,
11+
tagName: '',
1112

1213
showInherited: false,
1314
showInternal: false,
@@ -22,6 +23,14 @@ export default Component.extend({
2223
methods: memberFilter('component', 'methods'),
2324
fields: memberFilter('component', 'fields'),
2425

26+
hasToggles: or(
27+
'component.hasInherited',
28+
'component.hasInternal',
29+
'component.hasProtected',
30+
'component.hasPrivate',
31+
'component.hasDeprecated',
32+
),
33+
2534
hasContents: computed('component', {
2635
get() {
2736
let component = this.get('component');

‎addon/components/api/x-component/template.hbs‎

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,28 @@
44
<div data-test-component-name>{{{component.description}}}</div>
55

66
{{#if hasContents}}
7-
<div class="flex flex-row-reverse">
8-
{{api/x-index
9-
options=(hash
10-
inherited=(hash shouldShow=component.hasInherited value=showInherited)
11-
internal=(hash shouldShow=component.hasInternal value=showInternal)
12-
protected=(hash shouldShow=component.hasProtected value=showProtected)
13-
private=(hash shouldShow=component.hasPrivate value=showPrivate)
14-
deprecated=(hash shouldShow=component.hasDeprecated value=showDeprecated)
7+
{{#if hasToggles}}
8+
{{api/x-toggles
9+
toggles=(hash
10+
inherited=(if component.hasInherited showInherited)
11+
internal=(if component.hasInternal showInternal)
12+
protected=(if component.hasProtected showProtected)
13+
private=(if component.hasPrivate showPrivate)
14+
deprecated=(if component.hasDeprecated showDeprecated)
1515
)
1616

17-
onOptionToggle=(action 'updateFilter')
18-
19-
sections=(hash
20-
constructors=constructors
21-
yields=yields
22-
arguments=arguments
23-
fields=fields
24-
accessors=accessors
25-
methods=methods
26-
)
17+
onToggle=(action 'updateFilter')
2718
}}
19+
{{/if}}
2820

29-
{{api/x-sections
30-
sections=(hash
31-
constructors=constructors
32-
yields=yields
33-
arguments=arguments
34-
fields=fields
35-
accessors=accessors
36-
methods=methods
37-
)
38-
}}
39-
</div>
21+
{{api/x-sections
22+
sections=(hash
23+
constructors=constructors
24+
yields=yields
25+
arguments=arguments
26+
fields=fields
27+
accessors=accessors
28+
methods=methods
29+
)
30+
}}
4031
{{/if}}

‎addon/components/api/x-index/template.hbs‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎addon/components/api/x-module/component.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ import Component from '@ember/component';
22
import layout from './template';
33

44
export default Component.extend({
5-
layout
5+
layout,
6+
tagName: '',
67
});

‎addon/components/api/x-module/template.hbs‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,8 @@
1-
<div class="flex flex-row-reverse">
2-
{{api/x-index
3-
sections=(hash
4-
classes=module.classes
5-
components=module.components
6-
functions=module.functions
7-
variables=module.variables
8-
)
9-
}}
10-
11-
{{api/x-sections
12-
sections=(hash
13-
classes=module.classes
14-
components=module.components
15-
functions=module.functions
16-
variables=module.variables
17-
)
18-
}}
19-
</div>
1+
{{api/x-sections
2+
sections=(hash
3+
classes=module.classes
4+
components=module.components
5+
functions=module.functions
6+
variables=module.variables
7+
)
8+
}}

‎addon/components/api/x-sections/style.scss‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,9 @@
1616
}
1717

1818
.item-section__item-header {
19-
margin-left: -1em;
20-
2119
a {
2220
color: #333;
2321
text-decoration: none;
24-
25-
&:before {
26-
content: '\B6';
27-
cursor: pointer;
28-
display: block;
29-
float: left;
30-
width: 1em;
31-
visibility: hidden;
32-
33-
color: #aaa;
34-
}
35-
36-
&:hover:before {
37-
visibility: visible;
38-
}
3922
}
4023
}
4124

‎addon/components/api/x-sections/template.hbs‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,46 @@
1-
<div class="flex-1">
2-
{{#each-in sections as |section items|}}
3-
{{#if items}}
4-
<section data-test-api-section class="item-section">
5-
<h2 data-test-section-header={{section}} class='docs-h2'>
6-
{{capitalize section}}
7-
</h2>
1+
{{#each-in sections as |section items|}}
2+
{{#if items}}
3+
<section data-test-api-section class="item-section">
4+
<h2 data-test-section-header={{section}} class='docs-h2'>
5+
{{capitalize section}}
6+
</h2>
87

9-
{{#each items as |item|}}
10-
<div data-test-item>
11-
{{#if (or item.isClass item.isComponent)}}
12-
<h3 id={{item.name}} data-test-item-header class="item-section__class-header mb-1">
13-
{{#link-to 'docs.api.item' (concat 'root/' item.id)}}
14-
{{#if (eq item.exportType 'default')}}
15-
<span class="item-section__default-label">Default</span>
16-
{{/if}}
17-
{{item.name}}
18-
{{/link-to}}
19-
</h3>
8+
{{#each items as |item|}}
9+
<div data-test-item>
10+
{{#if (or item.isClass item.isComponent)}}
11+
<h3 id={{item.name}} data-test-item-header class="item-section__class-header mb-1">
12+
{{#link-to 'docs.api.item' (concat 'root/' item.id)}}
13+
{{#if (eq item.exportType 'default')}}
14+
<span class="item-section__default-label">Default</span>
15+
{{/if}}
16+
{{item.name}}
17+
{{/link-to}}
18+
</h3>
2019

21-
{{{item.description}}}
22-
{{else}}
23-
<h3 id={{item.name}} data-test-item-header class="item-section__item-header mb-1">
24-
<a href="#{{item.name}}">
25-
{{#if (eq item.exportType 'default')}}
26-
<span class="item-section__default-label">Default</span>
27-
{{/if}}
20+
{{{item.description}}}
21+
{{else}}
22+
<h3 id={{item.name}} data-test-item-header data-text="{{item.name}}" class="docs-h3 mb-1">
23+
<a href="#{{item.name}}" class="docs-header-link">
24+
{{#if (eq item.exportType 'default')}}
25+
<span class="item-section__default-label">Default</span>
26+
{{/if}}
2827

29-
{{type-signature item}}
30-
</a>
31-
</h3>
28+
{{type-signature item}}
29+
</a>
30+
</h3>
3231

33-
{{#if item.exportType}}
34-
{{api/x-import-path data-test-import-path=true item=item}}
35-
{{/if}}
32+
{{#if item.exportType}}
33+
{{api/x-import-path data-test-import-path=true item=item}}
34+
{{/if}}
3635

37-
<p data-test-item-description>
38-
{{{item.description}}}
39-
</p>
36+
<p data-test-item-description>
37+
{{{item.description}}}
38+
</p>
4039

41-
{{api/x-params data-test-item-params=true params=item.params}}
42-
{{/if}}
43-
</div>
44-
{{/each}}
45-
</section>
46-
{{/if}}
47-
{{/each-in}}
48-
</div>
40+
{{api/x-params data-test-item-params=true params=item.params}}
41+
{{/if}}
42+
</div>
43+
{{/each}}
44+
</section>
45+
{{/if}}
46+
{{/each-in}}

addon/components/api/x-index/component.js renamed to addon/components/api/x-toggles/component.js

File renamed without changes.

0 commit comments

Comments
 (0)