@pacem/pacem-core 1.0.0-banach → 1.0.0-bessel

package/dist/browser/pacem-core.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-core v1.0.0-banach (https://js.pacem.it)
+ * @pacem/pacem-core v1.0.0-bessel (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -1048,6 +1048,13 @@
         static set scrollLeft(x) {
             window.scrollTo(x, Utils.scrollTop);
         }
+        static scrollTo(x, y = true, smooth = true) {
+            const yFirst = Utils.isNull(y) || typeof y === 'boolean';
+            const left = yFirst ? Utils.scrollLeft : x;
+            const top = yFirst ? x : y;
+            const behavior = (yFirst ? y : smooth) ? 'smooth' : 'instant';
+            window.scrollTo({ behavior, left, top });
+        }
         static get scrollTop() {
             return window.scrollY /*window.pageYOffset*/ || document.documentElement.scrollTop || document.body.scrollTop || 0;
         }
@@ -1490,6 +1497,20 @@
             super(PropertyChangeEventName, args);
         }
     }
+    // #region NAVIGATING
+    const RouterNavigatingEventName = 'navigating';
+    const RouterNavigateEventName = 'navigate';
+    class RouterNavigateEvent extends CustomTypedEvent {
+        constructor(path) {
+            super(RouterNavigateEventName, typeof path === 'string' ? { path } : path, { cancelable: false, bubbles: false });
+        }
+    }
+    class RouterNavigatingEvent extends CustomTypedEvent {
+        constructor(path) {
+            super(RouterNavigatingEventName, path, { cancelable: true, bubbles: false });
+        }
+    }
+    // #endregion
     //}
 
     class AnimationEvent extends CustomTypedEvent {
@@ -6152,28 +6173,24 @@
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     };
-    //namespace Pacem {
-    const RouterNavigatingEventName = 'navigating';
-    const RouterNavigateEventName = 'navigate';
-    class RouterNavigateEvent extends CustomTypedEvent {
-        constructor(path) {
-            super(RouterNavigateEventName, typeof path === 'string' ? { path } : path, { cancelable: false, bubbles: false });
-        }
-    }
-    class RouterNavigatingEvent extends CustomTypedEvent {
-        constructor(path) {
-            super(RouterNavigatingEventName, path, { cancelable: true, bubbles: false });
-        }
-    }
-    //}
     //namespace Pacem.Components {
     const CHECK_PATTERN = /^([\w\.]:)?\/\/[^\/]+/;
     let PacemRouterElement = class PacemRouterElement extends PacemEventTarget {
         constructor() {
             super(...arguments);
+            this._onScroll = (e) => {
+                const scrollRestoration = this.scrollRestoration ?? true;
+                if (!scrollRestoration) {
+                    return;
+                }
+                const y = Math.floor(Utils.scrollTop);
+                window.history.replaceState(Utils.extend({}, window.history.state, { $scrollY: y }), document.title);
+            };
             this._onPopState = (evt) => {
                 if (!Utils.isNull(evt.state) && !this.#cancelingNavigation) {
-                    this.path = evt.state.$path;
+                    const state = evt.state;
+                    // navigate and scroll, just in case
+                    this.path = state.$path;
                 }
             };
         }
@@ -6225,14 +6242,18 @@
                     // exiting
                     return;
                 }
+                const newState = !poppingState
+                    ? Utils.extend({ $scrollY: 0 }, state)
+                    : Utils.extend({ $scrollY: 0 }, window.history.state /* < may include `$scrollY` */, state);
                 // this one actually does trigger the navigation in the outer world
-                this.state = state;
+                // 'cause it is usually bound to a PacemViewElement 'url'
+                this.state = newState;
+                window.history.scrollRestoration = (this.scrollRestoration ?? true) ? 'manual' : 'auto';
                 if (poppingState) {
-                    window.history.scrollRestoration = 'manual';
-                    window.history.replaceState(state, title);
+                    window.history.replaceState(newState, document.title);
                 }
                 else {
-                    window.history.pushState(state, title, path);
+                    window.history.pushState(newState, title, path);
                 }
                 if (!Utils.isNullOrEmpty(title)) {
                     document.title = title;
@@ -6257,6 +6278,7 @@
         connectedCallback() {
             super.connectedCallback();
             window.addEventListener('popstate', this._onPopState, false);
+            document.addEventListener('scroll', this._onScroll, false);
         }
         viewActivatedCallback() {
             super.viewActivatedCallback();
@@ -6266,6 +6288,7 @@
             }
         }
         disconnectedCallback() {
+            document.removeEventListener('scroll', this._onScroll, false);
             window.removeEventListener('popstate', this._onPopState, false);
             super.disconnectedCallback();
         }
@@ -6320,6 +6343,9 @@
     __decorate$l([
         Watch({ emit: false, converter: PropertyConverters.String })
     ], PacemRouterElement.prototype, "path", void 0);
+    __decorate$l([
+        Watch({ emit: false, reflectBack: true, converter: PropertyConverters.Boolean })
+    ], PacemRouterElement.prototype, "scrollRestoration", void 0);
     PacemRouterElement = __decorate$l([
         CustomElement({ tagName: P + '-router' })
     ], PacemRouterElement);
@@ -8762,10 +8788,6 @@
         RepeaterItemRemoveEventName: RepeaterItemRemoveEventName,
         ResizeEvent: ResizeEvent,
         ResizeEventName: ResizeEventName,
-        RouterNavigateEvent: RouterNavigateEvent,
-        RouterNavigateEventName: RouterNavigateEventName,
-        RouterNavigatingEvent: RouterNavigatingEvent,
-        RouterNavigatingEventName: RouterNavigatingEventName,
         ScrollEvent: ScrollEvent,
         ScrollEventName: ScrollEventName,
         StateEvent: StateEvent,
@@ -9097,6 +9119,10 @@
         Regex: Regex,
         Repeater: Repeater,
         RepeaterItem: RepeaterItem$1,
+        RouterNavigateEvent: RouterNavigateEvent,
+        RouterNavigateEventName: RouterNavigateEventName,
+        RouterNavigatingEvent: RouterNavigatingEvent,
+        RouterNavigatingEventName: RouterNavigatingEventName,
         Storage: Storage,
         TemplateElement: TemplateElement,
         Throttle: Throttle,