diff --git a/README.md b/README.md index c50334b93a02c2b3bc12a6c92323307552e5e1d7..c4575f563c20feb39e0f2169ad25d6c7df4028d3 100644 --- a/README.md +++ b/README.md @@ -112,4 +112,14 @@ $Menu->appendHTML( data-qui-options-touch=0 data-qui-options-buttonids=mobileMenu } +``` + +**NavTabs and NavTabsVertical - auto open and scroll to element** + +Every nav tab content has an url conform ID (title, it comes from brick entries). +You can use it to target this element. Simply place `#open_` before your title in the url. +The page will be scrolled to the element if it is not in viewport. + +```html +<a href="www.example.com/subpage#open_myTarget">Open "myTarget" element</a> ``` \ No newline at end of file diff --git a/bin/Controls/NavTabs.js b/bin/Controls/NavTabs.js index 1909d8c2822fcde110f68ac17d3850803722c796..3eb135163e9c8c97d58494a60b6dbd3d9a2fbeb2 100644 --- a/bin/Controls/NavTabs.js +++ b/bin/Controls/NavTabs.js @@ -1,6 +1,12 @@ /** * Navigation tabs control * + * Every nav tab content has an url conform ID (title, it comes from brick entries). + * You can use it to target this element. Simply place `#open_` before your title in the url. + * The page will be scrolled to the element if it is not in viewport. + * + * Example: <a href="www.example.com/subpage#open_myTarget">Open "myTarget" element</a> + * * @module package/quiqqer/menu/bin/Controls/NavTabs * @author www.pcsg.de (Michael Danielczok) */ @@ -70,12 +76,17 @@ define('package/quiqqer/menu/bin/Controls/NavTabs', [ let queryString = window.location.hash; - if (queryString) { - queryString = decodeURI(queryString); - const NavTabItem = this.navTab.querySelector('[href="' + queryString + '"]'); - const target = queryString.substr(1); + if (queryString && queryString.substr(0, 6) === '#open_') { + const target = decodeURI(queryString.substr(6)); + const NavTabItem = this.navTab.querySelector('[href="#' + target + '"]'); if (NavTabItem) { + if (!this.$isInViewport(Elm)) { + new Fx.Scroll(window, { + duration: 500 + }).toElement(Elm); + } + self.$setNavItemPos(NavTabItem.parentElement); self.toggle(NavTabItem.parentElement, target); } @@ -302,6 +313,21 @@ define('package/quiqqer/menu/bin/Controls/NavTabs', [ marginLeft = window.getComputedStyle(Item, null).getPropertyValue('padding-left'); new Fx.Scroll(this.navTab).start(Item.offsetLeft - parseInt(paddingLeft) - parseInt(marginLeft), 0); + }, + + /** + * Check if element is in viewport + * @param element + * @return {boolean} + */ + $isInViewport: function (element) { + const rect = element.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth) + ); } }); }); \ No newline at end of file