Support scrolling to anchors for both pages rendered initially with fastboot and those that are not

- Move to supported fork of ember-router-scroll

Author: kategengler

app/router.js

@@ -1,6 +1,9 @@
 import EmberRouter from '@ember/routing/router';
 import config from 'ember-api-docs/config/environment';
+import { withHashSupport } from 'ember-api-docs/utils/url-hash-polyfill';
 
+// The following adds support for URL hash routing for those URLs not rendered with fastboot
+@withHashSupport
 class AppRouter extends EmberRouter {
   location = config.locationType;
   rootURL = config.routerRootURL;

app/routes/application.js

@@ -2,6 +2,7 @@ import { inject as service } from '@ember/service';
 import Route from '@ember/routing/route';
 import { set } from '@ember/object';
 import ENV from 'ember-api-docs/config/environment';
+import { isDestroying, isDestroyed } from '@ember/destroyable';
 
 export default class ApplicationRoute extends Route {
   @service
@@ -19,10 +20,25 @@ export default class ApplicationRoute extends Route {
   @service
   metrics;
 
+  @service
+  routerScroll;
+
   constructor() {
     super(...arguments);
     if (!this.fastboot.isFastBoot) {
       this.router.on('routeDidChange', this.trackPage);
+
+      /* Hax from https://github.com/DockYard/ember-router-scroll/issues/263 
+         to handle router scroll behavior when the page was initially served 
+         with fastboot
+       */
+      this.routerScroll.set('preserveScrollPosition', true);
+
+      setTimeout(() => {
+        if (!isDestroying(this) && !isDestroyed(this)) {
+          this.routerScroll.set('preserveScrollPosition', false);
+        }
+      }, 1000);
     }
   }
 

app/utils/url-hash-polyfill.js

@@ -0,0 +1,196 @@
+import { getOwner } from '@ember/owner';
+import { warn } from '@ember/debug';
+import {
+  isDestroyed,
+  isDestroying,
+  registerDestructor,
+} from '@ember/destroyable';
+import { schedule } from '@ember/runloop';
+import { waitForPromise } from '@ember/test-waiters';
+
+/* Taken from ember-url-hash-polyfill (https://github.com/CrowdStrike/ember-url-hash-polyfill/)
+   and modified to not run in Fastboot. The original addon is not maintained. 
+   There is a PR to add it to ember-primitives https://github.com/universal-ember/ember-primitives/pull/529
+*/
+
+export function withHashSupport(AppRouter) {
+  return class RouterWithHashSupport extends AppRouter {
+    constructor(...args) {
+      super(...args);
+
+      setupHashSupport(this);
+    }
+  };
+}
+
+export function scrollToHash(hash) {
+  let selector = `[name="${hash}"]`;
+  let element =
+    document.getElementById(hash) || document.querySelector(selector);
+
+  if (!element) {
+    warn(
+      `Tried to scroll to element with id or name "${hash}", but it was not found`,
+      {
+        id: 'no-hash-target',
+      },
+    );
+
+    return;
+  }
+
+  /**
+   * NOTE: the ember router does not support hashes in the URL
+   *       https://github.com/emberjs/rfcs/issues/709
+   *
+   *       this means that when testing hash changes in the URL,
+   *       we have to assert against the window.location, rather than
+   *       the self-container currentURL helper
+   *
+   * NOTE: other ways of changing the URL, but without the smoothness:
+   *   - window[.top].location.replace
+   */
+
+  element.scrollIntoView({ behavior: 'smooth' });
+
+  if (hash !== window.location.hash) {
+    let withoutHash = location.href.split('#')[0];
+    let nextUrl = `${withoutHash}#${hash}`;
+    // most browsers ignore the title param of pushState
+    let titleWithoutHash = document.title.split(' | #')[0];
+    let nextTitle = `${titleWithoutHash} | #${hash}`;
+
+    history.pushState({}, nextTitle, nextUrl);
+    document.title = nextTitle;
+  }
+}
+
+function isLoadingRoute(routeName) {
+  return routeName.endsWith('_loading') || routeName.endsWith('.loading');
+}
+
+async function setupHashSupport(router) {
+  let initialURL;
+  let owner = getOwner(router);
+
+  if (owner.lookup('service:fastboot').isFastBoot) {
+    return;
+  }
+
+  await new Promise((resolve) => {
+    let interval = setInterval(() => {
+      let { currentURL, currentRouteName } = router; /* Private API */
+
+      if (currentURL && !isLoadingRoute(currentRouteName)) {
+        clearInterval(interval);
+        initialURL = currentURL;
+        resolve(null);
+      }
+    }, 100);
+  });
+
+  if (isDestroyed(owner) || isDestroying(owner)) {
+    return;
+  }
+
+  /**
+   * This handles the initial Page Load, which is not imperceptible through
+   * route{Did,Will}Change
+   *
+   */
+  requestAnimationFrame(() => {
+    eventuallyTryScrollingTo(owner, initialURL);
+  });
+
+  let routerService = owner.lookup('service:router');
+
+  function handleHashIntent(transition) {
+    let { url } = transition.intent || {};
+
+    if (!url) {
+      return;
+    }
+
+    eventuallyTryScrollingTo(owner, url);
+  }
+
+  routerService.on('routeDidChange', handleHashIntent);
+
+  registerDestructor(router, () => {
+    routerService.off('routeDidChange', handleHashIntent);
+  });
+}
+
+const CACHE = new WeakMap();
+
+async function eventuallyTryScrollingTo(owner, url) {
+  // Prevent quick / rapid transitions from continuing to observer beyond their URL-scope
+  CACHE.get(owner)?.disconnect();
+
+  if (!url) return;
+
+  let [, hash] = url.split('#');
+
+  if (!hash) return;
+
+  await waitForPromise(uiSettled(owner));
+
+  if (isDestroyed(owner) || isDestroying(owner)) {
+    return;
+  }
+
+  scrollToHash(hash);
+}
+
+const TIME_SINCE_LAST_MUTATION = 500; // ms
+const MAX_TIMEOUT = 2000; // ms
+
+// exported for testing
+async function uiSettled(owner) {
+  let timeStarted = new Date().getTime();
+  let lastMutationAt = Infinity;
+  let totalTimeWaited = 0;
+
+  let observer = new MutationObserver(() => {
+    lastMutationAt = new Date().getTime();
+  });
+
+  CACHE.set(owner, observer);
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  /**
+   * Wait for DOM mutations to stop until MAX_TIMEOUT
+   */
+  await new Promise((resolve) => {
+    let frame;
+
+    function requestTimeCheck() {
+      if (frame) cancelAnimationFrame(frame);
+
+      if (isDestroyed(owner) || isDestroying(owner)) {
+        return;
+      }
+
+      frame = requestAnimationFrame(() => {
+        totalTimeWaited = new Date().getTime() - timeStarted;
+
+        let timeSinceLastMutation = new Date().getTime() - lastMutationAt;
+
+        if (totalTimeWaited >= MAX_TIMEOUT) {
+          return resolve(totalTimeWaited);
+        }
+
+        if (timeSinceLastMutation >= TIME_SINCE_LAST_MUTATION) {
+          return resolve(totalTimeWaited);
+        }
+
+        // eslint-disable-next-line ember/no-runloop
+        schedule('afterRender', requestTimeCheck);
+      });
+    }
+
+    // eslint-disable-next-line ember/no-runloop
+    schedule('afterRender', requestTimeCheck);
+  });
+}

package.json

@@ -100,7 +100,7 @@
     "ember-qunit": "^6.2.0",
     "ember-resolver": "^10.0.0",
     "ember-rfc176-data": "^0.3.17",
-    "ember-router-scroll": "^4.1.2",
+    "@nullvoxpopuli/ember-router-scroll": "^0.0.2",
     "ember-showdown-shiki": "^1.2.1",
     "ember-sinon": "^4.1.1",
     "ember-source": "~4.12.0",