feat: Setting to show submenu after delay [MegaMenu]

bin/MegaMenu.js

@@ -23,7 +23,8 @@ define('package/quiqqer/menu/bin/MegaMenu', [
         ],
 
         options: {
-            enablemobile: true
+            enablemobile : true,
+            showmenuafter: 250 // show menu after 250ms mouseenter, 0 = show menu immediately
         },
 
         initialize: function (options) {
@@ -33,9 +34,10 @@ define('package/quiqqer/menu/bin/MegaMenu', [
                 onImport: this.$onImport
             });
 
-            this.$liSize = 0;
-            this.$enter  = false;
-            this.$Nav    = null;
+            this.$liSize       = 0;
+            this.$enter        = false;
+            this.$Nav          = null;
+            this.showMenuDelay = 250;
         },
 
         /**
@@ -44,6 +46,10 @@ define('package/quiqqer/menu/bin/MegaMenu', [
         $onImport: function () {
             this.$Nav = this.getElm().getElement('nav');
 
+            if (parseInt(this.getAttribute('showmenuafter')) >= 0) {
+                this.showMenuDelay = parseInt(this.getAttribute('showmenuafter'));
+            }
+
             this.$Menu = new Element('div', {
                 'class': 'quiqqer-menu-megaMenu-list-item-menu control-background',
                 styles : {
@@ -63,7 +69,8 @@ define('package/quiqqer/menu/bin/MegaMenu', [
 
             this.$liSize = this.getElm().getSize().y;
 
-            let self = this;
+            let self    = this,
+                timeout = null;
 
             this.$Nav.getElements('.quiqqer-menu-megaMenu-list-item').addEvents({
                 click   : function (event) {
@@ -137,17 +144,29 @@ define('package/quiqqer/menu/bin/MegaMenu', [
                 }.bind(this),
 
                 mouseenter: function (event) {
-                    var Target = event.target;
-
-                    if (Target.nodeName != 'LI') {
-                        Target = Target.getParent('li');
+                    if (timeout !== null) {
+                        clearTimeout(timeout);
                     }
 
-                    this.$enter = true;
-                    this.showMenuFor(Target);
+                    timeout = setTimeout(() => {
+                        var Target = event.target;
+
+                        if (Target.nodeName != 'LI') {
+                            Target = Target.getParent('li');
+                        }
+
+                        this.$enter = true;
+                        this.showMenuFor(Target);
+                    }, this.showMenuDelay);
                 }.bind(this),
 
                 mouseleave: function () {
+                    if (timeout != null) {
+                        clearTimeout(timeout);
+
+                        timeout = null;
+                    }
+
                     this.$enter = false;
                     this.$hideCheck();
                 }.bind(this)

locale.xml

@@ -18,6 +18,14 @@
             <de><![CDATA[Menü]]></de>
             <en><![CDATA[Menu]]></en>
         </locale>
+        <locale name="menu.settings.showMenuDelay">
+            <de><![CDATA[Untermenü Verzögerung]]></de>
+            <en><![CDATA[Submenu delay]]></en>
+        </locale>
+        <locale name="menu.settings.showMenuDelay.desc">
+            <de><![CDATA[Dieser Wert ist in Millisekunden anzugeben. 250 bedeutet, dass das Untermenü erst dann erscheint, wenn man länger als 1/4 Sekunden mit der Maus wartet. Setzt man 0, wird das Untermenü sofort angezeigt.]]></de>
+            <en><![CDATA[This value must be specified in milliseconds. 250 means that the submenu will only appear if you wait longer than 1/4 seconds with the mouse. If you set 0, the submenu will be displayed immediately.]]></en>
+        </locale>
         <locale name="menu.settings.type">
             <de><![CDATA[Menü Art]]></de>
             <en><![CDATA[Menu type]]></en>

settings.xml

@@ -5,13 +5,16 @@
         <settings>
             <config>
                 <section name="menu.settings">
+                    <conf name="showMenuDelay">
+                        <type><![CDATA[number]]></type>
+                        <defaultvalue>250</defaultvalue>
+                    </conf>
                     <conf name="type">
                         <type><![CDATA[string]]></type>
                     </conf>
                 </section>
             </config>
 
-
             <window>
                 <categories>
                     <category name="menu">
@@ -24,6 +27,16 @@
                             <title>
                                 <locale group="quiqqer/menu" var="menu.settings.title"/>
                             </title>
+
+                            <input conf="menu.settings.showMenuDelay" type="number" min="0" max="5000">
+                                <text>
+                                    <locale group="quiqqer/menu" var="menu.settings.showMenuDelay"/>
+                                </text>
+                                <description>
+                                    <locale group="quiqqer/menu" var="menu.settings.showMenuDelay.desc"/>
+                                </description>
+                            </input>
+
                             <select conf="menu.settings.type">
                                 <text>
                                     <locale group="quiqqer/menu" var="menu.settings.type"/>

src/QUI/Menu/MegaMenu.php

@@ -38,7 +38,8 @@ public function __construct($attributes = [])
             'display'             => 'Standard',
             'enableMobile'        => true,
             'menuId'              => false,
-            'showFirstLevelIcons' => false // current it works only for independent menu
+            'showFirstLevelIcons' => false, // current it works only for independent menu
+            'showMenuDelay'       => false
         ]);
 
         if ($this->getProject()->getConfig('menu.settings.type')) {
@@ -97,6 +98,17 @@ public function getBody()
 
         $childControl = $this->getMenuControl($this->getAttribute('display'));
 
+        $showMenuDelay = 0;
+
+        if (intval($this->getProject()->getConfig('menu.settings.showMenuDelay')) >= 0) {
+            $showMenuDelay = intval($this->getProject()->getConfig('menu.settings.showMenuDelay'));
+        }
+
+        if ($this->getAttribute('showMenuDelay') !== '' &&
+            $this->getAttribute('showMenuDelay') !== false &&
+            intval($this->getAttribute('showMenuDelay')) >= 0) {
+            $showMenuDelay = intval($this->getAttribute('showMenuDelay'));
+        }
 
         try {
             $cacheResult = QUI\Cache\Manager::get($cache);
@@ -133,6 +145,7 @@ public function getBody()
         }
 
         $this->setAttribute('data-qui-options-enablemobile', $this->getAttribute('enableMobile') ? 1 : 0);
+        $this->setAttribute('data-qui-options-showmenuafter', $showMenuDelay);
 
 
         if ($this->getAttribute('menuId')) {
@@ -150,8 +163,8 @@ public function getBody()
                 'showMenu'     => true
             ]);
 
-            $result         = [];
-            $result['html'] = $Engine->fetch(dirname(__FILE__).'/MegaMenu.Independent.html');
+            $result             = [];
+            $result['html']     = $Engine->fetch(dirname(__FILE__).'/MegaMenu.Independent.html');
             $result['subMenus'] = \array_unique($this->subMenus);
         } else {
             $Engine->assign([