From cf65fdfcf3b25e39023435fa142a48e2a48918fa Mon Sep 17 00:00:00 2001
From: "michael.danielczok" <michael@pcsg.de>
Date: Tue, 12 Jul 2022 11:31:37 +0200
Subject: [PATCH] feat: Auto open nav tab item by using #open_ in url.
---
README.md | 10 ++++++++++
bin/Controls/NavTabs.js | 34 ++++++++++++++++++++++++++++++----
2 files changed, 40 insertions(+), 4 deletions(-)
diff --git a/README.md b/README.md
index c50334b..c4575f5 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 1909d8c..3eb1351 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
--
GitLab