unpoly-rails 0.52.0 → 0.53.0

data/lib/assets/javascripts/unpoly/classes/extract_plan.coffee

@@ -5,7 +5,7 @@ class up.ExtractPlan
   constructor: (selector, options) ->
     @origin = options.origin
     @selector = up.dom.resolveSelector(selector, options.origin)
-    @transition = options.transition || options.animation || 'none'
+    @transition = options.transition
     @response = options.response
     @oldLayer = options.layer
     @steps = @parseSteps()
@@ -41,16 +41,11 @@ class up.ExtractPlan
       ]
   ###
   parseSteps: =>
-    if u.isString(@transition)
-      transitions = @transition.split(comma)
-    else
-      transitions = [@transition]
-
     comma = /\ *,\ */
 
     disjunction = @selector.split(comma)
 
-    u.map disjunction, (literal, i) ->
+    u.map disjunction, (literal, i) =>
       literalParts = literal.match(/^(.+?)(?:\:(before|after))?$/)
       literalParts or up.fail('Could not parse selector literal "%s"', literal)
       selector = literalParts[1]
@@ -60,8 +55,7 @@ class up.ExtractPlan
         selector = 'body'
 
       pseudoClass = literalParts[2]
-      transition = transitions[i] || u.last(transitions)
 
       selector: selector
       pseudoClass: pseudoClass
-      transition: transition
+      transition: @transition

data/lib/assets/javascripts/unpoly/dom.coffee

