Adds tab overflow js.

Author: AMJones

composer.json

@@ -9,7 +9,7 @@
         "layout"
     ],
     "homepage": "https://www.github.com/strapless/layout",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "authors": [
         {
             "name": "Aaron M Jones",
@@ -19,6 +19,7 @@
     "license": "MIT",
     "require": {
         "strapless/colors": "^1.0",
-        "strapless/base": "^1.1"
+        "strapless/base": "^1.1",
+        "strapless/icons": "^1.0"
     }
 }

composer.lock

@@ -0,0 +1,122 @@
+/**
+ * jQuery plugin to handle width overflow of bootstrap tabs in a manner similar to tab handling on Android.
+ *
+ * @version v1.1.2
+ * @license https://github.com/strapless/layout/LICENSE
+ * @author  Aaron M Jones <am@jonesiscoding.com>
+ */
+(function($) {
+
+  $.tabScroll = function(element, options) {
+
+    var defaults = {
+      cls: {
+        'toggle': 'dropdown-toggle',
+        'wrapper': 'dropdown',
+        'dropdown': 'dropdown-menu',
+        'open': 'open',
+        'marker': 'overflow-item'
+      }
+    };
+
+    var plugin = this;
+
+    /**
+     * @type object
+     */
+    plugin.settings = {};
+
+    var $el = $(element);
+
+    plugin.init = function() {
+
+      plugin.settings = $.extend({}, defaults, options);
+
+      $(window).afterwards('resize', function () {
+        plugin.toggleMarker(plugin.hasOverflow());
+      });
+
+      $(document).on('show.bs.dropdown', '[data-overflow="true"]', function(e) {
+        var $dropdown = $(e.target).find(plugin.settings.cls.dropdown);
+        var $trigger = $dropdown.parent('.' + plugin.settings.cls.wrapper).find('.' + plugin.settings.cls.toggle);
+        var top = $trigger.offset().top + $trigger.outerHeight();
+        var left = $trigger.offset().left;
+        $dropdown.appendTo('body').css({left: left + 'px', top: top + 'px', 'max-height': 'calc(90vh - ' + top + 'px)', 'overflow-y': 'scroll' });
+        $('body').addClass(plugin.settings.cls.open);
+        $(this).on('hidden.bs.dropdown', function () {
+          $dropdown.appendTo(e.target).css({});
+          $('body').removeClass(plugin.settings.cls.open);
+        })
+      });
+
+      if (!$(document).hasClass('.touch')) {
+        $el.on('click', '.' + plugin.settings.cls.marker, function(e) { plugin.onClick(e); });
+      }
+
+      plugin.toggleMarker(plugin.hasOverflow());
+    };
+
+    /**
+     * @returns {boolean}
+     */
+    plugin.hasOverflow = function() {
+      var width = $el.innerWidth();
+      var childWidth = 0;
+      $el.children('li').each(function() {
+        childWidth = childWidth + $(this).innerWidth();
+      });
+
+      return (width && width < childWidth);
+    };
+
+    /**
+     * @param status
+     */
+    plugin.toggleMarker = function(status) {
+      var sel = '.' + plugin.settings.cls.marker;
+      var $marker = $el.find(sel);
+      var hasMarker = (0 === $marker.length);
+      if(status !== false) {
+        if(hasMarker) {
+          $marker = $('<span></span>');
+          $marker.addClass(plugin.settings.cls.marker).appendTo($el);
+          $el.on('scroll', function() {
+            var left = $el.innerWidth() + $el.scrollLeft();
+            $marker.css('left',left);
+          });
+        } else {
+          $marker.show();
+        }
+      } else {
+        if(hasMarker) {
+          $marker.hide();
+        }
+      }
+    };
+
+    /**
+     * @param e The click event.
+     */
+    plugin.onClick = function(e) {
+      e.preventDefault();
+      var leftPos = $el.scrollLeft();
+      $el.animate({scrollLeft: leftPos + 200}, 800);
+    };
+
+    plugin.init();
+
+  };
+
+  /**
+   * @param options
+   * @returns {*}
+   */
+  $.fn.tabScroll = function(options) {
+    return this.each(function() {
+      if (undefined === $(this).data('tabScroll')) {
+        var plugin = new $.tabScroll(this, options);
+        $(this).data('tabScroll', plugin);
+      }
+    });
+  };
+})(jQuery);

js/tab-scroll.js

@@ -206,21 +206,20 @@ header {
 }
 
 .nav-tabs[data-overflow] {
-  position: relative;
+  position: relative; // Constrain the icon
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
+  flex-flow: row nowrap;
   flex: 1 0 auto;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  // Hide Scrollbar in Edge
-  -ms-overflow-style: none !important;
-  // Hide Scrollbar in Chrome, Safari
-  &::-webkit-scrollbar {
-    display: none;
+  overflow: auto;
+  -ms-overflow-style: none !important; // Hide Scrollbar in Edge
+  &::-webkit-scrollbar { display: none; } // Hide Scrollbar in Chrome, Safari
+  > .nav-item {
+    // Each item should take all the space it needs.
+    flex-shrink: 0 !important;
   }
-  &::after {
-    display: inline-block;
+  > .overflow-item {
+    // Overflow indicator
+    display: block;
     content: ' ';
     position: absolute;
     width: 8px;
@@ -230,3 +229,4 @@ header {
     margin-top: -4px;
   }
 }
+

scss/_header.scss

@@ -60,7 +60,7 @@
       }
     }
 
-    .nav-tabs[data-overflow]::after {
+    .nav-tabs[data-overflow] > .overflow-item {
       background: transparent inline-svg($indicator) center center / 8px 8px no-repeat;
     }
   }