diff --git a/bin/MegaMenu.js b/bin/MegaMenu.js index 4f747f976e0e3cda8c2cc11f23428f84c2990120..709f6894282e706db26f45cdd610adac81e926b8 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