Replace jQuery animation for table of contents and remove jQuery package

Author: swarajpure

app/components/table-of-contents.js

@@ -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');
     },
   },
 });

app/styles/components/_sidebar.scss

@@ -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;
 
-  &: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;

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

@@ -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")}}
@@ -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}}
@@ -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}}

package.json

@@ -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",

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

@@ -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) {
@@ -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'));
+    assert.dom('ol.toc-level-1').isVisible;
+    assert.dom('.toc-level-1').hasClass('selected');
+  });
 });

yarn.lock

@@ -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"
@@ -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==