feat(core): ⚗️ store scroll position in history

barbajs · Aug 22, 2019 · 0fb28e2 · 0fb28e2
1 parent 5540a77
commit 0fb28e2
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 7 deletions.
diff --git a/packages/core/__tests__/core/core.init.test.ts b/packages/core/__tests__/core/core.init.test.ts
@@ -76,9 +76,12 @@ it('init history', () => {
   expect(barba.history.current).toEqual({
     index: 0,
     ns: 'ns',
+    scroll: {
+      x: 0,
+      y: 0,
+    },
     url: '/',
   });
-  // expect(barba.cache.has('http://localhost/')).toBeTruthy();
 });
 
 it('calls appear', () => {

diff --git a/packages/core/__tests__/utils/dom.test.ts b/packages/core/__tests__/utils/dom.test.ts
@@ -18,6 +18,7 @@ wrapper.appendChild(container);
 
 // Expected
 const checkDoc = new RegExp(
+  // tslint:disable-next-line:max-line-length
   `^<html>[\\s\\S]+body[\\s\\S]+${dom['_attr'].wrapper}[\\s\\S]+${dom['_attr'].container}[\\s\\S]+${namespace}[\\s\\S]+</html>$`
 );
 

diff --git a/packages/core/__tests__/utils/history.test.ts b/packages/core/__tests__/utils/history.test.ts
@@ -3,11 +3,19 @@ import { history } from '../../src/utils/history';
 const first = {
   index: 0,
   ns: 'ns1',
+  scroll: {
+    x: 0,
+    y: 0,
+  },
   url: 'url1',
 };
 const second = {
   index: 1,
   ns: 'ns2',
+  scroll: {
+    x: 0,
+    y: 0,
+  },
   url: 'url2',
 };
 
@@ -67,8 +75,8 @@ it('gets directions', () => {
   history.init(first.url, first.ns);
   history.add(second.url, second.ns);
 
-  const back = history.getDirection({ index: 0, ns: '', url: '' });
-  const forward = history.getDirection({ index: 2, ns: '', url: '' });
+  const back = history.getDirection(0);
+  const forward = history.getDirection(2);
 
   expect(back).toEqual('back');
   expect(forward).toEqual('forward');

diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
@@ -299,7 +299,7 @@ export class Core {
     if (trigger === 'popstate') {
       const { state } = e as PopStateEvent;
       // Get direction
-      trigger = this.history.getDirection(state);
+      trigger = this.history.getDirection(state.index as number);
       this.history.add(href, state.ns, state.index, false);
     } else {
       this.history.add(href, 'tmp');

diff --git a/packages/core/src/utils/history.ts b/packages/core/src/utils/history.ts
@@ -13,17 +13,26 @@ import { Trigger } from '../defs';
 
 /***/
 
+interface ICoords {
+  x: number;
+  y: number;
+}
+
 /**
  * History item.
  *
+ * @property index
  * @property namespace
+ * @property scroll
  * @property URL
  */
 interface IHistoryItem {
   /** index */
   index: number;
   /** namespace */
   ns: string | undefined;
+  /** Scroll position */
+  scroll: ICoords;
   /** URL */
   url: string;
 }
@@ -38,6 +47,10 @@ export class History {
     const state: IHistoryItem = {
       index: 0,
       ns,
+      scroll: {
+        x: window.scrollX,
+        y: window.scrollY,
+      },
       url,
     };
 
@@ -58,6 +71,10 @@ export class History {
     const state: IHistoryItem = {
       index,
       ns,
+      scroll: {
+        x: window.scrollX,
+        y: window.scrollY,
+      },
       url,
     };
 
@@ -111,12 +128,12 @@ export class History {
     return this._state[index];
   }
 
-  public getDirection(state: IHistoryItem): Trigger {
+  public getDirection(index: number): Trigger {
     let direction: Trigger = 'popstate';
 
-    if (state.index < this.current.index) {
+    if (index < this.current.index) {
       direction = 'back';
-    } else if (state.index > this.current.index) {
+    } else if (index > this.current.index) {
       direction = 'forward';
     }