@pacem/pacem 1.0.0-euler → 1.0.0-galois

package/dist/browser/pacem-ui.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem v1.0.0-euler (https://js.pacem.it)
+ * @pacem/pacem v1.0.0-galois (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -4508,44 +4508,14 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         constructor() {
             super(...arguments);
             this._onPathChange = (evt) => {
-                const menu = this._menu, path = (evt && evt.detail) || window.location.pathname;
-                if (pacemCore.Utils.isNull(menu)) {
-                    this.log(pacemCore.Logging.LogLevel.Warn, `Couldn't find a ${PacemMenuElement} ancestor for this ${PacemMenuCursorElement_1}.`);
-                    return;
-                }
-                // 1. try to find a matching PacemAnchorElement
-                var anchors = menu.querySelectorAll(pacemCore.P + '-a');
-                var tget = null;
-                for (let j = 0; j < anchors.length; j++) {
-                    let a = anchors.item(j);
-                    if (a.href === path) {
-                        tget = a;
-                        break;
-                    }
-                }
-                if (pacemCore.Utils.isNull(tget)) {
-                    // 2. try with real HTMLAnchorElement
-                    tget = menu.querySelector(`a[href='${path}']`);
-                }
-                if (!pacemCore.Utils.isNull(tget)) {
-                    // TODO: use transforms (remove width/height/top/... animations)
-                    // TODO: consider <nav> scrollTop
-                    const rect = pacemCore.Utils.offset(tget);
-                    const rectMenu = pacemCore.Utils.offset(menu);
-                    this.style.top = rect.top + 'px';
-                    this.style.left = rectMenu.left + 'px';
-                    this.style.width = '0';
-                    this.style.height = rect.height + 'px';
-                    pacemCore.Utils.addAnimationEndCallback(this, () => {
-                        this.style.width = (rect.width + rect.left - rectMenu.left) + 'px';
-                    }, 500);
-                }
+                const path = evt?.detail.path;
+                this._findAnchorAndScrollItIntoView(path);
             };
         }
         viewActivatedCallback() {
             super.viewActivatedCallback();
             this._menu = pacemCore.CustomElementUtils.findAncestorOfType(this, PacemMenuElement);
-            this._onPathChange();
+            this._findAnchorAndScrollItIntoView();
         }
         connectedCallback() {
             super.connectedCallback();
@@ -4556,6 +4526,49 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
             window.removeEventListener('navigate', this._onPathChange, false);
             super.disconnectedCallback();
         }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (first) {
+                return;
+            }
+            switch (name) {
+                case 'disabled':
+                    this._findAnchorAndScrollItIntoView();
+                    break;
+            }
+        }
+        _findAnchorAndScrollItIntoView(path = window.location.pathname) {
+            if (this.disabled) {
+                return;
+            }
+            const menu = this._menu;
+            if (pacemCore.Utils.isNull(menu)) {
+                this.log(pacemCore.Logging.LogLevel.Warn, `Couldn't find a ${PacemMenuElement} ancestor for this ${PacemMenuCursorElement_1}.`);
+                return;
+            }
+            // 1. try to find a matching PacemAnchorElement
+            const anchors = menu.querySelectorAll(pacemCore.P + '-a');
+            let tget = null;
+            for (let j = 0; j < anchors.length; j++) {
+                const a = anchors.item(j);
+                const router = a.router;
+                let href = pacemCore.Utils.isNull(router)
+                    ? a.href
+                    : /* build fully formatted href, it might contain placeholders */ pacemCore.Utils.URIs.format(a.href, router.state);
+                if (href === path) {
+                    tget = a;
+                    break;
+                }
+            }
+            if (pacemCore.Utils.isNull(tget)) {
+                // 2. try with real HTMLAnchorElement
+                tget = menu.querySelector(`a[href='${path}']`);
+            }
+            // finally, scroll if any matching anchor was found
+            if (!pacemCore.Utils.isNull(tget)) {
+                tget.scrollIntoView({ behavior: 'smooth' });
+            }
+        }
     };
     PacemMenuCursorElement = PacemMenuCursorElement_1 = __decorate$f([
         pacemCore.CustomElement({