bootstrap-tab-history-rails 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d689559e8136f12f0111e015f02dbbebe47af23d
-  data.tar.gz: 55de4342df38c7ac88e6baeebc22f6f9777b5635
+  metadata.gz: 559e4eb8d0a3a7f3d050fa6d12447564b9f453de
+  data.tar.gz: 680007dfcf06e279b03d093c0e6ab55d57465b22
 SHA512:
-  metadata.gz: 246da556b1fa17f27286ea240f3b3be2da53ef1d9182fb8b5545c2982f3c82dd420c6ccd7a762286dc345a11688afc86a9c57de94b7b431f809c42e340d99f99
-  data.tar.gz: ada867eec4d31b9c4d5ac733beeb746867806eea3974240bbfdb3a194f1c2c012d15e88126f3293aa9e9eee9347948d2fc94846e4ebd1721f861936c3059d186
+  metadata.gz: dcc970cde2e440fb7817c112966cbe966d2f66976303418dfefaa46daf7f67b53d7909403d4973a1d1c4008fe9fe7e3acda2618d9da59bb3464aa259a77e3d31
+  data.tar.gz: f57b4b2698899582bb04ecfb17bf539e432847920c1683f5eb973df6d6db77279913d10d710f629821c6b38760c423daa3dc5f66cbc236ba62fd05ea900f29f2

data/README.md

