Merge pull request #61 from mikejacobson/check-for-wrapped-right-arrow

mikejacobson · web-flow · commit 3665133dbbc1 · 2019-03-04T19:39:55.000-08:00
Add handleDelayedScrollbar option
diff --git a/README.md b/README.md
@@ -26,6 +26,7 @@ There are also optional features available:
 * [Reverse Scroll](#reverseScroll)
 * [Force Scroll to Tab Edge](#scrollToTabEdge)
 * [Disable Scroll Arrows on Fully Scrolled](#disableScrollArrowsOnFullyScrolled)
+* [Handle Delayed Scrollbar](#handleDelayedScrollbar)
 * [Width Multiplier](#widthMultiplier)
 * [Tab Click Handler](#tabClickHandler)
 * [Custom Scroll Arrow classes](#cssClassArrows)
@@ -140,7 +141,6 @@ If you're using the default scroll setting, this will cause the left scroll arro
 If you have the `reverseScroll` option set to `true`, the opposite arrows will disable.
 
 
-
 ##### widthMultiplier Option
 
 You can also pass in the `widthMultiplier` option:
@@ -367,6 +367,22 @@ $('#tabs-inside-here').scrollingTabs({
 Note that if you have the `reverseScroll` option set to `true`, the opposite arrows will disable.
 
 
+#### <a id="handleDelayedScrollbar"></a>Handle Delayed Scrollbar
+
+If you experience a situation where the right scroll arrow wraps to the next line due to a vertical scrollbar coming into existence on the page *after* the plugin already calculated its width without a scrollbar present, pass in option `handleDelayedScrollbar: true`:
+
+```javascript
+$('.nav-tabs').scrollingTabs({
+  handleDelayedScrollbar: true  
+});
+```
+
+This would occur if, for example, the bulk of the page's content loaded after a delay, and only then did a vertical scrollbar become necessary.
+
+It would also occur if a vertical scrollbar only appeared on selection of a particular tab that had more content than the default tab.
+
+This is not enabled by default because, since a window resize event is not triggered by a vertical scrollbar appearing, it requires adding an iframe to the page that listens for resize events because a scrollbar appearing in the parent window *does* trigger a resize event in the iframe, which then dispatches a resize event to the parent, triggering the plugin to recalculate its width.
+
 
 #### <a id="widthMultiplier"></a>Width Multiplier
 
@@ -546,6 +562,7 @@ $.fn.scrollingTabs.defaults.tabs = myTabs;
 $.fn.scrollingTabs.defaults.forceActiveTab = true;
 $.fn.scrollingTabs.defaults.scrollToTabEdge = true;
 $.fn.scrollingTabs.defaults.disableScrollArrowsOnFullyScrolled = true;
+$.fn.scrollingTabs.defaults.handleDelayedScrollbar = true;
 $.fn.scrollingTabs.defaults.reverseScroll = true;
 $.fn.scrollingTabs.defaults.widthMultiplier = 0.5;
 $.fn.scrollingTabs.defaults.enableSwiping = true;
diff --git a/dist/jquery.scrolling-tabs.css b/dist/jquery.scrolling-tabs.css
@@ -1,6 +1,6 @@
 /**
  * jquery-bootstrap-scrolling-tabs
- * @version v2.4.0
+ * @version v2.6.0
  * @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
  * @author Mike Jacobson <michaeljjacobson1@gmail.com>
  * @license MIT License, http://www.opensource.org/licenses/MIT
diff --git a/dist/jquery.scrolling-tabs.js b/dist/jquery.scrolling-tabs.js
@@ -1,6 +1,6 @@
 /**
  * jquery-bootstrap-scrolling-tabs
- * @version v2.4.0
+ * @version v2.6.0
  * @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
  * @author Mike Jacobson <michaeljjacobson1@gmail.com>
  * @license MIT License, http://www.opensource.org/licenses/MIT
@@ -204,6 +204,17 @@
  *                          right-to-left languages. If true, the plugin will
  *                          check the page's <html> tag for attribute dir="rtl"
  *                          and will adjust its behavior accordingly.
+ *        handleDelayedScrollbar:
+ *                          set to true if you experience a situation where the
+ *                          right scroll arrow wraps to the next line due to a
+ *                          vertical scrollbar coming into existence on the page
+ *                          after the plugin already calculated its width without
+ *                          a scrollbar present. This would occur if, for example,
+ *                          the bulk of the page's content loaded after a delay, 
+ *                          and only then did a vertical scrollbar become necessary.
+ *                          It would also occur if a vertical scrollbar only appeared 
+ *                          on selection of a particular tab that had more content 
+ *                          than the default tab.
  *        bootstrapVersion:
  *                          set to 4 if you're using Boostrap 4. Default is 3.
  *                          Bootstrap 4 handles some things differently than 3
@@ -584,13 +595,43 @@
             .on(ev.CLICK, stc.tabClickHandler);
         }
   
+        if (settings.handleDelayedScrollbar) {
+          ehd.listenForDelayedScrollbar();
+        }
+  
         stc.$win
           .off(resizeEventName)
           .smartresizeScrtabs(function (e) { evh.handleWindowResize.call(evh, e); }, resizeEventName);
   
         $('body').on(CONSTANTS.EVENTS.FORCE_REFRESH, stc.elementsHandler.refreshAllElementSizes.bind(stc.elementsHandler));
       };
   
+      p.listenForDelayedScrollbar = function () {
+        var iframe = document.createElement('iframe');
+        iframe.id = "scrtabs-scrollbar-resize-listener";
+        iframe.style.cssText = 'height: 0; background-color: transparent; margin: 0; padding: 0; overflow: hidden; border-width: 0; position: absolute; width: 100%;';
+        iframe.onload = function() {
+          var timeout;
+  
+          function handleResize() {
+            try {
+              $(window).trigger('resize');
+              timeout = null;
+            } catch(e) {}
+          }
+  
+          iframe.contentWindow.addEventListener('resize', function() {
+            if (timeout) {
+              clearTimeout(timeout);
+            }
+  
+            timeout = setTimeout(handleResize, 100);
+          });
+        };
+        
+        document.body.appendChild(iframe);
+      };
+  
       p.setFixedContainerWidth = function () {
         var ehd = this,
             stc = ehd.stc,
@@ -1955,6 +1996,7 @@
     tabsPostProcessors: null,
     enableSwiping: false,
     enableRtlSupport: false,
+    handleDelayedScrollbar: false,
     bootstrapVersion: 3
   };
   
diff --git a/dist/jquery.scrolling-tabs.min.css b/dist/jquery.scrolling-tabs.min.css
diff --git a/dist/jquery.scrolling-tabs.min.js b/dist/jquery.scrolling-tabs.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery-bootstrap-scrolling-tabs",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "jQuery plugin for scrollable Bootstrap Tabs",
   "homepage": "https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs",
   "bugs": "https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs/issues",
diff --git a/src/js/api.js b/src/js/api.js
@@ -156,5 +156,6 @@ $.fn.scrollingTabs.defaults = {
   tabsPostProcessors: null,
   enableSwiping: false,
   enableRtlSupport: false,
+  handleDelayedScrollbar: false,
   bootstrapVersion: 3
 };
diff --git a/src/js/elementsHandler.js b/src/js/elementsHandler.js
@@ -225,13 +225,43 @@ function ElementsHandler(scrollingTabsControl) {
           .on(ev.CLICK, stc.tabClickHandler);
       }
 
+      if (settings.handleDelayedScrollbar) {
+        ehd.listenForDelayedScrollbar();
+      }
+
       stc.$win
         .off(resizeEventName)
         .smartresizeScrtabs(function (e) { evh.handleWindowResize.call(evh, e); }, resizeEventName);
 
       $('body').on(CONSTANTS.EVENTS.FORCE_REFRESH, stc.elementsHandler.refreshAllElementSizes.bind(stc.elementsHandler));
     };
 
+    p.listenForDelayedScrollbar = function () {
+      var iframe = document.createElement('iframe');
+      iframe.id = "scrtabs-scrollbar-resize-listener";
+      iframe.style.cssText = 'height: 0; background-color: transparent; margin: 0; padding: 0; overflow: hidden; border-width: 0; position: absolute; width: 100%;';
+      iframe.onload = function() {
+        var timeout;
+
+        function handleResize() {
+          try {
+            $(window).trigger('resize');
+            timeout = null;
+          } catch(e) {}
+        }
+
+        iframe.contentWindow.addEventListener('resize', function() {
+          if (timeout) {
+            clearTimeout(timeout);
+          }
+
+          timeout = setTimeout(handleResize, 100);
+        });
+      };
+      
+      document.body.appendChild(iframe);
+    };
+
     p.setFixedContainerWidth = function () {
       var ehd = this,
           stc = ehd.stc,
diff --git a/src/js/header.js b/src/js/header.js
@@ -1,6 +1,6 @@
 /**
  * jquery-bootstrap-scrolling-tabs
- * @version v2.4.0
+ * @version v2.6.0
  * @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
  * @author Mike Jacobson <michaeljjacobson1@gmail.com>
  * @license MIT License, http://www.opensource.org/licenses/MIT
diff --git a/src/js/usage.js b/src/js/usage.js
@@ -197,6 +197,17 @@
  *                          right-to-left languages. If true, the plugin will
  *                          check the page's <html> tag for attribute dir="rtl"
  *                          and will adjust its behavior accordingly.
+ *        handleDelayedScrollbar:
+ *                          set to true if you experience a situation where the
+ *                          right scroll arrow wraps to the next line due to a
+ *                          vertical scrollbar coming into existence on the page
+ *                          after the plugin already calculated its width without
+ *                          a scrollbar present. This would occur if, for example,
+ *                          the bulk of the page's content loaded after a delay, 
+ *                          and only then did a vertical scrollbar become necessary.
+ *                          It would also occur if a vertical scrollbar only appeared 
+ *                          on selection of a particular tab that had more content 
+ *                          than the default tab.
  *        bootstrapVersion:
  *                          set to 4 if you're using Boostrap 4. Default is 3.
  *                          Bootstrap 4 handles some things differently than 3

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "jquery-bootstrap-scrolling-tabs",`
`3`		`- "version": "2.5.0",`
	`3`	`+ "version": "2.6.0",`
`4`	`4`	`"description": "jQuery plugin for scrollable Bootstrap Tabs",`
`5`	`5`	`"homepage": "https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs",`
`6`	`6`	`"bugs": "https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs/issues",`