diff --git a/README.md b/README.md index 31d372bc..bb987ce5 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Ember-router-scroll -This README outlines the details of collaborating on this Ember addon. +ember-router-scroll ## Installation diff --git a/addon/mixins/router-scroll.js b/addon/mixins/router-scroll.js new file mode 100644 index 00000000..37b94884 --- /dev/null +++ b/addon/mixins/router-scroll.js @@ -0,0 +1,42 @@ +import Ember from 'ember'; + +// ember-router-scroll variables +let popStateEvent = false; +const scrollMap = {}; +let windowLocation = ''; + +// ember-router-scroll event handler +window.addEventListener('popstate', () => { + popStateEvent = true; +}); + +export default Ember.Mixin.create({ + + willTransition(...args) { + this._super(...args); + scrollMap[windowLocation] = Ember.$(window).scrollTop(); + }, + + didTransition(transitions, ...args) { + this._super(transitions, ...args); + + Ember.run.next(() => { + windowLocation = window.location.pathname; + const scrollPosition = scrollMap[windowLocation] ? scrollMap[windowLocation] : 0; + const preserveScrollPosition = transitions[transitions.length - 1] + .handler.controller.get('preserveScrollPosition'); + if (popStateEvent) { + // If the back or forward browser button is pressed, set scroll top to + // the position it had when the page was last seen. + Ember.$(window).scrollTop(scrollPosition); + } else { + // This is an initial or direct page visit, so begin at page top. + if (preserveScrollPosition) {return;} + Ember.$(window).scrollTop(0); + } + + // Reset popstate event status. + popStateEvent = false; + }); + }, +}); diff --git a/app/mixins/ember-router-scroll.js b/app/mixins/ember-router-scroll.js new file mode 100644 index 00000000..90ff5d84 --- /dev/null +++ b/app/mixins/ember-router-scroll.js @@ -0,0 +1 @@ +export { default } from 'ember-router-scroll/mixins/router-scroll'; diff --git a/tests/unit/mixins/router-scroll-test.js b/tests/unit/mixins/router-scroll-test.js new file mode 100644 index 00000000..2da34785 --- /dev/null +++ b/tests/unit/mixins/router-scroll-test.js @@ -0,0 +1,12 @@ +import Ember from 'ember'; +import RouterScrollMixin from 'ember-router-scroll/mixins/router-scroll'; +import { module, test } from 'qunit'; + +module('Unit | Mixin | router scroll'); + +// Replace this with your real tests. +test('it works', function(assert) { + let RouterScrollObject = Ember.Object.extend(RouterScrollMixin); + let subject = RouterScrollObject.create(); + assert.ok(subject); +});