Issue #3221025 by pivica: Second level shown as Bootstrap dropdown for second...

Issue #3221025 by pivica: Second level shown as Bootstrap dropdown for second level horizontal on hover options combo

themes/bs_bootstrap/js/navbar.js

@@ -65,12 +65,19 @@
    * @param $element
    *   Element that belongs to a navbar.
    * @return {boolean}
-   *   True if navbar is shown, or false if not. collapse.
+   *   True if navbar collapse is shown, false if not.
    */
   Drupal.bs_bootstrap.navbar.isNavbarCollapseShow = function($element) {
+    var $navbarCollapse;
+    if ($element.hasClass('navbar-collapse')) {
+      $navbarCollapse = $element;
+    }
+    else {
+      $navbarCollapse = $element.parents('.navbar-collapse');
+    }
+
     // If parent .navbar-collapse has show class this means that we are
     // in small view where responsive navbar is visible.
-    var $navbarCollapse = $element.parents('.navbar-collapse');
     // canvas-slid is used for off canvas navigation
     // @todo can we maybe normalize this so show class is used in both cases?
     if ($navbarCollapse.hasClass('show') || $navbarCollapse.hasClass('canvas-slid')) {
@@ -262,8 +269,9 @@
           });
         });
 
-        // Initialize hover event (open sub navigation) on menu items.
+        // Second level horizontal with show on hover option.
         if (drupalSettings.bs_bootstrap.navbar_type === 'second-level-horizontal' && drupalSettings.bs_bootstrap.navbar_onhover) {
+          // Initialize hover event (open sub navigation) on menu items.
           // Do not initialize hover events when responsive menu is active. This
           // will avoid various problems like that on touch display the tap
           // effect will cast first hover and then click event.
@@ -273,6 +281,18 @@
           if ($navbarCollapse.is(':visible')) {
             subNavigationOnHover($navbar);
           }
+
+          // On big screens, we need to stop any click activity for the first
+          // level. It can happen that if the user does a very fast click after
+          // entering the dropdown link then BS dropdown will be activated. In
+          // this case, we will show the second level on hover, but when hover
+          // is done user will then see BS dropdown menu which got activated
+          // from BS js dropdown code.
+          $navbar.find('> .dropdown > a').click(function () {
+            if (!Drupal.bs_bootstrap.navbar.isNavbarCollapseShow($navbarCollapse)) {
+            return false;
+            }
+          });
         }
       });
     }
@@ -294,30 +314,33 @@
       // level, but Bootstrap dropdown.js is making problems here (stealing the
       // click and reloading the page probably). This is not ideal and should be
       // improved.
-      $('.navbar-nav .dropdown .dropdown > a').each(function () {
-        var $this = $(this);
-        var $parent = $($this.parents('.dropdown-menu').get(0));
-
-        $this.on('click', function(event) {
-          // If we are on big screen then don't continue.
-          if (!Drupal.bs_bootstrap.navbar.isNavbarCollapseShow($this)) {
-            return;
-          }
+      $('.navbar-nav').each(function () {
+        var $navbar = $(this);
+        $navbar.find('.dropdown .dropdown > a').each(function () {
+          var $this = $(this);
+          //var $parent = $($this.parents('.dropdown-menu').get(0));
+
+          $this.on('click', function (event) {
+            // If we are on big screen then don't continue.
+            if (!Drupal.bs_bootstrap.navbar.isNavbarCollapseShow($navbar)) {
+              return;
+            }
 
-          // Avoid following the href location when clicking.
-          event.preventDefault();
+            // Avoid following the href location when clicking.
+            event.preventDefault();
 
-          // Avoid having the menu to close when clicking.
-          event.stopPropagation();
+            // Avoid having the menu to close when clicking.
+            event.stopPropagation();
 
-          // Close first any open dropdown in the same parent.
-          // @todo - this is commented for now to avoid user focus losing when
-          // we have open long menus and closing them will trigger viewport
-          // vertical scrolling.
-          //closeDropdowns($parent);
+            // Close first any open dropdown in the same parent.
+            // @todo - this is commented for now to avoid user focus losing when
+            // we have open long menus and closing them will trigger viewport
+            // vertical scrolling.
+            //closeDropdowns($parent);
 
-          // Open the one we clicked on.
-          toggleDropdown($this);
+            // Open the one we clicked on.
+            toggleDropdown($this);
+          });
         });
       });