Fix tabs deeplink history to work with back button within page

diff --git a/docs/pages/tabs.md b/docs/pages/tabs.md
index fd9beae9d4a7313511d2eed6b074758782958d7a..1f9ddd0a00a0908a2d5b788437f2775fd2b7c07e 100644 (file)
--- a/docs/pages/tabs.md
+++ b/docs/pages/tabs.md
@@ -157,7 +157,7 @@ Add the attribute `data-deep-link="true"` to a tabstrip to:
 - allow users to open a particular tab at page load with a hash-appended URL
 
 ```html_example
-<ul class="tabs" data-deep-link="true" data-tabs id="deeplinked-tabs">
+<ul class="tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge="500" data-tabs id="deeplinked-tabs">
   <li class="tabs-title is-active"><a href="#panel1d" aria-selected="true">Tab 1</a></li>
   <li class="tabs-title"><a href="#panel2d">Tab 2</a></li>
   <li class="tabs-title"><a href="#panel3d">Tab 3</a></li>

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index 907bf532387448baa9e45b089c375516aef2c046..3e090427a3b428b8b5a22ca6ced174a350a65c1a 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -77,32 +77,11 @@ class Tabs {
         });
       }
 
-      //use browser to open a tab, if it exists in this tabset
-      if (_this.options.deepLink) {
-        var anchor = window.location.hash;
-        //need a hash and a relevant anchor in this tabset
-        if(anchor.length) {
-          var $link = $elem.find('[href="'+anchor+'"]');
-          if ($link.length) {
-            _this.selectTab($(anchor));
-
-            //roll up a little to show the titles
-            if (_this.options.deepLinkSmudge) {
-              $(window).load(function() {
-                var offset = $elem.offset();
-                $('html, body').animate({ scrollTop: offset.top }, _this.options.deepLinkSmudgeDelay);
-              });
-            }
-
-            /**
-              * Fires when the zplugin has deeplinked at pageload
-              * @event Tabs#deeplink
-              */
-             $elem.trigger('deeplink.zf.tabs', [$link, $(anchor)]);
-           }
-        }
-      }
     });
+    //use browser to open a tab, if it exists in this tabset
+    if (this.options.deepLink) {
+      this._checkDeepLink();
+    }
 
     if(this.options.matchHeight) {
       var $images = this.$tabContent.find('img');
@@ -114,9 +93,32 @@ class Tabs {
       }
     }
 
+    this._checkDeepLink = this._checkDeepLink.bind(this);
     this._events();
   }
 
+  _checkDeepLink() {
+    var anchor = window.location.hash;
+    //need a hash and a relevant anchor in this tabset
+    if(anchor.length) {
+      var $link = this.$element.find('[href="'+anchor+'"]');
+      if ($link.length) {
+        this.selectTab($(anchor));
+
+        //roll up a little to show the titles
+        if (this.options.deepLinkSmudge) {
+          var offset = this.$element.offset();
+          $('html, body').animate({ scrollTop: offset.top }, this.options.deepLinkSmudgeDelay);
+        }
+
+        /**
+          * Fires when the zplugin has deeplinked at pageload
+          * @event Tabs#deeplink
+          */
+         this.$element.trigger('deeplink.zf.tabs', [$link, $(anchor)]);
+       }
+     }
+   }
   /**
    * Adds event handlers for items within the tabs.
    * @private
@@ -131,6 +133,10 @@ class Tabs {
 
       $(window).on('changed.zf.mediaquery', this._setHeightMqHandler);
     }
+
+    if(this.options.deepLink) {
+      $(window).on('popstate', this._checkDeepLink);
+    }
   }
 
   /**
@@ -365,6 +371,7 @@ class Tabs {
       }
     }
 
+    $(window).off('popstate', this._checkDeepLink);
     Foundation.unregisterPlugin(this);
   }
 }

diff --git a/yarn.lock b/yarn.lock
index 29093e12e22a2953ada786722b5ad2aa8d73de5c..01056e4ce593e0182c53fd92afc6d316afbbc4f4 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -1565,16 +1565,16 @@ doiuse@^2.5.0:
     through2 "^0.6.3"
     yargs "^3.5.4"
 
-dom-serializer@0, dom-serializer@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+dom-serializer@0, dom-serializer@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.0.1.tgz#9589827f1e32d22c37c829adabd59b3247af8eaf"
   dependencies:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
-dom-serializer@~0.0.0:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.0.1.tgz#9589827f1e32d22c37c829adabd59b3247af8eaf"
+dom-serializer@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
   dependencies:
     domelementtype "~1.1.1"
     entities "~1.1.1"
@@ -3553,7 +3553,7 @@ jodid25519@^1.0.0:
   dependencies:
     jsbn "~0.1.0"
 
-jquery@>=1.7, jquery@^2.2.0:
+jquery@>=1.7, jquery@>=2.2.0, jquery@^2.2.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.2.4.tgz#2c89d6889b5eac522a7eea32c14521559c6cbf02"