unpoly-rails 0.24.1 → 0.25.0

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

@@ -840,6 +840,24 @@ up.util = (($) ->
     $outer.remove()
     width
 
+  ###*
+  Returns whether the given element is currently showing a vertical scrollbar.
+
+  @function up.util.documentHasVerticalScrollbar
+  @internal
+  ###
+  documentHasVerticalScrollbar = ->
+    body = document.body
+    $body = $(body)
+    html = document.documentElement
+
+    bodyOverflow = $body.css('overflow-y')
+
+    forcedScroll = (bodyOverflow == 'scroll')
+    forcedHidden = (bodyOverflow == 'hidden')
+
+    forcedScroll || (!forcedHidden && html.scrollHeight > html.clientHeight)
+
   ###*
   Modifies the given function so it only runs once.
   Subsequent calls will return the previous return value.
@@ -935,6 +953,9 @@ up.util = (($) ->
   ###
   cssAnimate = (elementOrSelector, lastFrame, opts) ->
     $element = $(elementOrSelector)
+
+    # Don't name the local variable `options` since that would override
+    # the `options` function in our scope. We really need `let` :(
     opts = options(opts,
       duration: 300,
       delay: 0,
@@ -944,14 +965,32 @@ up.util = (($) ->
     # We don't finish an existing animation here, since the public API
     # we expose as `up.motion.animate` already does this.
     deferred = $.Deferred()
+
+    transitionProperties = Object.keys(lastFrame)
     transition =
-      'transition-property': Object.keys(lastFrame).join(', ')
+      'transition-property': transitionProperties.join(', ')
       'transition-duration': "#{opts.duration}ms"
       'transition-delay': "#{opts.delay}ms"
       'transition-timing-function': opts.easing
     oldTransition = $element.css(Object.keys(transition))
 
     $element.addClass('up-animating')
+
+    transitionFinished = ->
+      $element.removeClass('up-animating')
+      $element.off('transitionend', onTransitionEnd)
+
+    onTransitionEnd = (event) ->
+      completedProperty = event.originalEvent.propertyName
+      if contains(transitionProperties, completedProperty)
+        deferred.resolve() # unless isDetached($element)
+        transitionFinished()
+
+    $element.on('transitionend', onTransitionEnd)
+
+    # Clean up in case we're canceled through some other code that resolves our deferred.
+    deferred.then(transitionFinished)
+
     withoutCompositing = forceCompositing($element)
     $element.css(transition)
     $element.css(lastFrame)
@@ -963,26 +1002,20 @@ up.util = (($) ->
 
       # To interrupt the running transition we *must* set it to 'none' exactly.
       # We cannot simply restore the old transition properties because browsers
-      # would simply keep transitioning the old properties.
+      # would simply keep transitioning.
       $element.css('transition': 'none')
 
-      # Restoring a previous transition involves some work, so we only do it if
+      # Restoring a previous transition involves forcing a repaint, so we only do it if
       # we know the element was transitioning before.
+      # Note that the default transition for elements is actually "all 0s ease 0s"
+      # instead of "none", although that has the same effect as "none".
       hadTransitionBefore = !(oldTransition['transition-property'] == 'none' || (oldTransition['transition-property'] == 'all' && oldTransition['transition-duration'][0] == '0'))
       if hadTransitionBefore
+        # If there is no repaint between the "none" transition and restoring
+        # the previous transition, the browser will simply keep transitioning.
         forceRepaint($element) # :(
         $element.css(oldTransition)
 
-    # Since listening to transitionEnd events is painful, we wait for a timeout
-    # and then resolve our deferred. Maybe revisit that decision some day.
-    animationEnd = opts.duration + opts.delay
-    endTimeout = setTimer animationEnd, ->
-      $element.removeClass('up-animating')
-      deferred.resolve() unless isDetached($element)
-    # Clean up in case we're canceled through some other code that
-    # resolves our deferred.
-    deferred.then(-> clearTimeout(endTimeout))
-
     # Return the whole deferred and not just return a thenable.
     # Other code will need the possibility to cancel the animation
     # by resolving the deferred.
@@ -1652,6 +1685,13 @@ up.util = (($) ->
     else
       {}
 
+  opacity = (element) ->
+    rawOpacity = $(element).css('opacity')
+    if isGiven(rawOpacity)
+      parseFloat(rawOpacity)
+    else
+      undefined
+
   ###*
   Returns whether the given element has been detached from the DOM
   (or whether it was never attached).
@@ -1752,6 +1792,7 @@ up.util = (($) ->
   remove: remove
   memoize: memoize
   scrollbarWidth: scrollbarWidth
+  documentHasVerticalScrollbar: documentHasVerticalScrollbar
   config: config
   cache: cache
   unwrapElement: unwrapElement
@@ -1762,6 +1803,7 @@ up.util = (($) ->
   extractOptions: extractOptions
   isDetached: isDetached
   noop: noop
+  opacity: opacity
 
 )($)
 

data/lib/assets/stylesheets/unpoly/modal.css.sass

@@ -1,48 +1,64 @@
-$stratum-backdrop:   10000
-$stratum-elements:   11000
+$stratum: 10000
 
-// These could actually be 1000, 2000, 3000 and 4000 since the `fixed` position of some elements defines
+// These could actually be 1000, 2000, 3000 and 4000 since the `fixed` position of an element defines
 // a stacking context for all contained z-indexes.
 //
 // However, let's keep the option open that these elements will one day not have its stacking context.
 //
 // Also let's not do 1, 2, 3 and 4 so other elements have a chance to move themselves between the layers.
-$substratum-dialog:  12000
-$substratum-content: 13000
-$substratum-close:   14000
+$substratum-backdrop: 11000
+$substratum-elements: 12000
+$substratum-dialog:   13000
+$substratum-content:  14000
+$substratum-close:    15000
 
 $close-height: 36px
 $close-width: 36px
 $close-font-size: 34px
 
 .up-modal
+  position: fixed
+  top: 0
+  left: 0
+  bottom: 0
+  right: 0
+  z-index: $stratum
+  overflow-x: hidden
 
 .up-modal-backdrop
-  z-index: $stratum-backdrop
+  z-index: $substratum-backdrop
   background-color: rgba(90, 90, 90, 0.4)
-  position: fixed
+  position: absolute
   top: 0
   right: 0
   bottom: 0
   left: 0
 
 .up-modal-viewport
-  z-index: $stratum-elements
-  position: fixed
+  position: absolute
   top: 0
   left: 0
   bottom: 0
   right: 0
+  z-index: $substratum-elements
   overflow-x: hidden
-  overflow-y: hidden
+  // The viewport always has a scrollbar, except when we're animating (see below)
+  overflow-y: scroll
   // We prefer centering the dialog as an `inline-block`
   // to giving it a horizontal margin of `auto`. This way
   // the width of `.up-modal-dialog` is controlled by the
   // contents of `.up-modal-content`.
   text-align: center
 
-  .up-modal.up-modal-ready &
+.up-modal.up-modal-animating
+  // During opening/closing animations we let the .up-modal container take over
+  // the scrollbars that would usually be owned by .up-modal-viewport.
+  // If .up-modal-viewport had a scrollbar while animating with
+  // "zoom-in" it would look strange that the scrollbar is scaled.
+  &
     overflow-y: scroll
+  .up-modal-viewport
+    overflow-y: hidden
 
 .up-modal-dialog
   z-index: $substratum-dialog

data/lib/unpoly/rails/inspector.rb

@@ -35,6 +35,32 @@ module Unpoly
         request.headers['X-Up-Target']
       end
 
+      ##
+      # Tests whether the given CSS selector is targeted by the current fragment update.
+      #
+      # Note that the matching logic is very simplistic and does not actually know
+      # how your page layout is structured. It will return `true` if
+      # the tested selector and the requested CSS selector matches exactly, or if the
+      # requested selector is `body` or `html`.
+      #
+      # Always returns `true` if the current request is not an Unpoly fragment update.
+      def target?(tested_target)
+        if up?
+          actual_target = target
+          if actual_target == tested_target
+            true
+          elsif actual_target == 'html'
+            true
+          elsif actual_target == 'body'
+            not ['head', 'title', 'meta'].include?(tested_target)
+          else
+            false
+          end
+        else
+          true
+        end
+      end
+
       ##
       # Returns whether the current form submission should be
       # [validated](http://unpoly.com/up-validate) (and not be saved to the database).

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.24.1'
+    VERSION = '0.25.0'
   end
 end

data/spec_app/Gemfile.lock

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

data/spec_app/app/controllers/binding_test_controller.rb

@@ -8,6 +8,12 @@ class BindingTestController < ActionController::Base
     render :text => up.target
   end
 
+  def up_is_target
+    tested_target = params[:tested_target].presence
+    tested_target or raise "No target given"
+    render :text => up.target?(tested_target).to_s
+  end
+
   def is_up_validate
     render :text => up.validate?.to_s
   end

data/spec_app/spec/controllers/binding_test_controller_spec.rb

@@ -17,7 +17,7 @@ describe BindingTestController do
 
   describe '#up' do
 
-    describe '#selector' do
+    describe '#target' do
 
       it 'returns the CSS selector that is requested via Unpoly' do
         request.headers['X-Up-Target'] = '.foo'
@@ -27,6 +27,87 @@ describe BindingTestController do
 
     end
 
+    describe '#target?' do
+
+      it 'returns true if the tested CSS selector is requested via Unpoly' do
+        request.headers['X-Up-Target'] = '.foo'
+        get :up_is_target, tested_target: '.foo'
+        expect(response.body).to eq('true')
+      end
+
+      it 'returns false if Unpoly is requesting another CSS selector' do
+        request.headers['X-Up-Target'] = '.bar'
+        get :up_is_target, tested_target: '.foo'
+        expect(response.body).to eq('false')
+      end
+
+      it 'returns true if the request is not an Unpoly request' do
+        get :up_is_target, tested_target: '.foo'
+        expect(response.body).to eq('true')
+      end
+
+      it 'returns true if testing a custom selector, and Unpoly requests "body"' do
+        request.headers['X-Up-Target'] = 'body'
+        get :up_is_target, tested_target: '.foo'
+        expect(response.body).to eq('true')
+      end
+
+      it 'returns true if testing a custom selector, and Unpoly requests "html"' do
+        request.headers['X-Up-Target'] = 'html'
+        get :up_is_target, tested_target: '.foo'
+        expect(response.body).to eq('true')
+      end
+
+      it 'returns true if testing "body", and Unpoly requests "html"' do
+        request.headers['X-Up-Target'] = 'html'
+        get :up_is_target, tested_target: 'body'
+        expect(response.body).to eq('true')
+      end
+
+      it 'returns true if testing "head", and Unpoly requests "html"' do
+        request.headers['X-Up-Target'] = 'html'
+        get :up_is_target, tested_target: 'head'
+        expect(response.body).to eq('true')
+      end
+
+      it 'returns false if the tested CSS selector is "head" but Unpoly requests "body"' do
+        request.headers['X-Up-Target'] = 'body'
+        get :up_is_target, tested_target: 'head'
+        expect(response.body).to eq('false')
+      end
+
+      it 'returns false if the tested CSS selector is "title" but Unpoly requests "body"' do
+        request.headers['X-Up-Target'] = 'body'
+        get :up_is_target, tested_target: 'title'
+        expect(response.body).to eq('false')
+      end
+
+      it 'returns false if the tested CSS selector is "meta" but Unpoly requests "body"' do
+        request.headers['X-Up-Target'] = 'body'
+        get :up_is_target, tested_target: 'meta'
+        expect(response.body).to eq('false')
+      end
+
+      it 'returns true if the tested CSS selector is "head", and Unpoly requests "html"' do
+        request.headers['X-Up-Target'] = 'html'
+        get :up_is_target, tested_target: 'head'
+        expect(response.body).to eq('true')
+      end
+
+      it 'returns true if the tested CSS selector is "title", Unpoly requests "html"' do
+        request.headers['X-Up-Target'] = 'html'
+        get :up_is_target, tested_target: 'title'
+        expect(response.body).to eq('true')
+      end
+
+      it 'returns true if the tested CSS selector is "meta", and Unpoly requests "html"' do
+        request.headers['X-Up-Target'] = 'html'
+        get :up_is_target, tested_target: 'meta'
+        expect(response.body).to eq('true')
+      end
+
+    end
+
     describe '#validate?' do
 
       it 'returns true the request is an Unpoly validation call' do
@@ -63,14 +144,4 @@ describe BindingTestController do
 
   end
 
-
-  # describe '#test' do
-  #
-  #   it 'does stuff' do
-  #     get :test
-  #     expect(response.body).to eq('foo')
-  #   end
-  #
-  # end
-
 end

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

@@ -47,6 +47,20 @@ describe 'up.flow', ->
           expect(resolution).toHaveBeenCalled()
           expect($('.middle')).toHaveText('new-middle')
 
+        it 'returns a promise that will be resolved once the server response was received and the swap animations have completed', (done) ->
+          resolution = jasmine.createSpy()
+          promise = up.replace('.middle', '/path', transition: 'cross-fade', duration: 50)
+          promise.then(resolution)
+          expect(resolution).not.toHaveBeenCalled()
+          expect($('.middle')).toHaveText('old-middle')
+          @respond()
+          expect(resolution).not.toHaveBeenCalled()
+          u.setTimer 20, ->
+            expect(resolution).not.toHaveBeenCalled()
+            u.setTimer 80, ->
+              expect(resolution).toHaveBeenCalled()
+              done()
+
         describe 'with { data } option', ->
 
           it "uses the given params as a non-GET request's payload", ->
@@ -470,19 +484,19 @@ describe 'up.flow', ->
 
         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: 50)
+          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)
+          expect(u.opacity($ghost1)).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)
+          expect(u.opacity($ghost2)).toBeAround(0.0, 0.1)
 
-          u.setTimer 40, ->
-            expect($ghost1.css('opacity')).toBeAround(0.0, 0.2)
-            expect($ghost2.css('opacity')).toBeAround(1.0, 0.2)
+          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', ->
@@ -534,7 +548,7 @@ describe 'up.flow', ->
           promise = up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 30)
           promise.then(resolution)
           expect(resolution).not.toHaveBeenCalled()
-          u.setTimer 50, ->
+          u.setTimer 70, ->
             expect(resolution).toHaveBeenCalled()
             done()
 

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

@@ -215,6 +215,21 @@ describe 'up.form', ->
           expect(submitSpy).toHaveBeenCalled()
           done()
 
+      it 'marks the field with an .up-active class while the form is submitting', (done) ->
+        $form = affix('form')
+        $field = $form.affix('input[up-autosubmit][val="old-value"]')
+        up.hello($field)
+        submission = $.Deferred()
+        submitSpy = up.form.knife.mock('submit').and.returnValue(submission)
+        $field.val('new-value')
+        $field.trigger('change')
+        u.nextFrame ->
+          expect(submitSpy).toHaveBeenCalled()
+          expect($field).toHaveClass('up-active')
+          submission.resolve()
+          expect($field).not.toHaveClass('up-active')
+          done()
+
     describe 'form[up-autosubmit]', ->
 
       it 'submits the form when a change is observed in any of its fields', (done) ->

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

@@ -44,6 +44,8 @@ describe 'up.link', ->
 
         it 'adds history entries and allows the user to use the back- and forward-buttons', (done) ->
 
+          waitForBrowser = 70
+
           # By default, up.history will replace the <body> tag when
           # the user presses the back-button. We reconfigure this
           # so we don't lose the Jasmine runner interface.
@@ -83,21 +85,21 @@ describe 'up.link', ->
                 expect(document.title).toEqual('title from three')
 
                 history.back()
-                u.setTimer 50, ->
+                u.setTimer waitForBrowser, ->
                   respondWith('restored text from two', 'restored title from two')
                   expect($('.target')).toHaveText('restored text from two')
                   expect(location.pathname).toEqual('/two')
                   expect(document.title).toEqual('restored title from two')
 
                   history.back()
-                  u.setTimer 50, ->
+                  u.setTimer waitForBrowser, ->
                     respondWith('restored text from one', 'restored title from one')
                     expect($('.target')).toHaveText('restored text from one')
                     expect(location.pathname).toEqual('/one')
                     expect(document.title).toEqual('restored title from one')
 
                     history.forward()
-                    u.setTimer 50, ->
+                    u.setTimer waitForBrowser, ->
                       # Since the response is cached, we don't have to respond
                       expect($('.target')).toHaveText('restored text from two', 'restored title from two')
                       expect(location.pathname).toEqual('/two')
@@ -367,7 +369,7 @@ describe 'up.link', ->
 
           it 'morphs between the old and new target element', (done) ->
             affix('.target.old')
-            $link = affix('a[href="/path"][up-target=".target"][up-transition="cross-fade"][up-duration="200"][up-easing="linear"]')
+            $link = affix('a[href="/path"][up-target=".target"][up-transition="cross-fade"][up-duration="300"][up-easing="linear"]')
             $link.click()
             @respondWith '<div class="target new">new text</div>'
 
@@ -375,12 +377,11 @@ describe 'up.link', ->
             $newGhost = $('.target.new.up-ghost')
             expect($oldGhost).toExist()
             expect($newGhost).toExist()
-            opacity = ($element) -> Number($element.css('opacity'))
-            expect(opacity($oldGhost)).toBeAround(1, 0.15)
-            expect(opacity($newGhost)).toBeAround(0, 0.15)
-            u.setTimer 100, ->
-              expect(opacity($oldGhost)).toBeAround(0.5, 0.15)
-              expect(opacity($newGhost)).toBeAround(0.5, 0.15)
+            expect(u.opacity($oldGhost)).toBeAround(1, 0.15)
+            expect(u.opacity($newGhost)).toBeAround(0, 0.15)
+            u.setTimer 150, ->
+              expect(u.opacity($oldGhost)).toBeAround(0.5, 0.15)
+              expect(u.opacity($newGhost)).toBeAround(0.5, 0.15)
               done()
 
       it 'does not add a history entry when an up-history attribute is set to "false"', ->