unpoly-rails 0.26.2 → 0.27.0

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

@@ -52,7 +52,7 @@ up.util = (($) ->
     Whether to include an `#hash` anchor in the normalized URL
   @param {Boolean} [options.search=true]
     Whether to include a `?query` string in the normalized URL
-  @param {Boolean} [options.stripTrailingSlash=false]
+  @param {Boolean} [options.stripTrailingSlash=true]
     Whether to strip a trailing slash from the pathname
   @internal
   ###
@@ -65,7 +65,7 @@ up.util = (($) ->
     # We have seen this in IE11 and W3Schools claims it happens in IE9 or earlier
     # http://www.w3schools.com/jsref/prop_anchor_pathname.asp
     pathname = "/#{pathname}" unless pathname[0] == '/'
-    pathname = pathname.replace(/\/$/, '') if options?.stripTrailingSlash == true
+    pathname = pathname.replace(/\/$/, '') unless options?.stripTrailingSlash == false
     normalized += pathname
     normalized += anchor.hash if options?.hash == true
     normalized += anchor.search unless options?.search == false
@@ -566,7 +566,7 @@ up.util = (($) ->
   copy = (object)  ->
     if isArray(object)
       object.slice()
-    else
+    else if isHash(object)
       extend({}, object)
 
   ###*
@@ -827,7 +827,9 @@ up.util = (($) ->
   scrollbarWidth = memoize ->
     # This is how Bootstrap does it also:
     # https://github.com/twbs/bootstrap/blob/c591227602996c542b9fd0cb65cff3cc9519bdd5/dist/js/bootstrap.js#L1187
-    $outer = $('<div>').css
+    $outer = $('<div>')
+    $outer.attr('up-viewport', '')
+    $outer.css
       position:  'absolute'
       top:       '0'
       left:      '0'
@@ -948,7 +950,7 @@ up.util = (($) ->
     The timing function that controls the animation's acceleration.
     See [W3C documentation](http://www.w3.org/TR/css3-transitions/#transition-timing-function)
     for a list of pre-defined timing functions.
-  @return
+  @return {Deferred}
     A promise for the animation's end.
   @internal
   ###
@@ -963,6 +965,13 @@ up.util = (($) ->
       easing: 'ease'
     )
 
+    if opts.duration == 0
+      # In case the duration is zero we 1) spare ourselves all the trouble below,
+      # and 2) return a deferred that actually resolve, since a CSS transition with
+      # a zero duration never fires a transitionEnd event.
+      $element.css(lastFrame)
+      return resolvedDeferred()
+
     # We don't finish an existing animation here, since the public API
     # we expose as `up.motion.animate` already does this.
     deferred = $.Deferred()
@@ -1497,9 +1506,12 @@ up.util = (($) ->
   @function up.util.config
   @internal
   ###
-  config = (factoryOptions = {}) ->
+  config = (blueprint = {}) ->
     hash = {}
-    hash.reset = -> extend(hash, factoryOptions)
+    hash.reset = ->
+      newOptions = blueprint
+      newOptions = newOptions() if isFunction(newOptions)
+      extend(hash, newOptions)
     hash.reset()
     Object.preventExtensions(hash)
     hash
@@ -1748,6 +1760,62 @@ up.util = (($) ->
     # This is by far the fastest way to do this
     not jQuery.contains(document.documentElement, element)
 
+  ###*
+  Given a function that will return a promise, returns a proxy function
+  with an additional `.promise` attribute.
+
+  When the proxy is called, the inner function is called.
+  The proxy's `.promise` attribute is available even before the function is called
+  and will resolve when the inner function's returned promise resolves.
+
+  @function up.util.previewable
+  @internal
+  ###
+  previewable = (fun) ->
+    deferred = $.Deferred()
+    preview = (args...) ->
+      fun(args...).then ->
+        deferred.resolve()
+    preview.promise = deferred.promise()
+    preview
+
+  ###*
+  A linear task queue whose (2..n)th tasks can be changed at any time.
+
+  @function up.util.DivertibleChain
+  @internal
+  ###
+  class DivertibleChain
+
+    constructor: ->
+      @reset()
+
+    reset: =>
+      @queue = []
+      @currentTask = undefined
+
+    promise: =>
+      promises = map @allTasks(), (task) -> task.promise
+      $.when(promises...)
+
+    allTasks: =>
+      tasks = []
+      tasks.push(@currentTask) if @currentTask
+      tasks = tasks.concat(@queue)
+      tasks
+
+    poke: =>
+      unless @currentTask # don't start a new task while we're still running one
+        if @currentTask = @queue.shift()
+          promise = @currentTask()
+          promise.always =>
+            @currentTask = undefined
+            @poke()
+
+    asap: (newTasks...) =>
+      @queue = map(newTasks, previewable)
+      @poke()
+
   isDetached: isDetached
   requestDataAsArray: requestDataAsArray
   requestDataAsQuery: requestDataAsQuery
@@ -1853,6 +1921,7 @@ up.util = (($) ->
   whenReady: whenReady
   identity: identity
   escapeHtml: escapeHtml
+  DivertibleChain: DivertibleChain
 
 )($)
 

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.26.2'
+    VERSION = '0.27.0'
   end
 end

data/spec_app/Gemfile.lock

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

data/spec_app/app/assets/stylesheets/integration_test.sass

@@ -33,8 +33,12 @@ body
   background-color: #e21
   color: white
   text-decoration: none
+  &.up-current
+    background-color: #921
   &:hover
     background-color: #fa1
+  &.up-active
+    background-color: #ff0
 
 dt
   font-weight: bold

data/spec_app/app/assets/stylesheets/jasmine_specs.sass

@@ -1 +1,6 @@
 //= require unpoly
+
+// Reduce the backdrop flashing during modal specs
+.up-modal-backdrop
+  background-color: rgba(90, 90, 90, 0.05)
+

data/spec_app/app/views/css_test/modal.erb

@@ -0,0 +1,3 @@
+<div class="example">
+  <a class="button" href="/css_test/modal_contents" up-modal=".contents">Modal</a>
+</div>

data/spec_app/app/views/css_test/modal_contents.erb

@@ -0,0 +1,5 @@
+<div class="contents">
+  Line 1: Foo bar baz bam qux foo bar baz bam qux<br>
+  Line 2: Foo bar baz bam qux foo bar baz bam qux<br>
+  Line 3: Foo bar baz bam qux foo bar baz bam qux
+</div>

data/spec_app/app/views/css_test/popup.erb

@@ -1,25 +1,25 @@
-<div class="spacer">
+<div class="fixed-top-bar">
+  <a class="button" href="/css_test/popup_contents?1" up-popup=".contents" up-position="top-left">Top-left popup</a>
+  <a class="button" href="/css_test/popup_contents?2" up-popup=".contents" up-position="top-right">Top-right popup</a>
+  <a class="button" href="/css_test/popup_contents?3" up-popup=".contents" up-position="bottom-right">Bottom-right popup</a>
+  <a class="button" href="/css_test/popup_contents?4" up-popup=".contents" up-position="bottom-left">Bottom-left popup</a>
 </div>
 
-<div class="example">
-  <a class="button" href="/css_test/popup_contents" up-popup=".contents" up-position="top-left">Top-left popup</a>
+<div class="spacer">
 </div>
 
 <div class="example">
-  <a class="button" href="/css_test/popup_contents" up-popup=".contents" up-position="top-right">Top-right popup</a>
+  <a class="button" href="/css_test/popup_contents?5" up-popup=".contents" up-position="top-left">Top-left popup</a>
 </div>
 
 <div class="example">
-  <a class="button" href="/css_test/popup_contents" up-popup=".contents" up-position="bottom-right">Bottom-right popup</a>
+  <a class="button" href="/css_test/popup_contents?6" up-popup=".contents" up-position="top-right">Top-right popup</a>
 </div>
 
 <div class="example">
-  <a class="button" href="/css_test/popup_contents" up-popup=".contents" up-position="bottom-left">Bottom-left popup</a>
+  <a class="button" href="/css_test/popup_contents?7" up-popup=".contents" up-position="bottom-right">Bottom-right popup</a>
 </div>
 
-<div class="fixed-top-bar">
-  <a class="button" href="/css_test/popup_contents" up-popup=".contents" up-position="top-left">Top-left popup</a>
-  <a class="button" href="/css_test/popup_contents" up-popup=".contents" up-position="top-right">Top-right popup</a>
-  <a class="button" href="/css_test/popup_contents" up-popup=".contents" up-position="bottom-right">Bottom-right popup</a>
-  <a class="button" href="/css_test/popup_contents" up-popup=".contents" up-position="bottom-left">Bottom-left popup</a>
+<div class="example">
+  <a class="button" href="/css_test/popup_contents?8" up-popup=".contents" up-position="bottom-left">Bottom-left popup</a>
 </div>

data/spec_app/app/views/css_test/tooltip.erb

@@ -1,3 +1,13 @@
+<div class="fixed-top-bar">
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="top">Top tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="bottom">Bottom tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="left">Left tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="right">Right tooltip</a>
+</div>
+
+<div class="spacer">
+</div>
+
 <div class="example">
   <a class="button" href="#" up-tooltip="Tooltip text" up-position="top">Top tooltip</a>
 </div>
@@ -14,9 +24,6 @@
   <a class="button" href="#" up-tooltip="Tooltip text" up-position="right">Right tooltip</a>
 </div>
 
-<div class="fixed-top-bar">
-  <a class="button" href="#" up-tooltip="Tooltip text" up-position="top">Top tooltip</a>
-  <a class="button" href="#" up-tooltip="Tooltip text" up-position="bottom">Bottom tooltip</a>
-  <a class="button" href="#" up-tooltip="Tooltip text" up-position="left">Left tooltip</a>
-  <a class="button" href="#" up-tooltip="Tooltip text" up-position="right">Right tooltip</a>
+<div class="example">
+  <% 1.upto(100) do |i| %><a class="button" href="#" up-tooltip="Tooltip <%= i %>"><%= i %></a><% end %>
 </div>

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

@@ -18,6 +18,10 @@
     <li><%= link_to 'Popup', '/css_test/popup' %></li>
   </ul>
 
+  <ul>
+    <li><%= link_to 'Modal', '/css_test/modal' %></li>
+  </ul>
+
   <ul>
     <li><%= link_to 'Form (basic)', '/form_test/basic/new' %></li>
   </ul>

data/spec_app/spec/javascripts/helpers/reset_up.js.coffee

@@ -1,6 +1,5 @@
 afterEach ->
-  console.debug('--- Resetting Unpoly after example ---')
-  up.motion.finish()
   up.reset()
   $('.up-error').remove()
-  console.debug('--- Unpoly was reset after example ---')
+
+

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

@@ -161,7 +161,6 @@ describe 'up.flow', ->
           it 'adds params from a { data } option to the URL of a GET request', ->
             promise = up.replace('.middle', '/path', data: { 'foo-key': 'foo value', 'bar-key': 'bar value' })
             @respond()
-            console.log("EXPECTATION COMING UP AGAINST %o", location.pathname)
             expect(location.href).toEndWith('/path?foo-key=foo%20value&bar-key=bar%20value')
 
           describe 'if a URL is given as { history } option', ->
@@ -599,75 +598,85 @@ describe 'up.flow', ->
 
       describe 'with { transition } option', ->
 
-        it 'morphs between the old and new element', (done) ->
-          affix('.element').text('version 1')
-          up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 200)
+        describeCapability 'canCssTransition', ->
 
-          $ghost1 = $('.element.up-ghost:contains("version 1")')
-          expect($ghost1).toHaveLength(1)
-          expect(u.opacity($ghost1)).toBeAround(1.0, 0.1)
+          it 'morphs between the old and new element', (done) ->
+            affix('.element').text('version 1')
+            up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 200)
 
-          $ghost2 = $('.element.up-ghost:contains("version 2")')
-          expect($ghost2).toHaveLength(1)
-          expect(u.opacity($ghost2)).toBeAround(0.0, 0.1)
+            $ghost1 = $('.element.up-ghost:contains("version 1")')
+            expect($ghost1).toHaveLength(1)
+            expect(u.opacity($ghost1)).toBeAround(1.0, 0.1)
 
-          u.setTimer 190, ->
-            expect(u.opacity($ghost1)).toBeAround(0.0, 0.3)
-            expect(u.opacity($ghost2)).toBeAround(1.0, 0.3)
-            done()
-
-        it 'marks the old fragment and its ghost as .up-destroying during the transition', ->
-          affix('.element').text('version 1')
-          up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 200)
-
-          $version1 = $('.element:not(.up-ghost):contains("version 1")')
-          $version1Ghost = $('.element.up-ghost:contains("version 1")')
-          expect($version1).toHaveLength(1)
-          expect($version1Ghost).toHaveLength(1)
-          expect($version1).toHaveClass('up-destroying')
-          expect($version1Ghost).toHaveClass('up-destroying')
-
-          $version2 = $('.element:not(.up-ghost):contains("version 2")')
-          $version2Ghost = $('.element.up-ghost:contains("version 2")')
-          expect($version2).toHaveLength(1)
-          expect($version2Ghost).toHaveLength(1)
-          expect($version2).not.toHaveClass('up-destroying')
-          expect($version2Ghost).not.toHaveClass('up-destroying')
-
-        it 'cancels an existing transition by instantly jumping to the last frame', ->
-          affix('.element').text('version 1')
-          up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 200)
-
-          $ghost1 = $('.element.up-ghost:contains("version 1")')
-          expect($ghost1).toHaveLength(1)
-          expect($ghost1.css('opacity')).toBeAround(1.0, 0.1)
-
-          $ghost2 = $('.element.up-ghost:contains("version 2")')
-          expect($ghost2).toHaveLength(1)
-          expect($ghost2.css('opacity')).toBeAround(0.0, 0.1)
-
-          up.extract('.element', '<div class="element">version 3</div>', transition: 'cross-fade', duration: 200)
+            $ghost2 = $('.element.up-ghost:contains("version 2")')
+            expect($ghost2).toHaveLength(1)
+            expect(u.opacity($ghost2)).toBeAround(0.0, 0.1)
 
-          $ghost1 = $('.element.up-ghost:contains("version 1")')
-          expect($ghost1).toHaveLength(0)
+            u.setTimer 190, ->
+              expect(u.opacity($ghost1)).toBeAround(0.0, 0.3)
+              expect(u.opacity($ghost2)).toBeAround(1.0, 0.3)
+              done()
 
-          $ghost2 = $('.element.up-ghost:contains("version 2")')
-          expect($ghost2).toHaveLength(1)
-          expect($ghost2.css('opacity')).toBeAround(1.0, 0.1)
+          it 'marks the old fragment and its ghost as .up-destroying during the transition', ->
+            affix('.element').text('version 1')
+            up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 200)
+
+            $version1 = $('.element:not(.up-ghost):contains("version 1")')
+            $version1Ghost = $('.element.up-ghost:contains("version 1")')
+            expect($version1).toHaveLength(1)
+            expect($version1Ghost).toHaveLength(1)
+            expect($version1).toHaveClass('up-destroying')
+            expect($version1Ghost).toHaveClass('up-destroying')
+
+            $version2 = $('.element:not(.up-ghost):contains("version 2")')
+            $version2Ghost = $('.element.up-ghost:contains("version 2")')
+            expect($version2).toHaveLength(1)
+            expect($version2Ghost).toHaveLength(1)
+            expect($version2).not.toHaveClass('up-destroying')
+            expect($version2Ghost).not.toHaveClass('up-destroying')
+
+          it 'cancels an existing transition by instantly jumping to the last frame', ->
+            affix('.element').text('version 1')
+            up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 200)
+
+            $ghost1 = $('.element.up-ghost:contains("version 1")')
+            expect($ghost1).toHaveLength(1)
+            expect($ghost1.css('opacity')).toBeAround(1.0, 0.1)
+
+            $ghost2 = $('.element.up-ghost:contains("version 2")')
+            expect($ghost2).toHaveLength(1)
+            expect($ghost2.css('opacity')).toBeAround(0.0, 0.1)
+
+            up.extract('.element', '<div class="element">version 3</div>', transition: 'cross-fade', duration: 200)
+
+            $ghost1 = $('.element.up-ghost:contains("version 1")')
+            expect($ghost1).toHaveLength(0)
+
+            $ghost2 = $('.element.up-ghost:contains("version 2")')
+            expect($ghost2).toHaveLength(1)
+            expect($ghost2.css('opacity')).toBeAround(1.0, 0.1)
+
+            $ghost3 = $('.element.up-ghost:contains("version 3")')
+            expect($ghost3).toHaveLength(1)
+            expect($ghost3.css('opacity')).toBeAround(0.0, 0.1)
+
+          it 'delays the resolution of the returned promise until the transition is over', (done) ->
+            affix('.element').text('version 1')
+            resolution = jasmine.createSpy()
+            promise = up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 30)
+            promise.then(resolution)
+            expect(resolution).not.toHaveBeenCalled()
+            u.setTimer 70, ->
+              expect(resolution).toHaveBeenCalled()
+              done()
 
-          $ghost3 = $('.element.up-ghost:contains("version 3")')
-          expect($ghost3).toHaveLength(1)
-          expect($ghost3.css('opacity')).toBeAround(0.0, 0.1)
+        describeFallback 'canCssTransition', ->
 
-        it 'delays the resolution of the returned promise until the transition is over', (done) ->
-          affix('.element').text('version 1')
-          resolution = jasmine.createSpy()
-          promise = up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 30)
-          promise.then(resolution)
-          expect(resolution).not.toHaveBeenCalled()
-          u.setTimer 70, ->
-            expect(resolution).toHaveBeenCalled()
-            done()
+          it 'immediately swaps the old and new elements', ->
+            affix('.element').text('version 1')
+            up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 200)
+            expect($('.element')).toHaveText('version 2')
+            expect($('.up-ghost')).toHaveLength(0)
 
       describe 'handling of [up-keep] elements', ->
 
