Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor!: Rename addTransitionHook to addNavigationListener #373

Merged
merged 1 commit into from
Mar 30, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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 @@ -15,7 +15,7 @@ const MAX_SCROLL_ATTEMPTS = 2;

export default class ScrollBehavior {
constructor({
addTransitionHook,
addNavigationListener,
stateStorage,
getCurrentLocation,
shouldUpdateScroll,
Expand All @@ -26,7 +26,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 @@ -43,7 +43,7 @@ export default class ScrollBehavior {
// before emitting the location change.
on(window, 'scroll', this._onWindowScroll);

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

Expand All @@ -64,10 +64,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 @@ -76,7 +76,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 @@ -145,8 +145,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 = requestAnimationFrame(
this._saveWindowPosition,
Expand Down Expand Up @@ -199,7 +199,7 @@ export default class ScrollBehavior {
off(window, 'scroll', this._onWindowScroll);
this._cancelCheckWindowScroll();

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

startIgnoringScrollEvents() {
Expand All @@ -212,12 +212,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/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