Issue #3217356 by agami4: Improve secondary nav behavior

assets/js/navbar-secondary--sky.min.js

-!function(f){Drupal.behaviors.navbarSecondaryScrollable={attach:function(i){var l=f(".navbar-secondary .navbar-scrollable",i),a=l.find(".nav",i),s=a.find("li",i),n=l.width(),e=a.width();function t(){f(".layout--with-complementary")&&(900<=f(window).width()?n<e&&a.each(function(){var i=f(this),a=0;s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap();for(var n=0;n<s.length&&(a+=f(s[n]).width(),!(l.width()-50<=a));++n)f(s[n]).addClass("visible-item");i.find("li.visible-item").wrapAll('<div class="visible-list"></div>'),i.find("li:not(.visible-item)").wrapAll('<div class="hidden-list card" />'),i.append('<span class="caret"></span>');var e=i.find(".hidden-list"),t=i.find(".caret");t.on("click",function(){e.slideToggle(300),f(this).toggleClass("active")}),f(document).on("click",function(i){i.stopPropagation(),f(i.target).closest(".navbar-secondary").length||(e.slideUp(300),t.removeClass("active"))})}):a.each(function(){var i=f(this);s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap()}))}f(window).on("load",function(){t()});var o,r,d,c,v=(o=function(){t()},r=250,function(){var i=this,a=arguments,n=d&&!c;clearTimeout(c),c=setTimeout(function(){c=null,d||o.apply(i,a)},r),n&&o.apply(i,a)});window.addEventListener("resize",v)}}}(jQuery);
\ No newline at end of file
+!function(f){Drupal.behaviors.navbarSecondaryScrollable={attach:function(v){f(window).on("load",function(){var l=f(".navbar-secondary .navbar-scrollable",v),i=l.find(".nav",v),s=i.find("li",v),a=l.width(),n=i.width();function e(){f(".layout--with-complementary")&&(900<=f(window).width()?a<n&&i.each(function(){var i=f(this),a=0;s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap();for(var n=0;n<s.length&&(a+=f(s[n]).width(),!(l.width()-50<=a));++n)f(s[n]).addClass("visible-item");i.find("li.visible-item").wrapAll('<div class="visible-list"></div>'),i.find("li:not(.visible-item)").wrapAll('<div class="hidden-list card" />'),i.append('<span class="caret"></span>');var e=i.find(".hidden-list"),t=i.find(".caret");t.on("click",function(){e.slideToggle(300),f(this).toggleClass("active")}),f(document).on("click",function(i){i.stopPropagation(),f(i.target).closest(".navbar-secondary").length||(e.slideUp(300),t.removeClass("active"))})}):i.each(function(){var i=f(this);s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap()}))}e();var t,o,r,d,c=(t=function(){e()},o=250,function(){var i=this,a=arguments,n=r&&!d;clearTimeout(d),d=setTimeout(function(){d=null,r||t.apply(i,a)},o),n&&t.apply(i,a)});window.addEventListener("resize",c)})}}}(jQuery);
\ No newline at end of file

components/03-molecules/navigation/navbar/navbar-secondary--sky.js

@@ -23,98 +23,96 @@
         };
       };
 
