unpoly-rails 0.23.0 → 0.24.0

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

@@ -1,2 +1,2 @@
-[up-href][up-follow], [up-href][up-target]
+[up-href]
   cursor: pointer

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

@@ -1,35 +1,50 @@
-$stratum: 10000
-$substratum-dialog:  1000
-$substratum-content: 2000
-$substratum-close:   3000
+$stratum-backdrop:   10000
+$stratum-elements:   11000
+
+// These could actually be 1000, 2000, 3000 and 4000 since the `fixed` position of some elements 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
 
 $close-height: 36px
 $close-width: 36px
 $close-font-size: 34px
 
-=transform($transform)
-  transform: $transform
-  -ms-transform: $transform // IE9
-  -webkit-transform: $transform // Safari, Some Android
-
 .up-modal
+
+.up-modal-backdrop
+  z-index: $stratum-backdrop
+  background-color: rgba(90, 90, 90, 0.4)
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+
+.up-modal-viewport
+  z-index: $stratum-elements
   position: fixed
   top: 0
   left: 0
   bottom: 0
   right: 0
-  z-index: $stratum
-  background-color: rgba(90, 90, 90, 0.4)
   overflow-x: hidden
-  overflow-y: scroll
+  overflow-y: hidden
   // 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 &
+    overflow-y: scroll
+
 .up-modal-dialog
-  // The z-index lives in the stacking context of .up-modal
   z-index: $substratum-dialog
   // Make sure .up-modal-close is relative to the dialog
   position: relative
@@ -47,14 +62,12 @@ $close-font-size: 34px
   text-align: left
 
 .up-modal-content
-  // The z-index lives in the stacking context of .up-modal
   z-index: $substratum-content
   padding: 20px
   background-color: #fff
   box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3)
 
 .up-modal-close
-  // The z-index lives in the stacking context of .up-modal
   z-index: $substratum-close
   position: absolute
   right: 0

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.23.0'
+    VERSION = '0.24.0'
   end
 end

data/spec_app/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    unpoly-rails (0.22.1)
+    unpoly-rails (0.23.1)
       rails (>= 3)
 
 GEM
@@ -88,8 +88,8 @@ GEM
       phantomjs (>= 1.9)
       railties (>= 3.2.0)
       sprockets-rails
-    jquery-rails (4.0.2)
-      rails-dom-testing (~> 1.0)
+    jquery-rails (4.1.1)
+      rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
     json (1.8.3)
@@ -100,9 +100,9 @@ GEM
       mime-types (>= 1.16, < 3)
     mime-types (2.99)
     mini_portile2 (2.0.0)
-    minitest (5.8.3)
+    minitest (5.8.4)
     multi_json (1.11.2)
-    nokogiri (1.6.7.1)
+    nokogiri (1.6.7.2)
       mini_portile2 (~> 2.0.0.rc2)
     phantomjs (1.9.8.0)
     rack (1.6.4)
@@ -125,14 +125,14 @@ GEM
       activesupport (>= 4.2.0.beta, < 5.0)
       nokogiri (~> 1.6.0)
       rails-deprecated_sanitizer (>= 1.0.1)
-    rails-html-sanitizer (1.0.2)
+    rails-html-sanitizer (1.0.3)
       loofah (~> 2.0)
     railties (4.2.0)
       actionpack (= 4.2.0)
       activesupport (= 4.2.0)
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
-    rake (10.4.2)
+    rake (11.1.2)
     ref (1.0.5)
     rspec-core (3.4.1)
       rspec-support (~> 3.4.0)

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

@@ -1,4 +1,6 @@
 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/helpers/to_contain.js.coffee

@@ -0,0 +1,5 @@
+beforeEach ->
+  jasmine.addMatchers
+    toContain: (util, customEqualityTesters) ->
+      compare: (object, expectedElement) ->
+        pass: up.util.contains(object, expectedElement)

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

@@ -480,7 +480,7 @@ describe 'up.flow', ->
           expect($ghost2).toHaveLength(1)
           expect($ghost2.css('opacity')).toBeAround(0.0, 0.1)
 
-          @setTimer 40, ->
+          u.setTimer 40, ->
             expect($ghost1.css('opacity')).toBeAround(0.0, 0.2)
             expect($ghost2.css('opacity')).toBeAround(1.0, 0.2)
             done()
@@ -534,7 +534,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()
-          @setTimer 50, ->
+          u.setTimer 50, ->
             expect(resolution).toHaveBeenCalled()
             done()
 

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

@@ -1,4 +1,6 @@
 describe 'up.history', ->
+
+  u = up.util
   
   describe 'Javascript functions', ->
     
@@ -74,23 +76,23 @@ describe 'up.history', ->
           $('.viewport').scrollTop(250)
 
           history.back()