@@ -8,6 +8,8 @@ with [`bootstrap/tab.js`](http://getbootstrap.com/javascript/#tabs). This enable
 To enable tracking on a tab element, simply set the `data-tab-history` attribute to `true` (or a string denoting a tab
 grouping).
 
+Visit our [GitHub Page](http://mnarayan01.github.io/bootstrap-tab-history/) to see it in action.
+
 Installation
 ------------
 
@@ -38,6 +40,9 @@ Individual elements are configured by setting the following data attributes:
 
 *   `data-tab-history` - Required. Set to `true` to enable tracking on a tab. Can also be set to an arbitrary string
     value to support pages with multiple tab groups.
+*   `data-tab-history-anchor-y-offset` - When the anchor portion of the URI is used to activate a tab, scroll down to
+    the given offset, rather than the element with the given `id` attribute. Set to null to disable. Only relevant if
+    `BootstrapTabHistory.options.showTabsBasedOnAnchor` is true.
 *   `data-tab-history-changer`
     *   'push' - Use [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState%28%29.C2.A0method)
         to update `history.state`. This will allow the use of `history.forward` and `history.back` as users switch
@@ -52,6 +57,9 @@ Individual elements are configured by setting the following data attributes:
 
 ```javascript
 BootstrapTabHistory.options = {
+  // Default value corresponding to the `data-tab-history-anchor-y-offset` attribute.
+  defaultAnchorYOffset: 0,
+
   // Default value corresponding to the `data-tab-history-changer` attribute.
   defaultChanger: 'replace',
 
@@ -60,12 +68,7 @@ BootstrapTabHistory.options = {
 
   // Should the anchor portion of the loaded URI be used to activate a single tab if no history was
   // present on page load.
-  showTabsBasedOnAnchor: true,
-
-  // When the anchor portion of the URI is used to activate a tab, prevent the browser from
-  // scrolling down to the element with the given `id` attribute. Only relevant if
-  // showTabsBasedOnAnchor is true.
-  showTabsBasedOnAnchorPreventScroll: true
+  showTabsBasedOnAnchor: true
 };
 ```
 

data/lib/bootstrap-tab-history-rails/version.rb

@@ -1,3 +1,3 @@
 module BootstrapTabHistoryRails
-  VERSION = "0.0.1"
+  VERSION = "0.1.0"
 end

data/vendor/assets/javascripts/bootstrap-tab-history.js

@@ -39,6 +39,16 @@
 
 BootstrapTabHistory = {
   options: {
+    /**
+     * When the anchor portion of the URI is used to activate a tab, scroll down to the given offset, rather than the
+     * element with the given `id` attribute. Set to null to disable. Only relevant if showTabsBasedOnAnchor is true.
+     *
+     * May be overriden on a per-element basis by the attribute `data-tab-history-anchor-y-offset`.
+     *
+     * @public
+     * @type {?number}
+     */
+    defaultAnchorYOffset: 0,
     /**
      * Either 'push' or 'replace', for whether to use `history.pushState` or `history.replaceState`, resp.
      *
@@ -65,15 +75,7 @@ BootstrapTabHistory = {
      * @public
      * @type {boolean}
      */
-    showTabsBasedOnAnchor: true,
-    /**
-     * When the anchor portion of the URI is used to activate a tab, prevent the browser from scrolling down to the
-     * element with the given `id` attribute. Only relevant if showTabsBasedOnAnchor is true.
-     *
-     * @public
-     * @type {boolean}
-     */
-    showTabsBasedOnAnchorPreventScroll: true
+    showTabsBasedOnAnchor: true
   }
 };
 
@@ -92,7 +94,7 @@ BootstrapTabHistory = {
 
       backfillHistoryState();
 
-      jQuery('[data-tab-history]').on('shown.bs.tab', onShownTab);
+      jQuery(document).on('shown.bs.tab', onShownTab);
       jQuery(window).on('popstate', onPopState);
     } else {
       showTabsBasedOnAnchor();
@@ -180,7 +182,7 @@ BootstrapTabHistory = {
    */
   function onShownTab(shownEvt) {
     if(!showingTabsBasedOnState) {
-      var $activatedTab = jQuery(shownEvt.currentTarget);
+      var $activatedTab = jQuery(shownEvt.target);
       var selector = getTabSelector($activatedTab);
 
       if(selector) {
@@ -237,19 +239,30 @@ BootstrapTabHistory = {
       var anchor = window.location && window.location.hash;
 
       if(anchor) {
-        var tabShownForAnchor = showTabForSelector(anchor);
-
-        // HACK: This prevents scrolling to the tab on page load. This relies on the fact that we should never get here
-        //   on `history.forward`, `history.back`, or `location.reload`, since in all those situations the
-        //   `history.state` object should have been used (unless the browser did not support the modern History API).
-        if(tabShownForAnchor && BootstrapTabHistory.options.showTabsBasedOnAnchorPreventScroll && window.addEventListener && window.removeEventListener) {
-          var scrollListener = function resetAnchorScroll () {
-            window.removeEventListener('scroll', scrollListener);
-            window.scrollTo(0, 0);
-          };
-
-          window.addEventListener('scroll', scrollListener);
-          window.setTimeout(function () { window.removeEventListener('scroll', scrollListener); }, 1000);
+        var $tabElement = showTabForSelector(anchor);
+
+        if($tabElement && window.addEventListener && window.removeEventListener) {
+          var anchorYOffset = (function ($tabElement) {
+            var elementSetting = $tabElement.data('tab-history-anchor-y-offset');
+
+            if(elementSetting === undefined) {
+              return BootstrapTabHistory.options.defaultAnchorYOffset;
+            } else {
+              return elementSetting;
+            }
+          })($tabElement);
+
+          // HACK: This prevents scrolling to the tab on page load. This relies on the fact that we should never get
+          //   here on `history.forward`, `history.back`, or `location.reload`, since in all those situations the
+          //   `history.state` object should have been used (unless the browser did not support the modern History API).
+          if(anchorYOffset || anchorYOffset === 0) {
+            var scrollListener = function resetAnchorScroll () {
+              window.removeEventListener('scroll', scrollListener);
+              window.scrollTo(0, anchorYOffset);
+            };
+
+            window.addEventListener('scroll', scrollListener);
+          }
         }
       }
     }
@@ -259,18 +272,32 @@ BootstrapTabHistory = {
    * Show a tab which corresponds to the provided selector.
    *
    * @param {string} selector - A CSS selector.
-   * @returns {boolean} - true iff a tab was found to show (even if said tab was already active).
+   * @returns {?jQuery} - The tab which was found to show (even if said tab was already active).
    */
   function showTabForSelector(selector) {
-    var tabElement = document.querySelector('[data-target="' + selector + '"]') || document.querySelector('[href="' +  selector + '"]');
+    var $tabElement = (function (selector) {
+      var $ret = null;
 
-    if(tabElement) {
-      jQuery(tabElement).tab('show');
+      jQuery('[data-toggle="tab"], [data-toggle="pill"]').each(function () {
+        var $potentialTab = jQuery(this);
 
-      return true;
-    } else {
-      return false;
+        if(($potentialTab.attr('href') === selector || $potentialTab.data('target') === selector) && getTabGroup($potentialTab)) {
+          $ret = $potentialTab;
+
+          return false;
+        } else {
+          return null;
+        }
+      });
+
+      return $ret;
+    })(selector);
+
+    if($tabElement) {
+      $tabElement.tab('show');
     }
+
+    return $tabElement;
   }
 
   /**

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap-tab-history-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.1.0
 platform: ruby
 authors:
 - Michael Narayan
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-02-10 00:00:00.000000000 Z
+date: 2014-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties