From 039940b52a535f0d8189cf06b952d035dd9e2c80 Mon Sep 17 00:00:00 2001
From: "michael.danielczok" <michael@pcsg.de>
Date: Tue, 7 Jun 2022 12:55:05 +0200
Subject: [PATCH] feat: Scroll to anchor target element function added to first
nav level [MegaMenu].
---
bin/MegaMenu.js | 131 ++++++++++++++++++++++++++++++++----------------
1 file changed, 89 insertions(+), 42 deletions(-)
diff --git a/bin/MegaMenu.js b/bin/MegaMenu.js
index 4f747f9..709f689 100644
--- a/bin/MegaMenu.js
+++ b/bin/MegaMenu.js
@@ -63,26 +63,61 @@ define('package/quiqqer/menu/bin/MegaMenu', [
this.$liSize = this.getElm().getSize().y;
+ let self = this;
+
this.$Nav.getElements('.quiqqer-menu-megaMenu-list-item').addEvents({
+ click : function (event) {
+ event.stop();
+
+ var Target = event.target;
+
+ if (Target.nodeName !== 'LI') {
+ Target = Target.getParent('li');
+ }
+
+ let Link = Target.getElement('a');
+
+ if (Link) {
+ let TargetElm = self.$getAnchorTarget(Link);
+
+ if (TargetElm) {
+ self.$scrollToElement(TargetElm);
+ return;
+ }
+
+ window.location = Target.getElement('a').get('href');
+ }
+ },
touchend: function (event) {
event.stop();
var self = this,
Target = event.target;
- if (Target.nodeName != 'LI') {
+ if (Target.nodeName !== 'LI') {
Target = Target.getParent('li');
}
+ let Link = Target.getElement('a');
var Menu = Target.getElement('.quiqqer-menu-megaMenu-list-item-menu');
if (!Menu) {
- window.location = Target.getElement('a').get('href');
- return;
+ if (Link) {
+
+ let TargetElm = self.$getAnchorTarget(Link);
+
+ if (TargetElm) {
+ self.$scrollToElement(TargetElm);
+ return;
+ }
+
+ window.location = Target.getElement('a').get('href');
+ return;
+ }
}
if (this.$Menu.getStyle('display') === 'flex') {
- window.location = Target.getElement('a').get('href');
+ window.location = Link.get('href');
return;
}
@@ -167,36 +202,6 @@ define('package/quiqqer/menu/bin/MegaMenu', [
this.$Menu.set('html', Menu.get('html'));
- let getTarget = function (Link) {
- let href = Link.href;
-
- if (href.indexOf('#') === -1) {
- return false;
- }
-
- let targetString = href.substring(href.indexOf('#') + 1);
-
- if (targetString.length < 1) {
- return false;
- }
-
- let TargetElm = document.getElementById(targetString);
-
- if (!TargetElm) {
- return false;
- }
-
- return TargetElm;
- };
-
- let clickEvent = function (Target, offset) {
- new Fx.Scroll(window, {
- offset: {
- y: -offset
- }
- }).toElement(Target);
- };
-
this.$Menu.getElements('a').addEvent('click', function (event) {
var Link = event.target;
@@ -206,15 +211,10 @@ define('package/quiqqer/menu/bin/MegaMenu', [
event.stop();
- let TargetElm = getTarget(Link);
- if (TargetElm) {
- let offset = TargetElm.get('data-qui-offset');
-
- if (!offset) {
- offset = window.SCROLL_OFFSET ? window.SCROLL_OFFSET : 0;
- }
+ let TargetElm = self.$getAnchorTarget(Link);
- clickEvent(TargetElm, offset);
+ if (TargetElm) {
+ self.$scrollToElement(TargetElm);
return;
}
@@ -301,6 +301,53 @@ define('package/quiqqer/menu/bin/MegaMenu', [
this.$hide();
}
}).delay(500, this);
+ },
+
+ /**
+ * Get anchor target
+ *
+ * @param {HTMLElement} Link - <a> HTML node
+ * @return {boolean|HTMLElement}
+ */
+ $getAnchorTarget: function (Link) {
+ let href = Link.href;
+
+ if (href.indexOf('#') === -1) {
+ return false;
+ }
+
+ let targetString = href.substring(href.indexOf('#') + 1);
+
+ if (targetString.length < 1) {
+ return false;
+ }
+
+ let TargetElm = document.getElementById(targetString);
+
+ if (!TargetElm) {
+ return false;
+ }
+
+ return TargetElm;
+ },
+
+ /**
+ * Scroll to given element (Target)
+ *
+ * @param {HTMLElement} Target
+ */
+ $scrollToElement: function (Target) {
+ let offset = Target.get('data-qui-offset');
+
+ if (!offset) {
+ offset = window.SCROLL_OFFSET ? window.SCROLL_OFFSET : 0;
+ }
+
+ new Fx.Scroll(window, {
+ offset: {
+ y: -offset
+ }
+ }).toElement(Target);
}
});
});
\ No newline at end of file
--
GitLab