unpoly-rails 0.57.0 → 0.60.0

data/lib/assets/javascripts/unpoly/form.coffee.erb

@@ -6,11 +6,12 @@ Unpoly comes with functionality to [submit](/form-up-target) and [validate](/inp
 forms without leaving the current page. This means you can replace page fragments,
 open dialogs with sub-forms, etc. all without losing form state.
 
-@class up.form
+@module up.form
 ###
-up.form = (($) ->
+up.form = do ->
   
   u = up.util
+  e = up.element
 
   ###**
   Sets default options for form submission and validation.
@@ -26,16 +27,15 @@ up.form = (($) ->
     will be updated with the validation messages from the server.
 
     By default this looks for a `<fieldset>`, `<label>` or `<form>`
-    around the validating input field, or any element with an
-    `up-fieldset` attribute.
+    around the validating input field.
   @param {string} [config.fields]
     An array of CSS selectors that represent form fields, such as `input` or `select`.
   @param {string} [config.submitButtons]
     An array of CSS selectors that represent submit buttons, such as `input[type=submit]`.
   @stable
   ###
-  config = u.config
-    validateTargets: ['[up-fieldset]:has(&)', 'fieldset:has(&)', 'label:has(&)', 'form:has(&)']
+  config = new up.Config
+    validateTargets: ['fieldset:has(&)', 'label:has(&)', 'form:has(&)']
     fields: ['select', 'input:not([type=submit]):not([type=image])', 'button[type]:not([type=submit])', 'textarea'],
     submitButtons: ['input[type=submit]', 'input[type=image]', 'button[type=submit]', 'button:not([type])']
     observeDelay: 0
@@ -50,6 +50,41 @@ up.form = (($) ->
   fieldSelector = ->
     config.fields.join(',')
 
+  ###**
+  @function up.form.fields
+  @internal
+  ###
+  findFields = (root) ->
+    e.subtree(root, fieldSelector())
+
+#  findFields = (rootOrRoots) ->
+#    rootOrRoots = e.list(rootOrRoots)
+#    u.flatMap rootOrRoots, (root) -> e.subtree(root, fieldSelector())
+
+  ###***
+  @function up.form.submissionFields
+  @internal
+  ###
+  findSubmissionFields = (root) ->
+    fields = findFields(root)
+    if button = submittingButton(root)
+      fields = u.toArray(fields)
+      fields.push(button)
+    fields
+
+  ###**
+  @function up.form.submittingButton
+  @internal
+  ###
+  submittingButton = (form) ->
+    selector = submitButtonSelector()
+    focusedElement = document.activeElement
+    if focusedElement && e.matches(focusedElement, selector) && form.contains(focusedElement)
+      return focusedElement
+    else
+      # If no button is focused, we assume the first button in the form.
+      return e.first(form, selector)
+
   ###**
   @function up.form.submitButtonSelector
   @internal
@@ -149,27 +184,28 @@ up.form = (($) ->
   @stable
   ###
   submit = (formOrSelector, options) ->
-    $form = $(formOrSelector).closest('form')
-
     options = u.options(options)
-    target = u.option(options.target, $form.attr('up-target'), 'body')
-    url = u.option(options.url, $form.attr('action'), up.browser.url())
-    options.failTarget = u.option(options.failTarget, $form.attr('up-fail-target')) || u.selectorForElement($form)
-    options.reveal = u.option(options.reveal, u.castedAttr($form, 'up-reveal'), true)
-    options.failReveal = u.option(options.failReveal, u.castedAttr($form, 'up-fail-reveal'), true)
-    options.fallback = u.option(options.fallback, $form.attr('up-fallback'))
-    options.history = u.option(options.history, u.castedAttr($form, 'up-history'), true)
-    options.transition = u.option(options.transition, u.castedAttr($form, 'up-transition'), 'none')
-    options.failTransition = u.option(options.failTransition, u.castedAttr($form, 'up-fail-transition'), 'none')
-    options.method = u.option(options.method, $form.attr('up-method'), $form.attr('data-method'), $form.attr('method'), 'post').toUpperCase()
-    options.headers = u.option(options.headers, {})
-    options.cache = u.option(options.cache, u.castedAttr($form, 'up-cache'))
-    options.restoreScroll = u.option(options.restoreScroll, u.castedAttr($form, 'up-restore-scroll'))
-    options.origin = u.option(options.origin, $form)
-    options.layer = u.option(options.layer, $form.attr('up-layer'), 'auto')
-    options.failLayer = u.option(options.failLayer, $form.attr('up-fail-layer'), 'auto')
-    options.params = up.params.fromForm($form)
-    options = u.merge(options, up.motion.animateOptions(options, $form))
+
+    form = e.get(formOrSelector)
+    form = e.closest(form, 'form')
+
+    target = options.target ? form.getAttribute('up-target') ? 'body'
+    url = options.url ? form.getAttribute('action') ? up.browser.url()
+    options.failTarget ?= form.getAttribute('up-fail-target') ? e.toSelector(form)
+    options.reveal ?= e.booleanOrStringAttr(form, 'up-reveal') ? true
+    options.failReveal ?= e.booleanOrStringAttr(form, 'up-fail-reveal') ? true
+    options.fallback ?= form.getAttribute('up-fallback')
+    options.history ?= e.booleanOrStringAttr(form, 'up-history') ? true
+    options.transition ?= e.booleanOrStringAttr(form, 'up-transition')
+    options.failTransition ?= e.booleanOrStringAttr(form, 'up-fail-transition')
+    options.method ?= form.getAttribute('up-method') ? form.getAttribute('data-method') ? form.getAttribute('method') ? 'post'
+    options.cache ?= e.booleanAttr(form, 'up-cache')
+    options.restoreScroll ?= e.booleanAttr(form, 'up-restore-scroll') # the option supports an object value, but not the attr
+    options.origin ?= form
+    options.layer ?= form.getAttribute('up-layer')
+    options.failLayer ?= form.getAttribute('up-fail-layer')
+    options.params = up.Params.fromForm(form)
+    options = u.merge(options, up.motion.animateOptions(options, form))
 
     if options.validate
       options.headers ||= {}
@@ -177,24 +213,26 @@ up.form = (($) ->
       options.failTransition = false
       options.headers[up.protocol.config.validateHeader] = options.validate
 
-    up.bus.whenEmitted('up:form:submit', message: 'Submitting form', $form: $form, $element: $form).then ->
-      up.feedback.start($form)
+    up.event.whenEmitted('up:form:submit', log: 'Submitting form', target: form).then ->
+      up.feedback.start(form)
 
       # If we can't update the location URL, fall back to a vanilla form submission.
       unless up.browser.canPushState() || options.history == false
         # Don't use up.browser.navigate(); It cannot deal with file inputs.
-        $form.get(0).submit()
+        form.submit()
         return u.unresolvablePromise()
 
       promise = up.replace(target, url, options)
-      u.always promise, -> up.feedback.stop($form)
+      u.always promise, -> up.feedback.stop(form)
       promise
 
   ###**
   This event is [emitted](/up.emit) when a form is [submitted](/up.submit) through Unpoly.
 
+  The event is emitted on the`<form>` element.
+
   @event up:form:submit
-  @param {jQuery} event.$form
+  @param {Element} event.target
     The `<form>` element that will be submitted.
   @param event.preventDefault()
     Event listeners may call this method to prevent the form from being submitted.
@@ -206,105 +244,71 @@ up.form = (($) ->
 
   This is useful for observing text fields while the user is typing.
 
-  The unobtrusive variant of this is the [`up-observe`](/up-observe) attribute.
+  The unobtrusive variant of this is the [`[up-observe]`](/up-observe) attribute.
 
   \#\#\# Example
 
   The following would print to the console whenever an input field changes:
 
-      up.observe('input.query', function(value, $input) {
-        console.log('Query is now ' + value);
-      });
+      up.observe('input.query', function(value) {
+        console.log('Query is now %o', value)
+      })
 
   Instead of a single form field, you can also pass multiple fields,
   a `<form>` or any container that contains form fields.
-  The callback will be run if any of the given fields change.
-
-  \#\#\# Preventing concurrency
-
-  Making network requests whenever a form field changes can cause
-  [concurrency issues](https://makandracards.com/makandra/961-concurrency-issues-with-find-as-you-type-boxes).
-  Since `up.observe()` can trigger many requests in a short period of time,
-  the responses might not arrive in the same order.
-
-  To mitigate this, `up.observe()` will try to never run a callback
-  before the previous callback has completed.
-  For this your callback code must return a promise that resolves
-  when your request completes.
-  
-  The following would submit a form whenever an input field changes,
-  but never make more than one request at a time:
-
-      up.observe('input.query', function(value, $input) {
-        var submitDone = up.submit($input);
-        return submitDone;
-      });
-  
-  Note that many Unpoly functions like [`up.submit()`](/up.submit) or
-  [`up.replace()`](/up.replace) return promises.
+  The callback will be run if any of the given fields change:
 
-  \#\#\# Debouncing
+      up.observe('form', function(value, name) {
+        console.log('The value of %o is now %o', name, value)
+      })
 
-  If you are concerned about fast typists causing too much
-  load on your server, you can use a `delay` option to wait
-  a few miliseconds before executing the callback:
+  You may also pass the `{ batch: true }` option to receive all
+  changes since the last callback in a single object:
 
-      up.observe('input', { delay: 100 }, function(value, $input) {
-        up.submit($input)
-      });
+      up.observe('form', { batch: true }, function(diff) {
+        console.log('Observed one or more changes: %o', diff)
+      })
 
   @function up.observe
-  @param {Element|jQuery|string} selectorOrElement
-    The form fields that wiill be observed.
+  @param {string|Element|Array<Element>|jQuery} elements
+    The form fields that will be observed.
 
     You can pass one or more fields, a `<form>` or any container that contains form fields.
     The callback will be run if any of the given fields change.
+  @param {boolean} [options.batch=false]
+    If set to `true`, the `onChange` callback will receive multiple
+    detected changes in a single diff object as its argument.
   @param {number} [options.delay=up.form.config.observeDelay]
     The number of miliseconds to wait before executing the callback
     after the input value changes. Use this to limit how often the callback
     will be invoked for a fast typist.
-  @param {Function(value, $field)|string} onChange
+  @param {Function(value, name): string} onChange
     The callback to run when the field's value changes.
-    If given as a function, it must take two arguments (`value`, `$field`).
+
+    If given as a function, it receives two arguments (`value`, `name`).
+    `value` is a string with the new attribute value and `string` is the name
+    of the form field that changed.
+
     If given as a string, it will be evaled as JavaScript code in a context where
-    (`value`, `$field`) are set.
-  @return {Function}
+    (`value`, `name`) are set.
+  @return {Function()}
     A destructor function that removes the observe watch when called.
   @stable
   ###
-  observe = (selectorOrElement, extraArgs...) ->
-    options = {}
-    callbackArg = undefined
-    if extraArgs.length == 1
-      callbackArg = extraArgs[0]
-    else if extraArgs.length > 1
-      options = u.options(extraArgs[0])
-      callbackArg = extraArgs[1]
-
-    $element = $(selectorOrElement)
-
-    callback = null
-    rawCallback = u.option(callbackArg, u.presentAttr($element, 'up-observe'))
-    if u.isString(rawCallback)
-      callback = new Function('value', '$field', rawCallback)
-    else
-      callback = rawCallback or up.fail('up.observe: No change callback given')
-
-    delay = u.option(u.presentAttr($element, 'up-delay'), options.delay, config.observeDelay)
-    delay = parseInt(delay)
-
-    $fields = u.selectInSubtree($element, fieldSelector())
-
-    destructors = u.map $fields, (field) ->
-      observeField($(field), delay, callback)
-
-    u.sequence(destructors...)
-
-  observeField = ($field, delay, callback) ->
-    observer = new up.FieldObserver($field, { delay, callback })
+  observe = (elements, args...) ->
+    elements = e.list(elements)
+    fields = u.flatMap(elements, findFields)
+    callback = u.extractCallback(args) ? observeCallbackFromElement(elements[0]) ? up.fail('up.observe: No change callback given')
+    options = u.extractOptions(args)
+    options.delay = options.delay ? e.numberAttr(elements[0], 'up-delay') ? config.observeDelay
+    observer = new up.FieldObserver(fields, options, callback)
     observer.start()
     return observer.stop
 
+  observeCallbackFromElement = (element) ->
+    if rawCallback = element.getAttribute('up-observe')
+      new Function('value', 'name', rawCallback)
+
   ###**
   [Observes](/up.observe) a field or form and submits the form when a value changes.
 
@@ -318,28 +322,27 @@ up.form = (($) ->
     The field or form to observe.
   @param {Object} [options]
     See options for [`up.observe()`](/up.observe)
-  @return {Function}
+  @return {Function()}
     A destructor function that removes the observe watch when called.
   @stable
   ###
   autosubmit = (selectorOrElement, options) ->
-    observe(selectorOrElement, options, (value, $field) ->
-      $form = $field.closest('form')
-      up.feedback.start $field, -> submit($form)
-    )
-
-  resolveValidateTarget = ($field, options) ->
-    target = u.option(options.target, $field.attr('up-validate'))
-    if u.isBlank(target)
-      target ||= u.detect(config.validateTargets, (defaultTarget) ->
-        resolvedDefault = up.dom.resolveSelector(defaultTarget, options.origin)
-        $field.closest(resolvedDefault).length
-      )
-    if u.isBlank(target)
-      up.fail('Could not find default validation target for %o (tried ancestors %o)', $field.get(0), config.validateTargets)
-    unless u.isString(target)
-      target = u.selectorForElement(target)
-    target
+    observe(selectorOrElement, options, -> submit(selectorOrElement))
+
+  findValidateTarget = (field, options) ->
+    option = options.target ? field.getAttribute('up-validate')
+    option ||= u.findResult config.validateTargets, (defaultTarget) ->
+      resolvedDefault = e.resolveSelector(defaultTarget, options.origin)
+      if e.first(resolvedDefault)
+        # We want to return the selector, *not* the element. If we returned the element
+        # and derive a selector from that, any :has() expression would be lost.
+        return resolvedDefault
+
+    unless option
+      up.fail('Could not find validation target for %o (tried defaults %o)', field, config.validateTargets)
+
+    # resolveSelector() also creates a selector string if given an element
+    return e.resolveSelector(option, options.origin)
 
   ###**
   Performs a server-side validation of a form field.
@@ -366,38 +369,42 @@ up.form = (($) ->
   @stable
   ###
   validate = (fieldOrSelector, options) ->
-    $field = $(fieldOrSelector)
+    field = e.get(fieldOrSelector)
     options = u.options(options)
-    options.origin = $field
-    options.target = resolveValidateTarget($field, options)
+    options.origin = field
+    options.target = findValidateTarget(field, options)
     options.failTarget = options.target
-    options.reveal = u.option(options.reveal, u.castedAttr($field, 'up-reveal'), false)
+    options.reveal ?= e.booleanOrStringAttr(field, 'up-reveal') ? false
     options.history = false
-    options.headers = u.option(options.headers, {})
     # Make sure the X-Up-Validate header is present, so the server-side
     # knows that it should not persist the form submission
-    options.validate = ($field.attr('name') || '__none__')
-    options = u.merge(options, up.motion.animateOptions(options, $field))
-    $form = $field.closest('form')
-    promise = up.submit($form, options)
+    options.validate = field.getAttribute('name') || ':none'
+    options = u.merge(options, up.motion.animateOptions(options, field))
+    promise = up.submit(field, options)
     promise
 
-  switcherValues = ($field) ->
-    if $field.is('input[type=checkbox]')
-      if $field.is(':checked')
-        value = $field.val()
+  switcherValues = (field) ->
+    value = undefined
+    meta = undefined
+
+    if e.matches(field, 'input[type=checkbox]')
+      if field.checked
+        value = field.value
         meta = ':checked'
       else
         meta = ':unchecked'
-    else if $field.is('input[type=radio]')
-      $checkedButton = $field.closest('form, body').find("input[type='radio'][name='#{$field.attr('name')}']:checked")
-      if $checkedButton.length
+    else if e.matches(field, 'input[type=radio]')
+      form = closestContainer(field)
+      groupName = field.getAttribute('name')
+      checkedButton = form.querySelector("input[type=radio]#{e.attributeSelector('name', groupName)}:checked")
+      if checkedButton
         meta = ':checked'
-        value = $checkedButton.val()
+        value = checkedButton.value
       else
         meta = ':unchecked'
     else
-      value = $field.val()
+      value = field.value
+
     values = []
     if u.isPresent(value)
       values.push(value)
@@ -418,32 +425,32 @@ up.form = (($) ->
   still marked `@internal`.
 
   @function up.form.switchTargets
-  @param {string|Element|jQuery} fieldOrSelector
+  @param {Element} switcher
   @param {string} [options.target]
     The target selectors to switch.
-    Defaults to an `up-switch` attribute on the given field.
+    Defaults to an `[up-switch]` attribute on the given field.
   @internal
   ###
-  switchTargets = (fieldOrSelector, options) ->
-    $switcher = $(fieldOrSelector)
-    options = u.options(options)
-    targetSelector = u.option(options.target, $switcher.attr('up-switch'))
-    u.isPresent(targetSelector) or up.fail("No switch target given for %o", $switcher.get(0))
-    fieldValues = switcherValues($switcher)
-    $(targetSelector).each ->
-      switchTarget($(this), fieldValues)
+  switchTargets = (switcher, options = {}) ->
+    targetSelector = options.target ? switcher.getAttribute('up-switch')
+    form = closestContainer(switcher)
+    u.isPresent(targetSelector) or up.fail("No switch target given for %o", switcher)
+    fieldValues = switcherValues(switcher)
+
+    u.each e.all(form, targetSelector), (target) ->
+      switchTarget(target, fieldValues)
 
   ###**
   @internal
   ###
   switchTarget = (target, fieldValues) ->
-    $target = $(target)
-    fieldValues ||= switcherValues(findSwitcherForTarget($target))
-    if hideValues = $target.attr('up-hide-for')
+    fieldValues ||= switcherValues(findSwitcherForTarget(target))
+
+    if hideValues = target.getAttribute('up-hide-for')
       hideValues = u.splitValues(hideValues)
       show = u.intersect(fieldValues, hideValues).length == 0
     else
-      if showValues = $target.attr('up-show-for')
+      if showValues = target.getAttribute('up-show-for')
         showValues = u.splitValues(showValues)
       else
         # If the target has neither up-show-for or up-hide-for attributes,
@@ -451,21 +458,23 @@ up.form = (($) ->
         # is checked or entered.
         showValues = [':present', ':checked']
       show = u.intersect(fieldValues, showValues).length > 0
-    $target.toggle(show)
-    $target.addClass('up-switched')
+
+    e.toggle(target, show)
+    target.classList.add('up-switched')
 
   ###**
   @internal
   ###
-  findSwitcherForTarget = ($target) ->
-    $switchers = $('[up-switch]')
-    switcher = u.detect $switchers, (switcher) ->
-      target = $(switcher).attr('up-switch')
-      $target.is(target)
-    if switcher
-      $(switcher)
-    else
-      u.fail('Could not find [up-switch] field for %o', $target.get(0))
+  findSwitcherForTarget = (target) ->
+    form = closestContainer(target)
+    switchers = e.all(form, '[up-switch]')
+    switcher = u.find switchers, (switcher) ->
+      targetSelector = switcher.getAttribute('up-switch')
+      e.matches(target, targetSelector)
+    return switcher or u.fail('Could not find [up-switch] field for %o', target)
+
+  closestContainer = (element) ->
+    e.closest(element, 'form, body')
 
   ###**
   Forms with an `up-target` attribute are [submitted via AJAX](/up.submit)
@@ -600,9 +609,9 @@ up.form = (($) ->
     By default only responses to `GET` requests are cached for a few minutes.
   @stable
   ###
-  up.on 'submit', 'form[up-target]', (event, $form) ->
-    up.bus.consumeAction(event)
-    u.muteRejection submit($form)
+  up.on 'submit', 'form[up-target]', (event, form) ->
+    up.event.consumeAction(event)
+    u.muteRejection submit(form)
 
   ###**
   When a form field with this attribute is changed, the form is validated on the server
@@ -749,8 +758,8 @@ up.form = (($) ->
     This defaults to a fieldset or form group around the validating field.
   @stable
   ###
-  up.on 'change', '[up-validate]', (event, $field) ->
-    u.muteRejection validate($field)
+  up.on 'change', '[up-validate]', (event, field) ->
+    u.muteRejection validate(field)
 
   ###**
   Show or hide elements when a `<select>` or `<input>` has a given value.
@@ -848,14 +857,14 @@ up.form = (($) ->
     A space-separated list of input values for which this element should be hidden.
   @stable
   ###
-  up.compiler '[up-switch]', ($field) ->
-    switchTargets($field)
+  up.compiler '[up-switch]', (switcher) ->
+    switchTargets(switcher)
 
-  up.on 'change', '[up-switch]', (event, $field) ->
-    switchTargets($field)
+  up.on 'change', '[up-switch]', (event, switcher) ->
+    switchTargets(switcher)
 
-  up.compiler '[up-show-for]:not(.up-switched), [up-hide-for]:not(.up-switched)', ($element) ->
-    switchTarget($element)
+  up.compiler '[up-show-for]:not(.up-switched), [up-hide-for]:not(.up-switched)', (element) ->
+    switchTarget(element)
 
   ###**
   Observes this field and runs a callback when a value changes.
@@ -927,7 +936,7 @@ up.form = (($) ->
     The number of miliseconds to wait after a change before the code is run.
   @stable
   ###
-  up.compiler '[up-observe]', ($formOrField) -> observe($formOrField)
+  up.compiler '[up-observe]', (formOrField) -> observe(formOrField)
 
   ###**
   [Observes](/up.observe) this form field and submits the form when its value changes.
@@ -974,9 +983,9 @@ up.form = (($) ->
     The number of miliseconds to wait after a change before the form is submitted.
   @stable
   ###
-  up.compiler '[up-autosubmit]', ($formOrField) -> autosubmit($formOrField)
+  up.compiler '[up-autosubmit]', (formOrField) -> autosubmit(formOrField)
 
-  up.compiler '[autofocus]', { batch: true }, ($input) -> $input.last().focus()
+  up.compiler '[autofocus]', { batch: true }, (inputs) -> u.last(inputs).focus()
 
   up.on 'up:framework:reset', reset
 
@@ -985,12 +994,10 @@ up.form = (($) ->
   submit: submit
   observe: observe
   validate: validate
-  switchTargets: switchTargets
   autosubmit: autosubmit
   fieldSelector: fieldSelector
-  submitButtonSelector: submitButtonSelector
-
-)(jQuery)
+  fields: findFields
+  submissionFields: findSubmissionFields
 
 up.submit = up.form.submit
 up.observe = up.form.observe