-          @setTimer 50, =>
+          u.setTimer 50, ->
             respond() # we need to respond since we've never requested /two with the popTarget
             expect($('.viewport').scrollTop()).toBe(150)
 
             history.back()
-            @setTimer 50, =>
+            u.setTimer 50, ->
               respond() # we need to respond since we've never requested /one with the popTarget
               expect($('.viewport').scrollTop()).toBe(50)
 
               history.forward()
-              @setTimer 50, =>
+              u.setTimer 50, ->
                 # No need to respond since we requested /two with the popTarget
                 # when we went backwards
                 expect($('.viewport').scrollTop()).toBe(150)
 
                 history.forward()
-                @setTimer 50, =>
+                u.setTimer 50, ->
                   respond() # we need to respond since we've never requested /three with the popTarget
                   expect($('.viewport').scrollTop()).toBe(250)
                   done()

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

@@ -83,21 +83,21 @@ describe 'up.link', ->
                 expect(document.title).toEqual('title from three')
 
                 history.back()
-                @setTimer 50, =>
+                u.setTimer 50, ->
                   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()
-                  @setTimer 50, =>
+                  u.setTimer 50, ->
                     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()
-                    @setTimer 50, =>
+                    u.setTimer 50, ->
                       # 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')
@@ -105,6 +105,115 @@ describe 'up.link', ->
 
                       done()
 
+        it 'does not add additional history entries when linking to the current URL', (done) ->
+
+          # 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.
+          up.history.config.popTargets = ['.container']
+
+          up.proxy.config.cacheExpiry = 0
+
+          respondWith = (text) =>
+            @respondWith """
+              <div class="container">
+                <div class='target'>#{text}</div>
+              </div>
+            """
+
+          followAndRespond = ($link, text) =>
+            promise = up.follow($link)
+            respondWith(text)
+            promise
+
+          $link1 = affix('a[href="/one"][up-target=".target"]')
+          $link2 = affix('a[href="/two"][up-target=".target"]')
+          $container = affix('.container')
+          $target = affix('.target').appendTo($container).text('original text')
+
+          followAndRespond($link1, 'text from one').then =>
+            expect($('.target')).toHaveText('text from one')
+            expect(location.pathname).toEqual('/one')
+
+            followAndRespond($link2, 'text from two').then =>
+              expect($('.target')).toHaveText('text from two')
+              expect(location.pathname).toEqual('/two')
+
+              followAndRespond($link2, 'text from two').then =>
+                expect($('.target')).toHaveText('text from two')
+                expect(location.pathname).toEqual('/two')
+
+                history.back()
+                u.setTimer 50, ->
+                  respondWith('restored text from one')
+                  expect($('.target')).toHaveText('restored text from one')
+                  expect(location.pathname).toEqual('/one')
+
+                  history.forward()
+                  u.setTimer 50, ->
+                    respondWith('restored text from two')
+                    expect($('.target')).toHaveText('restored text from two')
+                    expect(location.pathname).toEqual('/two')
+
+                    done()
+
+        it 'does adds additional history entries when linking to the current URL, but with a different hash', (done) ->
+
+          # 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.
+          up.history.config.popTargets = ['.container']
+
+          up.proxy.config.cacheExpiry = 0
+
+          respondWith = (text) =>
+            @respondWith """
+              <div class="container">
+                <div class='target'>#{text}</div>
+              </div>
+            """
+
+          followAndRespond = ($link, text) =>
+            promise = up.follow($link)
+            respondWith(text)
+            promise
+
+          $link1 = affix('a[href="/one"][up-target=".target"]')
+          $link2 = affix('a[href="/two"][up-target=".target"]')
+          $link2WithHash = affix('a[href="/two#hash"][up-target=".target"]')
+          $container = affix('.container')
+          $target = affix('.target').appendTo($container).text('original text')
+
+          followAndRespond($link1, 'text from one').then =>
+            expect($('.target')).toHaveText('text from one')
+            expect(location.pathname).toEqual('/one')
+            expect(location.hash).toEqual('')
+
+            followAndRespond($link2, 'text from two').then =>
+              expect($('.target')).toHaveText('text from two')
+              expect(location.pathname).toEqual('/two')
+              expect(location.hash).toEqual('')
+
+              followAndRespond($link2WithHash, 'text from two with hash').then =>
+                expect($('.target')).toHaveText('text from two with hash')
+                expect(location.pathname).toEqual('/two')
+                expect(location.hash).toEqual('#hash')
+
+                history.back()
+                u.setTimer 50, ->
+                  respondWith('restored text from two')
+                  expect($('.target')).toHaveText('restored text from two')
+                  expect(location.pathname).toEqual('/two')
+                  expect(location.hash).toEqual('')
+
+                  history.forward()
+                  u.setTimer 50, ->
+                    respondWith('restored text from two with hash')
+                    expect($('.target')).toHaveText('restored text from two with hash')
+                    expect(location.pathname).toEqual('/two')
+                    expect(location.hash).toEqual('#hash')
+                    done()
+
         describe 'with { restoreScroll: true } option', ->
 
           it 'does not reveal, but instead restores the scroll positions of all viewports around the target', ->
