@salesforcedevs/mrkt-components - npm Package Compare versions

Comparing version 0.73.0 to 0.74.0-alpha01

package.json

 {
     "name": "@salesforcedevs/mrkt-components",
-    "version": "0.73.0",
+    "version": "0.74.0-alpha01",
     "description": "Marketing Lightning web components for DSC",
@@ -17,4 +17,3 @@ "license": "MIT",
         "@types/classnames": "^2.2.10"
-    },
-    "gitHead": "d00cb2ff48d311a87d986d317c78b8a026a0b055"
+    }
 }

src/modules/mrkt/subNavBar/subNavBar.ts

@@ -7,17 +7,14 @@ import { api } from "lwc";
 
+const SECTION_OBSERVER_OPTIONS = {
+    root: document,
+    threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
+};
+
 export default class SubNavBar extends MatchMediaElement {
     @api subscribeHref!: string;
     @api containerQuery: string = "body";
-    @api showAtId?: string;
 
     @api
     get navItems() {
-        return this._navItems.map((item) => ({
-            ...item,
-            className: cx(
-                "nav-item",
-                "dx-text-heading-6",
-                this.activeHash === item?.link?.href && "active"
-            )
-        }));
+        return this._navItems.map(this.normalizeItem);
     }
@@ -29,3 +26,2 @@ set navItems(value) {
     private _navItems!: OptionWithLink[];
-    private isVisible: boolean = false;
     private sectionIntersectionEntryMap:
@@ -37,2 +33,3 @@ | {
     private sectionsObserver!: IntersectionObserver;
+    private stickyNavObserver!: IntersectionObserver;
 
@@ -43,11 +40,2 @@ private get containerElement(): HTMLElement {
 
-    private get showAtElement(): HTMLElement {
-        const id = this.showAtId || this.hashIds[0];
-        return document.getElementById(id) as HTMLElement;
-    }
-
-    private get className(): string {
-        return cx("subnav", !this.isVisible && "hide");
-    }
-
     private get hashIds(): string[] {
@@ -83,23 +71,41 @@ return this.navItems.map((item: OptionWithLink) =>
         this.observeSectionIntersections();
-        this.onPageScroll();
-        this.containerElement?.addEventListener("scroll", this.onPageScroll);
     }
 
+    renderedCallback(): void {
+        this.observeStickyNav();
+    }
+
     disconnectedCallback(): void {
         super.disconnectedCallback();
         this.sectionsObserver.disconnect();
-        this.containerElement?.removeEventListener("scroll", this.onPageScroll);
+        this.stickyNavObserver.disconnect();
     }
 
-    private onPageScroll = () => {
-        if (this.showAtElement) {
-            this.isVisible = this.showAtElement.getBoundingClientRect().y <= 1;
+    normalizeItem = (item: OptionWithLink) => ({
+        ...item,
+        className: cx(
+            "nav-item",
+            "dx-text-heading-6",
+            this.activeHash === item?.link?.href && "active"
+        )
+    });
+
+    private observeStickyNav() {
+        const el = this.template.querySelector(".subnav");
+        if (el && !this.stickyNavObserver) {
+            this.stickyNavObserver = new IntersectionObserver(
+                ([e]) => {
+                    console.log("heyyyy", e.intersectionRatio < 1);
+                    e.target.classList.toggle(
+                        "is-sticky",
+                        e.intersectionRatio < 1
+                    );
+                },
+                { threshold: [1] }
+            );
+            this.stickyNavObserver.observe(el);
         }
-    };
+    }
 
     private observeSectionIntersections() {
-        const observerOptions = {
-            root: document,
-            threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
-        };
         this.sectionsObserver = new IntersectionObserver(
@@ -113,3 +119,3 @@ (entries) =>
                 }),
-            observerOptions
+            SECTION_OBSERVER_OPTIONS
         );
@@ -116,0 +122,0 @@ this.hashIds.forEach((id) => {

Fixed alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

636338

decreased by-56.37%

No dependency changes