Issue #3291441 by agami4: Improve js behaviour of the secondary navigation for the FF browser

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

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

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

@@ -24,96 +24,99 @@
       };
 
       $(window).on('load', function () {
+        // Sometimes after reload page, we can not find elements on the
+        // secondary navigation. Promise function fixed it.
+        Promise.resolve(1).then(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($(window).width() >= 900) {
-            if (navSecondaryWidth > navScrollWidth) {
+          // Secondary navigation behaviour,
+          function secondaryNavBehaviour() {
+            if($(window).width() >= 900) {
+              if (navSecondaryWidth > navScrollWidth) {
 
-              navSecondary.each(function () {
-                var $this = $(this);
-                var total = 0;
+                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();
+                  // 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.css('display', 'flex');
+              } else {
+                navSecondary.css('display', 'flex');
+              }
             }
-          }
-          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();
+                }
+              });
+            }
           }
-        }
-        secondaryNavBehaviour();
-
-        var returnedFunction = debounce(function() {
           secondaryNavBehaviour();
-        }, 250);
 
-        window.addEventListener('resize', returnedFunction);
+          var returnedFunction = debounce(function() {
+            secondaryNavBehaviour();
+          }, 250);
+
+          window.addEventListener('resize', returnedFunction);
+        });
       });
     }
-
   };
 
 })(jQuery);