unpoly-rails 2.4.1 → 2.5.0

data/assets/unpoly/unpoly.js

@@ -8,7 +8,7 @@
 @module up
 */
 window.up = {
-    version: '2.4.1'
+    version: '2.5.0'
 };
 
 
@@ -2963,8 +2963,12 @@ up.element = (function () {
         //     innerHTML on Chrome. See https://jsben.ch/QQngJ
         const range = document.createRange();
         range.setStart(document.body, 0);
-        const fragment = range.createContextualFragment(html);
-        return fragment.childNodes[0];
+        const fragment = range.createContextualFragment(html.trim());
+        let elements = fragment.childNodes;
+        if (elements.length !== 1) {
+            throw new Error('HTML must have a single root element');
+        }
+        return elements[0];
     }
     /*-
     @function up.element.root
@@ -4341,6 +4345,9 @@ up.Change.UpdateLayer = class UpdateLayer extends up.Change.Addition {
             const lookupOpts = { layer: this.layer, origin: oldElement };
             let partner;
             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 {
@@ -4828,11 +4835,11 @@ up.Change.FromURL = class FromURL extends up.Change {
         }
         else {
             const 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.
     isSuccessfulResponse() {
         return (this.successOptions.fail === false) || this.response.ok;
     }
@@ -10311,7 +10318,7 @@ const u = up.util;
 up.store || (up.store = {});
 up.store.Memory = class Memory {
     constructor() {
-        this.clear();
+        this.data = {};
     }
     clear() {
         this.data = {};
@@ -10620,7 +10627,7 @@ up.URLPattern = class URLPattern {
                 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.
@@ -12261,11 +12268,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
     */
     const config = new up.Config(() => ({
         enabled: sessionStore.get('enabled'),
-        banner: true
+        banner: true,
+        format: up.browser.canFormatLog()
     }));
     function reset() {
         config.reset();
@@ -12306,7 +12316,7 @@ up.log = (function () {
     const printToError = (...args) => printToStream('error', ...args);
     function printToStream(stream, trace, message, ...args) {
         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}`;
@@ -12337,7 +12347,7 @@ up.log = (function () {
             text += "Call `up.log.enable()` to enable logging for this session.";
         }
         const color = 'color: #777777';
-        if (up.browser.canFormatLog()) {
+        if (config.format) {
             console.log('%c' + logo + '%c' + text, 'font-family: monospace;' + color, color);
         }
         else {
@@ -12976,9 +12986,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.
   
@@ -13196,7 +13208,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
@@ -13342,7 +13353,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
@@ -16087,7 +16099,6 @@ up.motion = (function () {
   
     ```js
     up.animate('.warning', 'fade-in', {
-      delay: 1000,
       duration: 250,
       easing: 'linear'
     })
@@ -18085,7 +18096,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
@@ -18172,7 +18183,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
   
@@ -18551,6 +18562,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()`.
@@ -18562,6 +18601,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()`.
@@ -19119,6 +19186,7 @@ up.link = (function () {
     function followOptions(link, options) {
         // 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);
         const parser = new up.OptionsParser(options, link, { fail: true });
         // Feedback options
@@ -19335,7 +19403,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')) {
@@ -19866,6 +19935,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.
         }
     });
     /*-
@@ -20140,21 +20213,40 @@ up.form = (function () {
     @stable
     */
     function submitOptions(form, options) {
+        form = getForm(form);
+        options = parseBasicOptions(form, options);
+        let 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);
         const parser = new up.OptionsParser(options, form);
         // Parse params from form fields.
         const params = up.Params.fromForm(form);
-        let 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;
@@ -20171,13 +20263,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;
     }
     /*-
@@ -20204,8 +20289,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()
@@ -20218,7 +20307,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
-        const form = e.closest(button, 'form');
+        const form = getForm(button);
         if (form && isSubmittable(form)) {
             button.focus();
         }
@@ -20287,7 +20376,7 @@ up.form = (function () {
       A destructor function that removes the observe watch when called.
     @stable
     */
-    const observe = function (elements, ...args) {
+    function observe(elements, ...args) {
         elements = e.list(elements);
         const fields = u.flatMap(elements, findFields);
         const unnamedFields = u.reject(fields, 'name');
@@ -20305,7 +20394,7 @@ up.form = (function () {
         const observer = new up.FieldObserver(fields, options, callback);
         observer.start();
         return () => observer.stop();
-    };
+    }
     function observeCallbackFromElement(element) {
         let rawCallback = element.getAttribute('up-observe');
         if (rawCallback) {
@@ -20399,10 +20488,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.
@@ -20414,7 +20501,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, log: 'Validating form' });
-        return submit(field, options);
+        return up.render(options);
     }
     /*-
     This event is emitted before a field is being [validated](/input-up-validate).
@@ -20514,7 +20601,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) {
         const form = getContainer(target);
@@ -20525,9 +20612,13 @@ up.form = (function () {
         });
         return switcher || up.fail('Could not find [up-switch] field for %o', target);
     }
-    function getContainer(element) {
+    function getForm(elementOrTarget, fallbackSelector) {
+        const 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());

data/assets/unpoly/unpoly.min.css

@@ -6,5 +6,5 @@ up-bounds{position:absolute}.up-focusable-content:focus,.up-focusable-content:fo
 
 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;text-align:center}up-modal-box,up-drawer-box,up-cover-box,up-popup{display:inline-block;text-align:left;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-viewport{justify-content:center}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{text-align:left}up-drawer[position=right] up-drawer-viewport{text-align:right}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%}
 
-a[up-content],a[up-fragment],a[up-document],[up-href],[up-clickable],[up-accept],[up-dismiss]{cursor:pointer}
+[up-href],[up-clickable]{cursor:pointer}