upjs-rails 0.5.0 → 0.6.0

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

@@ -0,0 +1,66 @@
+###*
+Content slots
+=============
+
+It can be useful to mark "slots" in your page layout where you expect
+content to appear in the future.
+
+For example, you might have
+
+    <div up-slot class="alerts"></div>
+
+    <script>
+      up.awaken('.alerts', function ($element) {
+
+        RELOAD SHOULD NOT CACHE
+
+        setInterval(3000, function() { up.reload('.alerts') });
+      });
+    </script>
+
+Seeing that the `.alerts` container is empty, Up.js will hide it:
+
+    <div class="alerts" up-slot style="display: none"></div>
+
+As soon as you
+
+    <div class="alerts" up-slot>
+      Meeting at 11:30 AM
+    </div>
+
+
+TODO: Write some documentation
+  
+@class up.slot
+###
+up.slot = (->
+  
+  u = up.util
+  
+  hasContent = ($slot) ->
+    u.trim($slot.html()) != ''
+
+  check = ($element) ->
+    u.findWithSelf($element, '[up-slot]').each ->
+      $slot = $(this)
+      unless hasContent($slot)
+        $slot.hide()
+
+  ###*
+  Use this attribute to mark up empty element containers that
+  you plan to update with content in the future.
+
+  An element with this attribute is automatically hidden
+  if it has no content, and is re-shown if it is updated with
+  content.
+
+  This is useful to prevent the element from applying unwanted
+  margins to the surrounding page flow.
+
+  @method [up-slot]
+  @ujs
+  ###
+  up.bus.on 'fragment:ready', check
+  
+)()
+

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

@@ -1,4 +1,3 @@
-
 ###*
 Utility functions
 =================
