Scroll when afterRender (#239)

* Scroll when afterRender

* add more documationa

Author: snewcomer

README.md

@@ -110,16 +110,23 @@ ENV['routerScroll'] = {
 
 You may want the default "out of the box" behaviour.  We schedule scroll after Ember's `render`.  This occurs on the tightest schedule between route transition start and end.
 
-However, you have other option. You may need to delay scroll functionality until the route is idle (approximately after the first paint completes) using `scrollWhenIdle: true` in your config.  `scrollWhenIdle` defaults to `false`.
+However, you have other options. If you need an extra tick after `render`, set `scheduleWhenAfterRender: true`.  You also may need to delay scroll functionality until the route is idle (approximately after the first paint completes) using `scrollWhenIdle: true` in your config.  `scrollWhenIdle` && `scheduleWhenAfterRender` defaults to `false`.
 
 This config property uses [`ember-app-scheduler`](https://github.com/ember-app-scheduler/ember-app-scheduler), so be sure to follow the instructions in the README.  We include the `setupRouter` and `reset`.  This all happens after `routeDidChange`.
 
 ```javascript
 ENV['routerScroll'] = {
-  scrollWhenIdle: true
+  scrollWhenIdle: true // ember-app-scheduler
 };
 ```
 
+Or
+
+```js
+ENV['routerScroll'] = {
+  scrollWhenAfterRender: true // scheduleOnce('afterRender', ...)
+};
+
 I would suggest trying all of them out and seeing which works best for your app!
 
 

addon/index.js

@@ -100,13 +100,20 @@ class EmberRouterScroll extends EmberRouter {
     }
 
     const scrollWhenIdle = get(this, 'service.scrollWhenIdle');
+    const scrollWhenAfterRender = get(this, 'service.scrollWhenAfterRender');
 
-    if (!scrollWhenIdle) {
+    if (!scrollWhenIdle && !scrollWhenAfterRender) {
       // out of the option, this happens on the tightest schedule
       const callback = function() {
         this.updateScrollPosition(transition);
       }
       scheduleOnce('render', this, callback);
+    } else if (scrollWhenAfterRender) {
+      // out of the option, this happens on the tightest schedule
+      const callback = function() {
+        this.updateScrollPosition(transition);
+      }
+      scheduleOnce('afterRender', this, callback);
     } else {
       // as described in ember-app-scheduler, this addon can be used to delay rendering until after the route is idle
       whenRouteIdle().then(() => {

addon/services/router-scroll.js

@@ -18,6 +18,7 @@ class RouterScroll extends Service {
   preserveScrollPosition = false;
   // ember-app-scheduler properties
   scrollWhenIdle = false;
+  scrollWhenAfterRender = false;
 
   init(...args) {
     super.init(...args);

tests/unit/router-scroll-test.js

@@ -134,11 +134,27 @@ module('router-scroll', function(hooks) {
     subject = this.owner.factoryFor('router:main').create();
 
     run(() => {
-      if(gte('3.6.0-beta.1')) {
-        subject.trigger('routeDidChange');
-      } else {
-        subject.didTransition();
+      subject.trigger('routeDidChange');
+    });
+  });
+
+  test('when the application is not FastBooted with scrollWhenAfterRender', function(assert) {
+    assert.expect(1);
+    const done = assert.async();
+
+    this.owner.register('service:fastboot', EmberObject.extend({ isFastBoot: false }));
+    this.owner.register('service:router-scroll', EmberObject.extend({ scrollWhenAfterRender: true }));
+    this.owner.register('router:main', EmberRouterScroll.extend({
+      updateScrollPosition() {
+        assert.ok(true, 'it should call updateScrollPosition.');
+        done();
       }
+    }));
+
+    subject = this.owner.factoryFor('router:main').create();
+
+    run(() => {
+      subject.trigger('routeDidChange');
     });
   });