@ecl/vanilla-component-inpage-navigation
Advanced tools
Comparing version 4.5.0 to 4.6.0
@@ -65,2 +65,3 @@ import Stickyfill from 'stickyfilljs'; | ||
attachClickListener = true, | ||
attachResizeListener = true, | ||
attachKeyListener = true, | ||
@@ -82,2 +83,3 @@ contentClass = 'inpage-navigation__heading--active', | ||
this.attachKeyListener = attachKeyListener; | ||
this.attachResizeListener = attachResizeListener; | ||
this.stickySelector = stickySelector; | ||
@@ -100,2 +102,3 @@ this.containerSelector = containerSelector; | ||
this.navLinks = null; | ||
this.resizeTimer = null; | ||
@@ -115,2 +118,4 @@ // Bind `this` for use in callbacks | ||
this.closeList = this.closeList.bind(this); | ||
this.setListHeight = this.setListHeight.bind(this); | ||
this.handleResize = this.handleResize.bind(this); | ||
} | ||
@@ -330,3 +335,10 @@ | ||
this.navLinks = queryAll(this.linksSelector, this.element); | ||
this.currentList = queryOne(this.inPageList, this.element); | ||
this.direction = getComputedStyle(this.element).direction; | ||
if (this.direction === 'rtl') { | ||
this.element.classList.add('ecl-inpage-navigation--rtl'); | ||
} | ||
this.setListHeight(); | ||
this.initSticky(this.element); | ||
@@ -345,2 +357,5 @@ this.initScrollSpy(); | ||
} | ||
if (this.attachResizeListener) { | ||
window.addEventListener('resize', this.handleResize); | ||
} | ||
if (this.attachClickListener && this.navLinks) { | ||
@@ -402,6 +417,4 @@ this.navLinks.forEach((link) => | ||
openList() { | ||
const currentList = queryOne(this.inPageList, this.element); | ||
const togglerElement = queryOne(this.toggleSelector, this.element); | ||
currentList.classList.add('ecl-inpage-navigation__list--visible'); | ||
togglerElement.setAttribute('aria-expanded', 'true'); | ||
this.currentList.classList.add('ecl-inpage-navigation__list--visible'); | ||
this.toggleElement.setAttribute('aria-expanded', 'true'); | ||
} | ||
@@ -413,9 +426,33 @@ | ||
closeList() { | ||
const currentList = queryOne(this.inPageList, this.element); | ||
const togglerElement = queryOne(this.toggleSelector, this.element); | ||
currentList.classList.remove('ecl-inpage-navigation__list--visible'); | ||
togglerElement.setAttribute('aria-expanded', 'false'); | ||
this.currentList.classList.remove('ecl-inpage-navigation__list--visible'); | ||
this.toggleElement.setAttribute('aria-expanded', 'false'); | ||
} | ||
/** | ||
* Calculate the available space for the dropwdown and set a max-height on the list | ||
*/ | ||
setListHeight() { | ||
const viewportHeight = window.innerHeight; | ||
const viewportWidth = window.innerWidth; | ||
const listTitle = queryOne('.ecl-inpage-navigation__title', this.element); | ||
let topPosition = 0; | ||
// Mobile | ||
if (viewportWidth < 996) { | ||
topPosition = this.toggleElement.getBoundingClientRect().bottom + 16; | ||
} else if (listTitle) { | ||
// If we have a title in desktop | ||
topPosition = listTitle.getBoundingClientRect().bottom + 24; | ||
} else { | ||
// Get the list position if there is no title | ||
topPosition = this.element.getBoundingClientRect().top; | ||
} | ||
const availableSpace = viewportHeight - topPosition; | ||
if (availableSpace > 0) { | ||
this.currentList.style.maxHeight = `${availableSpace}px`; | ||
} | ||
} | ||
/** | ||
* Invoke event listeners on toggle click. | ||
@@ -442,2 +479,3 @@ * | ||
} else { | ||
this.setListHeight(); | ||
// Trap focus | ||
@@ -481,2 +519,13 @@ this.focusTrap.activate(); | ||
/** | ||
* Trigger events on resize | ||
* Uses a debounce, for performance | ||
*/ | ||
handleResize() { | ||
clearTimeout(this.resizeTimer); | ||
this.resizeTimer = setTimeout(() => { | ||
this.setListHeight(); | ||
}, 100); | ||
} | ||
/** | ||
* Handle keyboard | ||
@@ -544,2 +593,5 @@ * | ||
} | ||
if (this.attachResizeListener) { | ||
window.removeEventListener('resize', this.handleResize); | ||
} | ||
this.destroyScrollSpy(); | ||
@@ -546,0 +598,0 @@ this.destroySticky(); |
@@ -5,3 +5,3 @@ { | ||
"license": "EUPL-1.2", | ||
"version": "4.5.0", | ||
"version": "4.6.0", | ||
"description": "ECL In-page Navigation", | ||
@@ -13,4 +13,4 @@ "main": "inpage-navigation.js", | ||
"dependencies": { | ||
"@ecl/dom-utils": "4.5.0", | ||
"@ecl/vanilla-layout-grid": "4.5.0", | ||
"@ecl/dom-utils": "4.6.0", | ||
"@ecl/vanilla-layout-grid": "4.6.0", | ||
"focus-trap": "7.5.4", | ||
@@ -36,3 +36,3 @@ "gumshoejs": "5.1.2", | ||
], | ||
"gitHead": "7cf0da4ba3dcb1661a5a9e0373e7b382702a23ab" | ||
"gitHead": "23a5f0ce749c2f9cf69df6dd53eda8f1f564f2ab" | ||
} |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
42618
536
+ Added@ecl/dom-utils@4.6.0(transitive)
+ Added@ecl/vanilla-layout-grid@4.6.0(transitive)
- Removed@ecl/dom-utils@4.5.0(transitive)
- Removed@ecl/vanilla-layout-grid@4.5.0(transitive)
Updated@ecl/dom-utils@4.6.0