resolves #70 scroll panel to bring children into view when expanding nav item (PR #71)

mojavelinux · web-flow · commit 316917b8a3d1 · 2020-12-30T03:13:45.000-07:00
diff --git a/src/js/01-nav.js b/src/js/01-nav.js
@@ -114,7 +114,13 @@
   }
 
   function toggleActive () {
-    this.classList.toggle('is-active')
+    if (this.classList.toggle('is-active')) {
+      var padding = parseFloat(window.getComputedStyle(this).marginTop)
+      var rect = this.getBoundingClientRect()
+      var menuPanelRect = menuPanel.getBoundingClientRect()
+      var overflowY = (rect.bottom - menuPanelRect.top - menuPanelRect.height + padding).toFixed()
+      if (overflowY > 0) menuPanel.scrollTop += Math.min((rect.top - menuPanelRect.top - padding).toFixed(), overflowY)
+    }
   }
 
   function showNav (e) {

Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,13 @@`
`114`	`114`	`}`
`115`	`115`
`116`	`116`	`function toggleActive () {`
`117`		`- this.classList.toggle('is-active')`
	`117`	`+ if (this.classList.toggle('is-active')) {`
	`118`	`+ var padding = parseFloat(window.getComputedStyle(this).marginTop)`
	`119`	`+ var rect = this.getBoundingClientRect()`
	`120`	`+ var menuPanelRect = menuPanel.getBoundingClientRect()`
	`121`	`+ var overflowY = (rect.bottom - menuPanelRect.top - menuPanelRect.height + padding).toFixed()`
	`122`	`+ if (overflowY > 0) menuPanel.scrollTop += Math.min((rect.top - menuPanelRect.top - padding).toFixed(), overflowY)`
	`123`	`+ }`
`118`	`124`	`}`
`119`	`125`
`120`	`126`	`function showNav (e) {`