Merge pull request #15 from yapplabs/bug/no-spring-needed

Fix edge case when no post-pan spring physics are needed because pan leaves element in exactly the right spot.
yapplabs · Dec 10, 2018 · 1c2dfbb · 1c2dfbb
2 parents 2f8e7e8 + 01f65d5
commit 1c2dfbb
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 32 deletions.
diff --git a/addon/components/nav-stack.js b/addon/components/nav-stack.js
@@ -403,32 +403,8 @@ export default class NavStack extends Component {
     let initialVelocity = ev.velocityX;
     let fromValue = this.startingX + ev.deltaX;
     let toValue = shouldNavigateBack ? this.backX : this.startingX;
-    let spring = this._createSpring({ initialVelocity, fromValue, toValue });
     this.navStacksService.notifyTransitionStart();
-    this._activeSpring = spring;
-    spring.onUpdate((s) => {
-      this.containerElement.style.transform = `translateX(${s.currentValue}px)`;
-      styleHeaderElements(
-        currentTransitionPercentage(this.startingX, this.backX, s.currentValue),
-        false,
-        this.parentHeaderElement,
-        this.currentHeaderElement
-      );
-      if (!shouldNavigateBack && s.currentValue >= this.startingX + this.thresholdX) {
-        shouldNavigateBack = true;
-        spring.updateConfig({
-          toValue: this.backX
-        });
-      }
-    }).onStop(() => {
-      let finalizeSpring = () => {
-        this.navStacksService.notifyTransitionEnd();
-        this._activeSpring = null;
-      };
-      if (!spring.isAtRest) { // we were interrupted
-        finalizeSpring();
-        return;
-      }
+    let finalize = () => {
       if (shouldNavigateBack) {
         styleHeaderElements(
           currentTransitionPercentage(this.startingX, this.backX, this.backX),
@@ -454,7 +430,31 @@ export default class NavStack extends Component {
         this.parentHeaderElement.style.opacity = 0;
         this.parentHeaderElement.style.transform = 'translateX(-60px)';
       }
-      finalizeSpring();
+      this.navStacksService.notifyTransitionEnd();
+      this._activeSpring = null;
+    };
+    if (fromValue === toValue && initialVelocity === 0) {
+      finalize();
+      return;
+    } 
+    let spring = this._createSpring({ initialVelocity, fromValue, toValue });
+    this._activeSpring = spring;
+    spring.onUpdate((s) => {
+      this.containerElement.style.transform = `translateX(${s.currentValue}px)`;
+      styleHeaderElements(
+        currentTransitionPercentage(this.startingX, this.backX, s.currentValue),
+        false,
+        this.parentHeaderElement,
+        this.currentHeaderElement
+      );
+      if (!shouldNavigateBack && s.currentValue >= this.startingX + this.thresholdX) {
+        shouldNavigateBack = true;
+        spring.updateConfig({
+          toValue: this.backX
+        });
+      }
+    }).onStop(() => {
+      finalize();
     }).start();
   }
 

diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "ember-qunit": "^3.4.1",
     "ember-resolver": "^5.0.1",
     "ember-route-action-helper": "^2.0.6",
-    "ember-simulant-test-helpers": "^0.1.0",
+    "ember-simulant-test-helpers": "^0.3.0",
     "ember-source": "~3.5.0",
     "ember-source-channel-url": "^1.1.0",
     "ember-try": "^1.0.0",

diff --git a/tests/integration/nav-stack-test.js b/tests/integration/nav-stack-test.js
@@ -211,7 +211,7 @@ module('Integration | Component | nav-stack', function(hooks) {
       assert.ok(!isInViewport('.NavStack-item-1'), 'Item 1 is off screen');
       panX(find('.NavStack-item-2'), {
         position: [50, 100],
-        amount: 150,
+        amount: 200,
         duration: 30
       });
       await delay(150);
@@ -238,6 +238,31 @@ module('Integration | Component | nav-stack', function(hooks) {
       assert.ok(isInViewport('.NavStack-item-1'), 'Item 1 is on screen');
       assert.dom('.NavStack-item-2').doesNotExist();
     });
+    test('partial back swipe from level 3 and then return exactly to original position, then swipe back', async function(assert) {
+      await this.renderNavStack(exampleHbs);
+      assert.ok(!isInViewport('.NavStack-item-1'), 'Item 1 is off screen');
+      let mouseUpDeferred = RSVP.defer();
+      let panXPromise = panX(find('.NavStack-item-2'), {
+        position: [50, 100],
+        amount: [40, -34, -3, -3],
+        duration: 300,
+        waitForMouseUp: mouseUpDeferred.promise
+      });
+      await delay(1000);
+      mouseUpDeferred.resolve();
+      await panXPromise;
+      await settled();
+      assert.ok(!isInViewport('.NavStack-item-1'), 'Item 1 is off screen');
+      assert.ok(isInViewport('.NavStack-item-2'), 'Item 2 is on screen');
+      await panX(find('.NavStack-item-2'), {
+        position: [50, 100],
+        amount: 150,
+        duration: 200,
+      });
+      await settled();
+      assert.ok(isInViewport('.NavStack-item-1'), 'Item 1 is on screen');
+      assert.dom('.NavStack-item-2').doesNotExist();
+    });
   });
   module('page under more', function() {
     let exampleHbs = hbs`

diff --git a/yarn.lock b/yarn.lock
@@ -4763,10 +4763,10 @@ ember-router-generator@^1.2.3:
   dependencies:
     recast "^0.11.3"
 
-ember-simulant-test-helpers@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/ember-simulant-test-helpers/-/ember-simulant-test-helpers-0.1.0.tgz#7683cb8f21f519606a5818961a06143edcd46ab7"
-  integrity sha512-4qiLcNAhj0Zmc8mIZgTMbJeDMSGMdk1tuZuzCcVCVVRcLURRIB5CA/t1ayHlga17rEVsiCaRb6guknqC4suWcQ==
+ember-simulant-test-helpers@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/ember-simulant-test-helpers/-/ember-simulant-test-helpers-0.3.0.tgz#95fe189fa78137724d0ec0946721295e135db0f6"
+  integrity sha512-D4lNE+awHEhMilv266TaacLmBK43tzCLi61pMlE29BY2ANmguVov0tj4dg3Bk3uhl/dfP42Zvu4nbUIPHN4uCg==
   dependencies:
     broccoli-debug "^0.6.5"
     broccoli-funnel "^2.0.1"