unpoly-rails 2.4.1 → 2.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed64f466ecfb5e18ddf92d981d0082d87dc6ba0933d4b2ead19fc719555a5ec8
-  data.tar.gz: 8e1f3645c1578284ff2683103718768de9a13919f68f32c524aa987d2a50ba61
+  metadata.gz: bfc6a21b6b4c3fc7ca2773d5d89a7784011ea7a25b02d91b41242692d7c96642
+  data.tar.gz: aa8f9f2b03a820b3c9a77063f7c5af9e89933b82ebd9c80d9cce1fc5ef838511
 SHA512:
-  metadata.gz: 268e09d0b71d55d8ff10a7d8c82d2b6b012a02668f14b0d442ccf7833162e25b1ccc9d1dc2ee246d56acc7aaff05236efff9fa3f5c60b08455f834b73e6cfb12
-  data.tar.gz: e3692c858269706bda893298c2ef725d38013319c817c54b0641d2e4dc19ad18c82e1a7f3ce474c78560733d972701c59a49d7d91ee8b3a9478ae64d56602844
+  metadata.gz: 551e3a230fbaef98632c4c531d86034953d2288ad2358d4e02ea625991e1504ef769a1e22f3d6b65e5f48ad8717ce6cc42873c55892e560fdb4d041ee39071e9
+  data.tar.gz: 41ab6a4f9c2953aa93d6a3843177e3503583b29579bc365cb9c5ce12e3d93f7a235828aaf80fb445b78f537915a441cf9658f8926e095a8b8643674d87d5b842

data/assets/unpoly/unpoly.css

