unpoly-rails 0.26.1 → 0.26.2

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

@@ -57,23 +57,31 @@ up.tooltip = (($) ->
     config.reset()
 
   setPosition = ($link, $tooltip, position) ->
-    linkBox = u.measure($link)
+    css = {}
     tooltipBox = u.measure($tooltip)
-    css = switch position
+
+    if u.isFixed($link)
+      linkBox = $link.get(0).getBoundingClientRect()
+      css['position'] = 'fixed'
+    else
+      linkBox = u.measure($link)
+
+    switch position
       when "top"
-        left: linkBox.left + 0.5 * (linkBox.width - tooltipBox.width)
-        top: linkBox.top - tooltipBox.height
+        css['top'] = linkBox.top - tooltipBox.height
+        css['left'] = linkBox.left + 0.5 * (linkBox.width - tooltipBox.width)
       when "left"
-        left: linkBox.left - tooltipBox.width
-        top: linkBox.top + 0.5 * (linkBox.height - tooltipBox.height)
+        css['top'] = linkBox.top + 0.5 * (linkBox.height - tooltipBox.height)
+        css['left'] = linkBox.left - tooltipBox.width
       when "right"
-        left: linkBox.left + linkBox.width
-        top: linkBox.top + 0.5 * (linkBox.height - tooltipBox.height)
+        css['top'] = linkBox.top + 0.5 * (linkBox.height - tooltipBox.height)
+        css['left'] = linkBox.left + linkBox.width
       when "bottom"
-        left: linkBox.left + 0.5 * (linkBox.width - tooltipBox.width)
-        top: linkBox.top + linkBox.height
+        css['top'] = linkBox.top + linkBox.height
+        css['left'] = linkBox.left + 0.5 * (linkBox.width - tooltipBox.width)
       else
         u.error("Unknown position option '%s'", position)
+
     $tooltip.attr('up-position', position)
     $tooltip.css(css)
 

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

@@ -886,7 +886,8 @@ up.util = (($) ->
     A function that restores the original CSS when called.
   @internal
   ###
-  temporaryCss = ($element, css, block) ->
+  temporaryCss = (elementOrSelector, css, block) ->
+    $element = $(elementOrSelector)
     oldCss = $element.css(Object.keys(css))
     $element.css(css)
     memo = -> $element.css(oldCss)
@@ -1048,7 +1049,7 @@ up.util = (($) ->
   @internal
   ###
   measure = ($element, opts) ->
-    opts = options(opts, relative: false, inner: false, full: false)
+    opts = options(opts, relative: false, inner: false)
 
     if opts.relative
       if opts.relative == true
@@ -1078,11 +1079,7 @@ up.util = (($) ->
     else
       box.width = $element.outerWidth()
       box.height = $element.outerHeight()
-      
-    if opts.full
-      $viewport = up.layout.viewportOf($element)
-      box.right = $viewport.width() - (box.left + box.width)
-      box.bottom = $viewport.height() - (box.top + box.height)
+
     box
 
   ###*

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.1'
+    VERSION = '0.26.2'
   end
 end

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

@@ -5,6 +5,22 @@ body
   background: image-url('grid.png') repeat
   font-family: arial, sans-serif
 
+.page
+  min-height: 3000px
+
+.spacer
+  background-color: transparentize(green, 0.5)
+  height: 150px
+  content: 'Free space'
+
+.fixed-top-bar
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  background-color: transparentize(blue, 0.5)
+  padding: 50px
+
 .example
   margin: 50px
 

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

@@ -0,0 +1,25 @@
+<div class="spacer">
+</div>
+
+<div class="example">
+  <a class="button" href="/css_test/popup_contents" 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="top-right">Top-right 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>
+</div>
+
+<div class="example">
+  <a class="button" href="/css_test/popup_contents" up-popup=".contents" up-position="bottom-left">Bottom-left 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>

data/spec_app/app/views/css_test/popup_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/tooltip.erb

@@ -13,3 +13,10 @@
 <div class="example">
   <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>

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

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

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

@@ -143,7 +143,7 @@ describe 'up.modal', ->
             @respondWith('<div class="container">response1</div>', request: request1)
             u.setTimer 10, =>
               @respondWith('<div class="container">response2</div>', request: request2)
-              u.setTimer 50, =>
+              u.setTimer 110, =>
                 expect($('.up-modal').length).toBe(1)
                 expect($('.up-modal-dialog').length).toBe(1)
                 expect($('.container')).toHaveText('response2')
@@ -323,37 +323,44 @@ describe 'up.modal', ->
   describe 'unobtrusive behavior', ->
     
     describe 'a[up-modal]', ->
-      
+
       beforeEach ->
-        @$link = affix('a[href="/path"][up-modal=".target"]')
-        @followSpy = up.modal.knife.mock('follow').and.returnValue(u.resolvedPromise())
-        @defaultSpy = up.link.knife.mock('allowDefault').and.callFake((event) -> event.preventDefault())
+        @stubFollow = =>
+          @$link = affix('a[href="/path"][up-modal=".target"]')
+          @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', ->
+        @stubFollow()
         Trigger.click(@$link)
         expect(@followSpy).toHaveBeenCalledWith(@$link)
 
       # IE does not call Javascript and always performs the default action on right clicks
       unless navigator.userAgent.match(/Trident/)
         it 'does nothing if the right mouse button is used', ->
+          @stubFollow()
           Trigger.click(@$link, button: 2)
           expect(@followSpy).not.toHaveBeenCalled()
 
       it 'does nothing if shift is pressed during the click', ->
+        @stubFollow()
         Trigger.click(@$link, shiftKey: true)
         expect(@followSpy).not.toHaveBeenCalled()
 
       it 'does nothing if ctrl is pressed during the click', ->
+        @stubFollow()
         Trigger.click(@$link, ctrlKey: true)
         expect(@followSpy).not.toHaveBeenCalled()
 
       it 'does nothing if meta is pressed during the click', ->
+        @stubFollow()
         Trigger.click(@$link, metaKey: true)
         expect(@followSpy).not.toHaveBeenCalled()
 
       describe 'with [up-instant] modifier', ->
 
         beforeEach ->
+          @stubFollow()
           @$link.attr('up-instant', '')
 
         it 'opens the modal on mousedown (instead of on click)', ->
@@ -386,6 +393,13 @@ describe 'up.modal', ->
           Trigger.mousedown(@$link, metaKey: true)
           expect(@followSpy).not.toHaveBeenCalled()
 
+      describe 'with [up-method] modifier', ->
+
+        it 'honours the given method', ->
+          $link = affix('a[href="/path"][up-modal=".target"][up-method="post"]')
+          Trigger.click($link)
+          expect(@lastRequest().method).toEqual 'POST'
+
 
     describe '[up-close]', ->
 

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

@@ -10,11 +10,16 @@ describe 'up.popup', ->
         jasmine.addMatchers
           toSitBelow: (util, customEqualityTesters) ->
             compare: ($popup, $link) ->
-              pass: ->
-                popupDims = u.measure($popup, full: true)
-                linkDims = u.measure($link, full: true)
-                expect(popupDims.right).toBeAround(linkDims.right, 1)
-                expect(popupDims.top).toBeAround(linkDims.top + linkDims.height, 1)
+              popupDims = $popup.get(0).getBoundingClientRect()
+              linkDims = $link.get(0).getBoundingClientRect()
+              pass:
+                Math.abs(popupDims.right - linkDims.right) < 1.0 && Math.abs(popupDims.top - linkDims.bottom) < 1.0
+
+      beforeEach ->
+        @restoreBodyHeight = u.temporaryCss('body', 'min-height': '3000px')
+
+      afterEach ->
+        @restoreBodyHeight()
 
       it "loads this link's destination in a popup positioned under the given link", ->
         $container = affix('.container')
@@ -42,19 +47,24 @@ describe 'up.popup', ->
         expect($popup.find('.after')).not.toExist()
 
         expect($popup.css('position')).toEqual('absolute')
+
         expect($popup).toSitBelow($link)
 
       it 'gives the popup { position: "fixed" } if the given link is fixed', ->
+        # Let's test the harder case where the document is scrolled
+        up.layout.scroll(document, 50)
         $container = affix('.container')
         $container.css
           position: 'fixed'
           left: '100px'
           top: '50px'
         $link = $container.affix('a[href="/path/to"][up-popup=".content"]').text('link')
+
         up.popup.attach($link)
         @respondWith('<div class="content">popup-content</div>')
         $popup = $('.up-popup')
         expect($popup.css('position')).toEqual('fixed')
+
         expect($popup).toSitBelow($link)
 
       it 'does not explode if the popup was closed before the response was received', ->
@@ -166,35 +176,42 @@ describe 'up.popup', ->
     describe 'a[up-popup]', ->
 
       beforeEach ->
-        @$link = affix('a[href="/path"][up-popup=".target"]')
-        @attachSpy = up.popup.knife.mock('attach').and.returnValue(u.resolvedPromise())
-        @defaultSpy = up.link.knife.mock('allowDefault').and.callFake((event) -> event.preventDefault())
+        @stubAttach = =>
+          @$link = affix('a[href="/path"][up-popup=".target"]')
+          @attachSpy = up.popup.knife.mock('attach').and.returnValue(u.resolvedPromise())
+          @defaultSpy = up.link.knife.mock('allowDefault').and.callFake((event) -> event.preventDefault())
 
       it 'opens the clicked link in a popup', ->
+        @stubAttach()
         Trigger.click(@$link)
         expect(@attachSpy).toHaveBeenCalledWith(@$link)
 
       # IE does not call Javascript and always performs the default action on right clicks
       unless navigator.userAgent.match(/Trident/)
         it 'does nothing if the right mouse button is used', ->
+          @stubAttach()
           Trigger.click(@$link, button: 2)
           expect(@attachSpy).not.toHaveBeenCalled()
 
       it 'does nothing if shift is pressed during the click', ->
+        @stubAttach()
         Trigger.click(@$link, shiftKey: true)
         expect(@attachSpy).not.toHaveBeenCalled()
 
       it 'does nothing if ctrl is pressed during the click', ->
+        @stubAttach()
         Trigger.click(@$link, ctrlKey: true)
         expect(@attachSpy).not.toHaveBeenCalled()
 
       it 'does nothing if meta is pressed during the click', ->
+        @stubAttach()
         Trigger.click(@$link, metaKey: true)
         expect(@attachSpy).not.toHaveBeenCalled()
 
       describe 'with [up-instant] modifier', ->
 
         beforeEach ->
+          @stubAttach()
           @$link.attr('up-instant', '')
 
         it 'opens the modal on mousedown (instead of on click)', ->
@@ -227,6 +244,13 @@ describe 'up.popup', ->
           Trigger.mousedown(@$link, metaKey: true)
           expect(@attachSpy).not.toHaveBeenCalled()
 
+      describe 'with [up-method] modifier', ->
+
+        it 'honours the given method', ->
+          $link = affix('a[href="/path"][up-popup=".target"][up-method="post"]')
+          Trigger.click($link)
+          expect(@lastRequest().method).toEqual 'POST'
+
     describe '[up-close]', ->
 
       describe 'when clicked inside a popup', ->

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

@@ -1,5 +1,7 @@
 describe 'up.tooltip', ->
-  
+
+  u = up.util
+
   describe 'Javascript functions', ->
     
     describe 'up.tooltip.attach', ->
@@ -33,44 +35,68 @@ describe 'up.tooltip', ->
             width: '50px'
             height: '50px'
           )
-          @linkBox = up.util.measure(@$link, relative: true)
+
+        beforeEach ->
+          @restoreBodyHeight = u.temporaryCss('body', 'min-height': '3000px')
+
+        afterEach ->
+          @restoreBodyHeight()
 
         describe 'with { position: "top" }', ->
 
           it 'centers the tooltip above the given element', ->
+            @linkBox = @$link.get(0).getBoundingClientRect()
             up.tooltip.attach(@$link, html: 'tooltip text', position: 'top')
             $tooltip = $('.up-tooltip')
-            tooltipBox = up.util.measure($tooltip, relative: true)
+            tooltipBox = $tooltip.get(0).getBoundingClientRect()
             expect(tooltipBox.top).toBeAround(@linkBox.top - tooltipBox.height, 15)
             expect(tooltipBox.left).toBeAround(@linkBox.left + 0.5 * (@linkBox.width - tooltipBox.width), 15)
 
         describe 'with { position: "right" }', ->
 
           it 'centers the tooltip at the right side of the given element', ->
+            @linkBox = @$link.get(0).getBoundingClientRect()
             up.tooltip.attach(@$link, html: 'tooltip text', position: 'right')
             $tooltip = $('.up-tooltip')
-            tooltipBox = up.util.measure($tooltip, relative: true)
+            tooltipBox = $tooltip.get(0).getBoundingClientRect()
             expect(tooltipBox.top).toBeAround(@linkBox.top + 0.5 * (@linkBox.height - tooltipBox.height), 15)
             expect(tooltipBox.left).toBeAround(@linkBox.left + @linkBox.width, 15)
 
         describe 'with { position: "bottom" }', ->
 
           it 'centers the tooltip below the given element', ->
+            @linkBox = @$link.get(0).getBoundingClientRect()
             up.tooltip.attach(@$link, html: 'tooltip text', position: 'bottom')
             $tooltip = $('.up-tooltip')
-            tooltipBox = up.util.measure($tooltip, relative: true)
+            tooltipBox = $tooltip.get(0).getBoundingClientRect()
             expect(tooltipBox.top).toBeAround(@linkBox.top + @linkBox.height, 15)
             expect(tooltipBox.left).toBeAround(@linkBox.left + 0.5 * (@linkBox.width - tooltipBox.width), 15)
 
         describe 'with { position: "left" }', ->
 
           it 'centers the tooltip at the left side of the given element', ->
+            @linkBox = @$link.get(0).getBoundingClientRect()
             up.tooltip.attach(@$link, html: 'tooltip text', position: 'left')
             $tooltip = $('.up-tooltip')
-            tooltipBox = up.util.measure($tooltip, relative: true)
+            tooltipBox = $tooltip.get(0).getBoundingClientRect()
             expect(tooltipBox.top).toBeAround(@linkBox.top + 0.5 * (@linkBox.height - tooltipBox.height), 15)
             expect(tooltipBox.left).toBeAround(@linkBox.left - tooltipBox.width, 15)
 
+        it 'gives the tooltip { position: "fixed" } if the given link is fixed', ->
+          # Let's test the harder case where the document is scrolled
+          up.layout.scroll(document, 50)
+          @$link.css(position: 'fixed')
+          @linkBox = @$link.get(0).getBoundingClientRect()
+
+          up.tooltip.attach(@$link, html: 'tooltip text', position: 'top')
+          $tooltip = $('.up-tooltip')
+          tooltipBox = $tooltip.get(0).getBoundingClientRect()
+
+          expect($tooltip.css('position')).toEqual('fixed')
+          expect(tooltipBox.top).toBeAround(@linkBox.top - tooltipBox.height, 15)
+          expect(tooltipBox.left).toBeAround(@linkBox.left + 0.5 * (@linkBox.width - tooltipBox.width), 15)
+
+
       it 'closes an existing tooltip'
       
       describe 'with position option', ->

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: unpoly-rails
 version: !ruby/object:Gem::Version
-  version: 0.26.1
+  version: 0.26.2
 platform: ruby
 authors:
 - Henning Koch
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-06-14 00:00:00.000000000 Z
+date: 2016-06-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -150,6 +150,8 @@ files:
 - spec_app/app/helpers/application_helper.rb
 - spec_app/app/mailers/.keep
 - spec_app/app/models/concerns/.keep
+- spec_app/app/views/css_test/popup.erb
+- spec_app/app/views/css_test/popup_contents.erb
 - spec_app/app/views/css_test/tooltip.erb
 - spec_app/app/views/form_test/basics/new.erb
 - spec_app/app/views/form_test/submission_result.erb