WIP: Removing the tabbed-layout and moving it to an on-this-page layout

app/components/class-field-description.hbs

@@ -1,5 +1,5 @@
 <section class='{{@type}}'>
-  <h3 data-anchor='{{@field.name}}'>
+  <h3 id='{{@field.name}}'>
     <span class='{{@type}}-name'>{{@field.name}}</span>
     {{#if @field.params}}
       <span class='args'>
@@ -16,7 +16,7 @@
       <span class='access'>deprecated</span>
     {{/if}}
     {{!-- TODO: Fix this link for a11y --}}
-    <a class='class-field-description--link' data-test-anchor="{{@field.name}}" role='link' {{on 'click' (fn this.updateAnchor @field.name)}} {{!-- template-lint-disable link-href-attributes --}}>
+    <a class='class-field-description--link' href="#{{@field.name}}" role='link'>
       {{svg-jar 'link' width='20px' height='20px'}}
     </a>
   </h3>

app/components/class-field-description.js

@@ -1,6 +1,5 @@
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 
 export default class ClassFieldDescription extends Component {
   @service
@@ -12,15 +11,4 @@ export default class ClassFieldDescription extends Component {
       this.args.field.class
     );
   }
-
-  /**
-   * Callback for updating the anchor with the field name that was clicked by a user.
-   *
-   * @method updateAnchor
-   * @method fieldName String The name representing the field that was clicked.
-   */
-  @action
-  updateAnchor(fieldName) {
-    this.args.updateAnchor?.(fieldName);
-  }
 }

app/templates/events.hbs → app/components/events.hbs

@@ -1,5 +1,4 @@
-<EmberAnchor @a={{this.anchor}} />
-<ApiIndexFilter @model={{this.model}} @filterData={{this.filterData}} as |filteredModel|>
+<ApiIndexFilter @model={{@model}} @filterData={{@filterData}} as |filteredModel|>
   {{#each filteredModel.events as |event|}}
     <ClassFieldDescription @type="event" @field={{event}} @model={{this.model}} />
   {{/each}}

app/components/methods.hbs

@@ -0,0 +1,5 @@
+<ApiIndexFilter @model={{@model}} @filterData={{@filterData}} as |filteredModel|>
+  {{#each filteredModel.methods as |method|}}
+    <ClassFieldDescription @type="method" @field={{method}} @model={{this.model}} />
+  {{/each}}
+</ApiIndexFilter>

app/components/properties.hbs

@@ -0,0 +1,5 @@
+<ApiIndexFilter @model={{@model}} @filterData={{@filterData}} as |filteredModel|>
+  {{#each filteredModel.properties as |property|}}
+    <ClassFieldDescription @type="property" @field={{property}} @model={{this.model}} />
+  {{/each}}
+</ApiIndexFilter>

app/components/table-of-contents.hbs

@@ -1,3 +1,7 @@
+<label class='toc-private-toggle'>
+  <input type='checkbox' checked={{@showPrivateClasses}} onchange={{@togglePrivateClasses}} class='private-deprecated-toggle' />
+  Show Private / Deprecated packages
+</label>
 <ul class='table-of-contents '>
   <li class='toc-item toc-group' data-test-toc-title="packages">
     Packages
@@ -38,7 +42,3 @@
     </ul>
   </li>
 </ul>
-<label class='toc-private-toggle'>
-  <input type='checkbox' checked={{@showPrivateClasses}} onchange={{@togglePrivateClasses}} class='private-deprecated-toggle' />
-  Show Private / Deprecated
-</label>

app/controllers/events.js

@@ -1,12 +1,7 @@
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
-import AnchorControllerSupport from 'ember-anchor/mixins/controller-support';
 
-export default class EventsController extends Controller.extend(
-  AnchorControllerSupport
-) {
+export default class EventsController extends Controller {
   @service
   filterData;
-
-  queryParams = ['anchor'];
 }

app/controllers/methods.js

@@ -1,20 +1,7 @@
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
-import AnchorControllerSupport from 'ember-anchor/mixins/controller-support';
-import { tracked } from '@glimmer/tracking';
 
-export default class MethodsController extends Controller.extend(
-  AnchorControllerSupport
-) {
+export default class MethodsController extends Controller {
   @service
   filterData;
-
-  @tracked
-  anchor;
-
-  queryParams = ['anchor'];
-
-  updateAnchor(fieldName) {
-    this.anchor = fieldName;
-  }
 }

app/controllers/properties.js

@@ -1,19 +1,7 @@
-/* eslint-disable ember/classic-decorator-no-classic-methods */
-import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
-import AnchorControllerSupport from 'ember-anchor/mixins/controller-support';
 
-export default class PropertiesController extends Controller.extend(
-  AnchorControllerSupport
-) {
+export default class PropertiesController extends Controller {
   @service
   filterData;
-
-  queryParams = ['anchor'];
-
-  @action
-  updateAnchor(fieldName) {
-    this.set('anchor', fieldName);
-  }
 }

app/routes/project-version/classes/class.js

@@ -2,12 +2,12 @@ import { inject as service } from '@ember/service';
 import { resolve, all } from 'rsvp';
 import Route from '@ember/routing/route';
 import { set } from '@ember/object';
-import ScrollTracker from 'ember-api-docs/mixins/scroll-tracker';
+
 import { pluralize } from 'ember-inflector';
 import getFullVersion from 'ember-api-docs/utils/get-full-version';
 import createExcerpt from 'ember-api-docs/utils/create-excerpt';
 
-export default class ClassRoute extends Route.extend(ScrollTracker) {
+export default class ClassRoute extends Route {
   /** @type {import('@ember/routing/router-service').default} */
   @service
   router;

app/routes/project-version/functions/function.js

@@ -11,9 +11,6 @@ export default class FunctionRoute extends Route {
   @service
   metaStore;
 
-  @service
-  scrollPositionReset;
-
   titleToken(model) {
     return model?.fn?.name;
   }
@@ -63,8 +60,4 @@ export default class FunctionRoute extends Route {
       return fn.name === functionName;
     });
   }
-
-  activate() {
-    this.scrollPositionReset.doReset();
-  }
 }

app/routes/project-version/modules/module.js

@@ -1,8 +1,7 @@
 import ClassRoute from '../classes/class';
-import ScrollTracker from 'ember-api-docs/mixins/scroll-tracker';
 import getFullVersion from 'ember-api-docs/utils/get-full-version';
 
-export default class ModuleRoute extends ClassRoute.extend(ScrollTracker) {
+export default class ModuleRoute extends ClassRoute {
   async model(params) {
     const { project, project_version: compactVersion } =
       this.paramsFor('project-version');

app/routes/project-version/namespaces/namespace.js

@@ -1,8 +1,7 @@
 import ClassRoute from '../classes/class';
-import ScrollTracker from 'ember-api-docs/mixins/scroll-tracker';
 import getFullVersion from 'ember-api-docs/utils/get-full-version';
 
-export default class NamespaceRoute extends ClassRoute.extend(ScrollTracker) {
+export default class NamespaceRoute extends ClassRoute {
   templateName = 'project-version/classes/class';
 
   async model(params) {

app/routes/project.js

@@ -1,8 +1,7 @@
 import Route from '@ember/routing/route';
-import ScrollTracker from 'ember-api-docs/mixins/scroll-tracker';
 import { inject as service } from '@ember/service';
 
-export default class ProjectRoute extends Route.extend(ScrollTracker) {
+export default class ProjectRoute extends Route {
   /** @type {import('@ember/routing/router-service').default} */
   @service
   router;

app/styles/app.css

@@ -91,6 +91,11 @@ li.toc-heading:first-child {
   margin-top: 0;
 }
 
+.toc-private-toggle {
+  display: block;
+  margin-top: var(--spacing-2);
+}
+
 a.class-field-description--link {
   margin-left: 12px;
   vertical-align: middle;
@@ -109,8 +114,6 @@ a.class-field-description--link:hover svg {
   fill: var(--color-brand);
 }
 
-
-
 .parameter, .return {
   display: flex;
   gap: var(--spacing-1);
@@ -126,6 +129,19 @@ dd {
   color: var(--color-gray-600);
 }
 
+.on-this-page-wrapper .access-checkbox-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.on-this-page-wrapper .api-index-filter {
+  margin-top: var(--spacing-2)
+}
+
+.on-this-page-wrapper ul {
+  margin-top: 0;
+}
+
 .whoops {
   display: flex;
   justify-content: center;