From 21fe369c57faa81aa27a9a6ed83ac55c12d65b1a Mon Sep 17 00:00:00 2001
From: "michael.danielczok" <michael@pcsg.de>
Date: Tue, 18 Oct 2022 10:44:47 +0200
Subject: [PATCH] feat: Setting to show submenu after delay [MegaMenu]
---
bin/MegaMenu.js | 41 ++++++++++++++++++++++++++++-----------
locale.xml | 8 ++++++++
settings.xml | 15 +++++++++++++-
src/QUI/Menu/MegaMenu.php | 19 +++++++++++++++---
4 files changed, 68 insertions(+), 15 deletions(-)
diff --git a/bin/MegaMenu.js b/bin/MegaMenu.js
index 85f794a..7d9b3a3 100644
--- a/bin/MegaMenu.js
+++ b/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)
diff --git a/locale.xml b/locale.xml
index 6ac3996..7dbf2e8 100644
--- a/locale.xml
+++ b/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>
diff --git a/settings.xml b/settings.xml
index 6f8cc73..ec006dd 100644
--- a/settings.xml
+++ b/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"/>
diff --git a/src/QUI/Menu/MegaMenu.php b/src/QUI/Menu/MegaMenu.php
index fff2ecc..c6dbfa8 100644
--- a/src/QUI/Menu/MegaMenu.php
+++ b/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([
--
GitLab