Fixed manageNavigationSkip now .seq-in and .seq-out can have independ…

…ent durations and delays
takint · May 1, 2015 · e1bd69f · e1bd69f
1 parent ed301a9
commit e1bd69f
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 65 deletions.
diff --git a/scripts/sequence.js b/scripts/sequence.js
@@ -1472,28 +1472,32 @@ function defineSequence(imagesLoaded, Hammer) {
             currentPhaseProperties,
             currentPhaseDuration,
             phaseThresholdTime,
-            activePhases = {};
+            activePhases;
 
         if (self.firstRun === false) {
 
           // Callback
-          animation.currentPhaseStarted();
+          animation.currentPhaseStarted(self.currentStepId);
         }
 
         // Snap the step to the "animate-start" phase
         removeClass(nextStepElement, "seq-out");
 
         animation.domDelay(function() {
 
-          // Make the activePhases public
-          // self.stepProperties.activePhases = activePhases;
-
           // Make the current step transition to "seq-out"
           currentPhaseProperties = animation.startAnimateOut(self.prevStepId, currentStepElement, 1);
 
           // How long will the current watched elements animate for (including delay)?
           currentPhaseDuration = currentPhaseProperties.watchedTimings.maxTotal;
 
+          activePhases = self.stepProperties.activePhases = {
+            "current": currentPhaseProperties,
+            "next": {
+              "stepElement": nextStepElement
+            }
+          };
+
           // Determine how often goTo() can be used based on
           // navigationSkipThreshold and manage step fading accordingly
           self.animation.manageNavigationSkip(id, 1, nextStepElement, activePhases);
@@ -1535,15 +1539,17 @@ function defineSequence(imagesLoaded, Hammer) {
 
         animation.domDelay(function() {
 
-          // Make the activePhases public
-          // self.stepProperties.activePhases = activePhases;
-
           // Get the step number, element, its animated elements (child nodes), and
           // max timings
-          currentPhaseProperties = animation.getPhaseProperties(self.prevStepId, "current");
+          currentPhaseProperties = animation.getPhaseProperties(self.currentStepId, "current");
 
           nextPhaseProperties = animation.getPhaseProperties(id, "next");
 
+          activePhases = self.stepProperties.activePhases = {
+            "current": currentPhaseProperties,
+            "next": nextPhaseProperties
+          };
+
           // Add a threshold between delays if one finishes before another when
           // navigating forwards
           reversePhaseThreshold = animation.getReversePhaseThreshold(self.options.phaseThreshold, currentPhaseProperties.timings.maxTotal, nextPhaseProperties.timings.maxTotal);
@@ -1597,7 +1603,7 @@ function defineSequence(imagesLoaded, Hammer) {
             current = 0,
             next = 0;
 
-        if (phaseThresholdOption !== true) {
+        // if (phaseThresholdOption !== true) {
 
           phaseDifference = currentPhaseDuration - nextPhaseDuration;
 
@@ -1606,7 +1612,7 @@ function defineSequence(imagesLoaded, Hammer) {
           } else if (phaseDifference < 0) {
             current = Math.abs(phaseDifference);
           }
-        }
+        // }
 
         return {
           next: next,
@@ -1632,6 +1638,15 @@ function defineSequence(imagesLoaded, Hammer) {
             nextPhaseProperties,
             nextPhaseStarts = phaseThresholdTime;
 
+        // The next ID is now the current ID
+        self.prevStepId = self.currentStepId;
+        self.currentStepId = id;
+
+        if (self.firstRun === true) {
+          // Update pagination
+          self.pagination.update();
+        }
+
         // When should the "seq-in" phase start and how long until the step
         // completely finishes animating?
         if (self.firstRun === false || self.options.startingStepAnimatesIn === true) {
@@ -1799,13 +1814,14 @@ function defineSequence(imagesLoaded, Hammer) {
       /**
        * When the current phase starts animating
        */
-      currentPhaseStarted: function() {
+      currentPhaseStarted: function(id) {
 
-        // Callback
-        self.currentPhaseStarted(self.prevStepId, self);
+        if (id === undefined) {
+          id = self.prevStepId;
+        }
 
-        // Update pagination
-        self.pagination.update();
+        // Callback
+        self.currentPhaseStarted(id, self);
       },
 
       /**
@@ -1833,6 +1849,9 @@ function defineSequence(imagesLoaded, Hammer) {
           self.hashTags.update();
         }
 
+        // Update pagination
+        self.pagination.update();
+
         // Callback
         self.nextPhaseStarted(self.currentStepId, self);
       },
@@ -1902,8 +1921,6 @@ function defineSequence(imagesLoaded, Hammer) {
        */
       stepEnded: function(id) {
 
-        // self.stepEndedTimer = setTimeout(function() {
-
           self.isAnimating = false;
           self.isAutoPlaying = false;
 
@@ -1914,7 +1931,6 @@ function defineSequence(imagesLoaded, Hammer) {
 
           // Callback
           self.animationEnded(id, self);
-        // }, stepDuration);
       },
 
       /**
@@ -3832,15 +3848,6 @@ function defineSequence(imagesLoaded, Hammer) {
           self.animationStarted(id, self);
         }
 
-        // The next ID is now the current ID
-        self.prevStepId = self.currentStepId;
-        self.currentStepId = id;
-
-        // Should the phaseThreshold be ignored?
-        if (self.isAnimating === true) {
-          ignorePhaseThreshold = true;
-        }
-
         // Sequence is now animating
         self.isAnimating = true;
 

diff --git a/scripts/sequence.min.js b/scripts/sequence.min.js
diff --git a/scripts/sequence.min.map b/scripts/sequence.min.map
diff --git a/src/sequence.js b/src/sequence.js
@@ -1472,28 +1472,32 @@ function defineSequence(imagesLoaded, Hammer) {
             currentPhaseProperties,
             currentPhaseDuration,
             phaseThresholdTime,
-            activePhases = {};
+            activePhases;
 
         if (self.firstRun === false) {
 
           // Callback
-          animation.currentPhaseStarted();
+          animation.currentPhaseStarted(self.currentStepId);
         }
 
         // Snap the step to the "animate-start" phase
         removeClass(nextStepElement, "seq-out");
 
         animation.domDelay(function() {
 
-          // Make the activePhases public
-          // self.stepProperties.activePhases = activePhases;
-
           // Make the current step transition to "seq-out"
           currentPhaseProperties = animation.startAnimateOut(self.prevStepId, currentStepElement, 1);
 
           // How long will the current watched elements animate for (including delay)?
           currentPhaseDuration = currentPhaseProperties.watchedTimings.maxTotal;
 
+          activePhases = self.stepProperties.activePhases = {
+            "current": currentPhaseProperties,
+            "next": {
+              "stepElement": nextStepElement
+            }
+          };
+
           // Determine how often goTo() can be used based on
           // navigationSkipThreshold and manage step fading accordingly
           self.animation.manageNavigationSkip(id, 1, nextStepElement, activePhases);
@@ -1535,15 +1539,17 @@ function defineSequence(imagesLoaded, Hammer) {
 
         animation.domDelay(function() {
 
-          // Make the activePhases public
-          // self.stepProperties.activePhases = activePhases;
-
           // Get the step number, element, its animated elements (child nodes), and
           // max timings
-          currentPhaseProperties = animation.getPhaseProperties(self.prevStepId, "current");
+          currentPhaseProperties = animation.getPhaseProperties(self.currentStepId, "current");
 
           nextPhaseProperties = animation.getPhaseProperties(id, "next");
 
+          activePhases = self.stepProperties.activePhases = {
+            "current": currentPhaseProperties,
+            "next": nextPhaseProperties
+          };
+
           // Add a threshold between delays if one finishes before another when
           // navigating forwards
           reversePhaseThreshold = animation.getReversePhaseThreshold(self.options.phaseThreshold, currentPhaseProperties.timings.maxTotal, nextPhaseProperties.timings.maxTotal);
@@ -1597,7 +1603,7 @@ function defineSequence(imagesLoaded, Hammer) {
             current = 0,
             next = 0;
 
-        if (phaseThresholdOption !== true) {
+        // if (phaseThresholdOption !== true) {
 
           phaseDifference = currentPhaseDuration - nextPhaseDuration;
 
@@ -1606,7 +1612,7 @@ function defineSequence(imagesLoaded, Hammer) {
           } else if (phaseDifference < 0) {
             current = Math.abs(phaseDifference);
           }
-        }
+        // }
 
         return {
           next: next,
@@ -1632,6 +1638,15 @@ function defineSequence(imagesLoaded, Hammer) {
             nextPhaseProperties,
             nextPhaseStarts = phaseThresholdTime;
 
+        // The next ID is now the current ID
+        self.prevStepId = self.currentStepId;
+        self.currentStepId = id;
+
+        if (self.firstRun === true) {
+          // Update pagination
+          self.pagination.update();
+        }
+
         // When should the "seq-in" phase start and how long until the step
         // completely finishes animating?
         if (self.firstRun === false || self.options.startingStepAnimatesIn === true) {
@@ -1799,13 +1814,14 @@ function defineSequence(imagesLoaded, Hammer) {
       /**
        * When the current phase starts animating
        */
-      currentPhaseStarted: function() {
+      currentPhaseStarted: function(id) {
 
-        // Callback
-        self.currentPhaseStarted(self.prevStepId, self);
+        if (id === undefined) {
+          id = self.prevStepId;
+        }
 
-        // Update pagination
-        self.pagination.update();
+        // Callback
+        self.currentPhaseStarted(id, self);
       },
 
       /**
@@ -1833,6 +1849,9 @@ function defineSequence(imagesLoaded, Hammer) {
           self.hashTags.update();
         }
 
+        // Update pagination
+        self.pagination.update();
+
         // Callback
         self.nextPhaseStarted(self.currentStepId, self);
       },
@@ -1902,8 +1921,6 @@ function defineSequence(imagesLoaded, Hammer) {
        */
       stepEnded: function(id) {
 
-        // self.stepEndedTimer = setTimeout(function() {
-
           self.isAnimating = false;
           self.isAutoPlaying = false;
 
@@ -1914,7 +1931,6 @@ function defineSequence(imagesLoaded, Hammer) {
 
           // Callback
           self.animationEnded(id, self);
-        // }, stepDuration);
       },
 
       /**
@@ -3832,15 +3848,6 @@ function defineSequence(imagesLoaded, Hammer) {
           self.animationStarted(id, self);
         }
 
-        // The next ID is now the current ID
-        self.prevStepId = self.currentStepId;
-        self.currentStepId = id;
-
-        // Should the phaseThreshold be ignored?
-        if (self.isAnimating === true) {
-          ignorePhaseThreshold = true;
-        }
-
         // Sequence is now animating
         self.isAnimating = true;
 

diff --git a/tests/themes/test-theme/css/sequence-theme.test-theme.css b/tests/themes/test-theme/css/sequence-theme.test-theme.css
@@ -59,7 +59,7 @@
 
 #sequence .boxb {
   top: 200px;
-  /*transition-duration: 2s;*/
+  transition-duration: 2s;
   /*transition-delay: .5s;*/
 }
 
@@ -68,7 +68,8 @@
   margin-left: -50px;
   -webkit-transition-duration: 1s;
   transition-duration: 1s;
-  /*transition-delay: 2s;*/
+  /*-webkit-transition-delay: .5s;*/
+  /*transition-delay: .5s;*/
 
 
 }

diff --git a/tests/themes/test-theme/scripts/sequence-theme.test-theme.js b/tests/themes/test-theme/scripts/sequence-theme.test-theme.js
@@ -26,13 +26,15 @@ var options = {
   autoPlay: false,
   autoPlayDirection: -1,
   autoPlayDelay: 1000,
-  phaseThreshold: 500,
+  phaseThreshold: true,
   // preloader: true,
   keyNavigation: true,
   // hashTags: true,
   startingStepId: 1,
   // startingStepAnimatesIn: true,
-  reverseWhenNavigatingBackwards: true
+  reverseWhenNavigatingBackwards: true,
+  navigationSkip: true,
+  fadeStepWhenSkipped: true
 }
 
 var mySequence,
@@ -82,9 +84,9 @@ mySequence.nextPhaseEnded = function(id) {
 }
 
 mySequence.animationStarted = function(id) {
-  console.log("started", id);
+  // console.log("started", id);
 };
 
 mySequence.animationEnded = function(id) {
-  console.log("ended", id);
+  // console.log("ended", id);
 };