@@ -802,9 +811,7 @@ describe 'up.flow', ->
             <div class="keeper" up-keep>old-text</div>
             """
 
-          console.log '*** before hello ***'
           up.hello($container)
-          console.log '*** after hello ***'
           expect(compiler.calls.count()).toEqual(1)
 
           up.extract '.container', """
@@ -893,29 +900,31 @@ describe 'up.flow', ->
           expect(keptListener).toHaveBeenCalledWith($keeper, { key: 'value1' })
           expect(keptListener).toHaveBeenCalledWith($keeper, { key: 'value2' })
 
-        it "doesn't let the discarded element appear in a transition", (done) ->
-          oldTextDuringTransition = undefined
-          newTextDuringTransition = undefined
-          transition = ($old, $new) ->
-            oldTextDuringTransition = squish($old.text())
-            newTextDuringTransition = squish($new.text())
-            u.resolvedDeferred()
-          $container = affix('.container')
-          $container.html """
-            <div class='foo'>old-foo</div>
-            <div class='bar' up-keep>old-bar</div>
-            """
-          newHtml = """
-            <div class='container'>
-              <div class='foo'>new-foo</div>
-              <div class='bar' up-keep>new-bar</div>
-            </div>
-            """
-          promise = up.extract('.container', newHtml, transition: transition)
-          promise.then ->
-            expect(oldTextDuringTransition).toEqual('old-foo old-bar')
-            expect(newTextDuringTransition).toEqual('new-foo old-bar')
-            done()
+        describeCapability 'canCssTransition', ->
+
+          it "doesn't let the discarded element appear in a transition", (done) ->
+            oldTextDuringTransition = undefined
+            newTextDuringTransition = undefined
+            transition = ($old, $new) ->
+              oldTextDuringTransition = squish($old.text())
+              newTextDuringTransition = squish($new.text())
+              u.resolvedDeferred()
+            $container = affix('.container')
+            $container.html """
+              <div class='foo'>old-foo</div>
+              <div class='bar' up-keep>old-bar</div>
+              """
+            newHtml = """
+              <div class='container'>
+                <div class='foo'>new-foo</div>
+                <div class='bar' up-keep>new-bar</div>
+              </div>
+              """
+            promise = up.extract('.container', newHtml, transition: transition)
+            promise.then ->
+              expect(oldTextDuringTransition).toEqual('old-foo old-bar')
+              expect(newTextDuringTransition).toEqual('new-foo old-bar')
+              done()
 
     describe 'up.destroy', ->