@@ -230,7 +339,7 @@ describe 'up.link', ->
       it 'does not follow a form with up-target attribute (bugfix)', ->
         $form = affix('form[up-target]')
         up.hello($form)
-        followSpy = up.link.knife.mock('follow')
+        followSpy = up.link.knife.mock('follow').and.returnValue(u.resolvedPromise())
         $form.click()
         expect(followSpy).not.toHaveBeenCalled()
 
@@ -269,7 +378,7 @@ describe 'up.link', ->
 
       beforeEach ->
         @$link = affix('a[href="/path"][up-follow]')
-        @followSpy = up.link.knife.mock('follow')
+        @followSpy = up.link.knife.mock('follow').and.returnValue(u.resolvedPromise())
         @defaultSpy = up.link.knife.mock('allowDefault').and.callFake((event) -> event.preventDefault())
 
       it "calls up.follow with the clicked link", ->

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

@@ -26,6 +26,25 @@ describe 'up.modal', ->
           expect($('.up-modal-dialog .after')).not.toExist()
           done()
 
+    describe 'up.modal.extract', ->
+
+      it 'opens a modal by extracting the given selector from the given HTML string', ->
+        oldHref = location.href
+        up.modal.extract '.middle', """
+          <div class="before">new-before</div>
+          <div class="middle">new-middle</div>
+          <div class="after">new-after</div>
+        """
+        expect($('.up-modal')).toExist()
+        expect($('.up-modal-dialog')).toExist()
+        expect($('.up-modal-dialog .middle')).toExist()
+        expect($('.up-modal-dialog .middle')).toHaveText('new-middle')
+        expect($('.up-modal-dialog .before')).not.toExist()
+        expect($('.up-modal-dialog .after')).not.toExist()
+
+        # Can't change URLs
+        expect(location.href).toEqual(oldHref)
+
     describe 'up.modal.visit', ->
 
       it "brings its own scrollbar, padding the body on the right in order to prevent jumping", (done) ->
@@ -34,11 +53,11 @@ describe 'up.modal', ->
         @respondWith('<div class="container">text</div>')
 
         promise.then ->
-
           $modal = $('.up-modal')
+          $viewport = $modal.find('.up-modal-viewport')
           $body = $('body')
           expect($modal).toExist()
-          expect($modal.css('overflow-y')).toEqual('scroll')
+          expect($viewport.css('overflow-y')).toEqual('scroll')
           expect($body.css('overflow-y')).toEqual('hidden')
           expect(parseInt($body.css('padding-right'))).toBeAround(assumedScrollbarWidth, 10)
 
@@ -80,12 +99,13 @@ describe 'up.modal', ->
         it 'returns the URL behind the modal overlay', (done) ->
           up.history.replace('/foo')
           expect(up.modal.coveredUrl()).toBeUndefined()
-          up.modal.visit('/bar', target: '.container')
+          visitPromise = up.modal.visit('/bar', target: '.container')
           @respondWith('<div class="container">text</div>')
-          expect(up.modal.coveredUrl()).toEndWith('/foo')
-          up.modal.close().then ->
-            expect(up.modal.coveredUrl()).toBeUndefined()
-            done()
+          visitPromise.then ->
+            expect(up.modal.coveredUrl()).toEndWith('/foo')
+            up.modal.close().then ->
+              expect(up.modal.coveredUrl()).toBeUndefined()
+              done()
 
 
     describe 'up.modal.close', ->
@@ -104,7 +124,7 @@ describe 'up.modal', ->
       
       beforeEach ->
         @$link = affix('a[href="/path"][up-modal=".target"]')
-        @followSpy = up.modal.knife.mock('follow')
+        @followSpy = up.modal.knife.mock('follow').and.returnValue(u.resolvedPromise())
         @defaultSpy = up.link.knife.mock('allowDefault').and.callFake((event) -> event.preventDefault())
 
       it 'opens the clicked link in a modal', ->
@@ -253,13 +273,3 @@ describe 'up.modal', ->
         @respondWith("<div class='popup-content'></div>")
         expect($('.up-modal')).toExist()
         expect($('.up-popup')).toExist()
-
-    describe 'when following links inside a modal', ->
-
-      it 'prefers to replace a selector within the modal', ->
-
-      it 'auto-closes the modal if a selector behind the modal gets replaced'
-
-      it "doesn't auto-close the modal if a selector behind the modal if the modal is sticky"
-
-      it "doesn't auto-close the modal if the new fragment is a popup"