@uqds/header 7.0.4 → 7.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/js/uqds-new.js +76 -0
- package/package.json +4 -4
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
var uq = (function (exports) {
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* NewHeader module
|
|
6
|
+
* @file Handles interaction behaviour for the Header. Does not output any
|
|
7
|
+
* HTML elements.
|
|
8
|
+
* TODO: make this class configurable
|
|
9
|
+
*/
|
|
10
|
+
class NewHeader {
|
|
11
|
+
constructor(el) {
|
|
12
|
+
this.init(el);
|
|
13
|
+
}
|
|
14
|
+
init(el) {
|
|
15
|
+
this.menuToggle = el.querySelector(".nav-primary__menu-toggle");
|
|
16
|
+
this.searchToggle = el.querySelector(".nav-primary__search-toggle");
|
|
17
|
+
this.searchLabel = el.querySelector(".search-toggle__label");
|
|
18
|
+
this.searchBlock = el.querySelector(".uq-header__search");
|
|
19
|
+
this.searchInput = el.querySelector(".uq-header__search-query-input");
|
|
20
|
+
this.menuToggle.addEventListener("click", () => {
|
|
21
|
+
document.body.classList.toggle("no-scroll");
|
|
22
|
+
this.menuToggle.classList.toggle("nav-primary__menu-toggle--is-open");
|
|
23
|
+
this.searchToggle.classList.remove("nav-primary__search-toggle--is-open");
|
|
24
|
+
this.searchBlock.classList.remove("uq-header__search--is-open");
|
|
25
|
+
this.searchLabel.innerHTML = "Search";
|
|
26
|
+
});
|
|
27
|
+
this.searchToggle.addEventListener("click", e => {
|
|
28
|
+
document.body.classList.remove("no-scroll");
|
|
29
|
+
this.searchToggle.classList.toggle("nav-primary__search-toggle--is-open");
|
|
30
|
+
this.searchBlock.classList.toggle("uq-header__search--is-open");
|
|
31
|
+
this.menuToggle.classList.remove("nav-primary__menu-toggle--is-open");
|
|
32
|
+
if (this.searchBlock.classList.contains("uq-header__search--is-open")) {
|
|
33
|
+
this.searchInput.focus();
|
|
34
|
+
} else {
|
|
35
|
+
this.searchInput.blur();
|
|
36
|
+
this.searchToggle.blur();
|
|
37
|
+
}
|
|
38
|
+
if (this.searchLabel.innerHTML === "Search") {
|
|
39
|
+
this.searchLabel.innerHTML = "Close";
|
|
40
|
+
} else {
|
|
41
|
+
this.searchLabel.innerHTML = "Search";
|
|
42
|
+
}
|
|
43
|
+
e.preventDefault();
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
// megamenu
|
|
47
|
+
const megaMenuItem = document.querySelectorAll(".uq-header__nav-primary-item");
|
|
48
|
+
megaMenuItem.forEach(item => {
|
|
49
|
+
item.addEventListener("mouseenter", this.handleToggle);
|
|
50
|
+
item.addEventListener("mouseleave", this.handleToggle);
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
handleToggle(event) {
|
|
54
|
+
let menuItem = event.target;
|
|
55
|
+
if (menuItem.tagName !== "LI") {
|
|
56
|
+
menuItem = menuItem.parentElement;
|
|
57
|
+
}
|
|
58
|
+
menuItem.eventType = event.type;
|
|
59
|
+
window.setTimeout(function () {
|
|
60
|
+
if ((event.type === "mouseenter" || event.type === "mouseleave") && window.matchMedia("(max-width: 1024px)").matches) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
if (menuItem.eventType === "mouseenter") {
|
|
64
|
+
menuItem.classList.add("uq-header__nav-primary-item--is-open");
|
|
65
|
+
} else {
|
|
66
|
+
menuItem.classList.remove("uq-header__nav-primary-item--is-open");
|
|
67
|
+
}
|
|
68
|
+
}, 250);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
exports.header = NewHeader;
|
|
73
|
+
|
|
74
|
+
return exports;
|
|
75
|
+
|
|
76
|
+
})({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/header",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.5",
|
|
4
4
|
"description": "The POC UQ Header component package",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -49,12 +49,12 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@uqds/core": "^5.0.0",
|
|
52
|
-
"@uqds/form": "^4.0.
|
|
52
|
+
"@uqds/form": "^4.0.3",
|
|
53
53
|
"@uqds/grid": "^4.0.0",
|
|
54
|
-
"@uqds/icon": "^4.0.
|
|
54
|
+
"@uqds/icon": "^4.0.3"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
57
|
"gulp": "^5.0.0"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "c6607491a533580204535961d2a3b4b94baf4cf1"
|
|
60
60
|
}
|