Routes not URLs

Author: samselikoff

addon/components/docs-viewer/component.js

@@ -28,14 +28,14 @@ export default Component.extend(EKMixin, {
   },
 
   nextPage: Ember.on(keyDown('KeyL'), keyDown('ArrowRight'), function() {
-    if (this.searchIsNotFocused() && this.get('docsRoutes.nextUrl')) {
-      this.get('router').transitionTo(this.get('docsRoutes.nextUrl'));
+    if (this.searchIsNotFocused() && this.get('docsRoutes.nextRoute')) {
+      this.get('router').transitionTo(...this.get('docsRoutes.nextRoute'));
     }
   }),
 
   previousPage: Ember.on(keyDown('KeyH'), keyDown('ArrowLeft'), function() {
-    if (this.searchIsNotFocused() && this.get('docsRoutes.previousUrl')) {
-      this.get('router').transitionTo(this.get('docsRoutes.previousUrl'));
+    if (this.searchIsNotFocused() && this.get('docsRoutes.previousRoute')) {
+      this.get('router').transitionTo(...this.get('docsRoutes.previousRoute'));
     }
   }),
 

addon/components/docs-viewer/x-main/template.hbs

@@ -1,13 +1,13 @@
 {{yield}}
 
-{{#if docsRoutes.previousUrl}}
-  <a href="{{docsRoutes.previousUrl}}" class='docs-viewer__page-nav'>
+{{#if docsRoutes.previousRoute}}
+  {{#link-to params=docsRoutes.previousRoute class='docs-viewer__page-nav'}}
     {{svg-jar 'left-arrow' width=32}}
-  </a>
+  {{/link-to}}
 {{/if}}
 
-{{#if docsRoutes.nextUrl}}
-  <a href="{{docsRoutes.nextUrl}}" class='docs-viewer__page-nav docs-viewer__page-nav--next'>
+{{#if docsRoutes.nextRoute}}
+  {{#link-to params=docsRoutes.nextRoute class='docs-viewer__page-nav docs-viewer__page-nav--next'}}
     {{svg-jar 'right-arrow' width=32}}
-  </a>
+  {{/link-to}}
 {{/if}}

addon/services/docs-routes.js

@@ -2,6 +2,7 @@ import { computed } from '@ember/object';
 import { A } from '@ember/array';
 import Service, { inject as service } from '@ember/service';
 import { hrefTo } from 'ember-href-to/helpers/href-to';
+import { assert } from '@ember/debug';
 
 export default Service.extend({
 
@@ -16,40 +17,47 @@ export default Service.extend({
     this.set('items', A());
   },
 
-  allUrls: computed('items.[]', function() {
+  // Each routeParam is [ routeName, model ] where model is optional
+  routes: computed('items.[]', function() {
     return this.get('items').map(item => {
-      let hrefToArgs = [ this, item.route ];
+      let routeParams = [ item.route ];
       if (item.model) {
-        hrefToArgs.push(item.model);
+        routeParams.push(item.model);
       }
 
-      return hrefTo.apply(null, hrefToArgs);
+      return routeParams;
     });
   }),
 
-  currentUrl: computed('router.router.currentURL', function() {
-    let router = this.get('router.router');
-    let currentUrl = router.get('rootURL') + router.get('currentURL');
+  routeUrls: computed('routes.[]', function() {
+    return this.get('routes').map(route => {
+      return hrefTo.apply(null, [this, ...route]);
+    });
+  }),
 
-    return currentUrl
-      .replace("//", "/")  // dedup slashes
-      .replace(/\/$/, ""); // remove trailing slash
+  currentRouteIndex: computed('router.router.currentURL', 'routeUrls.[]', function() {
+    if (this.get('routeUrls.length')) {
+      let currentURL = this.get('router.router.currentURL').replace(/\/$/, "");
+      let index = this.get('routeUrls').indexOf(currentURL);
+      assert(`DocsRoutes wasn't able to correctly detect the current route.`, index > -1);
+      return index;
+    }
   }),
 
-  previousUrl: computed('allUrls.[]', 'currentUrl', function() {
-    let currentIndex = this.get('allUrls').indexOf(this.get('currentUrl'));
+  nextRoute: computed('currentRouteIndex', 'routes.[]', function() {
+    let currentIndex = this.get('currentRouteIndex');
 
-    if (currentIndex > 0) {
-      return this.get('allUrls')[(currentIndex - 1)];
+    if (currentIndex < this.get('routes.length')) {
+      return this.get('routes')[(currentIndex + 1)];
     }
   }),
 
-  nextUrl: computed('allUrls.[]', 'currentUrl', function() {
-    let currentIndex = this.get('allUrls').indexOf(this.get('currentUrl'));
+  previousRoute: computed('currentRouteIndex', 'routes.[]', function() {
+    let currentIndex = this.get('currentRouteIndex');
 
-    if (currentIndex < this.get('allUrls.length')) {
-      return this.get('allUrls')[(currentIndex + 1)];
+    if (currentIndex > 0) {
+      return this.get('routes')[(currentIndex - 1)];
     }
   })
-
+  
 });