Slight fix to hashTags feature

IanLunn · Jun 23, 2014 · d710f01 · d710f01
1 parent 73176bb
commit d710f01
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 26 deletions.
diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
@@ -690,13 +690,15 @@ Whether there should be a delay between a step animating out and the next animat
 
 #### `reverseWhenNavigatingBackwards`
 
-- Type: true/false
-- Default: `false`
+**Note**: not yet implemented.
+
+~~- Type: true/false~~
+~~- Default: `false`~~
 
-Whether animations should be reversed when a user navigates backwards by clicking a previous button/swiping/pressing the left key.
+~~Whether animations should be reversed when a user navigates backwards by clicking a previous button/swiping/pressing the left key.~~
 
-- `true`: when navigating backwards, Sequence will animate the preceding step from its "animate-out" position to its "animate-in" position (creating a reversed animation).
-- `false`: when navigating backwards, Sequence will animate the preceding step from its "start" position to its "animate-in" position (as it does when navigating forwards).
+~~- `true`: when navigating backwards, Sequence will animate the preceding step from its "animate-out" position to its "animate-in" position (creating a reversed animation).~~
+~~- `false`: when navigating backwards, Sequence will animate the preceding step from its "start" position to its "animate-in" position (as it does when navigating forwards).~~
 
 #### `moveActiveStepToTop`
 

diff --git a/scripts/sequence.js b/scripts/sequence.js
@@ -4,7 +4,7 @@
  *
  * @link https://github.com/IanLunn/Sequence
  * @author IanLunn
- * @version 2.0.0-alpha.2
+ * @version 2.0.0-alpha.3
  * @license https://github.com/IanLunn/Sequence/blob/master/LICENSE
  * @copyright IanLunn
  */
@@ -2337,6 +2337,9 @@ function defineSequence(imagesLoaded, Hammer) {
           var correspondingStepId,
               newHashTag;
 
+          // Does the browser support pushstate?
+          self.hasPushstate = !!(window.history && history.pushState);
+
           // Get the current hashTag
           newHashTag = location.hash.replace("#!", "");
 
@@ -2410,6 +2413,7 @@ function defineSequence(imagesLoaded, Hammer) {
        *
        * - hashTags are being used and this isn't the first run
        * - hashTags are being used, this is the first run, and the first hash change is allowed in the options
+       * - the current step has a hashTag
        */
       update: function() {
 
@@ -2424,13 +2428,18 @@ function defineSequence(imagesLoaded, Hammer) {
             // Get the current hashTag
             self.currentHashTag = self.stepHashTags[hashTagId];
 
-            // Add the hashTag to the URL
-            if (history.pushState) {
-              history.pushState(null, null, "#!" + self.currentHashTag);
-            }
-            else {
-              location.hash = "#!" + self.currentHashTag;
+            if(self.currentHashtag !== "") {
+
+              // Add the hashTag to the URL
+              if (self.hasPushstate === true) {
+                history.pushState(null, null, "#!" + self.currentHashTag);
+              }
+              else {
+                location.hash = "#!" + self.currentHashTag;
+              }
             }
+
+
         }
       },
 

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
@@ -2337,6 +2337,9 @@ function defineSequence(imagesLoaded, Hammer) {
           var correspondingStepId,
               newHashTag;
 
+          // Does the browser support pushstate?
+          self.hasPushstate = !!(window.history && history.pushState);
+
           // Get the current hashTag
           newHashTag = location.hash.replace("#!", "");
 
@@ -2410,6 +2413,7 @@ function defineSequence(imagesLoaded, Hammer) {
        *
        * - hashTags are being used and this isn't the first run
        * - hashTags are being used, this is the first run, and the first hash change is allowed in the options
+       * - the current step has a hashTag
        */
       update: function() {
 
@@ -2424,13 +2428,18 @@ function defineSequence(imagesLoaded, Hammer) {
             // Get the current hashTag
             self.currentHashTag = self.stepHashTags[hashTagId];
 
-            // Add the hashTag to the URL
-            if (history.pushState) {
-              history.pushState(null, null, "#!" + self.currentHashTag);
-            }
-            else {
-              location.hash = "#!" + self.currentHashTag;
+            if(self.currentHashtag !== "") {
+
+              // Add the hashTag to the URL
+              if (self.hasPushstate === true) {
+                history.pushState(null, null, "#!" + self.currentHashTag);
+              }
+              else {
+                location.hash = "#!" + self.currentHashTag;
+              }
             }
+
+
         }
       },
 

diff --git a/themes/test-theme/index.html b/themes/test-theme/index.html
@@ -24,13 +24,13 @@
   <div id="sequence">
     <div class="sequence-screen">
       <ul class="sequence-canvas">
-        <li>
+        <li id="step1">
           <div class="box box1">Box 1</div>
         </li>
-        <li>
+        <li id="step2">
           <div class="box box2">Box 2</div>
         </li>
-        <li>
+        <li id="step3">
           <div class="box box3">Box 3</div>
         </li>
       </ul>

diff --git a/themes/test-theme/scripts/sequence-theme.test-theme.js b/themes/test-theme/scripts/sequence-theme.test-theme.js
@@ -24,7 +24,9 @@ var sequenceElement = document.getElementById("sequence");
 var options = {
   animateCanvas: false,
   phaseThreshold: false,
-  reverseWhenNavigatingBackwards: true
+  reverseWhenNavigatingBackwards: true,
+  hashTags: true,
+  keyNavigation: true
 }
 
 var mySequence,

diff --git a/themes/test-theme/scripts/sequence-theme.test-theme.min.js b/themes/test-theme/scripts/sequence-theme.test-theme.min.js
@@ -15,4 +15,4 @@
  *
  * Sequence.js and its dependencies are copyright (c) Ian Lunn 2014 unless otherwise stated.
  */
-function init(){void 0===mySequence&&(mySequence=sequence(sequenceElement,options),mySequence.paused=function(){pauseButton.innerHTML="Unpause"},mySequence.unpaused=function(){pauseButton.innerHTML="Pause"})}var sequenceElement=document.getElementById("sequence"),options={animateCanvas:!1,phaseThreshold:!1,reverseWhenNavigatingBackwards:!0},mySequence,pauseButton=document.getElementById("pause"),initButton=document.getElementById("init"),destroyButton=document.getElementById("destroy");init(),initButton.addEventListener("click",function(){init()}),destroyButton.addEventListener("click",function(){void 0!==mySequence&&(mySequence.destroy(),mySequence=void 0)});
+function init(){void 0===mySequence&&(mySequence=sequence(sequenceElement,options),mySequence.paused=function(){pauseButton.innerHTML="Unpause"},mySequence.unpaused=function(){pauseButton.innerHTML="Pause"})}var sequenceElement=document.getElementById("sequence"),options={animateCanvas:!1,phaseThreshold:!1,reverseWhenNavigatingBackwards:!0,hashTags:!0,keyNavigation:!0},mySequence,pauseButton=document.getElementById("pause"),initButton=document.getElementById("init"),destroyButton=document.getElementById("destroy");init(),initButton.addEventListener("click",function(){init()}),destroyButton.addEventListener("click",function(){void 0!==mySequence&&(mySequence.destroy(),mySequence=void 0)});