unpoly-rails 2.6.1 → 2.7.1

data/assets/unpoly/unpoly.js

@@ -8,7 +8,7 @@
 @module up
 */
 window.up = {
-    version: '2.6.1'
+    version: '2.7.1'
 };
 
 
@@ -3641,8 +3641,6 @@ up.Cache = class Cache {
     @param {number|Function(): number} [config.expiry]
       The number of milliseconds after which a cache entry
       will be discarded.
-    @param {string} [config.logPrefix]
-      A prefix for log entries printed by this cache object.
     @param {Function(entry): string} [config.key]
       A function that takes an argument and returns a string key
       for storage. If omitted, `toString()` is called on the argument.
@@ -3679,12 +3677,6 @@ up.Cache = class Cache {
     clear() {
         this.store.clear();
     }
-    log(...args) {
-        if (this.config.logPrefix) {
-            args[0] = `[${this.config.logPrefix}] ${args[0]}`;
-            up.puts('up.Cache', ...args);
-        }
-    }
     keys() {
         return this.store.keys();
     }
@@ -3748,28 +3740,17 @@ up.Cache = class Cache {
             return true;
         }
     }
-    get(key, options = {}) {
+    get(key) {
         const storeKey = this.normalizeStoreKey(key);
         let entry = this.store.get(storeKey);
         if (entry) {
             if (this.isFresh(entry)) {
-                if (!options.silent) {
-                    this.log("Cache hit for '%s'", key);
-                }
                 return entry.value;
             }
             else {
-                if (!options.silent) {
-                    this.log("Discarding stale cache entry for '%s'", key);
-                }
                 this.remove(key);
             }
         }
-        else {
-            if (!options.silent) {
-                this.log("Cache miss for '%s'", key);
-            }
-        }
     }
 };
 
@@ -4668,10 +4649,13 @@ up.Change.CloseLayer = class CloseLayer extends up.Change.Removal {
     }
     emitCloseEvent() {
         // The close event is emitted on the layer that is about to close.
-        return this.layer.emit(this.buildEvent(`up:layer:${this.verb}`), {
+        let event = this.layer.emit(this.buildEvent(`up:layer:${this.verb}`), {
             callback: this.layer.callback(`on${u.upperCaseFirst(this.verb)}`),
             log: [`Will ${this.verb} ${this.layer} with value %o`, this.value]
         });
+        // Allow an event listener to replace event.value with a new value.
+        this.value = event.value;
+        return event;
     }
     emitClosedEvent(formerParent) {
         const verbPast = `${this.verb}ed`;
@@ -6839,7 +6823,7 @@ up.Layer = class Layer extends up.Record {
         }
     }
     set location(location) {
-        const previousLocation = this.savedLocation;
+        const previousLocation = this.location;
         location = up.history.normalizeURL(location);
         if (previousLocation !== location) {
             this.savedLocation = location;
@@ -9356,6 +9340,18 @@ up.Request = class Request extends up.Record {
             this.state = 'new';
         }
     }
+    /*-
+    Returns the underlying `XMLHttpRequest` instance.
+  
+    @property up.Request#xhr
+    @param {XMLHttpRequest} xhr
+    @stable
+    */
+    get xhr() {
+        // Initialize the xhr request on first access,
+        // so listeners on up:request:send events have a chance to access the xhr.
+        return this._xhr ?? (this._xhr = new XMLHttpRequest());
+    }
     followState(sourceRequest) {
         u.delegate(this, ['deferred', 'state', 'preload'], () => sourceRequest);
     }
@@ -9432,7 +9428,7 @@ up.Request = class Request extends up.Record {
         }
         this.state = 'loading';
         // Convert from XHR's callback-based API to up.Request's promise-based API
-        this.xhr = new up.Request.XHRRenderer(this).buildAndSend({
+        new up.Request.XHRRenderer(this).buildAndSend({
             onload: () => this.onXHRLoad(),
             onerror: () => this.onXHRError(),
             ontimeout: () => this.onXHRTimeout(),
@@ -9525,8 +9521,8 @@ up.Request = class Request extends up.Record {
     abort() {
         // setAbortedState() must be called before xhr.abort(), since xhr's event handlers
         // will call setAbortedState() a second time, without a message.
-        if (this.setAbortedState() && this.xhr) {
-            this.xhr.abort();
+        if (this.setAbortedState() && this._xhr) {
+            this._xhr.abort();
         }
     }
     setAbortedState(reason = ["Request to %s %s was aborted", this.method, this.url]) {
@@ -9912,40 +9908,39 @@ up.Request.XHRRenderer = class XHRRenderer {
         this.request = request;
     }
     buildAndSend(handlers) {
-        this.xhr = new XMLHttpRequest();
+        const xhr = this.request.xhr;
         // We copy params since we will modify them below.
         // This would confuse API clients and cache key logic in up.network.
         this.params = u.copy(this.request.params);
         // IE11 explodes it we're setting an undefined timeout property
         if (this.request.timeout) {
-            this.xhr.timeout = this.request.timeout;
+            xhr.timeout = this.request.timeout;
         }
         // The XMLHttpRequest method must be opened before we can add headers to it.
-        this.xhr.open(this.getMethod(), this.request.url);
-        // Add information about the response's intended use so the server may
+        xhr.open(this.getMethod(), this.request.url);
+        // Add information about the response's intended use, so the server may
         // customize or shorten its response.
         const metaProps = this.request.metaProps();
         for (let key in metaProps) {
-            this.addHeader(up.protocol.headerize(key), metaProps[key]);
+            this.addHeader(xhr, up.protocol.headerize(key), metaProps[key]);
         }
         for (let header in this.request.headers) {
-            this.addHeader(header, this.request.headers[header]);
+            this.addHeader(xhr, header, this.request.headers[header]);
         }
         let csrfHeader, csrfToken;
         if ((csrfHeader = this.request.csrfHeader()) && (csrfToken = this.request.csrfToken())) {
-            this.addHeader(csrfHeader, csrfToken);
+            this.addHeader(xhr, csrfHeader, csrfToken);
         }
-        this.addHeader(up.protocol.headerize('version'), up.version);
+        this.addHeader(xhr, up.protocol.headerize('version'), up.version);
         // The { contentType } will be missing in case of a FormData payload.
         // In this case the browser will choose a content-type with MIME boundary,
         // like: multipart/form-data; boundary=----WebKitFormBoundaryHkiKAbOweEFUtny8
         let contentType = this.getContentType();
         if (contentType) {
-            this.addHeader('Content-Type', contentType);
+            this.addHeader(xhr, 'Content-Type', contentType);
         }
-        u.assign(this.xhr, handlers);
-        this.xhr.send(this.getPayload());
-        return this.xhr;
+        u.assign(xhr, handlers);
+        xhr.send(this.getPayload());
     }
     getMethod() {
         // By default HTTP methods other than `GET` or `POST` will be converted into a `POST`
@@ -9968,11 +9963,11 @@ up.Request.XHRRenderer = class XHRRenderer {
         this.finalizePayload();
         return this.payload;
     }
-    addHeader(header, value) {
+    addHeader(xhr, header, value) {
         if (u.isOptions(value) || u.isArray(value)) {
             value = JSON.stringify(value);
         }
-        this.xhr.setRequestHeader(header, value);
+        xhr.setRequestHeader(header, value);
     }
     finalizePayload() {
         if (this.payloadFinalized) {
@@ -10386,7 +10381,8 @@ up.RevealMotion = class RevealMotion {
         elementRect.height += 2 * this.padding;
     }
     selectObstructions(selectors) {
-        return up.fragment.all(selectors.join(','), { layer: this.obstructionsLayer });
+        let elements = up.fragment.all(selectors.join(','), { layer: this.obstructionsLayer });
+        return u.filter(elements, e.isVisible);
     }
     substractObstructions(viewportRect) {
         for (let obstruction of this.selectObstructions(this.topObstructions)) {
@@ -16464,8 +16460,9 @@ up.motion = (function () {
     This event is emitted on an animating element by `up.motion.finish()` to
     request the animation to instantly finish and skip to the last frame.
   
-    Promises returned by animation and transition functions are expected
-    to settle.
+    Custom [animation](/up.animation) and [transition](/up.transition) functions are expected
+    to instantly settle their promises when this event is observed on the
+    animating element.
   
     Animations started by `up.animate()` already handle this event.
   
@@ -18789,7 +18786,7 @@ up.layer = (function () {
     @stable
     */
     /*-
-    This event is emitted before a layer is [accepted](/closing-overlays).
+    This event is emitted *before* a layer is [accepted](/closing-overlays).
   
     The event is emitted on the [element of the layer](/up.layer.element) that is about to close.
   
@@ -18798,6 +18795,8 @@ up.layer = (function () {
       The layer that is about to close.
     @param {Element} [event.value]
       The overlay's [acceptance value](/closing-overlays#overlay-result-values).
+  
+      Listeners may replace or mutate this value.
     @param {Element} [event.origin]
       The element that is causing the layer to close.
     @param event.preventDefault()
@@ -18805,7 +18804,7 @@ up.layer = (function () {
     @stable
     */
     /*-
-    This event is emitted after a layer was [accepted](/closing-overlays).
+    This event is emitted *after* a layer was [accepted](/closing-overlays).
   
     The event is emitted on the [layer's](/up.layer.element) when the close animation
     is starting. If the layer has no close animaton and was already removed from the DOM,
@@ -18815,7 +18814,7 @@ up.layer = (function () {
     @param {up.Layer} event.layer
       The layer that was closed.
     @param {Element} [event.value]
-      The overlay's [acceptance value](/closing-overlays#overlay-result-values).
+      The overlay's final [acceptance value](/closing-overlays#overlay-result-values).
     @param {Element} [event.origin]
       The element that has caused the layer to close.
     @stable
@@ -18832,7 +18831,7 @@ up.layer = (function () {
     @stable
     */
     /*-
-    This event is emitted before a layer is [dismissed](/closing-overlays).
+    This event is emitted *before* a layer is [dismissed](/closing-overlays).
   
     The event is emitted on the [element of the layer](/up.layer.element) that is about to close.
   
@@ -18841,6 +18840,8 @@ up.layer = (function () {
       The layer that is about to close.
     @param {Element} [event.value]
       The overlay's [dismissal value](/closing-overlays#overlay-result-values).
+  
+      Listeners may replace or mutate this value.
     @param {Element} [event.origin]
       The element that is causing the layer to close.
     @param event.preventDefault()
@@ -18848,7 +18849,7 @@ up.layer = (function () {
     @stable
     */
     /*-
-    This event is emitted after a layer was [dismissed](/closing-overlays).
+    This event is emitted *after* a layer was [dismissed](/closing-overlays).
   
     The event is emitted on the [layer's](/up.layer.element) when the close animation
     is starting. If the layer has no close animaton and was already removed from the DOM,
@@ -18858,7 +18859,7 @@ up.layer = (function () {
     @param {up.Layer} event.layer
       The layer that was closed.
     @param {Element} [event.value]
-      The overlay's [dismissal value](/closing-overlays#overlay-result-values).
+      The overlay's final [dismissal value](/closing-overlays#overlay-result-values).
     @param {Element} [event.origin]
       The element that has caused the layer to close.
     @stable

data/assets/unpoly/unpoly.min.css

@@ -6,7 +6,7 @@ up-bounds{position:absolute}.up-focusable-content:focus,.up-focusable-content:fo
 
 .up-request-loader{display:none}up-progress-bar{position:fixed;top:0;left:0;z-index:999999999;height:3px;background-color:#007bff}
 
-up-focus-trap{position:fixed;top:0;left:0;width:0;height:0}up-modal,up-drawer,up-cover,up-modal-backdrop,up-drawer-backdrop,up-modal-viewport,up-drawer-viewport,up-cover-viewport{top:0;left:0;bottom:0;right:0}up-modal-box,up-drawer-box{box-shadow:0 0 10px 1px rgba(0,0,0,0.3)}up-popup{box-shadow:0 0 4px rgba(0,0,0,0.3)}up-modal:focus,up-drawer:focus,up-cover:focus,up-modal-box:focus,up-drawer-box:focus,up-cover-box:focus,up-popup:focus,up-modal:focus-visible,up-drawer:focus-visible,up-cover:focus-visible,up-modal-box:focus-visible,up-drawer-box:focus-visible,up-cover-box:focus-visible,up-popup:focus-visible{outline:none}up-modal,up-drawer,up-cover{z-index:2000;position:fixed}up-modal-backdrop,up-drawer-backdrop{position:absolute;background:rgba(0,0,0,0.4)}up-modal-viewport,up-drawer-viewport,up-cover-viewport{position:absolute;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;display:flex;align-items:flex-start;justify-content:center}up-modal-box,up-drawer-box,up-cover-box,up-popup{position:relative;box-sizing:border-box;max-width:100%;background-color:#fff;padding:20px;overflow-x:hidden}up-modal-content,up-drawer-content,up-cover-content,up-popup-content{display:block}up-popup{z-index:1000}up-modal-dismiss,up-drawer-dismiss,up-cover-dismiss,up-popup-dismiss{color:#888;position:absolute;top:10px;right:10px;font-size:1.7rem;line-height:0.5}up-modal[nesting="0"] up-modal-viewport{padding:25px 15px}up-modal[nesting="1"] up-modal-viewport{padding:50px 30px}up-modal[nesting="2"] up-modal-viewport{padding:75px 45px}up-modal[nesting="3"] up-modal-viewport{padding:100px 60px}up-modal[nesting="4"] up-modal-viewport{padding:125px 75px}up-modal[size=small] up-modal-box{width:350px}up-modal[size=medium] up-modal-box{width:650px}up-modal[size=large] up-modal-box{width:1000px}up-modal[size=grow] up-modal-box{width:auto}up-modal[size=full] up-modal-box{width:100%}up-drawer-viewport{justify-content:flex-start}up-drawer[position=right] up-drawer-viewport{justify-content:flex-end}up-drawer-box{min-height:100vh}up-drawer[size=small] up-drawer-box{width:150px}up-drawer[size=medium] up-drawer-box{width:340px}up-drawer[size=large] up-drawer-box{width:600px}up-drawer[size=grow] up-drawer-box{width:auto}up-drawer[size=full] up-drawer-box{width:100%}up-cover-box{width:100%;min-height:100vh;padding:0}up-popup{padding:15px}up-popup[size=small]{width:180px}up-popup[size=medium]{width:300px}up-popup[size=large]{width:550px}up-popup[size=grow] up-popup{width:auto}up-popup[size=full] up-popup{width:100%}
+up-focus-trap{position:fixed;top:0;left:0;width:0;height:0}up-modal,up-drawer,up-cover,up-modal-backdrop,up-drawer-backdrop,up-modal-viewport,up-drawer-viewport,up-cover-viewport{top:0;left:0;bottom:0;right:0}up-modal-box,up-drawer-box{box-shadow:0 0 10px 1px rgba(0,0,0,0.3)}up-popup{box-shadow:0 0 4px rgba(0,0,0,0.3)}up-modal:focus,up-drawer:focus,up-cover:focus,up-modal-box:focus,up-drawer-box:focus,up-cover-box:focus,up-popup:focus,up-modal:focus-visible,up-drawer:focus-visible,up-cover:focus-visible,up-modal-box:focus-visible,up-drawer-box:focus-visible,up-cover-box:focus-visible,up-popup:focus-visible{outline:none}up-modal,up-drawer,up-cover{z-index:2000;position:fixed}up-modal-backdrop,up-drawer-backdrop{position:absolute;background:rgba(0,0,0,0.4)}up-modal-viewport,up-drawer-viewport,up-cover-viewport{position:absolute;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;display:flex;align-items:flex-start;justify-content:center}up-modal-box,up-drawer-box,up-cover-box,up-popup{position:relative;box-sizing:border-box;max-width:100%;background-color:#fff;padding:20px;overflow-x:hidden}up-modal-content,up-drawer-content,up-cover-content,up-popup-content{display:block}up-popup{z-index:1000}up-modal-dismiss,up-drawer-dismiss,up-cover-dismiss,up-popup-dismiss{color:#888;position:absolute;top:10px;right:10px;font-size:1.7rem;line-height:0.5}up-modal[nesting="0"] up-modal-viewport{padding:25px 15px}up-modal[nesting="1"] up-modal-viewport{padding:50px 30px}up-modal[nesting="2"] up-modal-viewport{padding:75px 45px}up-modal[nesting="3"] up-modal-viewport{padding:100px 60px}up-modal[nesting="4"] up-modal-viewport{padding:125px 75px}up-modal[size=small] up-modal-box{width:350px}up-modal[size=medium] up-modal-box{width:650px}up-modal[size=large] up-modal-box{width:1000px}up-modal[size=grow] up-modal-box{width:auto}up-modal[size=full] up-modal-box{width:100%}up-drawer-viewport{justify-content:flex-start}up-drawer[position=right] up-drawer-viewport{justify-content:flex-end}up-drawer-box{min-height:100vh}up-drawer[size=small] up-drawer-box{width:150px}up-drawer[size=medium] up-drawer-box{width:340px}up-drawer[size=large] up-drawer-box{width:600px}up-drawer[size=grow] up-drawer-box{width:auto}up-drawer[size=full] up-drawer-box{width:100%}up-cover-box{width:100%;min-height:100vh;padding:0}up-popup{padding:15px;text-align:left}up-popup[size=small]{width:180px}up-popup[size=medium]{width:300px}up-popup[size=large]{width:550px}up-popup[size=grow] up-popup{width:auto}up-popup[size=full] up-popup{width:100%}
 
 [up-href],[up-clickable]{cursor:pointer}