unpoly-rails 0.22.0 → 0.22.1

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

@@ -5,7 +5,7 @@ Caching and preloading
 All HTTP requests go through the Unpoly proxy.
 It caches a [limited](/up.proxy.config) number of server responses
 for a [limited](/up.proxy.config) amount of time,
-making requests to these URLs return insantly.
+making requests to these URLs return instantly.
   
 The cache is cleared whenever the user makes a non-`GET` request
 (like `POST`, `PUT` or `DELETE`).
@@ -15,42 +15,6 @@ links when the user hovers over the click area](/up-preload) (or puts the mouse/
 down before releasing). This way the response will already be cached when
 the user performs the click.
 
-Spinners
---------
-
-You can [listen](/up.on) to the [`up:proxy:slow`](/up:proxy:slow)
-and [`up:proxy:recover`](/up:proxy:recover) events  to implement a spinner
-that appears during a long-running request,
-and disappears once the response has been received:
-
-    <div class="spinner">Please wait!</div>
-
-Here is the Javascript to make it alive:
-
-    up.compiler('.spinner', function($element) {
-
-      show = function() { $element.show() };
-      hide = function() { $element.hide() };
-
-      showOff = up.on('up:proxy:slow', show);
-      hideOff = up.on('up:proxy:recover', hide);
-
-      hide();
-
-      // Clean up when the element is removed from the DOM
-      return function() {
-        showOff();
-        hideOff();
-      };
-
-    });
-
-The `up:proxy:slow` event will be emitted after a delay of 300 ms
-to prevent the spinner from flickering on and off.
-You can change (or remove) this delay by [configuring `up.proxy`](/up.proxy.config) like this:
-
-    up.proxy.config.slowDelay = 150;
-
 @class up.proxy  
 ###
 up.proxy = (($) ->
@@ -349,6 +313,43 @@ up.proxy = (($) ->
   Note that if additional requests are made while Unpoly is already busy
   waiting, **no** additional `up:proxy:slow` events will be triggered.
 
+
+  \#\#\#\# Spinners
+
+  You can [listen](/up.on) to the `up:proxy:slow`
+  and [`up:proxy:recover`](/up:proxy:recover) events to implement a spinner
+  that appears during a long-running request,
+  and disappears once the response has been received:
+
+      <div class="spinner">Please wait!</div>
+
+  Here is the Javascript to make it alive:
+
+      up.compiler('.spinner', function($element) {
+
+        show = function() { $element.show() };
+        hide = function() { $element.hide() };
+
+        showOff = up.on('up:proxy:slow', show);
+        hideOff = up.on('up:proxy:recover', hide);
+
+        hide();
+
+        // Clean up when the element is removed from the DOM
+        return function() {
+          showOff();
+          hideOff();
+        };
+
+      });
+
+  The `up:proxy:slow` event will be emitted after a delay of 300 ms
+  to prevent the spinner from flickering on and off.
+  You can change (or remove) this delay by [configuring `up.proxy`](/up.proxy.config) like this:
+
+      up.proxy.config.slowDelay = 150;
+
+
   @event up:proxy:slow
   @stable
   ###
@@ -363,6 +364,10 @@ up.proxy = (($) ->
   This event is [emitted]/(up.emit) when [AJAX requests](/up.ajax)
   have [taken long to finish](/up:proxy:slow), but have finished now.
 
+  See [`up:proxy:slow`](/up:proxy:slow) for more documentation on
+  how to use this event for implementing a spinner that shows during
+  long-running requests.
+
   @event up:proxy:recover
   @stable
   ###

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

@@ -46,11 +46,11 @@ up.syntax = (($) ->
   Registers a function to be called whenever an element with
   the given selector is inserted into the DOM.
 
-      $('.action').compiler(function($element) {
+      up.compiler('.action', function($element) {
         // your code here
       });
 
-  Compiler functions will be called on matching elements when
+  The functions will be called on elements maching `.action` when
   the page loads, or whenever a matching fragment is [updated through Unpoly](/up.replace)
   later.
 
@@ -135,7 +135,7 @@ up.syntax = (($) ->
         { lat: 48.75, lng: 11.45, title: 'Ingolstadt' }
       ]"></div>
 
-  The JSON will parsed and handed to your event handler as a second argument:
+  The JSON will parsed and handed to your compiler as a second argument:
 
       up.compiler('.google-map', function($element, pins) {
 
@@ -195,7 +195,7 @@ up.syntax = (($) ->
   @param {Function($element, data)} compiler
     The function to call when a matching element is inserted.
     The function takes the new element as the first argument (as a jQuery object).
-    If the element has an `up-data` attribute, its value is parsed as JSON
+    If the element has an [`up-data`](/up-data) attribute, its value is parsed as JSON
     and passed as a second argument.
 
     The function may return a destructor function that destroys the compiled
@@ -324,11 +324,21 @@ up.syntax = (($) ->
       destroyer()
 
   ###*
-  Checks if the given element has an `up-data` attribute.
+  Checks if the given element has an [`up-data`](/up-data) attribute.
   If yes, parses the attribute value as JSON and returns the parsed object.
 
   Returns an empty object if the element has no `up-data` attribute.
 
+  \#\#\#\# Example
+
+  You have an element with JSON data serialized into an `up-data` attribute:
+
+      <span class="person" up-data="{ age: 18, name: 'Bob' }">Bob</span>
+
+  Calling `up.syntax.data` will deserialize the JSON string into a Javascript object:
+
+      up.syntax.data('.person') // returns { age: 18, name: 'Bob' }
+
   @function up.syntax.data
   @param {String|Element|jQuery} elementOrSelector
   @return
@@ -338,15 +348,44 @@ up.syntax = (($) ->
   @experimental
   ###
 
-  ###
+  ###*
   If an element annotated with [`up-data`] is inserted into the DOM,
   Up will parse the JSON and pass the resulting object to any matching
-  [`up.compiler`](/up.syntax.compiler) handlers.
+  [`up.compiler`](/up.compiler) handlers.
+
+  For instance, a container for a [Google Map](https://developers.google.com/maps/documentation/javascript/tutorial)
+  might attach the location and names of its marker pins:
+
+      <div class="google-map" up-data="[
+        { lat: 48.36, lng: 10.99, title: 'Friedberg' },
+        { lat: 48.75, lng: 11.45, title: 'Ingolstadt' }
+      ]"></div>
+
+  The JSON will parsed and handed to your compiler as a second argument:
+
+      up.compiler('.google-map', function($element, pins) {
+
+        var map = new google.maps.Map($element);
+
+        pins.forEach(function(pin) {
+          var position = new google.maps.LatLng(pin.lat, pin.lng);
+          new google.maps.Marker({
+            position: position,
+            map: map,
+            title: pin.title
+          });
+        });
+
+      });
 
   Similarly, when an event is triggered on an element annotated with
   [`up-data`], the parsed object will be passed to any matching
   [`up.on`](/up.on) handlers.
 
+      up.on('click', '.google-map', function(event, $element, pins) {
+        console.log("There are %d pins on the clicked map", pins.length);
+      });
+
   @selector [up-data]
   @param {JSON} up-data
     A serialized JSON string

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

@@ -943,6 +943,7 @@ up.util = (($) ->
       if opts.relative == true
         coordinates = $element.position()
       else
+        # A relative context element is given
         $context = $(opts.relative)
         elementCoords = $element.offset()
         if $context.is(document)
@@ -968,9 +969,9 @@ up.util = (($) ->
       box.height = $element.outerHeight()
       
     if opts.full
-      viewport = clientSize()
-      box.right = viewport.width - (box.left + box.width)
-      box.bottom = viewport.height - (box.top + box.height)
+      $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.22.0'
+    VERSION = '0.22.1'
   end
 end

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

@@ -49,15 +49,16 @@ describe 'up.link', ->
           # so we don't lose the Jasmine runner interface.
           up.history.config.popTargets = ['.container']
 
-          respondWith = (html) =>
+          respondWith = (html, title) =>
             @lastRequest().respondWith
               status: 200
               contentType: 'text/html'
               responseText: "<div class='container'><div class='target'>#{html}</div></div>"
+              responseHeaders: { 'X-Up-Title': title }
 
-          followAndRespond = ($link, html) ->
+          followAndRespond = ($link, html, title) ->
             promise = up.follow($link)
-            respondWith(html)
+            respondWith(html, title)
             promise
 
           $link1 = affix('a[href="/one"][up-target=".target"]')
@@ -66,35 +67,41 @@ describe 'up.link', ->
           $container = affix('.container')
           $target = affix('.target').appendTo($container).text('original text')
 
-          followAndRespond($link1, 'text from one').then =>
+          followAndRespond($link1, 'text from one', 'title from one').then =>
             expect($('.target')).toHaveText('text from one')
             expect(location.pathname).toEqual('/one')
+            expect(document.title).toEqual('title from one')
 
-            followAndRespond($link2, 'text from two').then =>
+            followAndRespond($link2, 'text from two', 'title from two').then =>
               expect($('.target')).toHaveText('text from two')
               expect(location.pathname).toEqual('/two')
+              expect(document.title).toEqual('title from two')
 
-              followAndRespond($link3, 'text from three').then =>
+              followAndRespond($link3, 'text from three', 'title from three').then =>
                 expect($('.target')).toHaveText('text from three')
                 expect(location.pathname).toEqual('/three')
+                expect(document.title).toEqual('title from three')
 
                 history.back()
                 @setTimer 50, =>
-                  respondWith('restored text from two')
+                  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, =>
-                    respondWith('restored text from one')
+                    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, =>
                       # Since the response is cached, we don't have to respond
-                      expect($('.target')).toHaveText('restored text from two')
+                      expect($('.target')).toHaveText('restored text from two', 'restored title from two')
                       expect(location.pathname).toEqual('/two')
+                      expect(document.title).toEqual('restored title from two')
 
                       done()
 
@@ -190,6 +197,27 @@ describe 'up.link', ->
           up.follow($link)
           expect(up.browser.loadPage).toHaveBeenCalledWith('/path', { method: 'PUT' })
 
+    describe 'up.link.makeFollowable', ->
+
+      it "adds [up-follow] to a link that wouldn't otherwise be handled by Unpoly", ->
+        $link = affix('a[href="/path"]').text('label')
+        up.link.makeFollowable($link)
+        expect($link.attr('up-follow')).toEqual('')
+
+      it "does not add [up-follow] to a link that is already [up-target]", ->
+        $link = affix('a[href="/path"][up-target=".target"]').text('label')
+        up.link.makeFollowable($link)
+        expect($link.attr('up-follow')).toBeMissing()
+
+      it "does not add [up-follow] to a link that is already [up-modal]", ->
+        $link = affix('a[href="/path"][up-modal=".target"]').text('label')
+        up.link.makeFollowable($link)
+        expect($link.attr('up-follow')).toBeMissing()
+
+      it "does not add [up-follow] to a link that is already [up-popup]", ->
+        $link = affix('a[href="/path"][up-popup=".target"]').text('label')
+        up.link.makeFollowable($link)
+        expect($link.attr('up-follow')).toBeMissing()
 
     describe 'up.visit', ->
       
@@ -301,6 +329,48 @@ describe 'up.link', ->
           Trigger.mousedown(@$link, metaKey: true)
           expect(@followSpy).not.toHaveBeenCalled()
 
+    describe '[up-dash]', ->
+
+      it "is a shortcut for [up-preload], [up-instant] and [up-target], using [up-dash]'s value as [up-target]", ->
+        $link = affix('a[href="/path"][up-dash=".target"]').text('label')
+        up.hello($link)
+        expect($link.attr('up-preload')).toEqual('')
+        expect($link.attr('up-instant')).toEqual('')
+        expect($link.attr('up-target')).toEqual('.target')
+
+      it "adds [up-follow] attribute if [up-dash]'s value is 'true'", ->
+        $link = affix('a[href="/path"][up-dash="true"]').text('label')
+        up.hello($link)
+        expect($link.attr('up-follow')).toEqual('')
+
+      it "adds [up-follow] attribute if [up-dash] is present, but has no value", ->
+        $link = affix('a[href="/path"][up-dash]').text('label')
+        up.hello($link)
+        expect($link.attr('up-follow')).toEqual('')
+
+      it "does not add an [up-follow] attribute if [up-dash] is 'true', but [up-target] is present", ->
+        $link = affix('a[href="/path"][up-dash="true"][up-target=".target"]').text('label')
+        up.hello($link)
+        expect($link.attr('up-follow')).toBeMissing()
+        expect($link.attr('up-target')).toEqual('.target')
+
+      it "does not add an [up-follow] attribute if [up-dash] is 'true', but [up-modal] is present", ->
+        $link = affix('a[href="/path"][up-dash="true"][up-modal=".target"]').text('label')
+        up.hello($link)
+        expect($link.attr('up-follow')).toBeMissing()
+        expect($link.attr('up-modal')).toEqual('.target')
+
+      it "does not add an [up-follow] attribute if [up-dash] is 'true', but [up-popup] is present", ->
+        $link = affix('a[href="/path"][up-dash="true"][up-popup=".target"]').text('label')
+        up.hello($link)
+        expect($link.attr('up-follow')).toBeMissing()
+        expect($link.attr('up-popup')).toEqual('.target')
+
+      it "removes the [up-dash] attribute when it's done", ->
+        $link = affix('a[href="/path"]').text('label')
+        up.hello($link)
+        expect($link.attr('up-dash')).toBeMissing()
+
     describe '[up-expand]', ->
 
       it 'copies up-related attributes of a contained link', ->
@@ -332,6 +402,31 @@ describe 'up.link', ->
         up.hello($area)
         expect($area.attr('up-follow')).toEqual('')
 
+      it 'can be used to enlarge the click area of a link', ->
+        $area = affix('div[up-expand] a[href="/path"]')
+        up.hello($area)
+        spyOn(up, 'replace')
+        $area.get(0).click()
+        expect(up.replace).toHaveBeenCalled()
+
+      it 'does not trigger multiple replaces when the user clicks on the expanded area of an up-instant link (bugfix)', ->
+        $area = affix('div[up-expand] a[href="/path"][up-instant]')
+        up.hello($area)
+        spyOn(up, 'replace')
+        Trigger.mousedown($area)
+        Trigger.click($area)
+        expect(up.replace.calls.count()).toEqual(1)
+
+      it 'does not add an up-follow attribute if the expanded link is [up-dash] with a selector (bugfix)', ->
+        $area = affix('div[up-expand] a[href="/path"][up-dash=".element"]')
+        up.hello($area)
+        expect($area.attr('up-follow')).toBeMissing()
+
+      it 'does not an up-follow attribute if the expanded link is [up-dash] without a selector (bugfix)', ->
+        $area = affix('div[up-expand] a[href="/path"][up-dash]')
+        up.hello($area)
+        expect($area.attr('up-follow')).toEqual('')
+
       describe 'with a CSS selector in the property value', ->
 
         it "expands the contained link that matches the selector", ->

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: unpoly-rails
 version: !ruby/object:Gem::Version
-  version: 0.22.0
+  version: 0.22.1
 platform: ruby
 authors:
 - Henning Koch
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-03-14 00:00:00.000000000 Z
+date: 2016-03-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails