From: Andy Hebrank <ahebrank@gmail.com>
Date: Fri, 7 Oct 2016 22:58:22 +0000 (-0400)
Subject: addresses #7652: deep linking for tabs and browser history update
X-Git-Tag: v6.3-rc1~35^2~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ac3ece03175e2f76c49a059c359dc4a15bbe4f7c;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

addresses #7652: deep linking for tabs and browser history update
---

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index 239ce259c..01a510b05 100644
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -71,6 +71,22 @@ class Tabs {
       if(isActive && _this.options.autoFocus){
         $link.focus();
       }
+
+      //use browser to open a tab, if it exists in this tabset
+      if (_this.options.deepLink) {
+        var anchor = window.location.hash;
+        //need a has and a relevant anchor in this tabset
+        if (anchor.length && this.$tabTitles.find('[href="'+anchor+'"]').length) {
+          this.selectTab($(anchor));
+          //roll up a little to show the titles
+          if (_this.options.deepLinkSmudge) {
+            var offset = this.$tabTitles.offset();
+            $(window).load(function() {
+              $('html, body').animate({ scrollTop: offset.top }, _this.options.deepLinkSmudgeDelay);
+            });
+          }
+        }
+      }
     });
 
     if(this.options.matchHeight) {
@@ -203,7 +219,12 @@ class Tabs {
 
     //open new tab
     this._openTab($target);
-    
+
+    //optionally set the browser history
+    if (this.options.updateHistory) {
+      var anchor = $target.find('a').attr('href');
+      history.pushState({}, "", anchor);
+    }
     
     /**
      * Fires when the plugin has successfully changed tabs.
@@ -325,8 +346,37 @@ class Tabs {
 }
 
 Tabs.defaults = {
+  /**
+   * Allows the window to scroll to content of pane specified by hash anchor
+   * @option
+   * @example false
+   */
+  deepLink: false,
+
+  /**
+   * Adjust the deep link scroll to make sure the top of the tab panel is visible
+   * @option
+   * @example false
+   */
+  deepLinkSmudge: true,
+
+  /**
+   * Animation time (ms) for the deep link adjustment
+   * @option
+   * @example 300
+   */
+  deepLinkSmudgeDelay: 300,
+
+  /**
+   * Update the browser history with the open tab
+   * @option
+   * @example false
+   */
+  updateHistory: true,
+
   /**
    * Allows the window to scroll to content of active pane on load if set to true.
+   * Not recommended if more than one tab panel per page.
    * @option
    * @example false
    */