Fix view transitions

Author: ox-harris

src/webflo-runtime/webflo-client/DeviceViewport.js

@@ -58,12 +58,16 @@ export class DeviceViewport {
         return el;
     }
 
-    #scheduleRender() {
+    #scheduleRender(lag = 0) {
         if (this.#timer) return;
-        this.#timer = requestAnimationFrame(() => {
-            this.#render();
-            this.#timer = null;
-        });
+        const exec = () => {
+            this.#timer = requestAnimationFrame(() => {
+                this.#render();
+                this.#timer = null;
+            });
+        };
+        if (!lag) return exec();
+        setTimeout(exec, lag);
     }
 
     #render() {
@@ -152,29 +156,31 @@ export class DeviceViewport {
         return [k.replace(/-([a-z])/g, g => g[1].toUpperCase()), v || true];
     }));
 
-    push(id, config, priority = 1) {
+    push(id, config, { priority = 1, lag = 0 } = {}) {
         if (!id) throw new Error("push() requires a unique ID");
         if (this.#stack.some(e => e.id === id)) return;
 
         const peek = this.peek();
         if (peek._priority - priority >= 0.2) {
-            this.#stack.push({ ...config, ...peek, id, _priority: priority });
+            this.#stack.push({ ...config, ...peek, id, _priority: priority, _lag: lag });
         } else {
-            this.#stack.push({ ...peek, ...config, id, _priority: priority });
+            this.#stack.push({ ...peek, ...config, id, _priority: priority, _lag: lag });
         }
 
-        this.#scheduleRender();
+        this.#scheduleRender(lag);
     }
 
     pop(...ids) {
         if (!ids.length) throw new Error("pop() requires a target ID");
+        let lag = 0;
         ids.forEach((id) => {
             const idx = this.#stack.findIndex(e => e.id === id);
             if (idx > 0) { // Never pop the initial state at index 0
-                this.#stack.splice(idx, 1);
+                const [entry] = this.#stack.splice(idx, 1);
+                lag = Math.max(lag, entry._lag);
             }
         });
-        this.#scheduleRender();
+        this.#scheduleRender(lag);
     }
 
     peek() { return this.#stack[this.#stack.length - 1]; }

src/webflo-runtime/webflo-client/WebfloClient.js

@@ -41,7 +41,7 @@ export class WebfloClient extends AppRuntime {
         super(bootstrap);
         this.#host = host;
         Object.defineProperty(this.host, 'webfloRuntime', { get: () => this });
-        this.#location = new URLPlus(this.host.location);
+        this.#location = new URLPlus(decodeURI(this.host.location.href), undefined, { compatMode: false });
         this.#navigator = {
             requesting: null,
             redirecting: null,
@@ -51,7 +51,7 @@ export class WebfloClient extends AppRuntime {
         };
         this.#transition = {
             from: new URLPlus(window.origin),
-            to: new URLPlus(this.host.location),
+            to: new URLPlus(decodeURI(this.host.location.href)),
             rel: 'unrelated',
             phase: 0
         };
@@ -437,7 +437,7 @@ export class WebfloClient extends AppRuntime {
         // Transition UI
         await this.transitionUI(async () => {
             // Set post-request states
-            Observer.set(this.location, 'href', scopeObj.finalUrl);
+            Observer.set(this.location, 'href', decodeURI(scopeObj.finalUrl));
             scopeObj.resetStates();
 
             // Error?

src/webflo-runtime/webflo-client/webflo-elements.js

@@ -529,7 +529,7 @@ export class ModalElement extends BaseElement {
         setTimeout(() => {
             if (minmaxEvents) observer.observe(this.#spacingElement);
             if (swipeDismiss) observer.observe(this.#sentinelElement);
-        }, 200);
+        }, 300);
 
         this.#unbindMinmaxWorker = () => observer.disconnect();
     }
@@ -703,11 +703,13 @@ export class ModalElement extends BaseElement {
                 --backdrop-filter: var(--modal-backdrop-filter, blur(3px));
                 
                 --radius-length: var(--modal-radius, 1rem);
+                --entry-exit-transition-duration: var(--modal-entry-exit-transition-duration, 0.3s);
 
                 --background: var(--modal-background, rgba(80, 80, 80, 1));
 
                 --background-accent: var(--modal-background-accent, var(--background));
                 --color-accent: var(--modal-color-accent, var(--color-default));
+                --radius-accent: var(--modal-radius-accent, 0px);
 
                 --color-default: var(--modal-color-default, whitesmoke);
                 --color-info: var(--modal-color-info, whitesmoke);
@@ -789,10 +791,10 @@ export class ModalElement extends BaseElement {
 
             :host {
                 transition:
-                    opacity 0.2s,
-                    transform 0.2s,
-                    overlay 0.2s allow-discrete,
-                    display 0.2s allow-discrete;
+                    opacity var(--entry-exit-transition-duration),
+                    transform var(--entry-exit-transition-duration),
+                    overlay var(--entry-exit-transition-duration) allow-discrete,
+                    display var(--entry-exit-transition-duration) allow-discrete;
                 transition-timing-function: ease-out;
                 
                 transform: var(--exit-transform);
@@ -816,10 +818,10 @@ export class ModalElement extends BaseElement {
 
             :host::backdrop {
                 transition:
-                    display 0.2s allow-discrete,
-                    overlay 0.2s allow-discrete,
-                    backdrop-filter 0.2s,
-                    background 0.2s;
+                    display var(--entry-exit-transition-duration) allow-discrete,
+                    overlay var(--entry-exit-transition-duration) allow-discrete,
+                    backdrop-filter var(--entry-exit-transition-duration),
+                    background var(--entry-exit-transition-duration);
             }
 
             :host(:popover-open)::backdrop {

src/webflo-runtime/webflo-routing/HttpEvent111.js

@@ -30,7 +30,7 @@ export class HttpEvent111 {
             node._context.parentEvent = this;
         });
 
-        this.#url = new URLPlus(this.#init.request.url, undefined, { immutable: true });
+        this.#url = new URLPlus(this.#init.request.url, undefined, { immutable: true, compatMode: false });
 
         this._parentEvent?.signal.addEventListener('abort', () => this.#abortController.abort(), { once: true });
         this.#init.request.signal?.addEventListener('abort', () => this.#abortController.abort(), { once: true });