@@ -28,13 +28,15 @@ up.dom = (($) ->
     It is recommend to always keep `'body'` as the last selector in the last in the case
     your server or load balancer renders an error message that does not contain your
     application layout.
-  @param {string} [options.fallbackTransition='none']
-    The transition to use when using a fallback target.
+  @param {string} [options.fallbackTransition=null]
+    The transition to use when using a [fallback target](/#options.fallbacks).
+
+    By default this is not set and the original replacement's transition is used.
   @stable
   ###
   config = u.config
     fallbacks: ['body']
-    fallbackTransition: 'none'
+    fallbackTransition: null
 
   reset = ->
     config.reset()
@@ -187,8 +189,11 @@ up.dom = (($) ->
     If set to `false`, the history will remain unchanged.
   @param {boolean|string} [options.source=true]
   @param {boolean|string} [options.reveal=false]
-    Whether to [reveal](/up.reveal) the element being updated, by
-    scrolling its containing viewport.
+    Whether to [reveal](/up.reveal) the new fragment.
+
+    You can also pass a CSS selector for the element to reveal.
+  @param {boolean|string} [options.failReveal=false]
+    Whether to [reveal](/up.reveal) the new fragment when the server responds with an error.
 
     You can also pass a CSS selector for the element to reveal.
   @param {boolean} [options.restoreScroll=false]
@@ -239,8 +244,12 @@ up.dom = (($) ->
     failureOptions = u.merge options,
       humanizedTarget: 'failure target'
       provideTarget: undefined # don't provide a target if we're targeting the failTarget
+      restoreScroll: false
+      hungry: false
+
     u.renameKey(failureOptions, 'failTransition', 'transition')
     u.renameKey(failureOptions, 'failLayer', 'layer')
+    u.renameKey(failureOptions, 'failReveal', 'reveal')
 
     try
       improvedTarget = bestPreflightSelector(selectorOrElement, successOptions)

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

@@ -102,8 +102,14 @@ up.form = (($) ->
     The delay before the transition starts. See [`up.morph()`](/up.morph).
   @param {string} [options.easing]
     The timing function that controls the transition's acceleration. [`up.morph()`](/up.morph).
-  @param {Element|jQuery|string} [options.reveal=true]
-    Whether to reveal the target element within its viewport.
+  @param {Element|string} [options.reveal=true]
+    Whether to reveal the target fragment after it was replaced.
+
+    You can also pass a CSS selector for the element to reveal.
+  @param {boolean|string} [options.failReveal=true]
+    Whether to [reveal](/up.reveal) the target fragment when the server responds with an error.
+
+    You can also pass a CSS selector for the element to reveal.
   @param {boolean} [options.restoreScroll]
     If set to `true`, this will attempt to [`restore scroll positions`](/up.restoreScroll)
     previously seen on the destination URL.
@@ -135,13 +141,14 @@ up.form = (($) ->
     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.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)
@@ -520,7 +527,7 @@ up.form = (($) ->
     If omitted, Unpoly will replace the `<form>` tag itself, assuming that the
     server has echoed the form with validation errors.
   @param [up-fallback]
-    The selector to replace if the server responds with a non-200 status code.
+    The selector to replace if the server responds with an error.
   @param {string} [up-transition]
     The animation to use when the form is replaced after a successful submission.
   @param {string} [up-fail-transition]
@@ -549,7 +556,18 @@ up.form = (($) ->
     The name of the layer that ought to be updated if the server sends a
     non-200 status code.
   @param {string} [up-reveal='true']
-    Whether to reveal the target element within its viewport before updating.
+    Whether to reveal the target element after it was replaced.
+
+    You can also pass a CSS selector for the element to reveal.
+  @param {string} [up-fail-reveal='true']
+    Whether to reveal the target element when the server responds with an error.
+
+    You can also pass a CSS selector for the element to reveal. You may use this, for example,
+    to reveal the first validation error message:
+
+        <form up-target=".content" up-fail-reveal=".error">
+          ...
+        </form>
   @param {string} [up-restore-scroll='false']
     Whether to restore previously known scroll position of all viewports
     within the target selector.

data/lib/assets/javascripts/unpoly/layout.coffee

@@ -237,7 +237,7 @@ up.layout = (($) ->
   @stable
   ###
   reveal = (elementOrSelector, options) ->
-    $element = $(elementOrSelector)
+    $element = $(elementOrSelector).first() # we can only reveal one element
     up.puts 'Revealing fragment %o', $element.get(0)
     options = u.options(options)
 
@@ -473,7 +473,13 @@ up.layout = (($) ->
         selector = revealSelector(options.reveal)
         $element = up.first(selector) || $element
         revealOptions.top = true
-      return reveal($element, revealOptions)
+
+      # If selectorOrElement was a CSS selector, don't blow up by calling reveal()
+      # with an empty jQuery collection. This might happen if a failed form submission
+      # reveals the first validation error message, but the error is shown in an
+      # unexpected element.
+      if $element.length
+        return reveal($element, revealOptions)
 
     # If we didn't need to scroll above, just return a resolved promise
     # to fulfill this function's signature.

data/lib/assets/javascripts/unpoly/link.coffee

@@ -124,7 +124,14 @@ up.link = (($) ->
     The selector to replace.
     Defaults to the `[up-target]`, `[up-modal]` or `[up-popup]` attribute on `link`.
     If no target is given, the `<body>` element will be replaced.
+  @param {boolean|string} [options.reveal=true]
+    Whether to [reveal](/up.reveal) the target fragment after it was replaced.
 
+    You can also pass a CSS selector for the element to reveal.
+  @param {boolean|string} [options.failReveal=true]
+    Whether to [reveal](/up.reveal) the target fragment when the server responds with an error.
+
+    You can also pass a CSS selector for the element to reveal.
   @return {Promise}
     A promise that will be fulfilled when the link destination
     has been loaded and rendered.
@@ -163,6 +170,7 @@ up.link = (($) ->
     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.failReveal = u.option(options.failReveal, u.castedAttr($link, 'up-fail-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)
@@ -347,10 +355,10 @@ up.link = (($) ->
   @param {string} [up-transition='none']
     The [transition](/up.motion) to use for morphing between the old and new elements.
   @param [up-fail-target='body']
-    The selector to replace if the server responds with a non-200 status code.
+    The selector to replace if the server responds with an error.
   @param {string} [up-fail-transition='none']
     The [transition](/up.motion) to use for morphing between the old and new elements
-    when the server responds with a non-200 status code.
+    when the server responds with an error.
   @param {string} [up-fallback]
     The selector to update when the original target was not found in the page.
   @param {string} [up-href]
@@ -360,7 +368,13 @@ up.link = (($) ->
     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.
+    Whether to reveal the target element after it was replaced.
+
+    You can also pass a CSS selector for the element to reveal.
+  @param {string} [up-fail-reveal='true']
+    Whether to reveal the target element when the server responds with an error.
+
+    You can also pass a CSS selector for the element to reveal.
   @param {string} [up-restore-scroll='false']
     Whether to restore previously known scroll position of all viewports
     within the target selector.
@@ -416,14 +430,14 @@ up.link = (($) ->
   @param {string} [up-method='get']
     The HTTP method to use for the request.
   @param [up-fail-target='body']
-    The selector to replace if the server responds with a non-200 status code.
+    The selector to replace if the server responds with an error.
   @param {string} [up-fallback]
     The selector to update when the original target was not found in the page.
   @param {string} [up-transition='none']
     The [transition](/up.motion) to use for morphing between the old and new elements.
   @param {string} [up-fail-transition='none']
     The [transition](/up.motion) to use for morphing between the old and new elements
-    when the server responds with a non-200 status code.
+    when the server responds with an error.
   @param [up-href]
     The destination URL to follow.
     If omitted, the the link's `href` attribute will be used.

data/lib/assets/javascripts/unpoly/protocol.coffee

@@ -11,16 +11,22 @@ That said, there is an **optional** protocol your server can use to
 exchange additional information when Unpoly is [updating fragments](/up.link).
 
 While the protocol can help you optimize performance and handle some
-edge cases, implementing it is entirely optional. For instance,
+edge cases, implementing it is **entirely optional**. For instance,
 `unpoly.com` itself is a static site that uses Unpoly on the frontend
 and doesn't even have a server component.
 
-If you have [installed Unpoly as a Rails gem](/install/rails), the protocol
-is already implemented and you will get some
-[Ruby bindings](https://github.com/unpoly/unpoly/blob/master/README_RAILS.md)
-in your controllers and views. If your server-side app uses another language
-or framework, you should be able to implement the protocol in a very short time.
+## Existing implementations
 
+You should be able to implement the protocol in a very short time.
+There are existing implementations for various web frameworks:
+
+- [Ruby on Rails](/install/rails)
+- [Roda](https://github.com/adam12/roda-unpoly)
+- [Rack](https://github.com/adam12/rack-unpoly) (Sinatra, Padrino, Hanami, Cuba, ...)
+- [Phoenix](https://elixirforum.com/t/unpoly-a-framework-like-turbolinks/3614/15) (Elixir)
+
+
+## Protocol details
 
 \#\#\# Redirect detection for IE11
 

data/lib/assets/javascripts/unpoly/radio.coffee

@@ -0,0 +1,63 @@
+###*
+Passive updates
+===============
+
+This work-in-progress package will contain functionality to
+passively receive updates from the server.
+
+@class up.radio
+###
+up.radio = (($) ->
+
+  u = up.util
+
+  ###*
+  Configures defaults for passive updates.
+
+  @property up.radio.config
+  @param {Array<string>} [options.hungry]
+    An array of CSS selectors that is replaced whenever a matching element is found in a response.
+    These elements are replaced even when they were not targeted directly.
+
+    By default this contains the [`[up-hungry]`](/up-hungry) attribute as well as
+    `<meta name="csrf-param">` and `<meta name="csrf-token">` tags.
+  @param {string} [options.hungryTransition=null]
+    The transition to use when a [hungry element](/up-hungry) is replacing itself
+    while another target is replaced.
+
+    By default this is not set and the original replacement's transition is used.
+  @stable
+  ###
+  config = u.config
+    hungry: ['[up-hungry]', 'meta[name="csrf-param"]', 'meta[name="csrf-token"]']
+    hungryTransition: null
+
+  reset = ->
+    config.reset()
+
+  ###*
+  @function up.radio.hungrySelector
+  @internal
+  ###
+  hungrySelector = ->
+    u.multiSelector(config.hungry)
+
+  ###*
+  Elements with this attribute are [updated](/up.replace) whenever there is a
+  matching element found in a successful response. The element is replaced even
+  when it isn't [targeted](/a-up-target) directly.
+
+  Use cases for this are unread message counters or notification flashes.
+  Such elements often live in the layout, outside of the content area that is
+  being replaced.
+
+  @selector [up-hungry]
+  @stable
+  ###
+
+  up.on 'up:framework:reset', reset
+
+  config: config
+  hungrySelector: hungrySelector
+
+)(jQuery)

data/lib/assets/javascripts/unpoly/util.coffee

@@ -187,20 +187,31 @@ up.util = (($) ->
     $element = $(element)
     selector = undefined
 
+    tagName = $element.prop('tagName').toLowerCase()
+
     if upId = presence($element.attr("up-id"))
-      selector = "[up-id='#{upId}']"
+      selector = attributeSelector('up-id', upId)
     else if id = presence($element.attr("id"))
-      selector = "##{id}"
+      if id.match(/^[a-z0-9\-_]+$/i)
+        selector = "##{id}"
+      else
+        selector = attributeSelector('id', id)
     else if name = presence($element.attr("name"))
-      selector = "[name='#{name}']"
+      selector = tagName + attributeSelector('name', name)
     else if classes = presence(nonUpClasses($element))
       selector = ''
       for klass in classes
         selector += ".#{klass}"
+    else if ariaLabel = presence($element.attr("aria-label"))
+      selector = attributeSelector('aria-label', ariaLabel)
     else
-      selector = $element.prop('tagName').toLowerCase()
+      selector = tagName
     selector
 
+  attributeSelector = (attribute, value) ->
+    value = value.replace(/"/g, '\\"')
+    "[#{attribute}=\"#{value}\"]"
+
   nonUpClasses = ($element) ->
     classString = $element.attr('class') || ''
     classes = classString.split(' ')

data/lib/assets/javascripts/unpoly.coffee

@@ -18,6 +18,7 @@
 #= require ./unpoly/modal
 #= require ./unpoly/tooltip
 #= require ./unpoly/feedback
+#= require ./unpoly/radio
 #= require ./unpoly/rails
 
 up.boot()

data/lib/unpoly/rails/version.rb

@@ -4,6 +4,6 @@ module Unpoly
     # The current version of the unpoly-rails gem.
     # This version number is also used for releases of the Unpoly
     # frontend code.
-    VERSION = '0.52.0'
+    VERSION = '0.53.0'
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unpoly",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "Unobtrusive JavaScript framework",
   "main": "dist/unpoly.js",
   "files": [

data/spec_app/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    unpoly-rails (0.51.1)
+    unpoly-rails (0.52.0)
       rails (>= 3)
 
 GEM

data/spec_app/app/controllers/hash_test_controller.rb

@@ -0,0 +1,5 @@
+class HashTestController < ApplicationController
+
+  layout 'integration_test'
+
+end

data/spec_app/app/views/hash_test/vanilla.erb

@@ -0,0 +1,13 @@
+<h1>Hash links (without Unpoly)</h1>
+
+<div class="example" id="one" style="height: 1000px">
+  <h2>This is #one</h2>
+
+  <a href="#two">Scroll down to #two</a>
+</div>
+
+<div class="example" id="two" style="height: 1000px">
+  <h2>This is #two</h2>
+
+  <a href="#one">Scroll up to #one</a>
+</div>

data/spec_app/app/views/pages/start.erb

@@ -60,6 +60,7 @@
     <li><%= link_to 'Error', '/error_test/trigger' %></li>
     <li><%= link_to 'Booting with non-GET method', '/method_test/page1' %></li>
     <li><%= link_to 'Fragment update', '/replace_test/page1' %></li>
+    <li><%= link_to 'Hash links (without Unpoly)', '/hash_test/vanilla' %></li>
   </ul>
 
 </div>

data/spec_app/config/routes.rb

@@ -11,6 +11,7 @@ Rails.application.routes.draw do
   get 'error_test/:action', controller: 'error_test'
   post 'error_test/:action', controller: 'error_test'
   get 'replace_test/:action', controller: 'replace_test'
+  get 'hash_test/:action', controller: 'hash_test'
 
   namespace :form_test do
     resource :basic, only: [:new, :create]

data/spec_app/spec/javascripts/up/dom_spec.js.coffee

@@ -133,7 +133,7 @@ describe 'up.dom', ->
           up.replace('.middle', '/path', method: 'put')
           next => expect(@lastRequest()).toHaveRequestMethod('PUT')
 
-        describe 'when the server responds with a non-200 status code', ->
+        describe 'when the server responds with an error', ->
 
           it 'replaces the first fallback instead of the given selector', asyncSpec (next) ->
             up.dom.config.fallbacks = ['.fallback']

data/spec_app/spec/javascripts/up/form_spec.js.coffee

@@ -392,6 +392,116 @@ describe 'up.form', ->
             next => @respondWith('<div class="response">new-text</div>')
             next =>expect(up.browser.url()).toEqual(@hrefBeforeExample)
 
+        describe 'revealing', ->
+
+          it 'reaveals the target fragment if the submission succeeds', asyncSpec (next) ->
+            $form = affix('form[action="/action"][up-target=".target"]')
+            $target = affix('.target')
+
+            revealStub = up.layout.knife.mock('reveal')
+
+            up.submit($form)
+
+            next =>
+              @respondWith('<div class="target">new text</div>')
+
+            next =>
+              expect(revealStub).toHaveBeenCalled()
+              expect(revealStub.calls.mostRecent().args[0]).toBeMatchedBy('.target')
+
+          it 'reveals the form if the submission fails', asyncSpec (next) ->
+            $form = affix('form#foo-form[action="/action"][up-target=".target"]')
+            $target = affix('.target')
+
+            revealStub = up.layout.knife.mock('reveal')
+
+            up.submit($form)
+
+            next =>
+              @respondWith
+                status: 500,
+                responseText: """
+                  <form id="foo-form">
+                    Errors here
+                  </form>
+                  """
+
+            next =>
+              expect(revealStub).toHaveBeenCalled()
+              expect(revealStub.calls.mostRecent().args[0]).toBeMatchedBy('#foo-form')
+
+
+          describe 'with { reveal } option', ->
+
+            it 'allows to reveal a different selector', asyncSpec (next) ->
+              $form = affix('form[action="/action"][up-target=".target"]')
+              $target = affix('.target')
+              $other = affix('.other')
+
+              revealStub = up.layout.knife.mock('reveal')
+
+              up.submit($form, reveal: '.other')
+
+              next =>
+                @respondWith """
+                  <div class="target">
+                    new text
+                  </div>
+                  <div class="other">
+                    new other
+                  </div>
+                """
+
+              next =>
+                expect(revealStub).toHaveBeenCalled()
+                expect(revealStub.calls.mostRecent().args[0]).toBeMatchedBy('.other')
+
+            it 'still reveals the form for a failed submission', asyncSpec (next) ->
+              $form = affix('form#foo-form[action="/action"][up-target=".target"]')
+              $target = affix('.target')
+              $other = affix('.other')
+
+              revealStub = up.layout.knife.mock('reveal')
+
+              up.submit($form, reveal: '.other')
+
+              next =>
+                @respondWith
+                  status: 500,
+                  responseText: """
+                    <form id="foo-form">
+                      Errors here
+                    </form>
+                    """
+
+              next =>
+                expect(revealStub).toHaveBeenCalled()
+                expect(revealStub.calls.mostRecent().args[0]).toBeMatchedBy('#foo-form')
+
+          describe 'with { failReveal } option', ->
+
+            it 'reveals the given selector for a failed submission', asyncSpec (next) ->
+              $form = affix('form#foo-form[action="/action"][up-target=".target"]')
+              $target = affix('.target')
+              $other = affix('.other')
+
+              revealStub = up.layout.knife.mock('reveal')
+
+              up.submit($form, reveal: '.other', failReveal: '.error')
+
+              next =>
+                @respondWith
+                  status: 500,
+                  responseText: """
+                    <form id="foo-form">
+                      <div class="error">Errors here</div>
+                    </form>
+                    """
+
+              next =>
+                expect(revealStub).toHaveBeenCalled()
+                expect(revealStub.calls.mostRecent().args[0]).toBeMatchedBy('.error')
+
         describe 'in a form with file inputs', ->
 
           beforeEach ->
@@ -599,7 +709,7 @@ describe 'up.form', ->
           next =>
             request = @lastRequest()
             expect(request.requestHeaders['X-Up-Validate']).toEqual('user')
-            expect(request.requestHeaders['X-Up-Target']).toEqual(".field-group:has([name='user'])")
+            expect(request.requestHeaders['X-Up-Target']).toEqual('.field-group:has(input[name="user"])')
 
             @respondWith """
               <div class="field-group has-error">