Skip to content

Replace jQuery animation for table of contents and remove jQuery package #771

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 12, 2021
Merged

Replace jQuery animation for table of contents and remove jQuery package #771

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6842c54
Replace jQuery animation for table of contents and remove jQuery package
swarajpure Jul 31, 2021
1375c28
tests refactor
swarajpure Aug 6, 2021
f5913a2
Merge branch 'master' into feat/remove-jquery
jenweber Aug 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/components/table-of-contents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import Component from '@ember/component';
export default Component.extend({
actions: {
toggle(type) {
this.$('ol.toc-level-1.' + type).slideToggle(200);
const tableElement = document.querySelector(`ol.toc-level-1.${type}`);
tableElement.classList.toggle('selected');
},
},
});
10 changes: 8 additions & 2 deletions app/styles/components/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,11 +121,17 @@ li.toc-level-0 {
ol.toc-level-1 {
border-left: $base-border;
font-size: $base-font-size * 0.9;
transition: max-height 0.5s ease;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we be animating height or max-height?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't actually use height. For the expanded condition, we would have to give height: auto and According to the Mozilla Developer Network docs, auto values have been intentionally excluded from the CSS transitions spec.
Source: https://css-tricks.com/using-css-transitions-auto-dimensions/


&:not(.selected) {
display: none;
&.selected{
max-height: 3000px;
}

&:not(.selected) {
overflow: hidden;
max-height: 0;
}

li {
border-left: 3px solid transparent;
transition: border-width $duration, margin-right $duration;
Expand Down
6 changes: 3 additions & 3 deletions app/templates/components/table-of-contents.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<ol class="toc-level-0">
<li class="toc-level-0">
<a {{action 'toggle' 'modules'}} href="#">Packages</a>
<ol class="toc-level-1 modules" style="display: block">
<ol class="toc-level-1 modules selected">
{{#each moduleIDs as |moduleID|}}

{{#if (not-eq moduleID "@ember/object/computed")}}
Expand All @@ -17,7 +17,7 @@
{{#if isShowingNamespaces}}
<li class="toc-level-0">
<a {{action 'toggle' 'namespaces'}} href="#">Namespaces</a>
<ol class="toc-level-1 namespaces" style="display: block">
<ol class="toc-level-1 namespaces selected">
{{#each namespaceIDs as |namespaceID|}}
<li class="toc-level-1" data-test-namespace={{namespaceID}}>
{{#link-to 'project-version.namespaces.namespace' version namespaceID}}{{namespaceID}}{{/link-to}}
Expand All @@ -29,7 +29,7 @@

<li class="toc-level-0">
<a {{action 'toggle' 'classes'}} href="#">Classes</a>
<ol class="toc-level-1 classes" style="display: block">
<ol class="toc-level-1 classes selected">
{{#each classesIDs as |classID|}}
<li class="toc-level-1" data-test-class={{classID}}>
{{#link-to 'project-version.classes.class' version classID}}{{classID}}{{/link-to}}
Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
"test:ember": "ember test"
},
"devDependencies": {
"@ember/jquery": "^1.1.0",
"@ember/optional-features": "^2.0.0",
"@ember/test-helpers": "^2.2.5",
"@glimmer/component": "^1.0.4",
Expand Down
76 changes: 75 additions & 1 deletion tests/integration/components/table-of-contents-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, findAll } from '@ember/test-helpers';
import { render, findAll, click } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | table of contents', function (hooks) {
Expand All @@ -27,4 +27,78 @@ module('Integration | Component | table of contents', function (hooks) {
assert.dom(findAll('.toc-level-1 li')[0]).hasText('Descriptor');
assert.dom(findAll('.toc-level-1 li')[1]).hasText('Ember');
});

test('Starts with underlying content visible', async function (assert) {
// Set any properties with this.set('myProperty', 'value');
this.set('projectId', 'Ember');
this.set('emberVersion', '2.4.3');

this.set('moduleIDs', ['@ember/application', '@ember/array']);

await render(hbs`{{table-of-contents showPrivateClasses=true
projectid=projectId
version=emberVersion
moduleIDs=moduleIDs
isShowingNamespaces=true
}}`);

assert.dom(findAll('.toc-level-0 > a')[0]).hasText('Packages');
assert
.dom('.toc-level-1 li')
.exists({ count: 2 }, 'We have two items to display');
assert.dom('ol.toc-level-1').isVisible;
assert.dom('.toc-level-1').hasClass('selected');
assert.dom(findAll('.toc-level-1 li')[0]).hasText('@ember/application');
assert.dom(findAll('.toc-level-1 li')[1]).hasText('@ember/array');
});

test('Underlying content hides once clicked', async function (assert) {
// Set any properties with this.set('myProperty', 'value');
this.set('projectId', 'Ember');
this.set('emberVersion', '2.4.3');

this.set('moduleIDs', ['@ember/application', '@ember/array']);

await render(hbs`{{table-of-contents showPrivateClasses=true
projectid=projectId
version=emberVersion
moduleIDs=moduleIDs
isShowingNamespaces=true
}}`);

assert.dom(findAll('.toc-level-0 > a')[0]).hasText('Packages');
assert.dom('ol.toc-level-1').isVisible;
assert.dom('.toc-level-1').hasClass('selected');

await click(document.querySelector('.toc-level-0 > a'));
assert.dom('ol.toc-level-1').isNotVisible;
assert.dom('.toc-level-1').doesNotHaveClass('selected');
});

test('Underlying content should be visible after 2 clicks', async function (assert) {
// Set any properties with this.set('myProperty', 'value');
this.set('projectId', 'Ember');
this.set('emberVersion', '2.4.3');

this.set('moduleIDs', ['@ember/application', '@ember/array']);

await render(hbs`{{table-of-contents showPrivateClasses=true
projectid=projectId
version=emberVersion
moduleIDs=moduleIDs
isShowingNamespaces=true
}}`);

assert.dom(findAll('.toc-level-0 > a')[0]).hasText('Packages');
assert.dom('ol.toc-level-1').isVisible;
assert.dom('.toc-level-1').hasClass('selected');

await click(document.querySelector('.toc-level-0 > a'));
assert.dom('ol.toc-level-1').isNotVisible;
assert.dom('.toc-level-1').doesNotHaveClass('selected');

await click(document.querySelector('.toc-level-0 > a'));
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button is being referred thrice here, will make it into a variable rather than repeating the code

assert.dom('ol.toc-level-1').isVisible;
assert.dom('.toc-level-1').hasClass('selected');
});
});
14 changes: 1 addition & 13 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1138,18 +1138,6 @@
resolved "https://registry.yarnpkg.com/@ember/edition-utils/-/edition-utils-1.2.0.tgz#a039f542dc14c8e8299c81cd5abba95e2459cfa6"
integrity sha512-VmVq/8saCaPdesQmftPqbFtxJWrzxNGSQ+e8x8LLe3Hjm36pJ04Q8LeORGZkAeOhldoUX9seLGmSaHeXkIqoog==

"@ember/jquery@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@ember/jquery/-/jquery-1.1.0.tgz#33d062610a5ceaa5c5c8a3187f870d47d6595940"
integrity sha512-zePT3LiK4/2bS4xafrbOlwoLJrDFseOZ95OOuVDyswv8RjFL+9lar+uxX6+jxRb0w900BcQSWP/4nuFSK6HXXw==
dependencies:
broccoli-funnel "^2.0.2"
broccoli-merge-trees "^3.0.2"
ember-cli-babel "^7.11.1"
ember-cli-version-checker "^3.1.3"
jquery "^3.4.1"
resolve "^1.11.1"

"@ember/optional-features@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@ember/optional-features/-/optional-features-2.0.0.tgz#c809abd5a27d5b0ef3c6de3941334ab6153313f0"
Expand Down Expand Up @@ -9555,7 +9543,7 @@ jquery-deferred@^0.3.0:
resolved "https://registry.yarnpkg.com/jquery-deferred/-/jquery-deferred-0.3.1.tgz#596eca1caaff54f61b110962b23cafea74c35355"
integrity sha1-WW7KHKr/VPYbEQlisjyv6nTDU1U=

jquery@^3.4.1, jquery@^3.5.1:
jquery@^3.5.1:
version "3.6.0"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
Expand Down