@salesforcedevs/mrkt-components 0.41.0-alpha.6 → 0.41.0-alpha.9
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/package.json
CHANGED
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
align-items: center;
|
|
36
36
|
width: 100%;
|
|
37
37
|
text-align: center;
|
|
38
|
-
z-index:
|
|
38
|
+
z-index: 3;
|
|
39
39
|
padding: 0 var(--dx-g-page-padding-horizontal);
|
|
40
40
|
}
|
|
41
41
|
|
|
@@ -65,7 +65,7 @@ span {
|
|
|
65
65
|
display: flex;
|
|
66
66
|
flex-direction: row;
|
|
67
67
|
justify-content: space-between;
|
|
68
|
-
z-index:
|
|
68
|
+
z-index: 2;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
img {
|
|
@@ -6,6 +6,8 @@ import { toJson } from "utils/normalizers";
|
|
|
6
6
|
|
|
7
7
|
export default class SubNavBar extends MatchMediaElement {
|
|
8
8
|
@api subscribeHref!: string;
|
|
9
|
+
@api containerId: string = "body";
|
|
10
|
+
@api showAtId?: string;
|
|
9
11
|
|
|
10
12
|
@api
|
|
11
13
|
get navItems() {
|
|
@@ -31,6 +33,15 @@ export default class SubNavBar extends MatchMediaElement {
|
|
|
31
33
|
| {} = {};
|
|
32
34
|
private sectionsObserver!: IntersectionObserver;
|
|
33
35
|
|
|
36
|
+
private get containerElement(): HTMLElement {
|
|
37
|
+
return document.getElementById(this.containerId) as HTMLElement;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
private get showAtElement(): HTMLElement {
|
|
41
|
+
const id = this.showAtId || this.hashIds[0];
|
|
42
|
+
return document.getElementById(id) as HTMLElement;
|
|
43
|
+
}
|
|
44
|
+
|
|
34
45
|
private get className(): string {
|
|
35
46
|
return cx("subnav", !this.isVisible && "hide");
|
|
36
47
|
}
|
|
@@ -66,19 +77,18 @@ export default class SubNavBar extends MatchMediaElement {
|
|
|
66
77
|
super.connectedCallback();
|
|
67
78
|
this.observeSectionIntersections();
|
|
68
79
|
this.onPageScroll();
|
|
69
|
-
|
|
80
|
+
this.containerElement?.addEventListener("scroll", this.onPageScroll);
|
|
70
81
|
}
|
|
71
82
|
|
|
72
83
|
disconnectedCallback(): void {
|
|
73
84
|
super.disconnectedCallback();
|
|
74
85
|
this.sectionsObserver.disconnect();
|
|
75
|
-
|
|
86
|
+
this.containerElement?.removeEventListener("scroll", this.onPageScroll);
|
|
76
87
|
}
|
|
77
88
|
|
|
78
89
|
private onPageScroll = () => {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
this.isVisible = firstSection.getBoundingClientRect().y <= 1;
|
|
90
|
+
if (this.showAtElement) {
|
|
91
|
+
this.isVisible = this.showAtElement.getBoundingClientRect().y <= 1;
|
|
82
92
|
}
|
|
83
93
|
};
|
|
84
94
|
|
|
@@ -106,7 +116,7 @@ export default class SubNavBar extends MatchMediaElement {
|
|
|
106
116
|
}
|
|
107
117
|
|
|
108
118
|
private scrollToTop() {
|
|
109
|
-
|
|
119
|
+
this.containerElement.scroll({
|
|
110
120
|
top: 0,
|
|
111
121
|
left: 0,
|
|
112
122
|
behavior: "smooth"
|