@@ -328,7 +327,7 @@ up.util = (->
     for arg in args
       value = arg
       value = value() if isFunction(value)
-      if isPresent(value)
+      if isGiven(value)
         match = value
         break
     match    
@@ -402,11 +401,11 @@ up.util = (->
     The element to animate.
   @param {Object} lastFrame
     The CSS properties that should be transitioned to.
-  @param {Number} [opts.duration=300]
+  @param {Number} [options.duration=300]
     The duration of the animation, in milliseconds.
-  @param {Number} [opts.delay=0]
+  @param {Number} [options.delay=0]
     The delay before the animation starts, in milliseconds.
-  @param {String} [opts.easing='ease']
+  @param {String} [options.easing='ease']
     The timing function that controls the animation's acceleration.
     See [W3C documentation](http://www.w3.org/TR/css3-transitions/#transition-timing-function)
     for a list of pre-defined timing functions.
@@ -517,7 +516,7 @@ up.util = (->
     
   contains = (array, element) ->
     array.indexOf(element) >= 0
-    
+
   castsToTrue = (object) ->
     String(object) == "true"
     

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

@@ -14,7 +14,7 @@
 #= require up/modal
 #= require up/tooltip
 #= require up/navigation
-#= require up/marker
+#= require up/slot
 #= require_self
 
 up.browser.ensureRecentJquery()

data/lib/upjs/rails/version.rb

@@ -1,5 +1,5 @@
 module Upjs
   module Rails
-    VERSION = '0.5.0'
+    VERSION = '0.6.0'
   end
 end

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

@@ -0,0 +1,3 @@
+@setTimer = (millis, fun) ->
+  setTimeout(fun, millis)
+

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

@@ -0,0 +1,5 @@
+beforeEach ->
+  jasmine.addMatchers
+    toBeAround: (util, customEqualityTesters) ->
+      compare: (actual, expected, tolerance) ->
+        pass: Math.abs(expected - actual) <= tolerance

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

@@ -4,12 +4,156 @@ describe 'up.motion', ->
   
     describe 'up.animate', ->
 
-      it 'should have tests'
-      
+      if up.browser.canCssAnimation()
+
+        it 'animates the given element', (done) ->
+          $element = affix('.element').text('content')
+          opacity = -> Number($element.css('opacity'))
+          up.animate($element, 'fade-in', duration: 100, easing: 'linear')
+
+          setTimer 0, ->
+            expect(opacity()).toBeAround(0.0, 0.25)
+          setTimer 50, ->
+            expect(opacity()).toBeAround(0.5, 0.25)
+          setTimer 100, ->
+            expect(opacity()).toBeAround(1.0, 0.25)
+            done()
+
+        it 'cancels an existing animation on the element by instantly jumping to the last frame', ->
+          $element = affix('.element').text('content')
+          up.animate($element, { 'font-size': '40px' }, duration: 10000, easing: 'linear')
+          up.animate($element, { 'fade-in' }, duration: 100, easing: 'linear')
+          expect($element.css('font-size')).toEqual('40px')
+
+      else
+
+        it "doesn't animate and directly sets the last frame instead", ->
+          $element = affix('.element').text('content')
+          up.animate($element, { 'font-size': '40px' }, duration: 10000, easing: 'linear')
+          expect($element.css('font-size')).toEqual('40px')
+
+
     describe 'up.morph', ->
 
-      it 'should have tests'
-      
+      if up.browser.canCssAnimation()
+
+        it 'transitions between two element using ghosts', (done) ->
+
+          $old = affix('.old').text('old content').css(
+            position: 'absolute'
+            top:      '10px'
+            left:     '11px',
+            width:    '12px',
+            height:   '13px'
+          )
+          $new = affix('.new').text('new content').css(
+            position: 'absolute'
+            top:      '20px'
+            left:     '21px',
+            width:    '22px',
+            height:   '23px'
+          )
+          up.morph($old, $new, 'cross-fade', duration: 100, easing: 'linear')
+
+          # The actual animation will be performed on Ghosts since
+          # two element usually cannot exist in the DOM at the same time
+          # without undesired visual effects
+          $oldGhost = $('.old.up-ghost')
+          $newGhost = $('.new.up-ghost')
+          expect($oldGhost).toExist()
+          expect($newGhost).toExist()
+
+          # Ghosts should be inserted before (not after) the element
+          # or the browser scroll position will be too low after the
+          # transition ends.
+          expect($oldGhost.next()).toEqual($old)
+          expect($newGhost.next()).toEqual($new)
+
+          # The actual elements are hidden, but $old will take up its original
+          # space until the animation completes.
+          expect($old.css(['display', 'visibility'])).toEqual(
+            display: 'block',
+            visibility: 'hidden'
+          )
+          expect($new.css(['display', 'visibility'])).toEqual(
+            display: 'none',
+            visibility: 'visible'
+          )
+
+          # Ghosts will hover over $old and $new using absolute positioning,
+          # matching the coordinates of the original elements.
+          expect($oldGhost.css(['position', 'top', 'left', 'width', 'height'])).toEqual(
+            position: 'absolute'
+            top:      '10px'
+            left:     '11px',
+            width:    '12px',
+            height:   '13px'
+          )
+          expect($newGhost.css(['position', 'top', 'left', 'width', 'height'])).toEqual(
+            position: 'absolute'
+            top:      '20px'
+            left:     '21px',
+            width:    '22px',
+            height:   '23px'
+          )
+
+          opacity = ($element) -> Number($element.css('opacity'))
+
+          setTimer 0, ->
+            expect(opacity($newGhost)).toBeAround(0.0, 0.25)
+            expect(opacity($oldGhost)).toBeAround(1.0, 0.25)
+
+          setTimer 40, ->
+            expect(opacity($newGhost)).toBeAround(0.4, 0.25)
+            expect(opacity($oldGhost)).toBeAround(0.6, 0.25)
+
+          setTimer 70, ->
+            expect(opacity($newGhost)).toBeAround(0.7, 0.25)
+            expect(opacity($oldGhost)).toBeAround(0.3, 0.25)
+
+          setTimer 125, ->
+            # Once our two ghosts have rendered their visual effect,
+            # we remove them from the DOM.
+            expect($newGhost).not.toBeInDOM()
+            expect($oldGhost).not.toBeInDOM()
+
+            # The old element is still in the DOM, but hidden.
+            # Morphing does *not* remove the target element.
+            expect($old.css(['display', 'visibility'])).toEqual(
+              display: 'none',
+              visibility: 'hidden'
+            )
+            expect($new.css(['display', 'visibility'])).toEqual(
+              display: 'block',
+              visibility: 'visible'
+            )
+
+            done()
+
+        it 'cancels an existing transition on the element by instantly jumping to the last frame', ->
+          $old = affix('.old').text('old content')
+          $new = affix('.new').text('new content')
+
+          up.morph($old, $new, 'cross-fade', duration: 200)
+          $ghost1 = $('.old.up-ghost')
+          expect($ghost1).toHaveLength(1)
+
+          up.morph($old, $new, 'cross-fade', duration: 200)
+          $ghost2 = $('.old.up-ghost')
+          # Check that we didn't create additional ghosts
+          expect($ghost2).toHaveLength(1)
+          # Check that it's a different ghosts
+          expect($ghost2).not.toEqual($ghost1)
+
+      else
+
+        it "doesn't animate and hides the first element instead", ->
+          $old = affix('.old').text('old content')
+          $new = affix('.new').text('new content')
+          up.morph($old, $new, 'cross-fade', duration: 1000)
+          expect($old).toBeHidden()
+          expect($new).toBeVisible()
+
     describe 'up.transition', ->
 
       it 'should have tests'

data/spec_app/spec/javascripts/up/{marker_spec.js.coffee → slot_spec.js.coffee}

@@ -2,15 +2,15 @@ describe 'up.marker', ->
   
   describe 'unobtrusive behavior', ->
   
-    describe '[up-marker]', ->
+    describe '[up-slot]', ->
       
       it 'hides empty containers', ->
-        $element = affix('.element[up-marker]')
+        $element = affix('.element[up-slot]')
         up.ready($element)
         expect($element).not.toBeVisible()
       
       it 'does not hide empty containers', ->
-        $element = affix('.element[up-marker]').text('content')
+        $element = affix('.element[up-slot]').text('content')
         up.ready($element)
         expect($element).toBeVisible()
       

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

@@ -19,8 +19,8 @@ describe 'up.tooltip', ->
         expect($tooltip).toHaveText('tooltip text')
         tooltipBox = up.util.measure($tooltip, relative: true)
         linkBox = up.util.measure($link, relative: true)
-        expect(tooltipBox.top).toBeCloseTo(linkBox.top - tooltipBox.height, 15)
-        expect(tooltipBox.left).toBeCloseTo(linkBox.left + 0.5 * (linkBox.width - tooltipBox.width), 15)
+        expect(tooltipBox.top).toBeAround(linkBox.top - tooltipBox.height, 15)
+        expect(tooltipBox.left).toBeAround(linkBox.left + 0.5 * (linkBox.width - tooltipBox.width), 15)
         
       it 'allows HTML for the tooltip text'
         

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: upjs-rails
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Henning Koch
@@ -125,13 +125,13 @@ files:
 - lib/assets/javascripts/up/history.js.coffee
 - lib/assets/javascripts/up/link.js.coffee
 - lib/assets/javascripts/up/magic.js.coffee
-- lib/assets/javascripts/up/marker.js.coffee
 - lib/assets/javascripts/up/modal.js.coffee
 - lib/assets/javascripts/up/module.js.coffee
 - lib/assets/javascripts/up/motion.js.coffee
 - lib/assets/javascripts/up/navigation.js.coffee
 - lib/assets/javascripts/up/popup.js.coffee
 - lib/assets/javascripts/up/proxy.js.coffee
+- lib/assets/javascripts/up/slot.js.coffee
 - lib/assets/javascripts/up/tooltip.js.coffee
 - lib/assets/javascripts/up/util.js.coffee
 - lib/assets/javascripts/up/viewport.js.coffee
@@ -227,6 +227,8 @@ files:
 - spec_app/spec/javascripts/helpers/index.js.coffee
 - spec_app/spec/javascripts/helpers/reset_path.js.coffee
 - spec_app/spec/javascripts/helpers/reset_up.js.coffee
+- spec_app/spec/javascripts/helpers/set_timer.js.coffee
+- spec_app/spec/javascripts/helpers/to_be_around.js.coffee
 - spec_app/spec/javascripts/helpers/to_equal_jquery.js.coffee
 - spec_app/spec/javascripts/helpers/trigger.js.coffee
 - spec_app/spec/javascripts/support/jasmine.yml
@@ -236,12 +238,12 @@ files:
 - spec_app/spec/javascripts/up/history_spec.js.coffee
 - spec_app/spec/javascripts/up/link_spec.js.coffee
 - spec_app/spec/javascripts/up/magic_spec.js.coffee
-- spec_app/spec/javascripts/up/marker_spec.js.coffee
 - spec_app/spec/javascripts/up/modal_spec.js.coffee
 - spec_app/spec/javascripts/up/motion_spec.js.coffee
 - spec_app/spec/javascripts/up/navigation_spec.js.coffee
 - spec_app/spec/javascripts/up/popup_spec.js.coffee
 - spec_app/spec/javascripts/up/proxy_spec.js.coffee
+- spec_app/spec/javascripts/up/slot_spec.js.coffee
 - spec_app/spec/javascripts/up/tooltip_spec.js.coffee
 - spec_app/spec/javascripts/up/util_spec.js.coffee
 - spec_app/test/controllers/.keep

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

@@ -1,39 +0,0 @@
-###*
-Markers
-=======
-  
-TODO: Write some documentation
-  
-@class up.marker
-###
-up.marker = (->
-  
-  u = up.util
-  
-  hasContent = ($marker) ->
-    u.trim($marker.html()) != ''
-
-  check = ($element) ->
-    u.findWithSelf($element, '[up-marker]').each ->
-      $marker = $(this)
-      unless hasContent($marker)
-        $marker.hide()
-
-  ###*
-  Use this attribute to mark up empty element containers that
-  you plan to update with content in the future.
-
-  An element with this attribute is automatically hidden
-  if it has no content, and is re-shown if it is updated with
-  content.
-
-  This is useful to prevent the element from applying unwanted
-  margins to the surrounding page flow.
-
-  @method [up-marker]
-  @ujs
-  ###
-  up.bus.on 'fragment:ready', check
-  
-)()
-