Enable popper for submenus on hover (#16041)

* Enable popper for the submenu too (opens on hover) * Fix phpcs * Visibility fixes and improved height calculation * Fix a scrollbar issue in Safari * grunt build Co-authored-by: Jason Coward <jason@opengeek.com>
modxcms · Mar 1, 2022 · 1608e8e · 1608e8e
1 parent 1553280
commit 1608e8e
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 46 deletions.
diff --git a/_build/templates/default/sass/_navbar.scss b/_build/templates/default/sass/_navbar.scss
@@ -268,19 +268,6 @@
       }
     }
 
-    & li:hover ul ul,
-    & ul li:hover ul ul,
-    & ul ul li:hover ul ul {
-      display: none;
-    }
-
-    & li:hover ul,
-    & ul li:hover ul,
-    & ul ul li:hover ul,
-    & ul ul ul li:hover ul {
-      display: block;
-    }
-
     &.active {
       opacity: 1;
       visibility: visible;
@@ -291,17 +278,33 @@
       box-shadow: $boxShadowBig;
       border-radius: $borderRadius;
       background: $white;
-      display: none;
       list-style: none;
       position: absolute;
-      left: 295px;
-      top: 0;
       z-index: 24;
-    }
-    &.modx-subnav-usernav {
-      .modx-subsubnav {
-        top: initial;
-        bottom: 0;
+      &-arrow {
+        border: 8px solid transparent;
+        border-right-color: #FFF;
+        content: " ";
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translate(0, -50%);
+        z-index: 10010;
+        display: none;
+      }
+      &.active {
+        + .modx-subsubnav-arrow {
+          display: block;
+        }
+      }
+      @include grid-media($gtDesktop) {
+        opacity: 0;
+        visibility: hidden;
+        &.active {
+          opacity: 1;
+          visibility: visible;
+        }
       }
     }
 
@@ -318,8 +321,9 @@
 
   // custom styles for language menu
   #language .modx-subsubnav {
-    max-height: 86vh;
+    max-height: calc(100vh - 12px);
     overflow-y: auto;
+    overflow-x: hidden;
   }
 }
 
@@ -400,7 +404,6 @@
   #modx-footer {
     .modx-subnav {
       min-width: 300px;
-      top: 60px !important;
 
       .description {
         display: none;
@@ -437,9 +440,11 @@
       display: none;
     }
 
-    .modx-subnav-wrapper {
-      max-height: 400px;
+    // overflow for long subsubnav
+    .modx-subnav {
+      max-height: calc(100vh - 109px);
       overflow-y: auto;
+      overflow-x: hidden;
     }
   }
 }

