@design.estate/dees-wcctools 1.0.98 → 1.0.100

package/dist_bundle/bundle.js

@@ -43571,6 +43571,9 @@ var WccDashboard2 = class extends DeesElement {
     this.pages = {};
     this.elements = {};
     this.warning = null;
+    this.frameScrollY = 0;
+    this.sidebarScrollY = 0;
+    this.scrollPositionsApplied = false;
     if (elementsArg) {
       this.elements = elementsArg;
       console.log("got elements:");
@@ -43634,6 +43637,9 @@ var WccDashboard2 = class extends DeesElement {
   }
   async firstUpdated() {
     this.domtools = await dist_ts_exports27.DomTools.setupDomTools();
+    setTimeout(() => {
+      this.setupScrollListeners();
+    }, 500);
     this.domtools.router.on(
       "/wcctools-route/:itemType/:itemName/:viewport/:theme",
       async (routeInfo) => {
@@ -43646,6 +43652,19 @@ var WccDashboard2 = class extends DeesElement {
         } else if (routeInfo.params.itemType === "page") {
           this.selectedItem = this.pages[routeInfo.params.itemName];
         }
+        if (routeInfo.queryParams) {
+          const frameScrollY = routeInfo.queryParams.frameScrollY;
+          const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          if (frameScrollY) {
+            this.frameScrollY = parseInt(frameScrollY);
+          }
+          if (sidebarScrollY) {
+            this.sidebarScrollY = parseInt(sidebarScrollY);
+          }
+          setTimeout(() => {
+            this.applyScrollPositions();
+          }, 100);
+        }
         const domtoolsInstance = await dist_ts_exports27.elementBasic.setup();
         this.selectedTheme === "bright" ? domtoolsInstance.themeManager.goBright() : domtoolsInstance.themeManager.goDark();
       }
@@ -43654,7 +43673,6 @@ var WccDashboard2 = class extends DeesElement {
   async updated(changedPropertiesArg) {
     this.domtools = await dist_ts_exports27.DomTools.setupDomTools();
     await this.domtools.router._handleRouteState();
-    const storeElement = this.selectedItem;
     const wccFrame = this.shadowRoot.querySelector("wcc-frame");
     if (changedPropertiesArg.has("selectedItemName")) {
       document.title = this.selectedItemName;
@@ -43690,9 +43708,66 @@ var WccDashboard2 = class extends DeesElement {
     }
   }
   buildUrl() {
-    this.domtools.router.pushUrl(
-      `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`
-    );
+    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`;
+    const queryParams = new URLSearchParams();
+    if (this.frameScrollY > 0) {
+      queryParams.set("frameScrollY", this.frameScrollY.toString());
+    }
+    if (this.sidebarScrollY > 0) {
+      queryParams.set("sidebarScrollY", this.sidebarScrollY.toString());
+    }
+    const queryString = queryParams.toString();
+    const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
+    this.domtools.router.pushUrl(fullUrl);
+  }
+  async setupScrollListeners() {
+    const wccFrame = await this.wccFrame;
+    const wccSidebar = this.shadowRoot.querySelector("wcc-sidebar");
+    if (wccFrame) {
+      wccFrame.addEventListener("scroll", () => {
+        this.frameScrollY = wccFrame.scrollTop;
+        this.debouncedScrollUpdate();
+      });
+    }
+    if (wccSidebar) {
+      wccSidebar.addEventListener("scroll", () => {
+        this.sidebarScrollY = wccSidebar.scrollTop;
+        this.debouncedScrollUpdate();
+      });
+    }
+  }
+  debouncedScrollUpdate() {
+    clearTimeout(this.scrollUpdateTimeout);
+    this.scrollUpdateTimeout = setTimeout(() => {
+      this.updateUrlWithScrollState();
+    }, 300);
+  }
+  updateUrlWithScrollState() {
+    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`;
+    const queryParams = new URLSearchParams();
+    if (this.frameScrollY > 0) {
+      queryParams.set("frameScrollY", this.frameScrollY.toString());
+    }
+    if (this.sidebarScrollY > 0) {
+      queryParams.set("sidebarScrollY", this.sidebarScrollY.toString());
+    }
+    const queryString = queryParams.toString();
+    const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
+    window.history.replaceState(null, "", fullUrl);
+  }
+  async applyScrollPositions() {
+    if (this.scrollPositionsApplied) {
+      return;
+    }
+    const wccFrame = await this.wccFrame;
+    const wccSidebar = this.shadowRoot.querySelector("wcc-sidebar");
+    if (wccFrame && this.frameScrollY > 0) {
+      wccFrame.scrollTop = this.frameScrollY;
+    }
+    if (wccSidebar && this.sidebarScrollY > 0) {
+      wccSidebar.scrollTop = this.sidebarScrollY;
+    }
+    this.scrollPositionsApplied = true;
   }
 };
 __decorateClass([
@@ -43719,6 +43794,12 @@ __decorateClass([
 __decorateClass([
   n4()
 ], WccDashboard2.prototype, "warning", 2);
+__decorateClass([
+  n4()
+], WccDashboard2.prototype, "frameScrollY", 2);
+__decorateClass([
+  n4()
+], WccDashboard2.prototype, "sidebarScrollY", 2);
 __decorateClass([
   r6("wcc-frame")
 ], WccDashboard2.prototype, "wccFrame", 2);