upjs-rails 0.8.2 → 0.9.0

data/lib/assets/javascripts/up/link.js.coffee

@@ -98,13 +98,16 @@ up.link = (->
   @method up.visit
   @param {String} url
     The URL to visit.
+  @param {String} [options.target='body']
+    The selector to replace.
+    See options for [`up.replace`](/up.flow#up.replace)
   @param {Object} options
     See options for [`up.replace`](/up.flow#up.replace)
   ###
   visit = (url, options) ->
-    u.debug "Visiting #{url}"
-    # options = util.options(options, )
-    up.replace('body', url, options)
+    options = u.options(options)
+    selector = u.option(options.target, 'body')
+    up.replace(selector, url, options)
 
   ###*
   Follows the given link via AJAX and replaces a CSS selector in the current page

data/lib/assets/javascripts/up/modal.js.coffee

@@ -138,13 +138,6 @@ up.modal = (->
 
   Any option attributes for [`a[up-modal]`](#a.up-modal) will be honored.
 
-  You can also open a URL directly like this:
-
-      up.modal.open({ url: '/foo', target: '.list' })
-
-  This will request `/foo`, extract the `.list` selector from the response
-  and open the selected container in a modal dialog.
-
   \#\#\#\# Events
 
   - Emits an [event](/up.bus) `modal:open` when the modal
@@ -153,12 +146,8 @@ up.modal = (->
     animation has finished and the modal contents are fully visible.
 
   @method up.modal.open
-  @param {Element|jQuery|String} [elementOrSelector]
+  @param {Element|jQuery|String} elementOrSelector
     The link to follow.
-    Can be omitted if you give `options.url` instead.
-  @param {String} [options.url]
-    The URL to open.
-    Can be omitted if you give `elementOrSelector` instead.
   @param {String} [options.target]
     The selector to extract from the response and open in a modal dialog.
   @param {Number} [options.width]
@@ -183,6 +172,26 @@ up.modal = (->
   @return {Promise}
     A promise that will be resolved when the modal has finished loading.
   ###
+
+  ###*
+  Opens a modal for the given URL.
+
+  Example:
+
+      up.modal.open({ url: '/foo', target: '.list' })
+
+  This will request `/foo`, extract the `.list` selector from the response
+  and open the selected container in a modal dialog.
+
+  @method up.modal.open
+  @param {String} options.url
+    The URL to load.
+  @param {String} options.target
+    The CSS selector to extract from the response.
+    The extracted content will be placed into the dialog window.
+  @param {Object} options
+    See options for [previous `up.modal.open` variant](#up.modal.open).
+  ###
   open = (args...) ->
     if u.isObject(args[0]) && !u.isElement(args[0]) && !u.isJQuery(args[0])
       $link = u.nullJquery()

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

@@ -63,7 +63,7 @@ up.util = (->
       # https://gist.github.com/jlong/2428561#comment-1461205
       anchor.href = anchor.href if isBlank(anchor.hostname)
     else
-      anchor = unwrap(urlOrAnchor)
+      anchor = unJquery(urlOrAnchor)
     normalized = anchor.protocol + "//" + anchor.hostname
     normalized += ":#{anchor.port}" unless isStandardPort(anchor.protocol, anchor.port)
     pathname = anchor.pathname
@@ -142,7 +142,7 @@ up.util = (->
   stringifyConsoleArgs = (args) ->
     message = args[0]
     i = 0
-    maxLength = 30
+    maxLength = 50
     message.replace CONSOLE_PLACEHOLDERS, ->
       i += 1
       arg = args[i]
@@ -150,11 +150,13 @@ up.util = (->
       if argType == 'string'
         arg = arg.replace(/\s+/g, ' ')
         arg = "#{arg.substr(0, maxLength)}…" if arg.length > maxLength
-        "\"#{arg}\""
+        arg = "\"#{arg}\""
       else if argType == 'number'
-        arg.toString()
+        arg = arg.toString()
       else
-        "(#{argType})"
+        arg = JSON.stringify(arg)
+        arg = "#{arg.substr(0, maxLength)}…" if arg.length > maxLength
+      arg
 
   createSelectorFromElement = ($element) ->
     debug("Creating selector from element %o", $element)
@@ -225,6 +227,10 @@ up.util = (->
   each = (collection, block) ->
     block(item, index) for item, index in collection
 
+  map = each
+
+  identity = (x) -> x
+
   times = (count, block) ->
     block(iteration) for iteration in [0..(count - 1)]
 
@@ -294,7 +300,7 @@ up.util = (->
     else
       extend({}, object)
 
-  unwrap = (object) ->
+  unJquery = (object) ->
     if isJQuery(object)
       object.get(0)
     else
@@ -557,7 +563,13 @@ up.util = (->
 
   escapePressed = (event) ->
     event.keyCode == 27
-    
+
+  startsWith = (string, element) ->
+    string.indexOf(element) == 0
+
+  endsWith = (string, element) ->
+    string.indexOf(element) == string.length - element.length
+
   contains = (stringOrArray, element) ->
     stringOrArray.indexOf(element) >= 0
 
@@ -627,16 +639,25 @@ up.util = (->
         for key in ownKeys
           delete hash[key] unless contains(apiKeys, key)
         hash.update copy(factoryOptions)
-      update: (options) ->
+      update: (options = {}) ->
         for key, value of options
           if factoryOptions.hasOwnProperty(key)
             hash[key] = value
           else
             error("Unknown setting %o", key)
+        hash
     apiKeys = Object.getOwnPropertyNames(hash)
     hash.reset()
     hash
 
+  unwrapElement = (wrapper) ->
+    wrapper = unJquery(wrapper)
+    parent = wrapper.parentNode;
+    wrappedNodes = toArray(wrapper.childNodes)
+    each wrappedNodes, (wrappedNode) ->
+      parent.insertBefore(wrappedNode, wrapper)
+    parent.removeChild(wrapper)
+
   presentAttr: presentAttr
   createElement: createElement
   normalizeUrl: normalizeUrl
@@ -655,6 +676,8 @@ up.util = (->
   debug: debug
   warn: warn
   each: each
+  map: map
+  identity: identity
   times: times
   detect: detect
   select: select
@@ -681,7 +704,7 @@ up.util = (->
   isUnmodifiedKeyEvent: isUnmodifiedKeyEvent
   isUnmodifiedMouseEvent: isUnmodifiedMouseEvent
   nullJquery: nullJquery
-  unwrap: unwrap
+  unJquery: unJquery
   nextFrame: nextFrame
   measure: measure
   temporaryCss: temporaryCss
@@ -693,6 +716,8 @@ up.util = (->
   copyAttributes: copyAttributes
   findWithSelf: findWithSelf
   contains: contains
+  startsWith: startsWith
+  endsWith: endsWith
   isArray: isArray
   toArray: toArray
   castsToTrue: castsToTrue
@@ -711,5 +736,6 @@ up.util = (->
   memoize: memoize
   scrollbarWidth: scrollbarWidth
   config: config
+  unwrapElement: unwrapElement
 
 )()

data/lib/upjs/rails/version.rb

@@ -1,5 +1,5 @@
 module Upjs
   module Rails
-    VERSION = '0.8.2'
+    VERSION = '0.9.0'
   end
 end

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

@@ -1,4 +1,6 @@
 describe 'up.flow', ->
+
+  u = up.util
   
   describe 'Javascript functions', ->
 
@@ -8,9 +10,9 @@ describe 'up.flow', ->
 
         beforeEach ->
 
-          affix('.before').text('old-before')
-          affix('.middle').text('old-middle')
-          affix('.after').text('old-after')
+          @oldBefore = affix('.before').text('old-before')
+          @oldMiddle = affix('.middle').text('old-middle')
+          @oldAfter = affix('.after').text('old-after')
 
           @responseText =
             """
@@ -62,6 +64,7 @@ describe 'up.flow', ->
           @respond()
           @request.then ->
             expect($('.before')).toHaveText('old-before')
+            console.log("foooo", $('.middle').text())
             expect($('.middle')).toHaveText('new-middleold-middle')
             expect($('.after')).toHaveText('old-after')
             done()
@@ -111,6 +114,47 @@ describe 'up.flow', ->
             expect(window.scriptTagExecuted).toHaveBeenCalledWith('middle')
             done()
 
+        describe 'automatic scrolling', ->
+
+          beforeEach ->
+            @revealedHTML = ''
+            spyOn(up, 'reveal').and.callFake ($revealedElement) =>
+              @revealedHTML = $revealedElement.get(0).outerHTML
+              u.resolvedPromise()
+
+          it 'reveals an old element before it is being replaced', (done) ->
+            @request = up.replace('.middle', '/path')
+            @respond()
+            @request.then =>
+              expect(up.reveal).toHaveBeenCalledWith(@oldMiddle, jasmine.any(Object))
+              done()
+
+          it 'reveals a new element that is being appended', (done) ->
+            @request = up.replace('.middle:after', '/path')
+            @respond()
+            @request.then =>
+              expect(up.reveal).not.toHaveBeenCalledWith(@oldMiddle, jasmine.any(Object))
+              # Text nodes are wrapped in a .up-insertion container so we can
+              # animate them and measure their position/size for scrolling.
+              # This is not possible for container-less text nodes.
+              expect(@revealedHTML).toEqual('<span class="up-insertion">new-middle</span>')
+              # Show that the wrapper is done after the insertion.
+              expect($('.up-insertion')).not.toExist()
+              done()
+
+          it 'reveals a new element that is being prepended', (done) ->
+            @request = up.replace('.middle:before', '/path')
+            @respond()
+            @request.then =>
+              expect(up.reveal).not.toHaveBeenCalledWith(@oldMiddle, jasmine.any(Object))
+              # Text nodes are wrapped in a .up-insertion container so we can
+              # animate them and measure their position/size for scrolling.
+              # This is not possible for container-less text nodes.
+              expect(@revealedHTML).toEqual('<span class="up-insertion">new-middle</span>')
+              # Show that the wrapper is done after the insertion.
+              expect($('.up-insertion')).not.toExist()
+              done()
+
       else
         
         it 'makes a full page load', ->

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

@@ -0,0 +1,240 @@
+describe 'up.layout', ->
+
+  u = up.util
+
+  describe 'Javascript functions', ->
+
+    describe 'up.reveal', ->
+
+      beforeEach ->
+        up.layout.defaults(snap: 0)
+
+      describe 'when the container is body', ->
+
+        beforeEach ->
+          @$viewport = $('body')
+          @restoreMargin = u.temporaryCss(@$viewport, 'margin-top': 0)
+          @$viewport.scrollTop(0)
+
+          @$elements = []
+          @$container = $('<div class="container">').prependTo(@$viewport)
+
+          @clientHeight = u.clientSize().height
+
+          for height in [@clientHeight, '50px', '5000px']
+            $element = $('<div>').css(height: height)
+            $element.appendTo(@$container)
+            @$elements.push($element)
+
+        afterEach ->
+          @$container.remove()
+          @restoreMargin()
+
+        it 'reveals the given element', ->
+          up.reveal(@$elements[0], viewport: @$viewport)
+          # ---------------------
+          # [0] 0 .......... ch-1
+          # ---------------------
+          # [1] ch+0 ...... ch+49
+          # [2] ch+50 ... ch+5049
+          expect(@$viewport.scrollTop()).toBe(0)
+
+          up.reveal(@$elements[1], viewport: @$viewport)
+          # ---------------------
+          # [0] 0 .......... ch-1
+          # [1] ch+0 ...... ch+49
+          # ---------------------
+          # [2] ch+50 ... ch+5049
+          expect(@$viewport.scrollTop()).toBe(50)
+
+          up.reveal(@$elements[2], viewport: @$viewport)
+          # [0] 0 .......... ch-1
+          # [1] ch+0 ...... ch+49
+          # ---------------------
+          # [2] ch+50 ... ch+5049
+          # ---------------------
+          expect(@$viewport.scrollTop()).toBe(@clientHeight + 50)
+
+        it 'snaps to the top if the space above the future-visible area is smaller than the value of config.snap', ->
+
+          up.layout.defaults(snap: 30)
+
+          @$elements[0].css(height: '20px')
+
+          up.reveal(@$elements[2], viewport: @$viewport)
+          # [0] 0 ............ 19
+          # [1] 20 ........... 69
+          # ---------------------
+          # [2] 70 ......... 5069
+          # ---------------------
+          expect(@$viewport.scrollTop()).toBe(70)
+
+          # Even though we're revealing the second element, the viewport
+          # snaps to the top edge.
+          up.reveal(@$elements[1], viewport: @$viewport)
+          # ---------------------
+          # [0] 0 ............ 19
+          # [1] 20 ........... 69
+          # ---------------------
+          # [2] 70 ......... 5069
+          expect(@$viewport.scrollTop()).toBe(0)
+
+        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',
+            top: '0',
+            left: '0',
+            right: '0'
+            height: '100px'
+          )
+
+          up.reveal(@$elements[0], viewport: @viewport)
+          # ---------------------
+          # [F] 0 ............ 99
+          # [0] 0 .......... ch-1
+          # ---------------------
+          # [1] ch+0 ...... ch+49
+          # [2] ch+50 ... ch+5049
+          expect(@$viewport.scrollTop()).toBe(0) # would need to be -100
+
+          up.reveal(@$elements[1], viewport: @$viewport)
+          # ---------------------
+          # [F] 0 ............ 99
+          # [0] 00000 ...... ch-1
+          # [1] ch+0 ...... ch+49
+          # ---------------------
+          # [2] ch+50 ... ch+5049
+
+          expect(@$viewport.scrollTop()).toBe(50)
+
+          up.reveal(@$elements[2], viewport: @$viewport)
+          # [0] 00000 ...... ch-1
+          # [1] ch+0 ...... ch+49
+          # ---------------------
+          # [F] 0 ............ 99
+          # [2] ch+50 ... ch+5049
+          # ----------------
+          expect(@$viewport.scrollTop()).toBe(@clientHeight + 50 - 100)
+
+          up.reveal(@$elements[1], viewport: @$viewport)
+          # [0] 00000 ...... ch-1
+          # ---------------------
+          # [F] 0 ............ 99
+          # [1] ch+0 ...... ch+49
+          # [2] ch+50 ... ch+5049
+          # ----------------
+          expect(@$viewport.scrollTop()).toBe(@clientHeight + 50 - 100 - 50)
+
+
+        it 'scrolls far enough so the element is not obstructed by an element fixed to the bottom', ->
+          $bottomNav = affix('[up-fixed=bottom]').css(
+            position: 'fixed',
+            bottom: '0',
+            left: '0',
+            right: '0'
+            height: '100px'
+          )
+
+          up.reveal(@$elements[0], viewport: @$viewport)
+          # ---------------------
+          # [0] 0 .......... ch-1
+          # [F] 0 ............ 99
+          # ---------------------
+          # [1] ch+0 ...... ch+49
+          # [2] ch+50 ... ch+5049
+          expect(@$viewport.scrollTop()).toBe(0)
+
+          up.reveal(@$elements[1], viewport: @$viewport)
+          # ---------------------
+          # [0] 0 .......... ch-1
+          # [1] ch+0 ...... ch+49
+          # [F] 0 ............ 99
+          # ---------------------
+          # [2] ch+50 ... ch+5049
+          expect(@$viewport.scrollTop()).toBe(150)
+
+          up.reveal(@$elements[2], viewport: @$viewport)
+          # ---------------------
+          # [0] 0 .......... ch-1
+          # [1] ch+0 ...... ch+49
+          # ---------------------
+          # [2] ch+50 ... ch+5049
+          # [F] 0 ............ 99
+          expect(@$viewport.scrollTop()).toBe(@clientHeight + 50)
+
+
+
+
+      describe 'when the viewport is a container with overflow-y: scroll', ->
+
+        it 'reveals the given element', ->
+          $viewport = affix('div').css
+            'position': 'absolute'
+            'top': '50px'
+            'left': '50px'
+            'width': '100px'
+            'height': '100px'
+            'overflow-y': 'scroll'
+          $elements = []
+          u.each [0..5], ->
+            $element = $('<div>').css(height: '50px')
+            $element.appendTo($viewport)
+            $elements.push($element)
+
+          # ------------
+          # [0] 000..049
+          # [1] 050..099
+          # ------------
+          # [2] 100..149
+          # [3] 150..199
+          # [4] 200..249
+          # [5] 250..399
+          expect($viewport.scrollTop()).toBe(0)
+
+          # See that the view only scrolls down as little as possible
+          # in order to reveal the element
+          up.reveal($elements[3], viewport: $viewport)
+          # [0] 000..049
+          # [1] 050..099
+          # ------------
+          # [2] 100..149
+          # [3] 150..199
+          # ------------
+          # [4] 200..249
+          # [5] 250..399
+          expect($viewport.scrollTop()).toBe(100)
+
+          # See that the view doesn't move if the element
+          # is already revealed
+          up.reveal($elements[2], viewport: $viewport)
+          expect($viewport.scrollTop()).toBe(100)
+
+          # See that the view scrolls as far down as it cans
+          # to show the bottom element
+          up.reveal($elements[5], viewport: $viewport)
+          # [0] 000..049
+          # [1] 050..099
+          # [2] 100..149
+          # [3] 150..199
+          # ------------
+          # [4] 200..249
+          # [5] 250..399
+          # ------------
+          expect($viewport.scrollTop()).toBe(200)
+
+          # See that the view only scrolls up as little as possible
+          # in order to reveal the element
+          up.reveal($elements[1], viewport: $viewport)
+          # [0] 000..049
+          # ------------
+          # [1] 050..099
+          # [2] 100..149
+          # ------------
+          # [3] 150..199
+          # [4] 200..249
+          # [5] 250..399
+          expect($viewport.scrollTop()).toBe(50)
+
+    describe 'up.scroll', ->
+
+      it 'should have tests'