diff --git a/manager/assets/modext/core/modx.layout.js b/manager/assets/modext/core/modx.layout.js
@@ -388,7 +388,7 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
     ,initPopper: function() {
         var el = this;
         var buttons = document.getElementById('modx-navbar').getElementsByClassName('top');
-        var position = window.innerWidth <= 640 ? 'bottom' : 'right';
+        var position = window.innerWidth <= 960 ? 'bottom' : 'right';
         for (var i = 0; i < buttons.length; i++) {
             var submenu = document.getElementById(buttons[i].id + '-submenu');
             new Popper(buttons[i], submenu, {
@@ -404,7 +404,7 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
                         enabled: true,
                         fn: function(data) {
                             for (var i in data.offsets.popper) {
-                                if (i != 'bottom' && i != 'right') {
+                                if (i !== 'bottom' && i !== 'right') {
                                     if (data.offsets.popper.hasOwnProperty(i)) {
                                         data.instance.popper.style[i] = !isNaN(parseFloat(data.offsets.popper[i]))
                                             ? data.offsets.popper[i] + 'px'
@@ -436,6 +436,9 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
         window.addEventListener('click', function() {
             el.hideMenu();
         });
+        if (window.innerWidth > 960) {
+            this.initSubPopper();
+        }
     }
 
     ,showMenu: function(el) {
@@ -446,6 +449,7 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
             this.hideMenu();
             submenu.classList.add('active');
         }
+        this.hideSubMenu();
     }
     ,hideMenu: function() {
         var submenus = document.getElementsByClassName('modx-subnav');
@@ -454,6 +458,93 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
         }
     }
 
+    ,initSubPopper: function () {
+        var buttons = document.getElementById('modx-footer').querySelectorAll('.sub');
+        var position = window.innerWidth <= 960 ? 'bottom' : 'right';
+        for (var i = 0; i < buttons.length; i++) {
+            let popperInstance = null;
+
+            function create(button, submenu) {
+                popperInstance = new Popper(button, submenu, {
+                    placement: position,
+                    modifiers: {
+                        flip: {
+                            enabled: false
+                        },
+                        applyStyle: {
+                            enabled: true,
+                            fn: function (data) {
+                                for (var i in data.offsets.popper) {
+                                    if (i !== 'bottom' && i !== 'right') {
+                                        if (data.offsets.popper.hasOwnProperty(i)) {
+                                            data.instance.popper.style[i] = !isNaN(parseFloat(data.offsets.popper[i]))
+                                                ? data.offsets.popper[i] + 'px'
+                                                : data.offsets.popper[i];
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        preventOverflow: {
+                            boundariesElement: document.getElementById('modx-container'),
+                            priority: position === 'right'
+                                ? ['bottom', 'top']
+                                : ['left', 'right']
+                        }
+                    }
+                });
+            }
+
+            function destroy() {
+                if (popperInstance) {
+                    popperInstance.destroy();
+                    popperInstance = null;
+                }
+            }
+
+            function show(button, menu) {
+                menu.classList.add('active');
+                create(button, menu);
+            }
+
+            function hide(menu) {
+                var buttons = menu.querySelectorAll('.sub');
+                for (var i = 0; i < buttons.length; i++) {
+                    var submenu = buttons[i].getElementsByTagName('ul')[0];
+                    submenu.classList.remove('active');
+                    submenu.removeAttribute('style');
+                    buttons[i].classList.remove('active');
+                }
+                destroy();
+            }
+            console.log(buttons[i]);
+
+            buttons[i].onmouseenter = function (e) {
+                console.log(this);
+                e.stopPropagation();
+                var submenu = this.getElementsByTagName('ul')[0];
+                this.classList.add('active');
+                show(this, submenu);
+            };
+            buttons[i].onmouseleave = function (e) {
+                console.log(this);
+                e.stopPropagation();
+                var parentmenu = this.closest('ul');
+                this.classList.remove('active');
+                hide(parentmenu);
+            };
+        }
+    }
+
+    ,hideSubMenu: function () {
+        var buttons = document.getElementById('modx-footer').querySelectorAll('.sub');
+        for (var i = 0; i < buttons.length; i++) {
+            var submenu = buttons[i].getElementsByTagName('ul')[0];
+            submenu.classList.remove('active');
+            buttons[i].classList.remove('active');
+        }
+    }
+
     /**
      * Convenient method to target the west region
      *

diff --git a/manager/assets/modext/modx.jsgrps-min.js b/manager/assets/modext/modx.jsgrps-min.js
diff --git a/manager/controllers/default/header.php b/manager/controllers/default/header.php
@@ -336,7 +336,7 @@ public function processSubMenus(&$output, array $menus = [])
             if (!empty($menu['children'])) {
                 $smTpl .= '<ul class="modx-subsubnav">'."\n";
                 $this->processSubMenus($smTpl, $menu['children']);
-                $smTpl .= '</ul>'."\n";
+                $smTpl .= '</ul><div class="modx-subsubnav-arrow"></div>' . "\n";
             }
             $smTpl .= '</li>';
             $output .= $smTpl;

diff --git a/manager/templates/default/css/index-min.css b/manager/templates/default/css/index-min.css
diff --git a/manager/templates/default/css/index.css b/manager/templates/default/css/index.css
@@ -23020,12 +23020,6 @@ ul.x-tab-strip-bottom .x-tab-left {
 #modx-footer .modx-subnav li a:hover .description {
     color: #707070;
 }
-#modx-footer .modx-subnav li:hover ul ul, #modx-footer .modx-subnav ul li:hover ul ul, #modx-footer .modx-subnav ul ul li:hover ul ul {
-    display: none;
-}
-#modx-footer .modx-subnav li:hover ul, #modx-footer .modx-subnav ul li:hover ul, #modx-footer .modx-subnav ul ul li:hover ul, #modx-footer .modx-subnav ul ul ul li:hover ul {
-    display: block;
-}
 #modx-footer .modx-subnav.active {
     opacity: 1;
     visibility: visible;
@@ -23035,16 +23029,34 @@ ul.x-tab-strip-bottom .x-tab-left {
     box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
     border-radius: 3px;
     background: #FFF;
-    display: none;
     list-style: none;
     position: absolute;
-    left: 295px;
-    top: 0;
     z-index: 24;
 }
-#modx-footer .modx-subnav.modx-subnav-usernav .modx-subsubnav {
-    top: initial;
-    bottom: 0;
+#modx-footer .modx-subnav .modx-subsubnav-arrow {
+    border: 8px solid transparent;
+    border-right-color: #FFF;
+    content: " ";
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+    z-index: 10010;
+    display: none;
+}
+#modx-footer .modx-subnav .modx-subsubnav.active + .modx-subsubnav-arrow {
+    display: block;
+}
+@media screen and (min-width: 961px) {
+    #modx-footer .modx-subnav .modx-subsubnav {
+        opacity: 0;
+        visibility: hidden;
+    }
+    #modx-footer .modx-subnav .modx-subsubnav.active {
+        opacity: 1;
+        visibility: visible;
+    }
 }
 #modx-footer .modx-subnav-arrow {
     right: 100%;
@@ -23056,8 +23068,9 @@ ul.x-tab-strip-bottom .x-tab-left {
     margin-top: -6px;
 }
 #modx-footer #language .modx-subsubnav {
-    max-height: 86vh;
+    max-height: calc(100vh - 12px);
     overflow-y: auto;
+    overflow-x: hidden;
 }
 
 @media screen and (max-width: 960px) {
@@ -23121,7 +23134,6 @@ ul.x-tab-strip-bottom .x-tab-left {
 
     #modx-footer .modx-subnav {
         min-width: 300px;
-        top: 60px !important;
     }
     #modx-footer .modx-subnav .description {
         display: none;
@@ -23150,9 +23162,10 @@ ul.x-tab-strip-bottom .x-tab-left {
     #modx-footer .modx-subnav-arrow {
         display: none;
     }
-    #modx-footer .modx-subnav-wrapper {
-        max-height: 400px;
+    #modx-footer .modx-subnav {
+        max-height: calc(100vh - 109px);
         overflow-y: auto;
+        overflow-x: hidden;
     }
 }
 @media (max-height: 520px) {