-      var navScroll = $('.navbar-secondary .navbar-scrollable', context);
-      var navSecondary = navScroll.find('.nav', context);
-      var items = navSecondary.find('li', context);
-      var navScrollWidth = navScroll.width();
-      var navSecondaryWidth = navSecondary.width();
-
-      // Secondary navigation behaviour,
-      function secondaryNavBehaviour() {
-        if($('.layout--with-complementary')) {
-
-          if($(window).width() >= 900) {
-            if (navSecondaryWidth > navScrollWidth) {
-
-              navSecondary.each(function () {
-                var $this = $(this);
-                var total = 0;
-
-                // Add `visible-item` class to the list items which displayed in the current secondary
-                // navigation width
-                items.removeClass('visible-item');
-                $this.find('.caret').remove();
+      $(window).on('load', function () {
+        var navScroll = $('.navbar-secondary .navbar-scrollable', context);
+        var navSecondary = navScroll.find('.nav', context);
+        var items = navSecondary.find('li', context);
+        var navScrollWidth = navScroll.width();
+        var navSecondaryWidth = navSecondary.width();
+
+        // Secondary navigation behaviour,
+        function secondaryNavBehaviour() {
+          if($('.layout--with-complementary')) {
+
+            if($(window).width() >= 900) {
+              if (navSecondaryWidth > navScrollWidth) {
+
+                navSecondary.each(function () {
+                  var $this = $(this);
+                  var total = 0;
+
+                  // Add `visible-item` class to the list items which displayed in the current secondary
+                  // navigation width
+                  items.removeClass('visible-item');
+                  $this.find('.caret').remove();
+
+                  if(items.parent().is('div')) {
+                    items.unwrap();
+                  }
 
-                if(items.parent().is('div')) {
-                  items.unwrap();
-                }
+                  for(var i = 0; i < items.length; ++i) {
+                    total += $(items[i]).width();
 
-                for(var i = 0; i < items.length; ++i) {
-                  total += $(items[i]).width();
+                    if((navScroll.width() - 50) <= total) {
+                      break;
+                    }
 
-                  if((navScroll.width() - 50) <= total) {
-                    break;
+                    $(items[i]).addClass('visible-item');
                   }
 
-                  $(items[i]).addClass('visible-item');
-                }
+                  // Create wrapper for visible items.
+                  $this.find('li.visible-item')
+                    .wrapAll('<div class="visible-list"></div>');
 
-                // Create wrapper for visible items.
-                $this.find('li.visible-item')
-                  .wrapAll('<div class="visible-list"></div>');
+                  // Create wrapper for hidden items.
+                  $this.find('li:not(.visible-item)')
+                    .wrapAll('<div class="hidden-list card" />');
 
-                // Create wrapper for hidden items.
-                $this.find('li:not(.visible-item)')
-                  .wrapAll('<div class="hidden-list card" />');
+                  // Add caret.
+                  $this.append('<span class="caret"></span>');
 
-                // Add caret.
-                $this.append('<span class="caret"></span>');
+                  var hiddenList = $this.find('.hidden-list');
+                  var cart = $this.find('.caret');
 
-                var hiddenList = $this.find('.hidden-list');
-                var cart = $this.find('.caret');
+                  cart.on('click', function () {
+                    hiddenList.slideToggle(300);
+                    $(this).toggleClass('active');
+                  });
 
-                cart.on('click', function () {
-                  hiddenList.slideToggle(300);
-                  $(this).toggleClass('active');
-                });
-
-                $(document).on('click', function(event) {
-                  event.stopPropagation();
+                  $(document).on('click', function(event) {
+                    event.stopPropagation();
 
-                  if ($(event.target).closest('.navbar-secondary').length) return;
-                  hiddenList.slideUp(300);
-                  cart.removeClass('active');
+                    if ($(event.target).closest('.navbar-secondary').length) return;
+                    hiddenList.slideUp(300);
+                    cart.removeClass('active');
+                  });
                 });
-              });
+              }
             }
-          }
-          else {
-            navSecondary.each(function () {
-              var $this = $(this);
+            else {
+              navSecondary.each(function () {
+                var $this = $(this);
 
-              // Unwrap list items.
-              // Remove extra classes/elements.
-              items.removeClass('visible-item');
-              $this.find('.caret').remove();
+                // Unwrap list items.
+                // Remove extra classes/elements.
+                items.removeClass('visible-item');
+                $this.find('.caret').remove();
 
-              if(items.parent().is('div')) {
-                items.unwrap();
-              }
-            });
+                if(items.parent().is('div')) {
+                  items.unwrap();
+                }
+              });
+            }
           }
         }
-      }
-
-      $(window).on('load', function () {
         secondaryNavBehaviour();
-      });
-
-      var returnedFunction = debounce(function() {
-        secondaryNavBehaviour();
-      }, 250);
 
-      window.addEventListener('resize', returnedFunction);
+        var returnedFunction = debounce(function() {
+          secondaryNavBehaviour();
+        }, 250);
 
+        window.addEventListener('resize', returnedFunction);
+      });
     }
 
   };