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

@uqds/site-header

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uqds/site-header - npm Package Compare versions

Comparing version 0.0.11-alpha.0 to 0.0.12-alpha.0

327

dist/js/uqds.js
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
var uq = function (exports) {

@@ -16,6 +10,4 @@ 'use strict';

var MainNavigation = /*#__PURE__*/function () {
function MainNavigation(nav, navClass) {
_classCallCheck(this, MainNavigation);
class MainNavigation {
constructor(nav, navClass) {
this.nav = nav;

@@ -39,192 +31,173 @@ this.navClass = navClass;

_createClass(MainNavigation, [{
key: "init",
value: function init() {
var _this = this;
init() {
const mobileToggle = document.querySelector(".".concat(this.toggleClass));
const subNavItems = this.nav.querySelectorAll(".".concat(this.subNavClass));
const subNavLinks = this.nav.querySelectorAll(".".concat(this.subNavClass, " > a"));
const subNavL2Items = this.nav.querySelectorAll(".".concat(this.level2Class, " .").concat(this.subNavClass));
const subNavL2Links = this.nav.querySelectorAll(".".concat(this.level2Class, " .").concat(this.subNavClass, " > a"));
const navLinks = this.nav.querySelectorAll("li > a");
const subNavToggles = this.nav.querySelectorAll(".".concat(this.subToggleClass));
mobileToggle.addEventListener("click", this.handleMobileToggle);
subNavItems.forEach(item => {
this.setOrientation(item);
item.addEventListener("mouseenter", this.handleToggle);
item.addEventListener("mouseleave", this.handleToggle);
});
subNavLinks.forEach(item => {
if (window.matchMedia("(min-width: 1024px)").matches) {
item.addEventListener("touchend", this.handleToggle);
}
});
subNavL2Items.forEach(item => {
this.setOrientation(item);
item.addEventListener("mouseenter", this.handleToggle);
item.addEventListener("mouseleave", this.handleToggle);
});
subNavL2Links.forEach(item => {
item.addEventListener("touchend", this.handleToggle);
});
navLinks.forEach(item => {
item.addEventListener("keydown", this.handleKeyPress);
});
subNavToggles.forEach(item => {
item.addEventListener("click", this.handleToggle);
});
}
var mobileToggle = document.querySelector(".".concat(this.toggleClass));
var subNavItems = this.nav.querySelectorAll(".".concat(this.subNavClass));
var subNavLinks = this.nav.querySelectorAll(".".concat(this.subNavClass, " > a"));
var subNavL2Items = this.nav.querySelectorAll(".".concat(this.level2Class, " .").concat(this.subNavClass));
var subNavL2Links = this.nav.querySelectorAll(".".concat(this.level2Class, " .").concat(this.subNavClass, " > a"));
var navLinks = this.nav.querySelectorAll('li > a');
var subNavToggles = this.nav.querySelectorAll(".".concat(this.subToggleClass));
mobileToggle.addEventListener('click', this.handleMobileToggle);
subNavItems.forEach(function (item) {
_this.setOrientation(item);
handleMobileToggle(event) {
const toggle = event.target;
const target = this.nav.querySelectorAll(".".concat(this.level1Class));
const ariaExpanded = toggle.getAttribute("aria-expanded") === "true";
const ariaPressed = toggle.getAttribute("aria-pressed") === "true";
toggle.classList.toggle("".concat(this.navClass, "-toggle--close"));
toggle.setAttribute("aria-expanded", !ariaExpanded);
toggle.setAttribute("aria-pressed", !ariaPressed);
target.forEach(el => {
el.classList.toggle(this.openModifier);
el.setAttribute("aria-expanded", !ariaExpanded);
el.setAttribute("aria-pressed", !ariaPressed);
});
}
item.addEventListener('mouseenter', _this.handleToggle);
item.addEventListener('mouseleave', _this.handleToggle);
});
subNavLinks.forEach(function (item) {
if (window.matchMedia('(min-width: 1024px)').matches) {
item.addEventListener('touchend', _this.handleToggle);
}
});
subNavL2Items.forEach(function (item) {
_this.setOrientation(item);
item.addEventListener('mouseenter', _this.handleToggle);
item.addEventListener('mouseleave', _this.handleToggle);
});
subNavL2Links.forEach(function (item) {
item.addEventListener('touchend', _this.handleToggle);
});
navLinks.forEach(function (item) {
item.addEventListener('keydown', _this.handleKeyPress);
});
subNavToggles.forEach(function (item) {
item.addEventListener('click', _this.handleToggle);
});
handleToggle(event) {
if ((event.type === "mouseenter" || event.type === "mouseleave") && window.matchMedia("(max-width: 1024px)").matches) {
return;
}
}, {
key: "handleMobileToggle",
value: function handleMobileToggle(event) {
var _this2 = this;
var toggle = event.target;
var target = this.nav.querySelectorAll(".".concat(this.level1Class));
var ariaExpanded = toggle.getAttribute('aria-expanded') === 'true';
var ariaPressed = toggle.getAttribute('aria-pressed') === 'true';
toggle.classList.toggle("".concat(this.navClass, "-toggle--close"));
toggle.setAttribute('aria-expanded', !ariaExpanded);
toggle.setAttribute('aria-pressed', !ariaPressed);
target.forEach(function (el) {
el.classList.toggle(_this2.openModifier);
el.setAttribute('aria-expanded', !ariaExpanded);
el.setAttribute('aria-pressed', !ariaPressed);
});
let menuItem = event.target;
if (menuItem.tagName !== "LI") {
menuItem = menuItem.parentElement;
}
}, {
key: "handleToggle",
value: function handleToggle(event) {
if ((event.type === 'mouseenter' || event.type === 'mouseleave') && window.matchMedia('(max-width: 1024px)').matches) {
return;
}
var menuItem = event.target;
const subNav = menuItem.querySelector("ul");
if (menuItem.tagName !== 'LI') {
menuItem = menuItem.parentElement;
if (subNav.classList.contains(this.openModifier)) {
this.closeLevel(subNav, menuItem);
} else {
if (event.type === "touchend") {
event.preventDefault();
}
var subNav = menuItem.querySelector('ul');
this.closeAllLevels();
this.openLevel(subNav, menuItem);
}
}
if (subNav.classList.contains(this.openModifier)) {
this.closeLevel(subNav, menuItem);
} else {
if (event.type === 'touchend') {
event.preventDefault();
}
openLevel(subNav, menuItem) {
subNav.classList.add(this.openModifier);
menuItem.classList.add(this.levelOpenModifier);
menuItem.querySelector("a").setAttribute("aria-expanded", "true");
menuItem.querySelector("button").setAttribute("aria-expanded", "true");
menuItem.querySelector("button").setAttribute("aria-pressed", "true");
}
this.closeAllLevels();
this.openLevel(subNav, menuItem);
}
}
}, {
key: "openLevel",
value: function openLevel(subNav, menuItem) {
subNav.classList.add(this.openModifier);
menuItem.classList.add(this.levelOpenModifier);
menuItem.querySelector('a').setAttribute('aria-expanded', 'true');
menuItem.querySelector('button').setAttribute('aria-expanded', 'true');
menuItem.querySelector('button').setAttribute('aria-pressed', 'true');
}
}, {
key: "closeLevel",
value: function closeLevel(subNav, menuItem) {
subNav.classList.remove(this.openModifier);
this.setOrientation(menuItem);
menuItem.classList.remove(this.levelOpenModifier);
menuItem.querySelector('a').setAttribute('aria-expanded', 'false');
menuItem.querySelector('button').setAttribute('aria-expanded', 'false');
menuItem.querySelector('button').setAttribute('aria-pressed', 'false');
menuItem.parentNode.querySelector('ul').setAttribute('aria-expanded', 'false');
menuItem.parentNode.querySelector('ul').setAttribute('aria-pressed', 'false');
}
}, {
key: "closeNav",
value: function closeNav(menuItem) {
menuItem.classList.remove(this.openModifier);
menuItem.parentNode.querySelector('ul').setAttribute('aria-expanded', 'false');
menuItem.parentNode.querySelector('ul').setAttribute('aria-pressed', 'false');
}
}, {
key: "closeAllLevels",
value: function closeAllLevels() {
var _this3 = this;
closeLevel(subNav, menuItem) {
subNav.classList.remove(this.openModifier);
this.setOrientation(menuItem);
menuItem.classList.remove(this.levelOpenModifier);
menuItem.querySelector("a").setAttribute("aria-expanded", "false");
menuItem.querySelector("button").setAttribute("aria-expanded", "false");
menuItem.querySelector("button").setAttribute("aria-pressed", "false");
menuItem.parentNode.querySelector("ul").setAttribute("aria-expanded", "false");
menuItem.parentNode.querySelector("ul").setAttribute("aria-pressed", "false");
}
var levels = this.nav.querySelectorAll(".".concat(this.subNavClass));
levels.forEach(function (level) {
var item = level.querySelector(".".concat(_this3.level2Class));
closeNav(menuItem) {
menuItem.classList.remove(this.openModifier);
menuItem.parentNode.querySelector("ul").setAttribute("aria-expanded", "false");
menuItem.parentNode.querySelector("ul").setAttribute("aria-pressed", "false");
}
_this3.closeLevel(item, level);
});
}
}, {
key: "setOrientation",
value: function setOrientation(item) {
var subNav = item.querySelector(".".concat(this.level2Class));
var reverseClass = this.reverseClass;
var subNavRight = 0;
closeAllLevels() {
const levels = this.nav.querySelectorAll(".".concat(this.subNavClass));
levels.forEach(level => {
const item = level.querySelector(".".concat(this.level2Class));
this.closeLevel(item, level);
});
}
if (subNav && subNav.getBoundingClientRect()) {
subNavRight = subNav.getBoundingClientRect().right;
}
setOrientation(item) {
const subNav = item.querySelector(".".concat(this.level2Class));
const {
reverseClass
} = this;
let subNavRight = 0;
if (window.innerWidth < subNavRight) {
subNav.classList.add(reverseClass);
}
if (subNav && subNav.getBoundingClientRect()) {
subNavRight = subNav.getBoundingClientRect().right;
}
}, {
key: "handleKeyPress",
value: function handleKeyPress(event) {
var parent = event.currentTarget.parentNode;
var nav = parent.parentNode;
var mobileToggle = document.querySelector(".".concat(this.toggleClass));
if (parent === nav.firstElementChild) {
// If we shift tab past the first child, toggle this level.
if (event.key === 'Tab' && event.shiftKey === true) {
if (nav.classList.contains(this.level2Class)) {
this.closeLevel(nav, nav.parentNode, subNav);
nav.parentNode.classList.remove(this.levelOpenModifier);
} else {
this.closeNav(nav);
mobileToggle.classList.toggle("".concat(this.navClass, "-toggle--close"));
mobileToggle.setAttribute('aria-expanded', 'false');
mobileToggle.setAttribute('aria-pressed', 'false');
}
if (window.innerWidth < subNavRight) {
subNav.classList.add(reverseClass);
}
}
handleKeyPress(event) {
const parent = event.currentTarget.parentNode;
const nav = parent.parentNode;
const mobileToggle = document.querySelector(".".concat(this.toggleClass));
if (parent === nav.firstElementChild) {
// If we shift tab past the first child, toggle this level.
if (event.key === "Tab" && event.shiftKey === true) {
if (nav.classList.contains(this.level2Class)) {
this.closeLevel(nav, nav.parentNode, subNav);
nav.parentNode.classList.remove(this.levelOpenModifier);
} else {
this.closeNav(nav);
mobileToggle.classList.toggle("".concat(this.navClass, "-toggle--close"));
mobileToggle.setAttribute("aria-expanded", "false");
mobileToggle.setAttribute("aria-pressed", "false");
}
} else if (parent === nav.lastElementChild) {
// If we tab past the last child, toggle this level.
if (event.key === 'Tab' && event.shiftKey === false) {
if (nav.classList.contains(this.level2Class)) {
this.closeLevel(nav, nav.parentNode);
nav.parentNode.classList.remove(this.levelOpenModifier);
} else {
this.closeNav(nav);
mobileToggle.classList.toggle("".concat(this.navClass, "-toggle--close"));
mobileToggle.setAttribute('aria-expanded', 'false');
mobileToggle.setAttribute('aria-pressed', 'false');
}
}
} else if (parent === nav.lastElementChild) {
// If we tab past the last child, toggle this level.
if (event.key === "Tab" && event.shiftKey === false) {
if (nav.classList.contains(this.level2Class)) {
this.closeLevel(nav, nav.parentNode);
nav.parentNode.classList.remove(this.levelOpenModifier);
} else {
this.closeNav(nav);
mobileToggle.classList.toggle("".concat(this.navClass, "-toggle--close"));
mobileToggle.setAttribute("aria-expanded", "false");
mobileToggle.setAttribute("aria-pressed", "false");
}
} // Toggle nav on Space (32) or any Arrow key (37-40).
}
} // Toggle nav on Space (32) or any Arrow key (37-40).
switch (event.keyCode) {
case 32:
case 37:
case 38:
case 39:
case 40:
event.preventDefault();
this.handleToggle(event);
break;
}
switch (event.keyCode) {
case 32:
case 37:
case 38:
case 39:
case 40:
event.preventDefault();
this.handleToggle(event);
break;
}
}]);
}
return MainNavigation;
}();
}

@@ -231,0 +204,0 @@ exports.siteHeaderNavigation = MainNavigation;

2

dist/js/uqds.min.js

@@ -1,1 +0,1 @@

"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var s=0;s<t.length;s++){var a=t[s];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function _createClass(e,t,s){return t&&_defineProperties(e.prototype,t),s&&_defineProperties(e,s),Object.defineProperty(e,"prototype",{writable:!1}),e}var uq=function(e){var t=function(){function s(e,t){_classCallCheck(this,s),this.nav=e,this.navClass=t,this.toggleClass="jsNavToggle",this.openModifier="".concat(this.navClass,"__list--open"),this.levelOpenModifier="".concat(this.navClass,"__list-item--open"),this.level1Class="".concat(this.navClass,"__list--level-1"),this.level2Class="".concat(this.navClass,"__list--level-2"),this.reverseClass="".concat(this.navClass,"__list--reverse"),this.subNavClass="".concat(this.navClass,"__list-item--has-subnav"),this.subToggleClass="".concat(this.navClass,"__sub-toggle"),this.init=this.init.bind(this),this.handleToggle=this.handleToggle.bind(this),this.handleMobileToggle=this.handleMobileToggle.bind(this),this.setOrientation=this.setOrientation.bind(this),this.handleKeyPress=this.handleKeyPress.bind(this),this.init()}return _createClass(s,[{key:"init",value:function(){var t=this,e=document.querySelector(".".concat(this.toggleClass)),s=this.nav.querySelectorAll(".".concat(this.subNavClass)),a=this.nav.querySelectorAll(".".concat(this.subNavClass," > a")),i=this.nav.querySelectorAll(".".concat(this.level2Class," .").concat(this.subNavClass)),l=this.nav.querySelectorAll(".".concat(this.level2Class," .").concat(this.subNavClass," > a")),n=this.nav.querySelectorAll("li > a"),r=this.nav.querySelectorAll(".".concat(this.subToggleClass));e.addEventListener("click",this.handleMobileToggle),s.forEach(function(e){t.setOrientation(e),e.addEventListener("mouseenter",t.handleToggle),e.addEventListener("mouseleave",t.handleToggle)}),a.forEach(function(e){window.matchMedia("(min-width: 1024px)").matches&&e.addEventListener("touchend",t.handleToggle)}),i.forEach(function(e){t.setOrientation(e),e.addEventListener("mouseenter",t.handleToggle),e.addEventListener("mouseleave",t.handleToggle)}),l.forEach(function(e){e.addEventListener("touchend",t.handleToggle)}),n.forEach(function(e){e.addEventListener("keydown",t.handleKeyPress)}),r.forEach(function(e){e.addEventListener("click",t.handleToggle)})}},{key:"handleMobileToggle",value:function(e){var t=this,e=e.target,s=this.nav.querySelectorAll(".".concat(this.level1Class)),a="true"===e.getAttribute("aria-expanded"),i="true"===e.getAttribute("aria-pressed");e.classList.toggle("".concat(this.navClass,"-toggle--close")),e.setAttribute("aria-expanded",!a),e.setAttribute("aria-pressed",!i),s.forEach(function(e){e.classList.toggle(t.openModifier),e.setAttribute("aria-expanded",!a),e.setAttribute("aria-pressed",!i)})}},{key:"handleToggle",value:function(e){var t,s;("mouseenter"===e.type||"mouseleave"===e.type)&&window.matchMedia("(max-width: 1024px)").matches||((s=(t="LI"!==(t=e.target).tagName?t.parentElement:t).querySelector("ul")).classList.contains(this.openModifier)?this.closeLevel(s,t):("touchend"===e.type&&e.preventDefault(),this.closeAllLevels(),this.openLevel(s,t)))}},{key:"openLevel",value:function(e,t){e.classList.add(this.openModifier),t.classList.add(this.levelOpenModifier),t.querySelector("a").setAttribute("aria-expanded","true"),t.querySelector("button").setAttribute("aria-expanded","true"),t.querySelector("button").setAttribute("aria-pressed","true")}},{key:"closeLevel",value:function(e,t){e.classList.remove(this.openModifier),this.setOrientation(t),t.classList.remove(this.levelOpenModifier),t.querySelector("a").setAttribute("aria-expanded","false"),t.querySelector("button").setAttribute("aria-expanded","false"),t.querySelector("button").setAttribute("aria-pressed","false"),t.parentNode.querySelector("ul").setAttribute("aria-expanded","false"),t.parentNode.querySelector("ul").setAttribute("aria-pressed","false")}},{key:"closeNav",value:function(e){e.classList.remove(this.openModifier),e.parentNode.querySelector("ul").setAttribute("aria-expanded","false"),e.parentNode.querySelector("ul").setAttribute("aria-pressed","false")}},{key:"closeAllLevels",value:function(){var s=this;this.nav.querySelectorAll(".".concat(this.subNavClass)).forEach(function(e){var t=e.querySelector(".".concat(s.level2Class));s.closeLevel(t,e)})}},{key:"setOrientation",value:function(e){var e=e.querySelector(".".concat(this.level2Class)),t=this.reverseClass,s=0;e&&e.getBoundingClientRect()&&(s=e.getBoundingClientRect().right),window.innerWidth<s&&e.classList.add(t)}},{key:"handleKeyPress",value:function(e){var t=e.currentTarget.parentNode,s=t.parentNode,a=document.querySelector(".".concat(this.toggleClass));switch(t===s.firstElementChild?"Tab"===e.key&&!0===e.shiftKey&&(s.classList.contains(this.level2Class)?(this.closeLevel(s,s.parentNode,subNav),s.parentNode.classList.remove(this.levelOpenModifier)):(this.closeNav(s),a.classList.toggle("".concat(this.navClass,"-toggle--close")),a.setAttribute("aria-expanded","false"),a.setAttribute("aria-pressed","false"))):t===s.lastElementChild&&"Tab"===e.key&&!1===e.shiftKey&&(s.classList.contains(this.level2Class)?(this.closeLevel(s,s.parentNode),s.parentNode.classList.remove(this.levelOpenModifier)):(this.closeNav(s),a.classList.toggle("".concat(this.navClass,"-toggle--close")),a.setAttribute("aria-expanded","false"),a.setAttribute("aria-pressed","false"))),e.keyCode){case 32:case 37:case 38:case 39:case 40:e.preventDefault(),this.handleToggle(e)}}}]),s}();return e.siteHeaderNavigation=t,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
"use strict";var uq=function(e){return e.siteHeaderNavigation=class{constructor(e,t){this.nav=e,this.navClass=t,this.toggleClass="jsNavToggle",this.openModifier="".concat(this.navClass,"__list--open"),this.levelOpenModifier="".concat(this.navClass,"__list-item--open"),this.level1Class="".concat(this.navClass,"__list--level-1"),this.level2Class="".concat(this.navClass,"__list--level-2"),this.reverseClass="".concat(this.navClass,"__list--reverse"),this.subNavClass="".concat(this.navClass,"__list-item--has-subnav"),this.subToggleClass="".concat(this.navClass,"__sub-toggle"),this.init=this.init.bind(this),this.handleToggle=this.handleToggle.bind(this),this.handleMobileToggle=this.handleMobileToggle.bind(this),this.setOrientation=this.setOrientation.bind(this),this.handleKeyPress=this.handleKeyPress.bind(this),this.init()}init(){const e=document.querySelector(".".concat(this.toggleClass)),t=this.nav.querySelectorAll(".".concat(this.subNavClass)),s=this.nav.querySelectorAll(".".concat(this.subNavClass," > a")),a=this.nav.querySelectorAll(".".concat(this.level2Class," .").concat(this.subNavClass)),i=this.nav.querySelectorAll(".".concat(this.level2Class," .").concat(this.subNavClass," > a")),l=this.nav.querySelectorAll("li > a"),n=this.nav.querySelectorAll(".".concat(this.subToggleClass));e.addEventListener("click",this.handleMobileToggle),t.forEach(e=>{this.setOrientation(e),e.addEventListener("mouseenter",this.handleToggle),e.addEventListener("mouseleave",this.handleToggle)}),s.forEach(e=>{window.matchMedia("(min-width: 1024px)").matches&&e.addEventListener("touchend",this.handleToggle)}),a.forEach(e=>{this.setOrientation(e),e.addEventListener("mouseenter",this.handleToggle),e.addEventListener("mouseleave",this.handleToggle)}),i.forEach(e=>{e.addEventListener("touchend",this.handleToggle)}),l.forEach(e=>{e.addEventListener("keydown",this.handleKeyPress)}),n.forEach(e=>{e.addEventListener("click",this.handleToggle)})}handleMobileToggle(e){const t=e.target,s=this.nav.querySelectorAll(".".concat(this.level1Class)),a="true"===t.getAttribute("aria-expanded"),i="true"===t.getAttribute("aria-pressed");t.classList.toggle("".concat(this.navClass,"-toggle--close")),t.setAttribute("aria-expanded",!a),t.setAttribute("aria-pressed",!i),s.forEach(e=>{e.classList.toggle(this.openModifier),e.setAttribute("aria-expanded",!a),e.setAttribute("aria-pressed",!i)})}handleToggle(t){if("mouseenter"!==t.type&&"mouseleave"!==t.type||!window.matchMedia("(max-width: 1024px)").matches){let e=t.target;const s=(e="LI"!==e.tagName?e.parentElement:e).querySelector("ul");s.classList.contains(this.openModifier)?this.closeLevel(s,e):("touchend"===t.type&&t.preventDefault(),this.closeAllLevels(),this.openLevel(s,e))}}openLevel(e,t){e.classList.add(this.openModifier),t.classList.add(this.levelOpenModifier),t.querySelector("a").setAttribute("aria-expanded","true"),t.querySelector("button").setAttribute("aria-expanded","true"),t.querySelector("button").setAttribute("aria-pressed","true")}closeLevel(e,t){e.classList.remove(this.openModifier),this.setOrientation(t),t.classList.remove(this.levelOpenModifier),t.querySelector("a").setAttribute("aria-expanded","false"),t.querySelector("button").setAttribute("aria-expanded","false"),t.querySelector("button").setAttribute("aria-pressed","false"),t.parentNode.querySelector("ul").setAttribute("aria-expanded","false"),t.parentNode.querySelector("ul").setAttribute("aria-pressed","false")}closeNav(e){e.classList.remove(this.openModifier),e.parentNode.querySelector("ul").setAttribute("aria-expanded","false"),e.parentNode.querySelector("ul").setAttribute("aria-pressed","false")}closeAllLevels(){const e=this.nav.querySelectorAll(".".concat(this.subNavClass));e.forEach(e=>{var t=e.querySelector(".".concat(this.level2Class));this.closeLevel(t,e)})}setOrientation(e){const t=e.querySelector(".".concat(this.level2Class));e=this.reverseClass;let s=0;t&&t.getBoundingClientRect()&&(s=t.getBoundingClientRect().right),window.innerWidth<s&&t.classList.add(e)}handleKeyPress(e){var t=e.currentTarget.parentNode;const s=t.parentNode,a=document.querySelector(".".concat(this.toggleClass));switch(t===s.firstElementChild?"Tab"===e.key&&!0===e.shiftKey&&(s.classList.contains(this.level2Class)?(this.closeLevel(s,s.parentNode,subNav),s.parentNode.classList.remove(this.levelOpenModifier)):(this.closeNav(s),a.classList.toggle("".concat(this.navClass,"-toggle--close")),a.setAttribute("aria-expanded","false"),a.setAttribute("aria-pressed","false"))):t===s.lastElementChild&&"Tab"===e.key&&!1===e.shiftKey&&(s.classList.contains(this.level2Class)?(this.closeLevel(s,s.parentNode),s.parentNode.classList.remove(this.levelOpenModifier)):(this.closeNav(s),a.classList.toggle("".concat(this.navClass,"-toggle--close")),a.setAttribute("aria-expanded","false"),a.setAttribute("aria-pressed","false"))),e.keyCode){case 32:case 37:case 38:case 39:case 40:e.preventDefault(),this.handleToggle(e)}}},Object.defineProperty(e,"__esModule",{value:!0}),e}({});

10

package.json
{
"name": "@uqds/site-header",
"version": "0.0.11-alpha.0",
"version": "0.0.12-alpha.0",
"description": "Site header (title, utility area, and navigation)",

@@ -43,5 +43,5 @@ "keywords": [

"dependencies": {
"@uqds/core": "^0.0.8-alpha.0",
"@uqds/grid": "^0.0.8-alpha.0",
"@uqds/icon": "^0.0.8-alpha.0"
"@uqds/core": "^0.0.12-alpha.0",
"@uqds/grid": "^0.0.12-alpha.0",
"@uqds/icon": "^0.0.12-alpha.0"
},

@@ -51,3 +51,3 @@ "devDependencies": {

},
"gitHead": "12e19c281540b6fc0be6f7d058c6e662c9ae11b2"
"gitHead": "125e487dfd2f7e46f2b29cc0e8646b92e61d6f2c"
}

4

README.md

@@ -10,2 +10,3 @@ # `@uqds/site-header`

With Yarn:
```shell

@@ -16,2 +17,3 @@ yarn add @uqds/site-header

With NPM:
```shell

@@ -32,2 +34,2 @@ npm i @uqds/site-header

└─ @uqds/core
```
```

6

src/js/main.js

@@ -1,4 +0,2 @@

import siteHeaderNavigation from './site-header-navigation';
export {
siteHeaderNavigation
};
import siteHeaderNavigation from "./site-header-navigation";
export { siteHeaderNavigation };

96

src/js/site-header-navigation.js

@@ -33,21 +33,21 @@ /**

const subNavL2Items = this.nav.querySelectorAll(
`.${this.level2Class} .${this.subNavClass}`,
`.${this.level2Class} .${this.subNavClass}`
);
const subNavL2Links = this.nav.querySelectorAll(
`.${this.level2Class} .${this.subNavClass} > a`,
`.${this.level2Class} .${this.subNavClass} > a`
);
const navLinks = this.nav.querySelectorAll('li > a');
const navLinks = this.nav.querySelectorAll("li > a");
const subNavToggles = this.nav.querySelectorAll(`.${this.subToggleClass}`);
mobileToggle.addEventListener('click', this.handleMobileToggle);
mobileToggle.addEventListener("click", this.handleMobileToggle);
subNavItems.forEach((item) => {
this.setOrientation(item);
item.addEventListener('mouseenter', this.handleToggle);
item.addEventListener('mouseleave', this.handleToggle);
item.addEventListener("mouseenter", this.handleToggle);
item.addEventListener("mouseleave", this.handleToggle);
});
subNavLinks.forEach((item) => {
if (window.matchMedia('(min-width: 1024px)').matches) {
item.addEventListener('touchend', this.handleToggle);
if (window.matchMedia("(min-width: 1024px)").matches) {
item.addEventListener("touchend", this.handleToggle);
}

@@ -58,16 +58,16 @@ });

this.setOrientation(item);
item.addEventListener('mouseenter', this.handleToggle);
item.addEventListener('mouseleave', this.handleToggle);
item.addEventListener("mouseenter", this.handleToggle);
item.addEventListener("mouseleave", this.handleToggle);
});
subNavL2Links.forEach((item) => {
item.addEventListener('touchend', this.handleToggle);
item.addEventListener("touchend", this.handleToggle);
});
navLinks.forEach((item) => {
item.addEventListener('keydown', this.handleKeyPress);
item.addEventListener("keydown", this.handleKeyPress);
});
subNavToggles.forEach((item) => {
item.addEventListener('click', this.handleToggle);
item.addEventListener("click", this.handleToggle);
});

@@ -79,13 +79,13 @@ }

const target = this.nav.querySelectorAll(`.${this.level1Class}`);
const ariaExpanded = toggle.getAttribute('aria-expanded') === 'true';
const ariaPressed = toggle.getAttribute('aria-pressed') === 'true';
const ariaExpanded = toggle.getAttribute("aria-expanded") === "true";
const ariaPressed = toggle.getAttribute("aria-pressed") === "true";
toggle.classList.toggle(`${this.navClass}-toggle--close`);
toggle.setAttribute('aria-expanded', !ariaExpanded);
toggle.setAttribute('aria-pressed', !ariaPressed);
toggle.setAttribute("aria-expanded", !ariaExpanded);
toggle.setAttribute("aria-pressed", !ariaPressed);
target.forEach((el) => {
el.classList.toggle(this.openModifier);
el.setAttribute('aria-expanded', !ariaExpanded);
el.setAttribute('aria-pressed', !ariaPressed);
el.setAttribute("aria-expanded", !ariaExpanded);
el.setAttribute("aria-pressed", !ariaPressed);
});

@@ -96,4 +96,4 @@ }

if (
(event.type === 'mouseenter' || event.type === 'mouseleave') &&
window.matchMedia('(max-width: 1024px)').matches
(event.type === "mouseenter" || event.type === "mouseleave") &&
window.matchMedia("(max-width: 1024px)").matches
) {

@@ -103,6 +103,6 @@ return;

let menuItem = event.target;
if (menuItem.tagName !== 'LI') {
if (menuItem.tagName !== "LI") {
menuItem = menuItem.parentElement;
}
const subNav = menuItem.querySelector('ul');
const subNav = menuItem.querySelector("ul");

@@ -112,3 +112,3 @@ if (subNav.classList.contains(this.openModifier)) {

} else {
if (event.type === 'touchend') {
if (event.type === "touchend") {
event.preventDefault();

@@ -124,5 +124,5 @@ }

menuItem.classList.add(this.levelOpenModifier);
menuItem.querySelector('a').setAttribute('aria-expanded', 'true');
menuItem.querySelector('button').setAttribute('aria-expanded', 'true');
menuItem.querySelector('button').setAttribute('aria-pressed', 'true');
menuItem.querySelector("a").setAttribute("aria-expanded", "true");
menuItem.querySelector("button").setAttribute("aria-expanded", "true");
menuItem.querySelector("button").setAttribute("aria-pressed", "true");
}

@@ -134,7 +134,11 @@

menuItem.classList.remove(this.levelOpenModifier);
menuItem.querySelector('a').setAttribute('aria-expanded', 'false');
menuItem.querySelector('button').setAttribute('aria-expanded', 'false');
menuItem.querySelector('button').setAttribute('aria-pressed', 'false');
menuItem.parentNode.querySelector('ul').setAttribute('aria-expanded', 'false');
menuItem.parentNode.querySelector('ul').setAttribute('aria-pressed', 'false');
menuItem.querySelector("a").setAttribute("aria-expanded", "false");
menuItem.querySelector("button").setAttribute("aria-expanded", "false");
menuItem.querySelector("button").setAttribute("aria-pressed", "false");
menuItem.parentNode
.querySelector("ul")
.setAttribute("aria-expanded", "false");
menuItem.parentNode
.querySelector("ul")
.setAttribute("aria-pressed", "false");
}

@@ -144,4 +148,8 @@

menuItem.classList.remove(this.openModifier);
menuItem.parentNode.querySelector('ul').setAttribute('aria-expanded', 'false');
menuItem.parentNode.querySelector('ul').setAttribute('aria-pressed', 'false');
menuItem.parentNode
.querySelector("ul")
.setAttribute("aria-expanded", "false");
menuItem.parentNode
.querySelector("ul")
.setAttribute("aria-pressed", "false");
}

@@ -174,6 +182,6 @@

const mobileToggle = document.querySelector(`.${this.toggleClass}`);
if (parent === nav.firstElementChild) {
// If we shift tab past the first child, toggle this level.
if (event.key === 'Tab' && event.shiftKey === true) {
if (event.key === "Tab" && event.shiftKey === true) {
if (nav.classList.contains(this.level2Class)) {

@@ -183,6 +191,6 @@ this.closeLevel(nav, nav.parentNode, subNav);

} else {
this.closeNav(nav);
this.closeNav(nav);
mobileToggle.classList.toggle(`${this.navClass}-toggle--close`);
mobileToggle.setAttribute('aria-expanded', 'false');
mobileToggle.setAttribute('aria-pressed', 'false');
mobileToggle.setAttribute("aria-expanded", "false");
mobileToggle.setAttribute("aria-pressed", "false");
}

@@ -192,3 +200,3 @@ }

// If we tab past the last child, toggle this level.
if (event.key === 'Tab' && event.shiftKey === false) {
if (event.key === "Tab" && event.shiftKey === false) {
if (nav.classList.contains(this.level2Class)) {

@@ -198,6 +206,6 @@ this.closeLevel(nav, nav.parentNode);

} else {
this.closeNav(nav);
this.closeNav(nav);
mobileToggle.classList.toggle(`${this.navClass}-toggle--close`);
mobileToggle.setAttribute('aria-expanded', 'false');
mobileToggle.setAttribute('aria-pressed', 'false');
mobileToggle.setAttribute("aria-expanded", "false");
mobileToggle.setAttribute("aria-pressed", "false");
}

@@ -223,2 +231,2 @@ }

export {MainNavigation as default};
export { MainNavigation as default };
dist/css/main.css

Sorry, the diff of this file is not supported yet

src/scss/_component.scss

Sorry, the diff of this file is not supported yet

src/scss/main.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc