Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ecl/vanilla-component-inpage-navigation

Package Overview
Dependencies
Maintainers
0
Versions
70
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ecl/vanilla-component-inpage-navigation - npm Package Compare versions

Comparing version 4.5.0 to 4.6.0

68

inpage-navigation.js

@@ -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();

8

package.json

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc