upjs-rails 0.1.0 → 0.2.0

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

@@ -1,3 +1,15 @@
+###*
+Utility functions
+=================
+  
+All methods in this module are for internal use by the Up.js framework
+and will frequently change between releases.
+  
+If you use them in your own code, you will get hurt.  
+  
+@protected
+@class up.util
+###
 up.util = (->
 
   get = (url, options) ->
@@ -11,10 +23,26 @@ up.util = (->
         "X-Up-Selector": options.selector
       }
     $.ajax options
-    
+
+  ###*
+  @method up.util.isStandardPort
+  @private
+  ###  
   isStandardPort = (protocol, port) ->
-    (port == 80 && protocol == 'http') || (port == 443 && protocol == 'https')
+    ((port == "" || port == "80") && protocol == 'http:') || (port == "443" && protocol == 'https:')
 
+    
+  ###*
+  Normalizes URLs, relative paths and absolute paths to a full URL
+  that can be checked for equality with other normalized URL.
+  
+  By default hashes are ignored, search queries are included.
+  
+  @method up.util.normalizeUrl
+  @param {Boolean} [options.hash=false]
+  @param {Boolean} [options.search=true]
+  @protected
+  ###
   normalizeUrl = (urlOrAnchor, options) ->
     anchor = if isString(urlOrAnchor) 
       $('<a>').attr(href: urlOrAnchor).get(0)
@@ -23,6 +51,7 @@ up.util = (->
     normalized = anchor.protocol + "//" + anchor.hostname
     normalized += ":#{anchor.port}" unless isStandardPort(anchor.protocol, anchor.port)  
     normalized += anchor.pathname
+    normalized += anchor.hash if options?.hash == true
     normalized += anchor.search unless options?.search == false
     normalized
 
@@ -120,10 +149,12 @@ up.util = (->
 
   isString = (object) ->
     typeof(object) == 'string'
+    
+  isHash = (object) ->
+    typeof(object) == 'object' && !!object
 
   isObject = (object) ->
-    type = typeof object
-    type == 'function' || (type == 'object' && !!object)
+    isHash(object) || (typeof object == 'function')
 
   isJQuery = (object) ->
     object instanceof jQuery
@@ -134,8 +165,14 @@ up.util = (->
   ifGiven = (object) ->
     object if isGiven(object)
 
+  # https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
+  isArray = Array.isArray
+
   copy = (object)  ->
-    extend({}, object)
+    if isArray(object)
+      object.slice()
+    else
+      extend({}, object)
 
   unwrap = (object) ->
     if isJQuery(object)
@@ -158,6 +195,24 @@ up.util = (->
           merged[key] = options(value, defaultValue)
     merged
 
+  ###*
+  Returns the first argument that is considered present.
+  If an argument is a function, it is called and the value is checked for presence.
+  
+  This function is useful when you have multiple option sources and the value can be boolean.
+  In that case you cannot change the sources with a `||` operator
+  (since that doesn't short-circuit at `false`).
+  
+  @method up.util.option
+  @param {Array} args...
+  ###
+  option = (args...) ->
+    detect(args, (arg) ->
+      value = arg
+      value = value() if isFunction(value)
+      isPresent(value)
+    )
+
   detect = (array, tester) ->
     match = null
     array.every (element) ->
@@ -204,23 +259,45 @@ up.util = (->
     else
       memo
 
-  cssAnimate = ($element, lastFrame, opts) ->
-    opts = options(opts, duration: 300, easing: 'ease')
+  ###*
+  Animates the given element's CSS properties using CSS transitions.
+
+  @method up.util.cssAnimate
+  @param {Element|jQuery|String} elementOrSelector
+    The element to animate.
+  @param {Object} lastFrame
+    The CSS properties that should be transitioned to.
+  @param {Number} [opts.duration=300]
+    The duration of the animation, in milliseconds.
+  @param {Number} [opts.delay=0]
+    The delay before the animation starts, in milliseconds.
+  @param {String} [opts.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.
+  @return
+    A promise for the animation's end.
+
+  ###
+  cssAnimate = (elementOrSelector, lastFrame, opts) ->
+    opts = options(opts, 
+      duration: 300, 
+      delay: 0, 
+      easing: 'ease'
+    )
+    $element = $(elementOrSelector)
     deferred = $.Deferred()
-    # This should really be "one" instead of "on".
-    # We only want this event to be called once, then clean up after ourselves.
-    # $element.one(up.browser.transitionEndEvent(), -> deferred.resolve())
     transition =
       'transition-property': Object.keys(lastFrame).join(', ')
       'transition-duration': "#{opts.duration}ms"
+      'transition-delay': "#{opts.delay}ms"
       'transition-timing-function': opts.easing
-    console.log("CSS transition with", transition)
     withoutTransition = temporaryCss($element, transition)
     $element.css(lastFrame)
     deferred.then(withoutTransition)
-    setTimeout((-> deferred.resolve()), opts.duration)
+    setTimeout((-> deferred.resolve()), opts.duration + opts.delay)
     deferred.promise()
-
+    
   measure = ($element, options) ->
     offset = $element.offset()
     box = 
@@ -233,19 +310,56 @@ up.util = (->
       box.right = viewport.width - (box.left + box.width)
       box.bottom = viewport.height - (box.top + box.height)
     box
+    
+  copyAttributes = ($source, $target) ->
+    for attr in $source.get(0).attributes
+      if attr.specified
+        $target.attr(attr.name, attr.value)
 
   prependGhost = ($element) ->
     dimensions = measure($element)
     $ghost = $element.clone()
+    $ghost.find('script').remove()
     $ghost.css
       right: ''
       bottom: ''
       margin: 0
-      position: 'fixed'
+      position: 'absolute'
     $ghost.css(dimensions)
     $ghost.addClass('up-ghost')
     $ghost.prependTo(document.body)
 
+  findWithSelf = ($element, selector) ->
+    $element.find(selector).addBack(selector)
+
+  escapePressed = (event) ->
+    event.keyCode == 27
+    
+  contains = (array, element) ->
+    array.indexOf(element) >= 0
+    
+  castsToTrue = (object) ->
+    String(object) == "true"
+    
+  castsToFalse = (object) ->
+    String(object) == "false"
+
+#  memoArray = ->
+#    array = []
+#    defaults = []
+#    array.snapshot = ->
+#      defaults = copy(array)
+#    array.reset = (destroyer) ->
+#      if destroyer
+#        for element in array
+#          unless contains(defaults, element)
+#            destroyer()
+#      replaceInPlace(array, defaults)
+#    array
+#  
+#  replaceInPlace = (array, replacement) ->
+#    array.splice(0, array.length, replacement...)    
+    
   presentAttr: presentAttr
   createElement: createElement
   normalizeUrl: normalizeUrl
@@ -258,6 +372,7 @@ up.util = (->
   copy: copy
   merge: merge
   options: options
+  option: option
   error: error
   each: each
   detect: detect
@@ -276,6 +391,7 @@ up.util = (->
   isString: isString
   isJQuery: isJQuery
   isPromise: isPromise
+  isHash: isHash
   ifGiven: ifGiven
   unwrap: unwrap
   nextFrame: nextFrame
@@ -283,5 +399,14 @@ up.util = (->
   temporaryCss: temporaryCss
   cssAnimate: cssAnimate
   prependGhost: prependGhost
+  escapePressed: escapePressed
+  copyAttributes: copyAttributes
+  findWithSelf: findWithSelf
+  contains: contains
+  isArray: isArray
+  castsToTrue: castsToTrue
+  castsToFalse: castsToFalse
+#  memoArray: memoArray
+#  replaceInPlace: replaceInPlace
 
 )()

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

@@ -0,0 +1,19 @@
+#= require up/module
+#= require up/util
+#= require up/browser
+#= require up/bus
+#= require up/flow
+#= require up/magic
+#= require up/history
+#= require up/motion
+#= require up/link
+#= require up/form
+#= require up/popup
+#= require up/modal
+#= require up/tooltip
+#= require up/navigation
+#= require up/marker
+#= require_self
+
+up.bus.emit('framework:ready')
+$(document).on 'ready', -> up.bus.emit('app:ready')

data/lib/assets/stylesheets/up/close.css.sass

@@ -0,0 +1,2 @@
+[up-close]
+  cursor: pointer

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

@@ -1,49 +1,46 @@
 $stratum: 10000
-$width: 700px
-$height: 450px
+//$width: 700px
+//$height: 450px
+$close-height: 24px
+$close-width: 36px
 
-.up-modal-overlay
+.up-modal
   position: fixed
   top: 0
   left: 0
   bottom: 0
   right: 0
-  background-color: rgba(90, 90, 90, 0.7)
   z-index: $stratum
+  background-color: rgba(90, 90, 90, 0.4)
 
 .up-modal-dialog
-  position: fixed
-  z-index: $stratum + 1
-  margin: auto
-  top: 0
-  left: 0
-  bottom: 0
-  right: 0
-  width: $width
-  height: $height
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
   max-width: 100%
   max-height: 100%
   background-color: #fff
-  box-shadow: 0 0 10px 5px #000
+  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3)
+  // In case someone sets padding on the dialog box,
+  // the width and height attributes set by up.modal
+  // should be honored exactly.
+  box-sizing: border-box 
 
 .up-modal-close
   position: absolute
-  top: 20px
-  right: 20px
-  background-color: #666
+  right: 0
+  top: 0
+  width: $close-width
+  text-align: center
+  line-height: $close-height
+  height: $close-height
+  background-color: #999
   color: #fff
   font-weight: bold
   text-transform: uppercase
-  padding: 5px 15px
-  z-index: $stratum + 2
   cursor: pointer
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
-
-.up-modal-close-label
-
-.up-modal-close-key
-  margin-left: 3px
-  opacity: 0.5
+  transform: translateY(-100%)
 
 .up-modal-content
   overflow-x: hidden

data/lib/assets/stylesheets/up/popup.css.sass

@@ -1,4 +1,5 @@
 $stratum: 10000
+$stratum-within-modal: 15000
 
 .up-popup
   z-index: $stratum
@@ -6,4 +7,7 @@ $stratum: 10000
   background-color: #fff
   padding: 15px
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)
+  
+.up-modal .up-popup
+  z-index: $stratum-within-modal
   

data/lib/assets/stylesheets/up/tooltip.css.sass

@@ -0,0 +1,17 @@
+$stratum: 30000
+$distance-from-trigger: 6px
+
+.up-tooltip
+  z-index: $stratum
+  position: fixed
+  background-color: rgba(30, 30, 30, 0.8)
+  color: white
+  padding: 6px 8px
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2)
+  
+  &[up-origin=top]
+    margin-top: -$distance-from-trigger
+  
+  &[up-origin=bottom]
+    margin-bottom: -$distance-from-trigger
+    

data/lib/upjs/rails/version.rb

@@ -1,5 +1,5 @@
 module Upjs
   module Rails
-    VERSION = "0.1.0"
+    VERSION = "0.2.0"
   end
 end

data/spec_app/Bowerfile

@@ -0,0 +1,3 @@
+asset 'jasmine-jquery'
+asset 'jasmine-fixture'
+asset 'jasmine-ajax'

data/spec_app/Gemfile

@@ -1,4 +1,5 @@
 source 'https://rubygems.org'
+# source 'https://rails-assets.org'
 
 gem 'rails', '4.2.0'
 gem 'sqlite3'
@@ -9,10 +10,15 @@ gem 'coffee-rails', '~> 4.1.0'
 gem 'therubyracer', platforms: :ruby
 gem 'jquery-rails'
 gem 'upjs-rails', path: '..'
+gem 'bower-rails'
 
 group :development, :test do
   gem 'byebug'
   gem 'web-console', '~> 2.0'
+  gem 'jasmine-rails'
+  # gem 'rails-assets-jasmine-jquery'
+  # gem 'rails-assets-jasmine-fixture'
+  # gem 'rails-assets-jasmine-ajax'
 end
 
 group :test do

data/spec_app/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    upjs-rails (0.0.1)
+    upjs-rails (0.1.0)
       rails (>= 3)
 
 GEM
@@ -45,6 +45,7 @@ GEM
     arel (6.0.0)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
+    bower-rails (0.9.2)
     builder (3.2.2)
     byebug (3.5.1)
       columnize (~> 0.8)
@@ -104,6 +105,12 @@ GEM
       hpricot (~> 0.8.6)
       ruby_parser (~> 3.1.1)
     i18n (0.7.0)
+    jasmine-core (2.1.3)
+    jasmine-rails (0.10.6)
+      jasmine-core (>= 1.3, < 3.0)
+      phantomjs
+      railties (>= 3.1.0)
+      sprockets-rails
     jquery-rails (4.0.2)
       rails-dom-testing (~> 1.0)
       railties (>= 4.2.0)
@@ -121,6 +128,7 @@ GEM
     multi_test (0.1.1)
     nokogiri (1.6.5)
       mini_portile (~> 0.6.0)
+    phantomjs (1.9.7.1)
     rack (1.6.0)
     rack-test (0.6.2)
       rack (>= 1.0)
@@ -221,11 +229,13 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  bower-rails
   byebug
   coffee-rails (~> 4.1.0)
   cucumber-rails
   database_cleaner
   haml-rails
+  jasmine-rails
   jquery-rails
   rails (= 4.2.0)
   rspec-rails

data/spec_app/app/assets/javascripts/application.js

@@ -12,5 +12,8 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require jasmine-jquery
+//= require jasmine-fixture
+//= require jasmine-ajax
 //= require up
 //= require_tree .

data/spec_app/config/initializers/bower_rails.rb

@@ -0,0 +1,16 @@
+BowerRails.configure do |bower_rails|
+  # Tell bower-rails what path should be considered as root. Defaults to Dir.pwd
+  # bower_rails.root_path = Dir.pwd
+
+  # Invokes rake bower:install before precompilation. Defaults to false
+  # bower_rails.install_before_precompile = true
+
+  # Invokes rake bower:resolve before precompilation. Defaults to false
+  # bower_rails.resolve_before_precompile = true
+
+  # Invokes rake bower:clean before precompilation. Defaults to false
+  # bower_rails.clean_before_precompile = true
+  
+  # Invokes rake bower:install:deployment instead rake bower:install. Defaults to false
+  # bower_rails.use_bower_install_deployment = true
+end

data/spec_app/config/routes.rb

@@ -1,5 +1,6 @@
 Rails.application.routes.draw do
 
+  mount JasmineRails::Engine => '/specs' if defined?(JasmineRails)
   resources :cards
   root to: 'pages#home'
 

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

@@ -0,0 +1 @@
+#= require_tree .

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

@@ -0,0 +1,7 @@
+beforeEach ->
+  @previousHref = location.href
+  @previousTitle = document.title
+  
+afterEach ->
+  window.history.replaceState({}, @previousTitle, @previousHref)
+ 

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

@@ -0,0 +1,4 @@
+afterEach ->
+  up.reset()
+  
+ 

data/spec_app/spec/javascripts/support/jasmine.yml

@@ -0,0 +1,50 @@
+# path to parent directory of src_files
+# relative path from Rails.root
+# defaults to app/assets/javascripts
+src_dir: "app/assets/javascripts"
+
+# path to additional directory of source file that are not part of assets pipeline and need to be included
+# relative path from Rails.root
+# defaults to []
+# include_dir:
+#   - ../mobile_app/public/js
+
+# path to parent directory of css_files
+# relative path from Rails.root
+# defaults to app/assets/stylesheets
+css_dir: "app/assets/stylesheets"
+
+# list of file expressions to include as source files
+# relative path from src_dir
+src_files:
+ - "application.{js.coffee,js,coffee}"
+
+# list of file expressions to include as css files
+# relative path from css_dir
+css_files:
+
+# path to parent directory of spec_files
+# relative path from Rails.root
+#
+# Alternatively accept an array of directory to include external spec files
+# spec_dir:
+#   - spec/javascripts
+#   - ../engine/spec/javascripts
+#
+# defaults to spec/javascripts
+spec_dir: spec/javascripts
+
+# list of file expressions to include as helpers into spec runner
+# relative path from spec_dir
+helpers:
+  - "helpers/**/*.{js.coffee,js,coffee}"
+
+# list of file expressions to include as specs into spec runner
+# relative path from spec_dir
+spec_files:
+  - "**/*[Ss]pec.{js.coffee,js,coffee}"
+
+# path to directory of temporary files
+# (spec runner and asset cache)
+# defaults to tmp/jasmine
+tmp_dir: "tmp/jasmine"

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

@@ -0,0 +1,75 @@
+describe 'up.flow', ->
+  
+  describe '.replace', ->
+    
+    beforeEach ->
+      jasmine.Ajax.install()
+
+      affix('.before').text('old-before')
+      affix('.middle').text('old-middle')
+      affix('.after').text('old-after')
+
+      @promise = up.replace('.middle', '/path')
+
+      jasmine.Ajax.requests.mostRecent().respondWith
+        status: 200
+        contentType: '/text/html'
+        responseText:
+          """
+          <div class="before">new-before</div>
+          <div class="middle">new-middle</div>
+          <div class="after">new-after</div>
+          """      
+    
+    it 'replaces the given selector with the same selector from a freshly fetched page', (done) ->
+      @promise.then ->
+        expect($('.before')).toHaveText('old-before')
+        expect($('.middle')).toHaveText('new-middle')
+        expect($('.after')).toHaveText('old-after')
+        done()      
+      
+    it 'should set the browser location to the given URL', (done) ->
+      @promise.then ->
+        expect(window.location.pathname).toBe('/path')
+        done()
+        
+    it 'marks the element with the URL from which it was retrieved', (done) ->
+      @promise.then ->
+        expect($('.middle').attr('up-source')).toMatch(/\/path$/)
+        done()
+
+  describe '.destroy', ->
+    
+    it 'removes the element with the given selector', ->
+      affix('.element')
+      up.destroy('.element')
+      expect($('.element')).not.toExist()
+      
+    it 'calls destructors for custom elements', ->
+      up.awaken('.element', ($element) -> destructor)
+      destructor = jasmine.createSpy('destructor')
+      up.ready(affix('.element'))
+      up.destroy('.element')
+      expect(destructor).toHaveBeenCalled()
+      
+  describe '.reload', ->
+    
+    it 'reloads the given selector from the closest known source URL', (done) ->
+      affix('.container[up-source="/source"] .element').find('.element').text('old text')
+
+      up.reload('.element').then ->
+        expect($('.element')).toHaveText('new text')
+        done()
+        
+      request = jasmine.Ajax.requests.mostRecent()
+      expect(request.url).toMatch(/\/source$/)
+
+      request.respondWith
+        status: 200
+        contentType: '/text/html'
+        responseText:
+          """
+          <div class="container">
+            <div class="element">new text</div>
+          </div>
+          """

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

@@ -0,0 +1,14 @@
+describe 'up.marker', ->
+  
+  describe '[up-marker]', ->
+    
+    it 'hides empty containers', ->
+      $element = affix('.element[up-marker]')
+      up.ready($element)
+      expect($element).not.toBeVisible()
+    
+    it 'does not hide empty containers', ->
+      $element = affix('.element[up-marker]').text('content')
+      up.ready($element)
+      expect($element).toBeVisible()
+    

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

@@ -0,0 +1,27 @@
+describe 'up.navigation', ->
+
+  it 'marks links as .up-current iff they link to the current URL', ->
+    spyOn(up.browser, 'url').and.returnValue('/foo')
+    $currentLink = up.ready(affix('a[href="/foo"]'))
+    $otherLink = up.ready(affix('a[href="/bar"]'))
+    expect($currentLink).toHaveClass('up-current')
+    expect($otherLink).not.toHaveClass('up-current')
+    
+  it 'changes .up-current marks as the URL changes'
+    
+  it 'marks clicked linked as .up-active until the request finishes', ->
+    $link = affix('a[href="/foo"][up-target=".main"]')
+    affix('.main')
+    jasmine.Ajax.install()
+    $link.click()
+    expect($link).toHaveClass('up-active')
+    jasmine.Ajax.requests.mostRecent().respondWith
+      status: 200
+      contentType: '/text/html'
+      responseText: '<div class="main">new-text</div>'
+    expect($link).not.toHaveClass('up-active')
+    expect($link).toHaveClass('up-current')
+    
+
+  it 'prefers to mark an enclosing [up-follow] click area'
+