unpoly-rails 0.31.2 → 0.32.0

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

@@ -456,7 +456,7 @@ up.util = (($) ->
   ###*
   Returns whether the given argument is an object.
 
-  This also returns `true` for functions, which may behave like objects in Javascript.
+  This also returns `true` for functions, which may behave like objects in JavaScript.
   For an alternative that returns `false` for functions, see [`up.util.isHash`](/up.util.isHash).
 
   @function up.util.isObject
@@ -783,7 +783,7 @@ up.util = (($) ->
 
   ###*
   Schedules the given function to be called in the
-  next Javascript execution frame.
+  next JavaScript execution frame.
 
   @function up.util.nextFrame
   @param {Function} block
@@ -1684,7 +1684,7 @@ up.util = (($) ->
     data
 
   ###*
-  Throws a [Javascript error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)
+  Throws a [JavaScript error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)
   with the given message.
 
   The message will also be printed to the [error log](/up.log.error). Also a notification will be shown at the bottom of the screen.
@@ -1905,6 +1905,21 @@ up.util = (($) ->
     else
       'right'
 
+  ###*
+  Like `$old.replaceWith($new)`, but keeps event handlers bound to `$old`.
+
+  Note that this is a memory leak unless you re-attach `$new` to the DOM aferwards.
+
+  @function up.util.detachWith
+  @internal
+  ###
+  detachWith = ($old, $new) ->
+    $insertion = $('<div></div>')
+    $insertion.insertAfter($old)
+    $old.detach()
+    $insertion.replaceWith($new)
+    $old
+
   isDetached: isDetached
   requestDataAsArray: requestDataAsArray
   requestDataAsQuery: requestDataAsQuery
@@ -2018,6 +2033,7 @@ up.util = (($) ->
   previewable: previewable
   evalOption: evalOption
   horizontalScreenHalf: horizontalScreenHalf
+  detachWith: detachWith
 
 )($)
 

data/lib/assets/stylesheets/unpoly-bootstrap3/modal-ext.css.sass

@@ -1,8 +1,13 @@
 .up-modal-content
   // Unpoly: Gives some default padding
-  // BS: Expects content to set the padding
+  // Bootstrap: Expects content to set the padding
   padding: 0
 
+.up-modal-dialog
+  // Unpoly: Dialog margin is a padding of .up-modal-viewport so we can give .up-modal-dialog a max-width of 100%
+  // Bootstrap: Dialog margin is a margin of .modal-dialog
+  margin: 0
+
 .up-modal[up-flavor='drawer']
 
   .up-modal-content

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

@@ -50,6 +50,12 @@ $close-font-size: 34px
   // contents of `.up-modal-content`.
   text-align: center
 
+  // Implement the margin around the dialog box with a padding of the viewport.
+  // This way we can give .up-modal-dialog a max-width of 100%, (1) preventing people
+  // from setting withs larger than the viewport, and (2) sizing approproately
+  // if the modal contents are very wide and cannot wrap (e.g. code blocks).
+  padding: 30px 10px
+
 .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.
@@ -68,7 +74,6 @@ $close-font-size: 34px
   // the width and height attributes set by up.modal
   // should be honored exactly.
   box-sizing: border-box
-  margin: 30px 10px
 
   // In case someone sets a huge width on the dialog.
   max-width: 100%
@@ -99,10 +104,10 @@ $close-font-size: 34px
 .up-modal[up-flavor='drawer']
   .up-modal-viewport
     text-align: left
+    padding: 0
   &[up-position='right'] .up-modal-viewport
     text-align: right
   .up-modal-dialog
-    margin: 0
     max-width: 350px
   .up-modal-content
     min-height: 100vh

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.31.2'
+    VERSION = '0.32.0'
   end
 end

data/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unpoly",
-  "version": "0.31.2",
-  "description": "Progressive enhancement Javascript framework",
+  "version": "0.32.0",
+  "description": "Unobtrusive JavaScript framework",
   "main": "dist/unpoly.js",
   "files": [
     "dist/unpoly.js",

data/spec_app/Gemfile.lock

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

data/spec_app/app/assets/javascripts/bootstrap_manifest.coffee

@@ -2,5 +2,5 @@
 
 # From the docs (https://github.com/twbs/bootstrap-sass):
 # bootstrap-sprockets and bootstrap should not both be included in application.js.
-# bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example),
-# while bootstrap provides a concatenated file containing all Bootstrap Javascripts.
+# bootstrap-sprockets provides individual Bootstrap JavaScript files (alert.js or dropdown.js, for example),
+# while bootstrap provides a concatenated file containing all Bootstrap JavaScripts.

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

@@ -2,6 +2,10 @@
   <a class="button" href="/css_test/modal_contents" up-modal=".contents">Modal</a>
 </div>
 
+<div class="example">
+  <a class="button" href="/css_test/modal_contents_wide" up-modal=".contents">Modal (wide contents)</a>
+</div>
+
 <div class="example">
   <a class="button" href="/css_test/modal_contents" up-drawer=".contents" style="float: left">Drawer (auto)</a>
   <a class="button" href="/css_test/modal_contents" up-drawer=".contents" style="float: right">Drawer (auto)</a>

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

@@ -0,0 +1,5 @@
+<div class="contents">
+  <% (1..100).each do |i| %>
+      Line<%= i %>:This_content_wont_wrap_because_it_contains_no_spaces<br>
+  <% end %>
+</div>

data/spec_app/app/views/layouts/integration_test.erb

@@ -11,6 +11,7 @@
       <%= javascript_include_tag 'unpoly-bootstrap3' %>
     <% end %>
     <%= csrf_meta_tags %>
+    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'>
   </head>
   <body>
     <div class="page">

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

@@ -1,5 +1,5 @@
 ##
-# Knife: Get, set or mock inaccessible variables in a Javascript closure
+# Knife: Get, set or mock inaccessible variables in a JavaScript closure
 # ======================================================================
 #
 # Requires [Jasmine](http://jasmine.github.io/) 2+.

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

@@ -2,7 +2,7 @@ describe 'up.browser', ->
 
   u = up.util
 
-  describe 'Javascript functions', ->
+  describe 'JavaScript functions', ->
 
     describe 'up.browser.loadPage', ->
 

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

@@ -1,6 +1,6 @@
 describe 'up.bus', ->
   
-  describe 'Javascript functions', ->
+  describe 'JavaScript functions', ->
 
     describe 'up.on', ->
 

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

@@ -2,7 +2,7 @@ describe 'up.flow', ->
 
   u = up.util
   
-  describe 'Javascript functions', ->
+  describe 'JavaScript functions', ->
 
     describe 'up.replace', ->
 
@@ -493,10 +493,12 @@ describe 'up.flow', ->
           beforeEach ->
             @revealedHTML = []
             @revealedText = []
+            @revealOptions = {}
 
-            @revealMock = up.layout.knife.mock('reveal').and.callFake ($revealedElement) =>
-              @revealedHTML.push $revealedElement.get(0).outerHTML
-              @revealedText.push $revealedElement.text().trim()
+            @revealMock = up.layout.knife.mock('reveal').and.callFake ($element, options) =>
+              @revealedHTML.push $element.get(0).outerHTML
+              @revealedText.push $element.text().trim()
+              @revealOptions = options
               u.resolvedDeferred()
 
           it 'reveals a new element before it is being replaced', (done) ->
@@ -519,7 +521,7 @@ describe 'up.flow', ->
 
           describe 'when there is an anchor #hash in the URL', ->
 
-            it 'reveals a child with the ID of that #hash', (done) ->
+            it 'scrolls to the top of a child with the ID of that #hash', (done) ->
               promise = up.replace('.middle', '/path#three', reveal: true)
               @responseText =
                 """
@@ -532,6 +534,7 @@ describe 'up.flow', ->
               @respond()
               promise.then =>
                 expect(@revealedHTML).toEqual ['<div id="three">three</div>']
+                expect(@revealOptions).toEqual { top: true }
                 done()
 
             it "reveals the entire element if it has no child with the ID of that #hash", (done) ->
@@ -794,34 +797,67 @@ describe 'up.flow', ->
             expect(keptListener).toHaveBeenCalledWith(jasmine.anything(), $('.keeper'), jasmine.anything())
 
         it "removes an [up-keep] element if no matching element is found in the response", ->
+          barCompiler = jasmine.createSpy()
+          barDestructor = jasmine.createSpy()
+          up.compiler '.bar', ($bar) ->
+            text = $bar.text()
+            barCompiler(text)
+            return -> barDestructor(text)
+
           $container = affix('.container')
           $container.html """
             <div class='foo'>old-foo</div>
             <div class='bar' up-keep>old-bar</div>
             """
+          up.hello($container)
+
+          expect(barCompiler.calls.allArgs()).toEqual [['old-bar']]
+          expect(barDestructor.calls.allArgs()).toEqual []
+
           up.extract '.container', """
             <div class='container'>
               <div class='foo'>new-foo</div>
             </div>
             """
+
           expect($('.container .foo')).toExist()
           expect($('.container .bar')).not.toExist()
 
+          expect(barCompiler.calls.allArgs()).toEqual [['old-bar']]
+          expect(barDestructor.calls.allArgs()).toEqual [['old-bar']]
+
         it "updates an element if a matching element is found in the response, but that other element is no longer [up-keep]", ->
+          barCompiler = jasmine.createSpy()
+          barDestructor = jasmine.createSpy()
+          up.compiler '.bar', ($bar) ->
+            text = $bar.text()
+            console.info('Compiling %o', text)
+            barCompiler(text)
+            return -> barDestructor(text)
+
           $container = affix('.container')
           $container.html """
             <div class='foo'>old-foo</div>
             <div class='bar' up-keep>old-bar</div>
             """
+          up.hello($container)
+
+          expect(barCompiler.calls.allArgs()).toEqual [['old-bar']]
+          expect(barDestructor.calls.allArgs()).toEqual []
+
           up.extract '.container', """
             <div class='container'>
               <div class='foo'>new-foo</div>
               <div class='bar'>new-bar</div>
             </div>
             """
+
           expect($('.container .foo')).toHaveText('new-foo')
           expect($('.container .bar')).toHaveText('new-bar')
 
+          expect(barCompiler.calls.allArgs()).toEqual [['old-bar'], ['new-bar']]
+          expect(barDestructor.calls.allArgs()).toEqual [['old-bar']]
+
         it 'moves a kept element to the ancestry position of the matching element in the response', ->
           $container = affix('.container')
           $container.html """
@@ -874,6 +910,28 @@ describe 'up.flow', ->
           expect(compiler.calls.count()).toEqual(1)
           expect('.keeper').toExist()
 
+        it 'does not lose jQuery event handlers on a kept element (bugfix)', ->
+          handler = jasmine.createSpy('event handler')
+          up.compiler '.keeper', ($keeper) ->
+            $keeper.on 'click', handler
+
+          $container = affix('.container')
+          $container.html """
+            <div class="keeper" up-keep>old-text</div>
+            """
+          up.hello($container)
+
+          up.extract '.container', """
+            <div class='container'>
+              <div class="keeper" up-keep>new-text</div>
+            </div>
+            """
+
+          $keeper = $('.keeper')
+          expect($keeper).toHaveText('old-text')
+          Trigger.click($keeper)
+          expect(handler).toHaveBeenCalled()
+
         it 'lets listeners cancel the keeping by preventing default on an up:fragment:keep event', ->
           $keeper = affix('.keeper[up-keep]').text('old-inside')
           $keeper.on 'up:fragment:keep', (event) -> event.preventDefault()

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

@@ -2,7 +2,7 @@ describe 'up.form', ->
 
   u = up.util
 
-  describe 'Javascript functions', ->
+  describe 'JavaScript functions', ->
 
     describe 'up.observe', ->
 
@@ -419,7 +419,7 @@ describe 'up.form', ->
       afterEach ->
         window.observeCallbackSpy = undefined
 
-      it 'runs the Javascript code in the attribute value when a change is observed in the field', (done) ->
+      it 'runs the JavaScript code in the attribute value when a change is observed in the field', (done) ->
         $form = affix('form')
         window.observeCallbackSpy = jasmine.createSpy('observe callback')
         $field = $form.affix('input[val="old-value"][up-observe="window.observeCallbackSpy(value, $field.get(0))"]')

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

@@ -2,7 +2,7 @@ describe 'up.history', ->
 
   u = up.util
   
-  describe 'Javascript functions', ->
+  describe 'JavaScript functions', ->
     
     describe 'up.history.replace', ->
 

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

@@ -2,7 +2,7 @@ describe 'up.layout', ->
 
   u = up.util
 
-  describe 'Javascript functions', ->
+  describe 'JavaScript functions', ->
 
     describe 'up.reveal', ->
 
@@ -78,6 +78,18 @@ describe 'up.layout', ->
           # [2] 70 ......... 5069
           expect($(document).scrollTop()).toBe(0)
 
+        it 'does not snap to the top if it would un-reveal an element at the bottom edge of the screen (bugfix)', ->
+          up.layout.config.snap = 100
+
+          up.reveal(@$elements[1])
+          # ---------------------
+          # [0] 0 .......... ch-1
+          # [1] ch+0 ...... ch+49
+          # ---------------------
+          # [2] ch+50 ... ch+5049
+          expect($(document).scrollTop()).toBe(50)
+
+
         it 'scrolls far enough so the element is not obstructed by an element fixed to the top', ->
           $topNav = affix('[up-fixed=top]').css(
             position: 'fixed',
@@ -161,6 +173,20 @@ describe 'up.layout', ->
           # [F] 0 ............ 99
           expect($(document).scrollTop()).toBe(@clientHeight + 50)
 
+        describe 'with { top: true } option', ->
+
+          it 'scrolls the viewport to the first row of the element, even if that element is already fully revealed', ->
+
+            @$elements[0].css(height: '20px')
+
+            up.reveal(@$elements[1], { top: true })
+            # [0] 0 ............ 19
+            # [1] 20 ........... 69
+            # ---------------------
+            # [2] 70 ......... 5069
+            # ---------------------
+            expect($(document).scrollTop()).toBe(20)
+
 
       describe 'when the viewport is a container with overflow-y: scroll', ->
 

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

@@ -2,7 +2,7 @@ describe 'up.link', ->
 
   u = up.util
 
-  describe 'Javascript functions', ->
+  describe 'JavaScript functions', ->
   
     describe 'up.follow', ->
 
@@ -462,7 +462,7 @@ describe 'up.link', ->
         Trigger.click(@$link)
         expect(@followSpy).toHaveBeenCalledWith(@$link)
 
-      # IE does not call Javascript and always performs the default action on right clicks
+      # 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', ->
           Trigger.click(@$link, button: 2)
@@ -497,7 +497,7 @@ describe 'up.link', ->
           Trigger.click(@$link)
           expect(@followSpy).not.toHaveBeenCalled()
 
-        # IE does not call Javascript and always performs the default action on right clicks
+        # 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 pressed down', ->
             Trigger.mousedown(@$link, button: 2)

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

@@ -1,6 +1,6 @@
 describe 'up.log', ->
 
-  describe 'Javascript functions', ->
+  describe 'JavaScript functions', ->
 
     describe 'up.log.puts', ->