upjs-rails 0.17.0 → 0.18.0

data/lib/assets/javascripts/up/form.js.coffee

@@ -114,31 +114,26 @@ up.form = (($) ->
     $form = $(formOrSelector).closest('form')
 
     options = u.options(options)
-    successSelector = u.option(options.target, $form.attr('up-target'), 'body')
-    successSelector = up.flow.resolveSelector(successSelector, options)
-    failureSelector = u.option(options.failTarget, $form.attr('up-fail-target')) || u.selectorForElement($form)
-    failureSelector = up.flow.resolveSelector(failureSelector, options)
-
-    historyOption = u.option(options.history, u.castedAttr($form, 'up-history'), true)
-    successTransition = u.option(options.transition, u.castedAttr($form, 'up-transition'))
-    failureTransition = u.option(options.failTransition, u.castedAttr($form, 'up-fail-transition'), successTransition)
-    httpMethod = u.option(options.method, $form.attr('up-method'), $form.attr('data-method'), $form.attr('method'), 'post').toUpperCase()
-    headers = u.option(options.headers, {})
-
-    implantOptions = {}
-    implantOptions.reveal = u.option(options.reveal, u.castedAttr($form, 'up-reveal'), true)
-    implantOptions.cache = u.option(options.cache, u.castedAttr($form, 'up-cache'))
-    implantOptions.restoreScroll = u.option(options.restoreScroll, u.castedAttr($form, 'up-restore-scroll'))
-    implantOptions.origin = u.option(options.origin, $form)
-    implantOptions = u.extend(implantOptions, up.motion.animateOptions(options, $form))
-
-    useCache = u.option(options.cache, u.castedAttr($form, 'up-cache'))
+    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.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.reveal = u.option(options.reveal, u.castedAttr($form, 'up-reveal'), true)
+    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.data = $form.serializeArray()
+    options = u.merge(options, up.motion.animateOptions(options, $form))
 
     hasFileInputs = $form.find('input[type=file]').length
 
     if options.validate
-      headers['X-Up-Validate'] = options.validate
+      options.headers ||= {}
+      options.headers['X-Up-Validate'] = options.validate
       # Since we cannot (yet) submit file inputs via AJAX, we cannot
       # offer inline validation for such forms.
       if hasFileInputs
@@ -146,43 +141,13 @@ up.form = (($) ->
 
     $form.addClass('up-active')
 
-    if hasFileInputs || (!up.browser.canPushState() && historyOption != false)
+    if hasFileInputs || (!up.browser.canPushState() && options.history != false)
       $form.get(0).submit()
       return u.unresolvablePromise()
 
-    request = {
-      url: url
-      method: httpMethod
-      data: $form.serialize()
-      selector: successSelector
-      cache: useCache
-      headers: headers
-    }
-
-    successUrl = (xhr) ->
-      url = undefined
-      if u.isGiven(historyOption)
-        if historyOption == false || u.isString(historyOption)
-          url = historyOption
-        else if currentLocation = u.locationFromXhr(xhr)
-          url = currentLocation
-        else if request.type == 'GET'
-          url = request.url + '?' + request.data
-      u.option(url, false)
-
-    up.proxy.ajax(request)
-      .always ->
-        $form.removeClass('up-active')
-      .done (html, textStatus, xhr) ->
-        successOptions = u.merge(implantOptions,
-          history: successUrl(xhr),
-          transition: successTransition
-        )
-        up.flow.implant(successSelector, html, successOptions)
-      .fail (xhr, textStatus, errorThrown) ->
-        html = xhr.responseText
-        failureOptions = u.merge(implantOptions, transition: failureTransition)
-        up.flow.implant(failureSelector, html, failureOptions)
+    promise = up.replace(target, url, options)
+    promise.always -> $form.removeClass('up-active')
+    return promise
 
   ###*
   Observes a field or form and runs a callback when a value changes.
@@ -355,7 +320,6 @@ up.form = (($) ->
   @stable
   ###
   autosubmit = (selectorOrElement, options) ->
-    console.log("autosubmit %o", selectorOrElement)
     observe(selectorOrElement, options, (value, $field) ->
       $form = $field.closest('form')
       $field.addClass('up-active')
@@ -366,7 +330,7 @@ up.form = (($) ->
     target = u.option(options.target, $field.attr('up-validate'))
     if u.isBlank(target)
       target ||= u.detect(config.validateTargets, (defaultTarget) ->
-        resolvedDefault = up.flow.resolveSelector(defaultTarget, options)
+        resolvedDefault = up.flow.resolveSelector(defaultTarget, options.origin)
         $field.closest(resolvedDefault).length
       )
     if u.isBlank(target)
@@ -415,6 +379,95 @@ up.form = (($) ->
     promise = up.submit($form, options)
     promise
 
+  currentValuesForToggle = ($field) ->
+    values = undefined
+    if $field.is('input[type=checkbox]')
+      if $field.is(':checked')
+        values = [':checked', ':present', $field.val()]
+      else
+        values = [':unchecked', ':blank']
+    else if $field.is('input[type=radio]')
+      console.log('-- it is a radio button --')
+      $checkedButton = $field.closest('form, body').find("input[type='radio'][name='#{$field.attr('name')}']:checked")
+      console.log('checked button is %o', $checkedButton)
+      console.log('checked button val is %o', $checkedButton.val())
+      if $checkedButton.length
+        values = [':checked', ':present', $checkedButton.val()]
+      else
+        values = [':unchecked', ':blank']
+    else
+      console.log('-- else -- for %o', $field)
+      value = $field.val()
+      if u.isPresent(value)
+        values = [':present', value]
+      else
+        values = [':blank']
+    values
+
+  currentValuesForToggle = ($field) ->
+    if $field.is('input[type=checkbox]')
+      if $field.is(':checked')
+        value = $field.val()
+        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
+        meta = ':checked'
+        value = $checkedButton.val()
+      else
+        meta = ':unchecked'
+    else
+      value = $field.val()
+    values = []
+    if u.isPresent(value)
+      values.push(value)
+      values.push(':present')
+    else
+      values.push(':blank')
+    if u.isPresent(meta)
+      values.push(meta)
+    values
+
+  ###*
+  Shows or hides a target selector depending on the value.
+
+  See [`[up-toggle]`](/up-toggle) for more documentation and examples.
+
+  This function does not currently have a very useful API outside
+  of our use for `up-toggle`'s UJS behavior, that's why it's currently
+  still marked `@internal`.
+
+  @function up.form.toggle
+  @param {String|Element|jQuery} fieldOrSelector
+  @param {String} [options.target]
+    The target selectors to toggle.
+    Defaults to an `up-toggle` attribute on the given field.
+  @internal
+  ###
+  toggleTargets = (fieldOrSelector, options) ->
+    $field = $(fieldOrSelector)
+    options = u.options(options)
+    targets = u.option(options.target, $field.attr('up-toggle'))
+    u.isPresent(targets) or u.error("No toggle target given for %o", $field)
+    fieldValues = currentValuesForToggle($field)
+    $(targets).each ->
+      $target = $(this)
+      if hideValues = $target.attr('up-hide-for')
+        hideValues = hideValues.split(' ')
+        show = u.intersect(fieldValues, hideValues).length == 0
+      else
+        if showValues = $target.attr('up-show-for')
+          showValues = showValues.split(' ')
+        else
+          # If the target has neither up-show-for or up-hide-for attributes,
+          # assume the user wants the target to be visible whenever anything
+          # is checked or entered.
+          showValues = [':present', ':checked']
+        show = u.intersect(fieldValues, showValues).length > 0
+      $target.toggle(show)
+
   ###*
   Forms with an `up-target` attribute are [submitted via AJAX](/up.submit)
   instead of triggering a full page reload.
@@ -468,7 +521,7 @@ up.form = (($) ->
 
   When the form's action performs a redirect, the server should echo
   the new request's URL as a response header `X-Up-Location`
-  and the request's HTTP method as `X-Up-Method`.
+  and the request's HTTP method as `X-Up-Method: GET`.
 
   If you are using Up.js via the `upjs-rails` gem, these headers
   are set automatically for every request.
@@ -662,6 +715,83 @@ up.form = (($) ->
   up.on 'change', '[up-validate]', (event, $field) ->
     validate($field)
 
+  ###*
+  Show or hide part of a form if certain options are selected or boxes are checked.
+
+  \#\#\#\# Example
+
+  The triggering input gets an `up-toggle` attribute with a selector for the elements to show or hide:
+
+      <select name="advancedness" up-toggle=".target">
+        <option value="basic">Basic parts</option>
+        <option value="advanced">Advanced parts</option>
+        <option value="very-advanced">Very advanced parts</option>
+      </select>
+
+  The target elements get a space-separated list of select values for which they are shown or hidden:
+
+      <div class="target" up-show-for="basic">
+        only shown for advancedness = basic
+      </div>
+
+      <div class="target" up-hide-for="basic">
+        hidden for advancedness = basic
+      </div>
+
+      <div class="target" up-show-for="advanced very-advanced">
+        shown for advancedness = advanced or very-advanced
+      </div>
+
+  For checkboxes you can also use the pseudo-values `:checked` or `:unchecked` like so:
+
+      <input type="checkbox" name="flag" up-toggle=".target">
+
+      <div class="target" up-show-for=":checked">
+        only shown when checkbox is checked
+      </div>
+
+  You can also use the pseudo-values `:blank` to match an empty input value,
+  or `:present` to match a non-empty input value:
+
+      <input type="text" name="email" up-toggle=".target">
+
+      <div class="target" up-show-for=":blank">
+        please enter an email address
+      </div>
+
+  @selector [up-toggle]
+  @stable
+  ###
+
+  ###*
+  Show this element only if a form field has a given value.
+
+  See [`[up-toggle]`](/up-toggle) for more documentation and examples.
+
+  @selector [up-show-for]
+  @param up-show-for
+    A space-separated list of values for which to show this element.
+  @stable
+  ###
+
+  ###*
+  Hide this element if a form field has a given value.
+
+  See [`[up-toggle]`](/up-toggle) for more documentation and examples.
+
+  @selector [up-hide-for]
+  @param up-hide-for
+    A space-separated list of values for which to show this element.
+  @stable
+  ###
+
+  up.on 'change', '[up-toggle]', (event, $field) ->
+    console.log("CHANGE EVENT")
+    toggleTargets($field)
+
+  up.compiler '[up-toggle]', ($field) ->
+    toggleTargets($field)
+
   ###*
   Observes this field or form and runs a callback when a value changes.
 
@@ -728,6 +858,7 @@ up.form = (($) ->
   submit: submit
   observe: observe
   validate: validate
+  toggleTargets: toggleTargets
 
 )(jQuery)
 

data/lib/assets/javascripts/up/link.js.coffee

@@ -130,8 +130,13 @@ up.link = (($) ->
     or any element that is marked up with an `up-href` attribute.
   @param {String} [options.target]
     The selector to replace.
-    Defaults to the `up-target` attribute on `link`,
-    or to `body` if such an attribute does not exist.
+    Defaults to the `up-target` attribute on `link`, or to `body` if such an attribute does not exist.
+  @param {String} [options.failTarget]
+    The selector to replace if the server responds with a non-200 status code.
+    Defaults to the `up-fail-target` attribute on `link`, or to `body` if such an attribute does not exist.
+  @param {String} [options.confirm]
+    A message that will be displayed in a cancelable confirmation dialog
+    before the link is followed.
   @param {Function|String} [options.transition]
     A transition function or name.
   @param {Number} [options.duration]
@@ -162,17 +167,21 @@ up.link = (($) ->
 
     options = u.options(options)
     url = u.option($link.attr('up-href'), $link.attr('href'))
-    selector = u.option(options.target, $link.attr('up-target'), 'body')
-    options.transition = u.option(options.transition, u.castedAttr($link, 'up-transition'), u.castedAttr($link, 'up-animation'))
+    target = u.option(options.target, $link.attr('up-target'), 'body')
+    options.failTarget = u.option(options.failTarget, $link.attr('up-fail-target'), 'body')
+    options.transition = u.option(options.transition, u.castedAttr($link, 'up-transition'), 'none')
+    options.failTransition = u.option(options.failTransition, u.castedAttr($link, 'up-fail-transition'), 'none')
     options.history = u.option(options.history, u.castedAttr($link, 'up-history'))
     options.reveal = u.option(options.reveal, u.castedAttr($link, 'up-reveal'), true)
     options.cache = u.option(options.cache, u.castedAttr($link, 'up-cache'))
     options.restoreScroll = u.option(options.restoreScroll, u.castedAttr($link, 'up-restore-scroll'))
     options.method = followMethod($link, options)
     options.origin = u.option(options.origin, $link)
+    options.confirm = u.option(options.confirm, $link.attr('up-confirm'))
     options = u.merge(options, up.motion.animateOptions(options, $link))
 
-    up.replace(selector, url, options)
+    up.browser.confirm(options.confirm).then ->
+      up.replace(target, url, options)
 
   ###*
   Returns the HTTP method that should be used when following the given link.
@@ -213,7 +222,7 @@ up.link = (($) ->
   ###
   allowDefault = (event) ->
 
-  registerFollowVariant = (selector, handler) ->
+  onAction = (selector, handler) ->
     followVariantSelectors.push(selector)
     up.on 'click', "a#{selector}, [up-href]#{selector}", (event, $link) ->
       if shouldProcessLinkEvent(event, $link)
@@ -298,9 +307,14 @@ up.link = (($) ->
   @selector a[up-target]
   @param {String} up-target
     The CSS selector to replace
+  @param [up-fail-target='body']
+    The selector to replace if the server responds with a non-200 status code.
   @param {String} [up-href]
     The destination URL to follow.
     If omitted, the the link's `href` attribute will be used.
+  @param {String} [up-confirm]
+    A message that will be displayed in a cancelable confirmation dialog
+    before the link is followed.
   @param {String} [up-reveal='true']
     Whether to reveal the target element within its viewport before updating.
   @param {String} [up-restore-scroll='false']
@@ -314,7 +328,7 @@ up.link = (($) ->
     Set this to `'false'` to prevent the current URL from being updated.
   @stable
   ###
-  registerFollowVariant '[up-target]', ($link) ->
+  onAction '[up-target]', ($link) ->
     follow($link)
 
   ###*
@@ -361,9 +375,14 @@ up.link = (($) ->
   opening the destination in a new tab.
 
   @selector a[up-follow]
+  @param [up-fail-target='body']
+    The selector to replace if the server responds with a non-200 status code.
   @param [up-href]
     The destination URL to follow.
     If omitted, the the link's `href` attribute will be used.
+  @param {String} [up-confirm]
+    A message that will be displayed in a cancelable confirmation dialog
+    before the link is followed.
   @param [up-history]
     Set this to `'false'` to prevent the current URL from being updated.
   @param [up-restore-scroll='false']
@@ -371,7 +390,7 @@ up.link = (($) ->
     within the response.
   @stable
   ###
-  registerFollowVariant '[up-follow]', ($link) ->
+  onAction '[up-follow]', ($link) ->
     follow($link)
 
   ###*
@@ -393,22 +412,39 @@ up.link = (($) ->
 
   `up-expand` also expands links that open [modals](/up.modal) or [popups](/up.popup).
 
+  \#\#\#\# Elements with multiple contained links
+
+  If a container contains more than one link, you can set the value of the
+  `up-expand` attribute to a CSS selector to define which link should be expanded:
+
+      <div class="notification" up-expand=".close">
+        Record was saved!
+        <a class="details" href="/records/5">Details</a>
+        <a class="close" href="/records">Close</a>
+      </div>
+
   @selector [up-expand]
+  @param {String} [up-expand]
+    A CSS selector that defines which containing link should be expanded.
+
+    If omitted, the first contained link will be expanded.
   @stable
   ###
   up.compiler '[up-expand]', ($area) ->
-    link = $area.find('a, [up-href]').get(0)
-    link or u.error('No link to expand within %o', $area)
-    upAttributePattern = /^up-/
-    newAttrs = {}
-    newAttrs['up-href'] = $(link).attr('href')
-    for attribute in link.attributes
-      name = attribute.name
-      if name.match(upAttributePattern)
-        newAttrs[name] = attribute.value
-    u.setMissingAttrs($area, newAttrs)
-    $area.removeAttr('up-expand')
-    makeFollowable($area)
+    $childLinks = $area.find('a, [up-href]')
+    if selector = $area.attr('up-expand')
+      $childLinks = $childLinks.filter(selector)
+    if link = $childLinks.get(0)
+      upAttributePattern = /^up-/
+      newAttrs = {}
+      newAttrs['up-href'] = $(link).attr('href')
+      for attribute in link.attributes
+        name = attribute.name
+        if name.match(upAttributePattern)
+          newAttrs[name] = attribute.value
+      u.setMissingAttrs($area, newAttrs)
+      $area.removeAttr('up-expand')
+      makeFollowable($area)
 
   ###*
   Marks up the current link to be followed *as fast as possible*.
@@ -452,7 +488,7 @@ up.link = (($) ->
   shouldProcessLinkEvent: shouldProcessLinkEvent
   childClicked: childClicked
   followMethod: followMethod
-  registerFollowVariant: registerFollowVariant
+  onAction: onAction
 
 )(jQuery)