Skip to content

Commit

Permalink
Merge branch 'master' into dh-5
Browse files Browse the repository at this point in the history
  • Loading branch information
taion committed Mar 30, 2020
2 parents cd06035 + db55563 commit 70978ea
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 22 deletions.
12 changes: 6 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ import ScrollBehavior from 'scroll-behavior';
/* ... */

const scrollBehavior = new ScrollBehavior({
addTransitionHook,
addNavigationListener,
stateStorage,
getCurrentLocation,
/* shouldUpdateScroll, */
});

// After a transition:
// After navigation:
scrollBehavior.updateScroll(/* prevContext, context */);
```

Expand All @@ -40,15 +40,15 @@ $ npm i -S scroll-behavior

Create a `ScrollBehavior` object with the following arguments:

- `addTransitionHook`: this function should take a transition hook function and return an unregister function
- The transition hook function should be called immediately before a transition updates the page
- The unregister function should remove the transition hook when called
- `addNavigationListener`: this function should take a navigation listener function and return an unlisten function
- The navigation listener function should be called immediately before navigation updates the page
- The unlisten function should remove the navigation listener when called
- `stateStorage`: this object should implement `read` and `save` methods
- The `save` method should take a location object, a nullable element key, and a truthy value; it should save that value for the duration of the page session
- The `read` method should take a location object and a nullable element key; it should return the value that `save` was called with for that location and element key, or a falsy value if no saved value is available
- `getCurrentLocation`: this function should return the current location object

This object will keep track of the scroll position. Call the `updateScroll` method on this object after transitions to emulate the default browser scroll behavior on page changes.
This object will keep track of the scroll position. Call the `updateScroll` method on this object after navigation to emulate the default browser scroll behavior on page changes.

Call the `stop` method to tear down all listeners.

Expand Down
22 changes: 11 additions & 11 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const MAX_SCROLL_ATTEMPTS = 2;

export default class ScrollBehavior {
constructor({
addTransitionHook,
addNavigationListener,
stateStorage,
getCurrentLocation,
shouldUpdateScroll,
Expand All @@ -24,7 +24,7 @@ export default class ScrollBehavior {
this._oldScrollRestoration = null;

// This helps avoid some jankiness in fighting against the browser's
// default scroll behavior on `POP` transitions.
// default scroll behavior on `POP` navigations.
/* istanbul ignore else: Travis browsers all support this */
this._setScrollRestoration();

Expand All @@ -41,7 +41,7 @@ export default class ScrollBehavior {
// before emitting the location change.
window.addEventListener('scroll', this._onWindowScroll);

const handleTransition = (saveWindowPosition) => {
const handleNavigation = (saveWindowPosition) => {
animationFrame.cancel(this._saveWindowPositionHandle);
this._saveWindowPositionHandle = null;

Expand All @@ -62,10 +62,10 @@ export default class ScrollBehavior {
});
};

this._removeTransitionHook = addTransitionHook(({ action }) => {
this._removeNavigationListener = addNavigationListener(({ action }) => {
// Don't save window position on POP, as the browser may have already
// updated it.
handleTransition(action !== 'POP');
handleNavigation(action !== 'POP');
});

PageLifecycle.addEventListener('statechange', ({ newState }) => {
Expand All @@ -74,7 +74,7 @@ export default class ScrollBehavior {
newState === 'frozen' ||
newState === 'discarded'
) {
handleTransition(true);
handleNavigation(true);

// Scroll restoration persists across page reloads. We want to reset
// this to the original value, so that we can let the browser handle
Expand Down Expand Up @@ -143,8 +143,8 @@ export default class ScrollBehavior {

updateScroll(prevContext, context) {
this._updateWindowScroll(prevContext, context).then(() => {
// Save the position immediately after a transition so that if no
// scrolling occurs, there is still a saved position
// Save the position immediately after navigation so that if no scrolling
// occurs, there is still a saved position.
if (!this._saveWindowPositionHandle) {
this._saveWindowPositionHandle = animationFrame.request(
this._saveWindowPosition,
Expand Down Expand Up @@ -197,7 +197,7 @@ export default class ScrollBehavior {
window.removeEventListener('scroll', this._onWindowScroll);
this._cancelCheckWindowScroll();

this._removeTransitionHook();
this._removeNavigationListener();
}

startIgnoringScrollEvents() {
Expand All @@ -210,12 +210,12 @@ export default class ScrollBehavior {

_onWindowScroll = () => {
if (this._ignoreScrollEvents) {
// Don't save the scroll position until the transition is complete
// Don't save the scroll position until navigation is complete.
return;
}

// It's possible that this scroll operation was triggered by what will be a
// `POP` transition. Instead of updating the saved location immediately,
// `POP` navigation. Instead of updating the saved location immediately,
// we have to enqueue the update, then potentially cancel it if we observe
// a location update.
if (!this._saveWindowPositionHandle) {
Expand Down
2 changes: 1 addition & 1 deletion test/ScrollBehavior.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ describe('ScrollBehavior', () => {
});

describe('default behavior', () => {
it.only('should emulate browser scroll behavior', (done) => {
it('should emulate browser scroll behavior', (done) => {
const history = withRoutes(withScroll(createHistory()));
const child1 = document.getElementById('child1');
const child2 = document.getElementById('child2-id');
Expand Down
2 changes: 1 addition & 1 deletion test/withScroll.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default function withScroll(history, shouldUpdateScroll) {
function listen(listener) {
if (listeners.length === 0) {
scrollBehavior = new ScrollBehavior({
addTransitionHook: history.listenBefore,
addNavigationListener: history.listenBefore,
stateStorage: new HistoryStateStorage(history),
getCurrentLocation,
shouldUpdateScroll,
Expand Down
4 changes: 2 additions & 2 deletions types/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// TypeScript Version: 3.0

declare module 'scroll-behavior' {
interface TransitionHook {
interface NavigationListener {
(): void;
}

Expand All @@ -19,7 +19,7 @@ declare module 'scroll-behavior' {
}

interface ScrollBehaviorOptions<TLocation extends LocationBase, TContext> {
addTransitionHook: (hook: TransitionHook) => () => void;
addNavigationListener: (listener: NavigationListener) => () => void;
stateStorage: {
save: (
location: TLocation,
Expand Down
2 changes: 1 addition & 1 deletion types/test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const location = {
};

const scrollBehavior = new ScrollBehavior<Location, Context>({
addTransitionHook: (_hook) => () => {},
addNavigationListener: (_listener) => () => {},
stateStorage: {
save: (_location, _key, _value) => {},
read: (_location, _key) => [0, 0],
Expand Down

0 comments on commit 70978ea

Please sign in to comment.