@pacem/pacem-ui 2.0.0-kepler → 2.0.0-lyapunov

package/dist/browser/pacem-ui.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-ui v2.0.0-kepler (https://js.pacem.it)
+ * @pacem/pacem-ui v2.0.0-lyapunov (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -6091,9 +6091,95 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
                 this._manageRef();
             }
         }
+        disconnectedCallback() {
+            this._dispose(this.url);
+            super.disconnectedCallback();
+        }
         _isReference(url) {
             return url instanceof HTMLElement || (typeof url === 'string' && url.trim().startsWith('#'));
         }
+        /**
+         * Resolves a reference source to its element, as {@link _manageRef} does: the element itself, or the
+         * `<template>` a `#id` string points to; `null` for anything else.
+         */
+        _resolveRef(source) {
+            if (source instanceof HTMLElement) {
+                return source;
+            }
+            if (typeof source !== 'string' || !this._isReference(source)) {
+                return null;
+            }
+            return document.querySelector('template' + source);
+        }
+        /**
+         * Whether `url` is the source of the initial content ({@link initialContentUrl}): urls match by their string,
+         * references by the element they resolve to. Any other source consumes it.
+         */
+        _isInitialContent(url) {
+            const initial = this.initialContentUrl;
+            if (pacemCore.Utils.isNull(initial)) {
+                return false;
+            }
+            let matches = false;
+            if (!this._isReference(url)) {
+                matches = typeof url === 'string' && url === initial;
+            }
+            else if (this._isReference(initial)) {
+                const target = this._resolveRef(url);
+                matches = !pacemCore.Utils.isNull(target) && target === this._resolveRef(initial);
+            }
+            if (!matches) {
+                this.initialContentUrl = null;
+            }
+            return matches;
+        }
+        /**
+         * Keeps the initial content: announced once, as a fresh content would be (a reference may be managed twice on
+         * activation: the second time, it was announced already).
+         */
+        _adoptInitialContent() {
+            clearTimeout(this._fetchHandle);
+            if (this.#renderVersion > 0) {
+                return;
+            }
+            this._render(null);
+        }
+        /**
+         * The rendering pipeline of every content: a new version, `prerender`, the content on the next frame, `render`
+         * (dropped when newer content came meanwhile).
+         * @param fill Writes the new content (the former one is cleared first); `null` keeps the content already there
+         * (the initial content), which also leaves {@link initialContentUrl} in place.
+         * @param waitForAnimation Whether `render` waits for the view's css transition (see `fetching`) instead of
+         * following the content right away.
+         */
+        _render(fill, waitForAnimation = false) {
+            cancelAnimationFrame(this._renderHandle);
+            const version = ++this.#renderVersion;
+            const replacing = !pacemCore.Utils.isNull(fill);
+            if (replacing) {
+                this.initialContentUrl = null;
+                // this way, `this._container.innerHTML = ''` instruction will eventually let the page "scroll up"...
+                this.innerHTML = '';
+            }
+            this._dispatchPrerender();
+            this._renderHandle = requestAnimationFrame(() => {
+                if (replacing) {
+                    fill();
+                }
+                if (!waitForAnimation) {
+                    this._dispatchRenderOf(version);
+                    return;
+                }
+                pacemCore.Utils.addAnimationEndCallback(this, () => this._dispatchRenderOf(version), ANIM_TIMEOUT);
+            });
+        }
+        /** Dispatches `render` for the content of `version`, unless newer content superseded it. */
+        _dispatchRenderOf(version) {
+            if (version !== this.#renderVersion) {
+                return;
+            }
+            this._dispatchRender();
+        }
         _dispose(url) {
             if (url instanceof pacemCore.Components.PacemTemplateProxyElement) {
                 url.removeEventListener('templatechange', this._templateChangeHandler);
@@ -6110,19 +6196,31 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
                 this._fetchHandle = setTimeout((() => this._manageRef()), debounce);
             }
             else if (typeof url === 'string' && !pacemCore.Utils.isNullOrEmpty(url)) {
-                // url-based
+                // url-based (but the initial content: already there)
+                if (this._isInitialContent(url)) {
+                    this._adoptInitialContent();
+                    return;
+                }
                 this.fetching = true;
                 clearTimeout(this._fetchHandle);
                 this._fetchHandle = setTimeout((() => this._manageUrl(url)), debounce);
             }
             else /* might be a reset */ {
                 this.innerHTML = '';
+                this.initialContentUrl = null;
             }
         }
         _manageRef() {
-            const url = this.url, tmpl = url instanceof HTMLElement ? url : document.querySelector('template' + url);
+            const url = this.url, tmpl = this._resolveRef(url);
+            // (a proxy keeps notifying its template changes, the initial content too: listening twice is a no-op)
             if (tmpl instanceof pacemCore.Components.PacemTemplateProxyElement) {
                 tmpl.addEventListener('templatechange', this._templateChangeHandler, false);
+            }
+            if (this._isInitialContent(url)) {
+                this._adoptInitialContent();
+                return;
+            }
+            if (tmpl instanceof pacemCore.Components.PacemTemplateProxyElement) {
                 this._setTmpl(tmpl.target);
             }
             else if (tmpl instanceof HTMLTemplateElement) {
@@ -6136,18 +6234,13 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
             }
         }
         _setTmpl(tmpl) {
-            cancelAnimationFrame(this._renderHandle);
-            this.#renderVersion++;
-            // this way, `this._container.innerHTML = ''` instruction will eventually let the page "scroll up"...
-            this.innerHTML = '';
-            this._dispatchPrerender();
-            this._renderHandle = requestAnimationFrame(() => {
-                if (pacemCore.Utils.isNull(tmpl)) {
-                    this.log(pacemCore.Logging.LogLevel.Error, `Template element not found.`);
-                    return;
-                }
-                this.appendChild(tmpl.cloneNode(true).content);
-                this._dispatchRender();
+            if (pacemCore.Utils.isNull(tmpl)) {
+                this.log(pacemCore.Logging.LogLevel.Error, `Template element not found.`);
+                return;
+            }
+            this._render(() => {
+                const clone = tmpl.cloneNode(true);
+                this.appendChild(clone.content);
             });
         }
         #aborter;
@@ -6208,25 +6301,15 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
             });
         }
         _manageResult(result) {
-            // this way, `this._container.innerHTML = ''` instruction will eventually let the page "scroll up"...
-            cancelAnimationFrame(this._renderHandle);
-            const version = ++this.#renderVersion;
             this.scrollTo({ top: 0, left: 0, behavior: 'instant' });
-            this.innerHTML = '';
-            this._dispatchPrerender();
-            this._renderHandle = requestAnimationFrame(() => {
+            // setting fetching to `false` triggers a css class change that could/should cause a css transition to happen:
+            // `render` waits for it
+            // TODO: manage to switch to native in a near future (https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API or https://youtu.be/oDcb3fvtETs)
+            this._render(() => {
                 this.innerHTML = result;
                 this.fetching = false;
                 this.progress = Number.NaN;
-                // setting fetching to `false` triggers a css class change that could/should cause a css transition to happen
-                // TODO: manage to switch to native in a near future (https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API or https://youtu.be/oDcb3fvtETs)
-                pacemCore.Utils.addAnimationEndCallback(this, () => {
-                    if (version !== this.#renderVersion) {
-                        return;
-                    }
-                    this._dispatchRender();
-                }, ANIM_TIMEOUT);
-            });
+            }, true);
         }
         #resizeHandle;
         _dispatchRender() {
@@ -6263,6 +6346,9 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
     __decorate$1([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemViewElement.prototype, "debounce", void 0);
+    __decorate$1([
+        pacemCore.Watch({ emit: false, converter: ElementOrStringPropertyConverter })
+    ], PacemViewElement.prototype, "initialContentUrl", void 0);
     PacemViewElement = __decorate$1([
         pacemCore.CustomElement({
             tagName: pacemCore.P + '-view'