Skip to content

Commit 752e500

Browse files
jenweberjenweber
authored
Merge pull request #771 from swarajpure/feat/remove-jquery
Replace jQuery animation for table of contents and remove jQuery package
2 parents 8673397 + f5913a2 commit 752e500

File tree

8 files changed

+1316
-1235
lines changed

8 files changed

+1316
-1235
lines changed

‎.eslintrc.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ module.exports = {
2020
browser: true,
2121
},
2222
rules: {
23-
'ember/no-jquery': 'off',
2423
'no-console': 'off',
2524
'ember/no-new-mixins': 'off',
2625
'ember/no-mixins': 'off',

‎app/components/table-of-contents.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import Component from '@ember/component';
33
export default Component.extend({
44
actions: {
55
toggle(type) {
6-
this.$('ol.toc-level-1.' + type).slideToggle(200);
6+
const tableElement = document.querySelector(`ol.toc-level-1.${type}`);
7+
tableElement.classList.toggle('selected');
78
},
89
},
910
});

‎app/styles/components/_sidebar.scss

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,11 +121,17 @@ li.toc-level-0 {
121121
ol.toc-level-1 {
122122
border-left: $base-border;
123123
font-size: $base-font-size * 0.9;
124+
transition: max-height 0.5s ease;
124125

125-
&:not(.selected) {
126-
display: none;
126+
&.selected{
127+
max-height: 3000px;
127128
}
128129

130+
&:not(.selected) {
131+
overflow: hidden;
132+
max-height: 0;
133+
}
134+
129135
li {
130136
border-left: 3px solid transparent;
131137
transition: border-width $duration, margin-right $duration;

‎app/templates/components/table-of-contents.hbs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ol class="toc-level-0">
22
<li class="toc-level-0">
3-
<a {{action 'toggle' 'modules'}} href="#">Packages</a>
4-
<ol class="toc-level-1 modules" style="display: block">
3+
<a {{action 'toggle' 'modules'}} href="#" data-test-toc-title="packages">Packages</a>
4+
<ol class="toc-level-1 modules selected">
55
{{#each moduleIDs as |moduleID|}}
66

77
{{#if (not-eq moduleID "@ember/object/computed")}}
@@ -16,8 +16,8 @@
1616

1717
{{#if isShowingNamespaces}}
1818
<li class="toc-level-0">
19-
<a {{action 'toggle' 'namespaces'}} href="#">Namespaces</a>
20-
<ol class="toc-level-1 namespaces" style="display: block">
19+
<a {{action 'toggle' 'namespaces'}} href="#" data-test-toc-title="namespaces">Namespaces</a>
20+
<ol class="toc-level-1 namespaces selected">
2121
{{#each namespaceIDs as |namespaceID|}}
2222
<li class="toc-level-1" data-test-namespace={{namespaceID}}>
2323
{{#link-to 'project-version.namespaces.namespace' version namespaceID}}{{namespaceID}}{{/link-to}}
@@ -28,8 +28,8 @@
2828
{{/if}}
2929

3030
<li class="toc-level-0">
31-
<a {{action 'toggle' 'classes'}} href="#">Classes</a>
32-
<ol class="toc-level-1 classes" style="display: block">
31+
<a {{action 'toggle' 'classes'}} href="#" data-test-toc-title="classes">Classes</a>
32+
<ol class="toc-level-1 classes selected">
3333
{{#each classesIDs as |classID|}}
3434
<li class="toc-level-1" data-test-class={{classID}}>
3535
{{#link-to 'project-version.classes.class' version classID}}{{classID}}{{/link-to}}

‎config/optional-features.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"application-template-wrapper": false,
33
"default-async-observers": true,
4-
"jquery-integration": true,
4+
"jquery-integration": false,
55
"template-only-glimmer-components": true
66
}

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
"test:ember": "ember test"
2727
},
2828
"devDependencies": {
29-
"@ember/jquery": "^1.1.0",
3029
"@ember/optional-features": "^2.0.0",
3130
"@ember/test-helpers": "^2.2.5",
3231
"@glimmer/component": "^1.0.4",

‎tests/integration/components/table-of-contents-test.js

Lines changed: 139 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,157 @@
11
import { module, test } from 'qunit';
22
import { setupRenderingTest } from 'ember-qunit';
3-
import { render, findAll } from '@ember/test-helpers';
3+
import { render, findAll, click } from '@ember/test-helpers';
44
import hbs from 'htmlbars-inline-precompile';
55

6+
const TIMEOUT_FOR_ANIMATION = 600;
7+
const CLASSES = ['Descriptor', 'Ember'];
8+
const MODULES = ['@ember/application', '@ember/array'];
9+
610
module('Integration | Component | table of contents', function (hooks) {
711
setupRenderingTest(hooks);
812

913
test('it renders', async function (assert) {
1014
// Set any properties with this.set('myProperty', 'value');
1115
this.set('projectId', 'Ember');
1216
this.set('emberVersion', '2.4.3');
17+
this.set('classesIDs', CLASSES);
18+
19+
await render(hbs`
20+
{{
21+
table-of-contents showPrivateClasses=true
22+
projectid=projectId
23+
version=emberVersion
24+
classesIDs=classesIDs
25+
isShowingNamespaces=true
26+
}}
27+
`);
28+
29+
const contentTitle = document.querySelector(
30+
'[data-test-toc-title="classes"]'
31+
);
32+
const contentReference = '.toc-level-1';
33+
34+
assert.dom(contentTitle).hasText('Classes');
35+
assert
36+
.dom(`${contentReference} li`)
37+
.exists({ count: 2 }, 'We have two items to display');
38+
assert.dom(findAll(`${contentReference} li`)[0]).hasText(CLASSES[0]);
39+
assert.dom(findAll(`${contentReference} li`)[1]).hasText(CLASSES[1]);
40+
});
41+
42+
test('Starts with underlying content visible', async function (assert) {
43+
// Set any properties with this.set('myProperty', 'value');
44+
this.set('projectId', 'Ember');
45+
this.set('emberVersion', '2.4.3');
46+
this.set('moduleIDs', MODULES);
1347

14-
this.set('classesIDs', ['Descriptor', 'Ember']);
48+
await render(hbs`
49+
{{
50+
table-of-contents showPrivateClasses=true
51+
projectid=projectId
52+
version=emberVersion
53+
moduleIDs=moduleIDs
54+
isShowingNamespaces=true
55+
}}
56+
`);
1557

16-
await render(hbs`{{table-of-contents showPrivateClasses=true
17-
projectid=projectId
18-
version=emberVersion
19-
classesIDs=classesIDs
20-
isShowingNamespaces=true
21-
}}`);
58+
const contentReference = '.toc-level-1';
59+
const content = document.querySelector(contentReference);
60+
const contentTitle = document.querySelector(
61+
'[data-test-toc-title="classes"]'
62+
);
2263

23-
assert.dom(findAll('.toc-level-0 > a')[2]).hasText('Classes');
64+
assert.dom(contentTitle).hasText('Classes');
65+
assert.dom(content).hasClass('selected');
2466
assert
25-
.dom('.toc-level-1 li')
67+
.dom(`${contentReference} li`)
2668
.exists({ count: 2 }, 'We have two items to display');
27-
assert.dom(findAll('.toc-level-1 li')[0]).hasText('Descriptor');
28-
assert.dom(findAll('.toc-level-1 li')[1]).hasText('Ember');
69+
assert.dom(content).isVisible();
70+
assert.dom(findAll(`${contentReference} li`)[0]).hasText(MODULES[0]);
71+
assert.dom(findAll(`${contentReference} li`)[1]).hasText(MODULES[1]);
72+
});
73+
74+
test('Underlying content hides once clicked', async function (assert) {
75+
// Set any properties with this.set('myProperty', 'value');
76+
this.set('projectId', 'Ember');
77+
this.set('emberVersion', '2.4.3');
78+
this.set('moduleIDs', MODULES);
79+
80+
await render(hbs`
81+
{{
82+
table-of-contents showPrivateClasses=true
83+
projectid=projectId
84+
version=emberVersion
85+
moduleIDs=moduleIDs
86+
isShowingNamespaces=true
87+
}}
88+
`);
89+
90+
const contentTitle = document.querySelector(
91+
'[data-test-toc-title="packages"]'
92+
);
93+
const contentReference = '.toc-level-1';
94+
const content = document.querySelector(contentReference);
95+
96+
assert.dom(contentTitle).hasText('Packages');
97+
assert.dom(content).hasClass('selected');
98+
assert.dom(content).isVisible();
99+
100+
await click(contentTitle);
101+
102+
const done = assert.async();
103+
setTimeout(() => {
104+
assert.dom(content).isNotVisible();
105+
assert.dom(content).doesNotHaveClass('selected');
106+
done();
107+
}, TIMEOUT_FOR_ANIMATION);
108+
});
109+
110+
test('Underlying content should be visible after 2 clicks', async function (assert) {
111+
// Set any properties with this.set('myProperty', 'value');
112+
this.set('projectId', 'Ember');
113+
this.set('emberVersion', '2.4.3');
114+
this.set('moduleIDs', MODULES);
115+
116+
await render(hbs`
117+
{{
118+
table-of-contents showPrivateClasses=true
119+
projectid=projectId
120+
version=emberVersion
121+
moduleIDs=moduleIDs
122+
isShowingNamespaces=true
123+
}}
124+
`);
125+
126+
const titleButton = document.querySelector(
127+
'[data-test-toc-title="packages"]'
128+
);
129+
const contentReference = '.toc-level-1';
130+
const content = document.querySelector(contentReference);
131+
132+
assert.dom(titleButton).hasText('Packages');
133+
assert.dom(content).hasClass('selected');
134+
assert.dom(content).isVisible();
135+
136+
await click(titleButton);
137+
138+
const done1 = assert.async();
139+
140+
setTimeout(async () => {
141+
assert.dom(content).isNotVisible();
142+
assert.dom(content).doesNotHaveClass('selected');
143+
144+
await click(titleButton);
145+
146+
const done2 = assert.async();
147+
148+
setTimeout(() => {
149+
assert.dom(content).isVisible();
150+
assert.dom(content).hasClass('selected');
151+
done2();
152+
}, TIMEOUT_FOR_ANIMATION);
153+
154+
done1();
155+
}, TIMEOUT_FOR_ANIMATION);
29156
});
30157
});

0 commit comments

Comments
 (0)