Update deeplink approach to address concerns in #9674

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index 3e090427a3b428b8b5a22ca6ced174a350a65c1a..9df528d9779d242f8f5aada49272b8e76690bd2b 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -78,11 +78,6 @@ class Tabs {
       }
 
     });
-    //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');
 
@@ -93,32 +88,38 @@ 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);
-        }
+     //current context-bound function to open tabs on page load or history popstate
+    this._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), true);
+
+          //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)]);
+          /**
+            * Fires when the zplugin has deeplinked at pageload
+            * @event Tabs#deeplink
+            */
+           this.$element.trigger('deeplink.zf.tabs', [$link, $(anchor)]);
+         }
        }
      }
-   }
+
+    //use browser to open a tab, if it exists in this tabset
+    if (this.options.deepLink) {
+      this._checkDeepLink();
+    }
+
+    this._events();
+  }
+
   /**
    * Adds event handlers for items within the tabs.
    * @private
@@ -212,7 +213,7 @@ class Tabs {
    * @fires Tabs#change
    * @function
    */
-  _handleTabChange($target) {
+  _handleTabChange($target, historyHandled) {
 
     /**
      * Check for active class on target. Collapse if exists.
@@ -243,7 +244,7 @@ class Tabs {
     this._openTab($target);
 
     //either replace or update browser history
-    if (this.options.deepLink) {
+    if (this.options.deepLink && !historyHandled) {
       var anchor = $target.find('a').attr('href');
 
       if (this.options.updateHistory) {
@@ -303,7 +304,7 @@ class Tabs {
    * @param {jQuery | String} elem - jQuery object or string of the id of the pane to display.
    * @function
    */
-  selectTab(elem) {
+  selectTab(elem, historyHandled) {
     var idStr;
 
     if (typeof elem === 'object') {
@@ -318,7 +319,7 @@ class Tabs {
 
     var $target = this.$tabTitles.find(`[href="${idStr}"]`).parent(`.${this.options.linkClass}`);
 
-    this._handleTabChange($target);
+    this._handleTabChange($target, historyHandled);
   };
   /**
    * Sets the height of each panel to the height of the tallest panel.
@@ -371,7 +372,10 @@ class Tabs {
       }
     }
 
-    $(window).off('popstate', this._checkDeepLink);
+    if (this.options.deepLink) {
+      $(window).off('popstate', this._checkDeepLink);
+    }
+
     Foundation.unregisterPlugin(this);
   }
 }