@@ -143,6 +143,6 @@ up-popup {
   up-popup[size=full] up-popup {
     width: 100%; }
 
-a[up-content], a[up-fragment], a[up-document], [up-href], [up-clickable], [up-accept], [up-dismiss] {
+[up-href], [up-clickable] {
   cursor: pointer; }
 

data/assets/unpoly/unpoly.es5.js

@@ -8,7 +8,7 @@
 @module up
 */
 window.up = {
-    version: '2.4.1'
+    version: '2.5.0'
 };
 
 
@@ -3064,8 +3064,12 @@ up.element = (function () {
         //     innerHTML on Chrome. See https://jsben.ch/QQngJ
         var range = document.createRange();
         range.setStart(document.body, 0);
-        var fragment = range.createContextualFragment(html);
-        return fragment.childNodes[0];
+        var fragment = range.createContextualFragment(html.trim());
+        var elements = fragment.childNodes;
+        if (elements.length !== 1) {
+            throw new Error('HTML must have a single root element');
+        }
+        return elements[0];
     }
     /*-
     @function up.element.root
@@ -4718,6 +4722,9 @@ up.Change.UpdateLayer = /** @class */ (function (_super) {
             var lookupOpts = { layer: this.layer, origin: oldElement };
             var partner = void 0;
             if (options.descendantsOnly) {
+                // Since newElement is from a freshly parsed HTML document, we could use
+                // up.element functions to match the selector. However, since we also want
+                // to use custom selectors like ":main" or "&" we use up.fragment.get().
                 partner = up.fragment.get(newElement, partnerSelector, lookupOpts);
             }
             else {
@@ -5282,11 +5289,11 @@ up.Change.FromURL = /** @class */ (function (_super) {
         }
         else {
             var log = ['Loaded fragment from failed response to %s (HTTP %d)', this.request.description, this.response.status];
+            // Although updateContentFromResponse() will fulfill with a successful replacement of options.failTarget,
+            // we still want to reject the promise that's returned to our API client. Hence we throw.
             throw this.updateContentFromResponse(log, this.failOptions);
         }
     };
-    // Although processResponse() will fulfill with a successful replacement of options.failTarget,
-    // we still want to reject the promise that's returned to our API client.
     FromURL.prototype.isSuccessfulResponse = function () {
         return (this.successOptions.fail === false) || this.response.ok;
     };
@@ -11657,7 +11664,7 @@ var u = up.util;
 up.store || (up.store = {});
 up.store.Memory = /** @class */ (function () {
     function Memory() {
-        this.clear();
+        this.data = {};
     }
     Memory.prototype.clear = function () {
         this.data = {};
@@ -11990,7 +11997,7 @@ up.URLPattern = /** @class */ (function () {
                 return '([^/?#]+)';
             }
         });
-        return new RegExp('^' + reCode + '$');
+        return new RegExp('^(?:' + reCode + ')$');
     };
     // This method is performance-sensitive. It's called for every link in an [up-nav]
     // after every fragment update.
@@ -13669,11 +13676,14 @@ up.log = (function () {
       Note that errors will always be printed, regardless of this setting.
     @param {boolean} [config.banner=true]
       Print the Unpoly banner to the developer console.
+    @param {boolean} [config.format=!isIE11]
+      Format output using CSS.
     @stable
     */
     var config = new up.Config(function () { return ({
         enabled: sessionStore.get('enabled'),
-        banner: true
+        banner: true,
+        format: up.browser.canFormatLog()
     }); });
     function reset() {
         config.reset();
@@ -13734,7 +13744,7 @@ up.log = (function () {
             args[_i - 3] = arguments[_i];
         }
         if (message) {
-            if (up.browser.canFormatLog()) {
+            if (config.format) {
                 args.unshift(''); // Reset
                 args.unshift('color: #666666; padding: 1px 3px; border: 1px solid #bbbbbb; border-radius: 2px; font-size: 90%; display: inline-block');
                 message = "%c" + trace + "%c " + message;
@@ -13765,7 +13775,7 @@ up.log = (function () {
             text += "Call `up.log.enable()` to enable logging for this session.";
         }
         var color = 'color: #777777';
-        if (up.browser.canFormatLog()) {
+        if (config.format) {
             console.log('%c' + logo + '%c' + text, 'font-family: monospace;' + color, color);
         }
         else {
@@ -14461,9 +14471,11 @@ up.history = (function () {
   
     @property up.history.config
     @param {Array} [config.restoreTargets=[]]
-      A list of possible CSS selectors to [replace](/up.render) when the user goes back in history.
+      A list of possible CSS selectors to [replace](/up.render) when the user goes back or forward in history.
+  
+      If more than one target is configured, the first selector matching both the current page and server response will be updated.
   
-      By default the [root layer's main target](/up.fragment.config#config.mainTargets).
+      If nothing is configured, the `<body>` element will be replaced.
     @param {boolean} [config.enabled=true]
       Defines whether [fragment updates](/up.render) will update the browser's current URL.
   
@@ -14686,7 +14698,6 @@ up.history = (function () {
                                 layer: 'root',
                                 target: config.restoreTargets,
                                 cache: true,
-                                keep: false,
                                 scroll: 'restore',
                                 // Since the URL was already changed by the browser, don't save scroll state.
                                 saveScroll: false
@@ -14853,7 +14864,8 @@ up.fragment = (function () {
     @param {Array<string>} [config.mainTargets=['[up-main]', 'main', ':layer']]
       An array of CSS selectors matching default render targets.
   
-      When no other render target is given, Unpoly will try to find and replace a main target.
+      When no other render target is given, Unpoly will update the first selector matching both
+      the current page and the server response.
   
       When [navigating](/navigation) to a main target, Unpoly will automatically
       [reset scroll positions](/scroll-option) and
@@ -17712,7 +17724,6 @@ up.motion = (function () {
   
     ```js
     up.animate('.warning', 'fade-in', {
-      delay: 1000,
       duration: 250,
       easing: 'linear'
     })
@@ -19799,7 +19810,7 @@ up.layer = (function () {
     @stable
     */
     /*-
-    This event is emitted after a new overlay has been placed into the DOM.
+    This event is emitted after a new overlay was placed into the DOM.
   
     The event is emitted right before the opening animation starts. Because the overlay
     has not been rendered by the browser, this makes it a good occasion to
@@ -19882,7 +19893,7 @@ up.layer = (function () {
         }
     }
     /*-
-    [Follows](/a-up-follow) this link and opens the result in a new overlay.
+    [Follows](/a-up-follow) this link and [opens the result in a new overlay](/opening-overlays).
   
     ### Example
   
@@ -20261,6 +20272,34 @@ up.layer = (function () {
     @stable
     */
     /*-
+    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.
+  
+    @event up:layer:accept
+    @param {up.Layer} event.layer
+      The layer that is about to close.
+    @param {Element} [event.origin]
+      The element that is causing the layer to close.
+    @param event.preventDefault()
+      Event listeners may call this method to prevent the overlay from closing.
+    @stable
+    */
+    /*-
+    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,
+    the event is emitted a second time on the `document`.
+  
+    @event up:layer:accepted
+    @param {up.Layer} event.layer
+      The layer that was closed.
+    @param {Element} [event.origin]
+      The element that has caused the layer to close.
+    @stable
+    */
+    /*-
     [Dismisses](/closing-overlays) the [current layer](/up.layer.current).
   
     This is a shortcut for `up.layer.current.dismiss()`.
@@ -20272,6 +20311,34 @@ up.layer = (function () {
     @stable
     */
     /*-
+    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.
+  
+    @event up:layer:dismiss
+    @param {up.Layer} event.layer
+      The layer that is about to close.
+    @param {Element} [event.origin]
+      The element that is causing the layer to close.
+    @param event.preventDefault()
+      Event listeners may call this method to prevent the overlay from closing.
+    @stable
+    */
+    /*-
+    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,
+    the event is emitted a second time on the `document`.
+  
+    @event up:layer:dismissed
+    @param {up.Layer} event.layer
+      The layer that was closed.
+    @param {Element} [event.origin]
+      The element that has caused the layer to close.
+    @stable
+    */
+    /*-
     Returns whether the [current layer](/up.layer.current) is the [root layer](/up.layer.root).
   
     This is a shortcut for `up.layer.current.isRoot()`.
@@ -20846,6 +20913,7 @@ up.link = (function () {
         var _a, _b;
         // If passed a selector, up.fragment.get() will prefer a match on the current layer.
         link = up.fragment.get(link);
+        // Request options
         options = parseRequestOptions(link, options);
         var parser = new up.OptionsParser(options, link, { fail: true });
         // Feedback options
@@ -21064,7 +21132,8 @@ up.link = (function () {
         }
         e.setMissingAttrs(link, {
             tabindex: '0',
-            role: 'link' // Make screen readers pronounce "link"
+            role: 'link',
+            'up-clickable': '' // Get pointer pointer from link.css
         });
         link.addEventListener('keydown', function (event) {
             if ((event.key === 'Enter') || (event.key === 'Space')) {
@@ -21595,6 +21664,10 @@ up.link = (function () {
             }
             e.setMissingAttrs(area, areaAttrs);
             makeFollowable(area);
+            // We could also consider making the area clickable, via makeClickable().
+            // However, since the original link is already present within the area,
+            // we would not add accessibility benefits. We might also confuse screen readers
+            // with a nested link.
         }
     });
     /*-
@@ -21881,21 +21954,40 @@ up.form = (function () {
     @stable
     */
     function submitOptions(form, options) {
+        form = getForm(form);
+        options = parseBasicOptions(form, options);
+        var parser = new up.OptionsParser(options, form);
+        parser.string('failTarget', { default: up.fragment.toTarget(form) });
+        // The guardEvent will also be assigned an { renderOptions } property in up.render()
+        options.guardEvent || (options.guardEvent = up.event.build('up:form:submit', {
+            submitButton: options.submitButton,
+            params: options.params,
+            log: 'Submitting form'
+        }));
+        // Now that we have extracted everything form-specific into options, we can call
+        // up.link.followOptions(). This will also parse the myriads of other options
+        // that are possible on both <form> and <a> elements.
+        u.assign(options, up.link.followOptions(form, options));
+        return options;
+    }
+    // This was extracted from submitOptions().
+    // Validation needs to submit a form without options intended for the final submission,
+    // like [up-scroll], [up-confirm], etc.
+    function parseBasicOptions(form, options) {
         options = u.options(options);
-        form = up.fragment.get(form);
-        form = e.closest(form, 'form');
+        form = getForm(form);
         var parser = new up.OptionsParser(options, form);
         // Parse params from form fields.
         var params = up.Params.fromForm(form);
-        var submitButton = submittingButton(form);
-        if (submitButton) {
+        options.submitButton || (options.submitButton = submittingButton(form));
+        if (options.submitButton) {
             // Submit buttons with a [name] attribute will add to the params.
             // Note that addField() will only add an entry if the given button has a [name] attribute.
-            params.addField(submitButton);
+            params.addField(options.submitButton);
             // Submit buttons may have [formmethod] and [formaction] attribute
             // that override [method] and [action] attribute from the <form> element.
-            options.method || (options.method = submitButton.getAttribute('formmethod'));
-            options.url || (options.url = submitButton.getAttribute('formaction'));
+            options.method || (options.method = options.submitButton.getAttribute('formmethod'));
+            options.url || (options.url = options.submitButton.getAttribute('formaction'));
         }
         params.addAll(options.params);
         options.params = params;
@@ -21912,13 +22004,6 @@ up.form = (function () {
             // a demo of vanilla browser behavior.
             options.url = up.Params.stripURL(options.url);
         }
-        parser.string('failTarget', { default: up.fragment.toTarget(form) });
-        // The guardEvent will also be assigned an { renderOptions } property in up.render()
-        options.guardEvent || (options.guardEvent = up.event.build('up:form:submit', { log: 'Submitting form' }));
-        // Now that we have extracted everything form-specific into options, we can call
-        // up.link.followOptions(). This will also parse the myriads of other options
-        // that are possible on both <form> and <a> elements.
-        u.assign(options, up.link.followOptions(form, options));
         return options;
     }
     /*-
@@ -21945,8 +22030,12 @@ up.form = (function () {
     @event up:form:submit
     @param {Element} event.target
       The `<form>` element that will be submitted.
+    @param {up.Params} event.params
+      The [form parameters](/up.Params) that will be send as the form's request payload.
+    @param {Element} [event.submitButton]
+      The button used to submit the form.
     @param {Object} event.renderOptions
-      An object with [render options](/up.render) for the fragment update
+      An object with [render options](/up.render) for the fragment update.
   
       Listeners may inspect and modify these options.
     @param event.preventDefault()
@@ -21959,7 +22048,7 @@ up.form = (function () {
     up.on('up:click', submitButtonSelector, function (event, button) {
         // Don't mess with focus unless we know that we're going to handle the form.
         // https://groups.google.com/g/unpoly/c/wsiATxepVZk
-        var form = e.closest(button, 'form');
+        var form = getForm(button);
         if (form && isSubmittable(form)) {
             button.focus();
         }
@@ -22028,7 +22117,7 @@ up.form = (function () {
       A destructor function that removes the observe watch when called.
     @stable
     */
-    var observe = function (elements) {
+    function observe(elements) {
         var _a, _b;
         var args = [];
         for (var _i = 1; _i < arguments.length; _i++) {
@@ -22051,7 +22140,7 @@ up.form = (function () {
         var observer = new up.FieldObserver(fields, options, callback);
         observer.start();
         return function () { return observer.stop(); };
-    };
+    }
     function observeCallbackFromElement(element) {
         var rawCallback = element.getAttribute('up-observe');
         if (rawCallback) {
@@ -22145,10 +22234,8 @@ up.form = (function () {
     function validate(field, options) {
         // If passed a selector, up.fragment.get() will prefer a match on the current layer.
         field = up.fragment.get(field);
-        options = u.options(options);
-        options.navigate = false;
+        options = parseBasicOptions(field, options);
         options.origin = field;
-        options.history = false;
         options.target = findValidateTarget(field, options);
         options.focus = 'keep';
         // The protocol doesn't define whether the validation results in a status code.
@@ -22160,7 +22247,7 @@ up.form = (function () {
         options.headers[up.protocol.headerize('validate')] = field.getAttribute('name') || ':unknown';
         // The guardEvent will also be assigned a { renderOptions } attribute in up.render()
         options.guardEvent = up.event.build('up:form:validate', { field: field, log: 'Validating form' });
-        return submit(field, options);
+        return up.render(options);
     }
     /*-
     This event is emitted before a field is being [validated](/input-up-validate).
@@ -22262,7 +22349,7 @@ up.form = (function () {
             show = u.intersect(fieldValues, showValues).length > 0;
         }
         e.toggle(target, show);
-        return target.classList.add('up-switched');
+        target.classList.add('up-switched');
     });
     function findSwitcherForTarget(target) {
         var form = getContainer(target);
@@ -22273,9 +22360,13 @@ up.form = (function () {
         });
         return switcher || up.fail('Could not find [up-switch] field for %o', target);
     }
-    function getContainer(element) {
+    function getForm(elementOrTarget, fallbackSelector) {
+        var element = up.fragment.get(elementOrTarget);
         // Element#form will also work if the element is outside the form with an [form=form-id] attribute
-        return element.form || e.closest(element, "form, " + up.layer.anySelector());
+        return element.form || e.closest(element, 'form') || (fallbackSelector && e.closest(element, fallbackSelector));
+    }
+    function getContainer(element) {
+        return getForm(element, up.layer.anySelector());
     }
     function isField(element) {
         return e.matches(element, fieldSelector());