@uqds/site-header - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2-alpha.0

dist/js/uqds.js

@@ -1,4 +0,2 @@
-"use strict";
-
-var uq = function (exports) {
+var uq = (function (exports) {
   'use strict';
@@ -10,2 +8,3 @@
    */
+
   class MainNavigation {
@@ -15,10 +14,10 @@ constructor(nav, navClass) {
       this.navClass = navClass;
-      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.toggleClass = `jsNavToggle`;
+      this.openModifier = `${this.navClass}__list--open`;
+      this.levelOpenModifier = `${this.navClass}__list-item--open`;
+      this.level1Class = `${this.navClass}__list--level-1`;
+      this.level2Class = `${this.navClass}__list--level-2`;
+      this.reverseClass = `${this.navClass}__list--reverse`;
+      this.subNavClass = `${this.navClass}__list-item--has-subnav`;
+      this.subToggleClass = `${this.navClass}__sub-toggle`;
       this.init = this.init.bind(this);
@@ -32,9 +31,9 @@ this.handleToggle = this.handleToggle.bind(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 mobileToggle = document.querySelector(`.${this.toggleClass}`);
+      const subNavItems = this.nav.querySelectorAll(`.${this.subNavClass}`);
+      const subNavLinks = this.nav.querySelectorAll(`.${this.subNavClass} > a`);
+      const subNavL2Items = this.nav.querySelectorAll(`.${this.level2Class} .${this.subNavClass}`);
+      const subNavL2Links = this.nav.querySelectorAll(`.${this.level2Class} .${this.subNavClass} > a`);
       const navLinks = this.nav.querySelectorAll("li > a");
-      const subNavToggles = this.nav.querySelectorAll(".".concat(this.subToggleClass));
+      const subNavToggles = this.nav.querySelectorAll(`.${this.subToggleClass}`);
       mobileToggle.addEventListener("click", this.handleMobileToggle);
@@ -68,6 +67,6 @@ subNavItems.forEach(item => {
       const toggle = event.target;
-      const target = this.nav.querySelectorAll(".".concat(this.level1Class));
+      const target = this.nav.querySelectorAll(`.${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.classList.toggle(`${this.navClass}-toggle--close`);
       toggle.setAttribute("aria-expanded", !ariaExpanded);
@@ -123,5 +122,5 @@ toggle.setAttribute("aria-pressed", !ariaPressed);
     closeAllLevels() {
-      const levels = this.nav.querySelectorAll(".".concat(this.subNavClass));
+      const levels = this.nav.querySelectorAll(`.${this.subNavClass}`);
       levels.forEach(level => {
-        const item = level.querySelector(".".concat(this.level2Class));
+        const item = level.querySelector(`.${this.level2Class}`);
         this.closeLevel(item, level);
@@ -131,3 +130,3 @@ });
     setOrientation(item) {
-      const subNav = item.querySelector(".".concat(this.level2Class));
+      const subNav = item.querySelector(`.${this.level2Class}`);
       const {
@@ -147,3 +146,3 @@ reverseClass
       const nav = parent.parentNode;
-      const mobileToggle = document.querySelector(".".concat(this.toggleClass));
+      const mobileToggle = document.querySelector(`.${this.toggleClass}`);
       if (parent === nav.firstElementChild) {
@@ -157,3 +156,3 @@ // If we shift tab past the first child, toggle this level.
             this.closeNav(nav);
-            mobileToggle.classList.toggle("".concat(this.navClass, "-toggle--close"));
+            mobileToggle.classList.toggle(`${this.navClass}-toggle--close`);
             mobileToggle.setAttribute("aria-expanded", "false");
@@ -171,3 +170,3 @@ mobileToggle.setAttribute("aria-pressed", "false");
             this.closeNav(nav);
-            mobileToggle.classList.toggle("".concat(this.navClass, "-toggle--close"));
+            mobileToggle.classList.toggle(`${this.navClass}-toggle--close`);
             mobileToggle.setAttribute("aria-expanded", "false");
@@ -192,4 +191,7 @@ mobileToggle.setAttribute("aria-pressed", "false");
   }
+
   exports.siteHeaderNavigation = MainNavigation;
+
   return exports;
-}({});
+
+})({});

dist/js/uqds.min.js

@@ -1,1 +0,1 @@
-"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(){var 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"),r=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)}),r.forEach(e=>{e.addEventListener("click",this.handleToggle)})}handleMobileToggle(e){var e=e.target,t=this.nav.querySelectorAll(".".concat(this.level1Class));const s="true"===e.getAttribute("aria-expanded"),a="true"===e.getAttribute("aria-pressed");e.classList.toggle("".concat(this.navClass,"-toggle--close")),e.setAttribute("aria-expanded",!s),e.setAttribute("aria-pressed",!a),t.forEach(e=>{e.classList.toggle(this.openModifier),e.setAttribute("aria-expanded",!s),e.setAttribute("aria-pressed",!a)})}handleToggle(t){if("mouseenter"!==t.type&&"mouseleave"!==t.type||!window.matchMedia("(max-width: 1024px)").matches){let e=t.target;var 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(){this.nav.querySelectorAll(".".concat(this.subNavClass)).forEach(e=>{var t=e.querySelector(".".concat(this.level2Class));this.closeLevel(t,e)})}setOrientation(e){var e=e.querySelector(".".concat(this.level2Class)),t=this["reverseClass"];let s=0;e&&e.getBoundingClientRect()&&(s=e.getBoundingClientRect().right),window.innerWidth<s&&e.classList.add(t)}handleKeyPress(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)}}},e}({});
+var uq=function(e){"use strict";return e.siteHeaderNavigation=class{constructor(e,t){this.nav=e,this.navClass=t,this.toggleClass="jsNavToggle",this.openModifier=this.navClass+"__list--open",this.levelOpenModifier=this.navClass+"__list-item--open",this.level1Class=this.navClass+"__list--level-1",this.level2Class=this.navClass+"__list--level-2",this.reverseClass=this.navClass+"__list--reverse",this.subNavClass=this.navClass+"__list-item--has-subnav",this.subToggleClass=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(){var e=document.querySelector("."+this.toggleClass),t=this.nav.querySelectorAll("."+this.subNavClass),s=this.nav.querySelectorAll(`.${this.subNavClass} > a`),i=this.nav.querySelectorAll(`.${this.level2Class} .`+this.subNavClass),a=this.nav.querySelectorAll(`.${this.level2Class} .${this.subNavClass} > a`),l=this.nav.querySelectorAll("li > a"),r=this.nav.querySelectorAll("."+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)}),i.forEach(e=>{this.setOrientation(e),e.addEventListener("mouseenter",this.handleToggle),e.addEventListener("mouseleave",this.handleToggle)}),a.forEach(e=>{e.addEventListener("touchend",this.handleToggle)}),l.forEach(e=>{e.addEventListener("keydown",this.handleKeyPress)}),r.forEach(e=>{e.addEventListener("click",this.handleToggle)})}handleMobileToggle(e){var e=e.target,t=this.nav.querySelectorAll("."+this.level1Class);const s="true"===e.getAttribute("aria-expanded"),i="true"===e.getAttribute("aria-pressed");e.classList.toggle(this.navClass+"-toggle--close"),e.setAttribute("aria-expanded",!s),e.setAttribute("aria-pressed",!i),t.forEach(e=>{e.classList.toggle(this.openModifier),e.setAttribute("aria-expanded",!s),e.setAttribute("aria-pressed",!i)})}handleToggle(t){if("mouseenter"!==t.type&&"mouseleave"!==t.type||!window.matchMedia("(max-width: 1024px)").matches){let e=t.target;var 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(){this.nav.querySelectorAll("."+this.subNavClass).forEach(e=>{var t=e.querySelector("."+this.level2Class);this.closeLevel(t,e)})}setOrientation(e){var e=e.querySelector("."+this.level2Class),t=this["reverseClass"];let s=0;e&&e.getBoundingClientRect()&&(s=e.getBoundingClientRect().right),window.innerWidth<s&&e.classList.add(t)}handleKeyPress(e){var t=e.currentTarget.parentNode,s=t.parentNode,i=document.querySelector("."+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),i.classList.toggle(this.navClass+"-toggle--close"),i.setAttribute("aria-expanded","false"),i.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),i.classList.toggle(this.navClass+"-toggle--close"),i.setAttribute("aria-expanded","false"),i.setAttribute("aria-pressed","false"))),e.keyCode){case 32:case 37:case 38:case 39:case 40:e.preventDefault(),this.handleToggle(e)}}},e}({});

package.json

 {
   "name": "@uqds/site-header",
-  "version": "1.1.1",
+  "version": "1.1.2-alpha.0",
   "description": "Site header (title, utility area, and navigation)",
@@ -43,5 +43,5 @@ "keywords": [
   "dependencies": {
-    "@uqds/core": "^1.1.1",
-    "@uqds/grid": "^0.0.15-alpha.0",
-    "@uqds/icon": "^0.0.15-alpha.0"
+    "@uqds/core": "^1.1.2-alpha.0",
+    "@uqds/grid": "^0.0.15-alpha.1",
+    "@uqds/icon": "^0.0.15-alpha.1"
   },
@@ -51,3 +51,3 @@ "devDependencies": {
   },
-  "gitHead": "55517dc3f2d44fb5d354f4a9344e66dca2835943"
+  "gitHead": "7bc2907aa0e1240b884da2cb260591deff3ab811"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45096

increased by17.1%

Number of package files

11

increased by10%

Lines of code

552

increased by47.2%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@uqds/core@^1.1.2-alpha.0

• Updated@uqds/grid@^0.0.15-alpha.1

• Updated@uqds/icon@^0.0.15-alpha.1