Replace scroll-tracker mixin with class decorator

NOTE: there may be an issue with this on FastBoot (there is a report to
that effect in the output in the console). It is not clear *why*,
though, since the behavior in this decorated class *should* be the same
as in the mixin. Possibly the difference between the route events and
the router events is coming into play?

Author: chriskrycho

app/mixins/scroll-tracker.js

@@ -2,12 +2,13 @@ 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';
+import { withScrollReset } from '../../../utils/with-scroll-reset';
 
-export default class ClassRoute extends Route.extend(ScrollTracker) {
+@withScrollReset
+export default class ClassRoute extends Route {
   /** @type {import('@ember/routing/router-service').default} */
   @service
   router;

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

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

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

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

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

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

app/routes/project.js

@@ -34,6 +34,12 @@ export default class ScrollPositionResetService extends Service {
     //TODO: Use routeInfo for reliable behavior
     const dynamicSlugLocation = 3;
 
+    // These will be unset when first entering the app, in which case we know we
+    // are not changing tabs.
+    if (!transition.from || !transition.to) {
+      return false;
+    }
+
     let fromRoutePathParts = transition.from.name.split('.');
     let toRoutePathParts = transition.to.name.split('.');
 

app/services/scroll-position-reset.js

@@ -0,0 +1,58 @@
+import { inject as service } from '@ember/service';
+import config from 'ember-api-docs/config/environment';
+import getOffset from 'ember-api-docs/utils/get-offset';
+
+/**
+ * Add scroll reset behavior to a `Route`.
+ *
+ * @param {import('@ember/routing/route').default} SomeRoute A Route class to
+ *   decorate with the scroll position handling.
+ * @returns the decorated class
+ */
+export function withScrollReset(SomeRoute) {
+  class WithScrollReset extends SomeRoute {
+    /** @type {import('@ember/routing/router-service').default} */
+    @service
+    router;
+
+    /** @type {import('../services/scroll-position-reset').default} */
+    @service
+    scrollPositionReset;
+
+    constructor() {
+      super(...arguments);
+      this.router.on('routeWillChange', (transition) =>
+        this.scrollPositionReset.scheduleReset(transition)
+      );
+
+      this.router.on('routeDidChange', () => {
+        if (
+          typeof FastBoot === 'undefined' &&
+          window.location.search === '?anchor='
+        ) {
+          let elem = document.querySelector('#methods');
+
+          if (elem && elem.offsetHeight) {
+            const offsetToScroll = getOffset(
+              elem,
+              config.APP.scrollContainerSelector
+            );
+            const scrollContainer = document.querySelector(
+              config.APP.scrollContainerSelector
+            );
+            if (scrollContainer.scrollTo) {
+              scrollContainer.scrollTo(0, offsetToScroll - 10);
+            } else {
+              // fallback for IE11
+              scrollContainer.scrollTop = offsetToScroll - 10;
+            }
+            return;
+          }
+        }
+        this.scrollPositionReset.doReset();
+      });
+    }
+  }
+
+  return WithScrollReset;
+}