unpoly-rails 0.26.2 → 0.27.0

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

@@ -73,6 +73,7 @@ up.motion = (($) ->
     enabled: true
 
   reset = ->
+    finish()
     animations = u.copy(defaultAnimations)
     transitions = u.copy(defaultTransitions)
     config.reset()

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

@@ -39,12 +39,8 @@ up.navigation = (($) ->
   SELECTOR_SECTION = 'a, [up-href]'
 
   normalizeUrl = (url) ->
-    if u.isPresent(url)
-      u.normalizeUrl(url,
-        search: false
-        stripTrailingSlash: true
-      )
-    
+    u.normalizeUrl(url) if u.isPresent(url)
+
   sectionUrls = ($section) ->
     urls = []
     for attr in ['href', 'up-href', 'up-alias']

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

@@ -46,27 +46,6 @@ up.popup = (($) ->
 
   u = up.util
 
-  ###*
-  Returns the source URL for the fragment displayed
-  in the current popup, or `undefined` if no  popup is open.
-
-  @function up.popup.url
-  @return {String}
-    the source URL
-  @stable
-  ###
-  currentUrl = undefined
-
-  ###*
-  Returns the URL of the page or modal behind the popup.
-
-  @function up.popup.coveredUrl
-  @return {String}
-  @experimental
-  ###
-  coveredUrl = ->
-    $('.up-popup').attr('up-covered-url')
-
   ###*
   Sets default options for future popups.
 
@@ -97,68 +76,86 @@ up.popup = (($) ->
   config = u.config
     openAnimation: 'fade-in'
     closeAnimation: 'fade-out'
-    openDuration: null
-    closeDuration: null
+    openDuration: 150
+    closeDuration: 100
     openEasing: null
     closeEasing: null
     position: 'bottom-right'
     history: false
 
+  ###*
+  Returns the source URL for the fragment displayed
+  in the current popup, or `undefined` if no  popup is open.
+
+  @function up.popup.url
+  @return {String}
+    the source URL
+  @stable
+  ###
+
+  ###*
+  Returns the URL of the page or modal behind the popup.
+
+  @function up.popup.coveredUrl
+  @return {String}
+  @experimental
+  ###
+
+  state = u.config
+    phase: 'closed'      # can be 'opening', 'opened', 'closing' and 'closed'
+    $anchor: null        # the element to which the tooltip is anchored
+    $popup: null         # the popup container
+    position: null       # the position of the popup container element relative to its anchor
+    sticky: null
+    url: null
+    coveredUrl: null
+    coveredTitle: null
+
+  chain = new u.DivertibleChain()
+
   reset = ->
-    close(animation: false)
+    state.$popup?.remove()
+    state.reset()
+    chain.reset()
     config.reset()
 
-  setPosition = ($link, position) ->
+  align = ->
     css = {}
 
-    $popup = $('.up-popup')
-    popupBox = u.measure($popup)
+    popupBox = u.measure(state.$popup)
 
-    if u.isFixed($link)
-      linkBox = $link.get(0).getBoundingClientRect()
+    if u.isFixed(state.$anchor)
+      linkBox = state.$anchor.get(0).getBoundingClientRect()
       css['position'] = 'fixed'
     else
-      linkBox = u.measure($link)
+      linkBox = u.measure(state.$anchor)
 
-    switch position
-      when "bottom-right" # anchored to bottom-right of link, opens towards bottom-left
+    switch state.position
+      when 'bottom-right' # anchored to bottom-right of link, opens towards bottom-left
         css['top'] = linkBox.top + linkBox.height
         css['left'] = linkBox.left + linkBox.width - popupBox.width
-      when "bottom-left" # anchored to bottom-left of link, opens towards bottom-right
+      when 'bottom-left' # anchored to bottom-left of link, opens towards bottom-right
         css['top'] = linkBox.top + linkBox.height
         css['left'] = linkBox.left
-      when "top-right" # anchored to top-right of link, opens to top-left
+      when 'top-right' # anchored to top-right of link, opens to top-left
         css['top'] = linkBox.top - popupBox.height
         css['left'] = linkBox.left + linkBox.width - popupBox.width
-      when "top-left" # anchored to top-left of link, opens to top-right
+      when 'top-left' # anchored to top-left of link, opens to top-right
         css['top'] = linkBox.top - popupBox.height
         css['left'] = linkBox.left
       else
-        u.error("Unknown position option '%s'", position)
+        u.error("Unknown position option '%s'", state.position)
 
-    $popup.attr('up-position', position)
-    $popup.css(css)
+    state.$popup.attr('up-position', state.position)
+    state.$popup.css(css)
 
-  discardHistory = ->
-    $popup = $('.up-popup')
-    $popup.removeAttr('up-covered-url')
-    $popup.removeAttr('up-covered-title')
-    
-  createFrame = (target, options) ->
-    promise = u.resolvedPromise()
-    if isOpen()
-      promise = promise.then -> close()
-    promise = promise.then ->
-      $popup = u.$createElementFromSelector('.up-popup')
-      $popup.attr('up-sticky', '') if options.sticky
-      $popup.attr('up-covered-url', up.browser.url())
-      $popup.attr('up-covered-title', document.title)
-      # Create an empty element that will match the
-      # selector that is being replaced.
-      u.$createPlaceholder(target, $popup)
-      $popup.appendTo(document.body)
-      $popup
-    return promise
+  createFrame = (target) ->
+    $popup = u.$createElementFromSelector('.up-popup')
+    # Create an empty element that will match the
+    # selector that is being replaced.
+    u.$createPlaceholder(target, $popup)
+    $popup.appendTo(document.body)
+    state.$popup = $popup
 
   ###*
   Returns whether popup modal is currently open.
@@ -167,13 +164,13 @@ up.popup = (($) ->
   @stable
   ###
   isOpen = ->
-    $('.up-popup').length > 0
+    state.phase == 'opened' || state.phase == 'opening'
 
   ###*
   Attaches a popup overlay to the given element or selector.
 
   Emits events [`up:popup:open`](/up:popup:open) and [`up:popup:opened`](/up:popup:opened).
-  
+
   @function up.popup.attach
   @param {Element|jQuery|String} elementOrSelector
   @param {String} [options.url]
@@ -205,41 +202,51 @@ up.popup = (($) ->
     the opening animation has completed.
   @stable
   ###
-  attach = (linkOrSelector, options) ->
-    $link = $(linkOrSelector)
-    $link.length or u.error('Cannot attach popup to non-existing element %o', linkOrSelector)
-    
+  attachAsap = (elementOrSelector, options) ->
+    curriedAttachNow = -> attachNow(elementOrSelector, options)
+    if isOpen()
+      chain.asap(closeNow, curriedAttachNow)
+    else
+      chain.asap(curriedAttachNow)
+    chain.promise()
+
+  attachNow = (elementOrSelector, options) ->
+    $anchor = $(elementOrSelector)
+    $anchor.length or u.error('Cannot attach popup to non-existing element %o', elementOrSelector)
+
     options = u.options(options)
-    url = u.option(u.pluckKey(options, 'url'), $link.attr('up-href'), $link.attr('href'))
+    url = u.option(u.pluckKey(options, 'url'), $anchor.attr('up-href'), $anchor.attr('href'))
     html = u.option(u.pluckKey(options, 'html'))
-    target = u.option(u.pluckKey(options, 'target'), $link.attr('up-popup'), 'body')
-    options.position = u.option(options.position, $link.attr('up-position'), config.position)
-    options.animation = u.option(options.animation, $link.attr('up-animation'), config.openAnimation)
-    options.sticky = u.option(options.sticky, u.castedAttr($link, 'up-sticky'), config.sticky)
-    options.history = if up.browser.canPushState() then u.option(options.history, u.castedAttr($link, 'up-history'), config.history) else false
-    options.confirm = u.option(options.confirm, $link.attr('up-confirm'))
-    options.method = up.link.followMethod($link, options)
-    animateOptions = up.motion.animateOptions(options, $link, duration: config.openDuration, easing: config.openEasing)
-
-    up.browser.confirm(options).then ->
-      if up.bus.nobodyPrevents('up:popup:open', url: url, message: 'Opening popup')
-        options.beforeSwap = -> createFrame(target, options)
+    target = u.option(u.pluckKey(options, 'target'), $anchor.attr('up-popup'), 'body')
+    position = u.option(options.position, $anchor.attr('up-position'), config.position)
+    options.animation = u.option(options.animation, $anchor.attr('up-animation'), config.openAnimation)
+    options.sticky = u.option(options.sticky, u.castedAttr($anchor, 'up-sticky'), config.sticky)
+    options.history = if up.browser.canPushState() then u.option(options.history, u.castedAttr($anchor, 'up-history'), config.history) else false
+    options.confirm = u.option(options.confirm, $anchor.attr('up-confirm'))
+    options.method = up.link.followMethod($anchor, options)
+    animateOptions = up.motion.animateOptions(options, $anchor, duration: config.openDuration, easing: config.openEasing)
+
+    up.browser.whenConfirmed(options).then ->
+      up.bus.whenEmitted('up:popup:open', url: url, message: 'Opening popup').then ->
+        state.phase = 'opening'
+        state.$anchor = $anchor
+        state.position = position
+        state.coveredUrl = up.browser.url()
+        state.coveredTitle = document.title
+        state.sticky = options.sticky
+        options.beforeSwap = -> createFrame(target)
         extractOptions = u.merge(options, animation: false)
         if html
           promise = up.extract(target, html, extractOptions)
         else
           promise = up.replace(target, url, extractOptions)
         promise = promise.then ->
-          setPosition($link, options.position)
+          align()
+          up.animate(state.$popup, options.animation, animateOptions)
         promise = promise.then ->
-          up.animate($('.up-popup'), options.animation, animateOptions)
-        promise = promise.then ->
-          up.emit('up:popup:opened', message: 'Popup opened')
+          state.phase = 'opened'
+          up.emit('up:popup:opened', message: 'Popup opened')#
         promise
-      else
-        # Although someone prevented the destruction, keep a uniform API for
-        # callers by returning a promise that will never be resolved.
-        u.unresolvablePromise()
 
   ###*
   This event is [emitted](/up.emit) when a popup is starting to open.
@@ -256,7 +263,7 @@ up.popup = (($) ->
   @event up:popup:opened
   @stable
   ###
-      
+
   ###*
   Closes a currently opened popup overlay.
 
@@ -272,27 +279,35 @@ up.popup = (($) ->
     animation has finished.
   @stable
   ###
-  close = (options) ->
-    $popup = $('.up-popup')
-    if $popup.length
-      if up.bus.nobodyPrevents('up:popup:close', $element: $popup)
-        options = u.options(options,
-          animation: config.closeAnimation,
-          url: $popup.attr('up-covered-url'),
-          title: $popup.attr('up-covered-title')
-        )
-        animateOptions = up.motion.animateOptions(options, duration: config.closeDuration, easing: config.closeEasing)
-        u.extend(options, animateOptions)
-        currentUrl = undefined
-        promise = up.destroy($popup, options)
-        promise = promise.then -> up.emit('up:popup:closed', message: 'Popup closed')
-        promise
-      else
-        # Although someone prevented the destruction, keep a uniform API
-        # for callers by returning a promise that will never be resolved.
-        u.unresolvablePromise()
-    else
-      u.resolvedPromise()
+  closeAsap = (options) ->
+    if isOpen()
+      chain.asap -> closeNow(options)
+    chain.promise()
+
+  closeNow = (options) ->
+    unless isOpen() # this can happen when a request fails and the chain proceeds to the next task
+      return u.resolvedPromise()
+    
+    options = u.options(options,
+      animation: config.closeAnimation
+      url: state.coveredUrl,
+      title: state.coveredTitle
+    )
+    animateOptions = up.motion.animateOptions(options, duration: config.closeDuration, easing: config.closeEasing)
+    u.extend(options, animateOptions)
+
+    up.bus.whenEmitted('up:popup:close', message: 'Closing popup', $element: state.$popup).then ->
+      state.phase = 'closing'
+      state.url = null
+      state.coveredUrl = null
+      state.coveredTitle = null
+
+      up.destroy(state.$popup, options).then ->
+        state.phase = 'closed'
+        state.$popup = null
+        state.$anchor = null
+        state.sticky = null
+        up.emit('up:popup:closed', message: 'Popup closed')
 
   ###*
   This event is [emitted](/up.emit) when a popup dialog
@@ -313,9 +328,7 @@ up.popup = (($) ->
   ###
       
   autoclose = ->
-    unless $('.up-popup').is('[up-sticky]')
-      discardHistory()
-      close()
+    closeAsap() unless state.sticky
 
   ###*
   Returns whether the given element or selector is contained
@@ -363,29 +376,29 @@ up.popup = (($) ->
   ###
   up.link.onAction('[up-popup]', ($link) ->
     if $link.is('.up-current')
-      close()
+      closeAsap()
     else
-      attach($link)
+      attachAsap($link)
   )
 
   # Close the popup when someone clicks outside the popup
   # (but not on a popup opener).
-  up.on('click', 'body', (event, $body) ->
+  up.on('mousedown', 'body', (event, $body) ->
     $target = $(event.target)
-    unless $target.closest('.up-popup').length || $target.closest('[up-popup]').length
-      close()
+    unless $target.closest('.up-popup, [up-popup]').length
+      closeAsap()
   )
   
   up.on('up:fragment:inserted', (event, $fragment) ->
     if contains($fragment)
       if newSource = $fragment.attr('up-source')
-        currentUrl = newSource
+        state.url = newSource
     else if contains(event.origin)
       autoclose()
   )
   
   # Close the pop-up overlay when the user presses ESC.
-  up.bus.onEscape(-> close())
+  up.bus.onEscape(closeAsap)
 
   ###*
   When an element with this attribute is clicked,
@@ -402,8 +415,8 @@ up.popup = (($) ->
   @stable
   ###
   up.on('click', '[up-close]', (event, $element) ->
-    if $element.closest('.up-popup').length
-      close()
+    if contains($element)
+      closeAsap()
       # Only prevent the default when we actually closed a popup.
       # This way we can have buttons that close a popup when within a popup,
       # but link to a destination if not.
@@ -414,15 +427,12 @@ up.popup = (($) ->
   up.on 'up:framework:reset', reset
 
   knife: eval(Knife?.point)
-  attach: attach
-  close: close
-  url: -> currentUrl
-  coveredUrl: coveredUrl
+  attach: attachAsap
+  close: closeAsap
+  url: -> state.url
+  coveredUrl: -> state.coveredUrl
   config: config
-  defaults: -> u.error('up.popup.defaults(...) no longer exists. Set values on he up.popup.config property instead.')
   contains: contains
-  open: -> up.error('up.popup.open no longer exists. Please use up.popup.attach instead.')
-  source: -> up.error('up.popup.source no longer exists. Please use up.popup.url instead.')
   isOpen: isOpen
 
 )(jQuery)

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

@@ -231,8 +231,6 @@ up.proxy = (($) ->
       loadStarted()
       promise.always(loadEnded)
 
-    console.groupEnd()
-
     promise
 
   ###*

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

@@ -50,7 +50,7 @@ up.syntax = (($) ->
         // your code here
       });
 
-  The functions will be called on elements maching `.action` when
+  The functions will be called on elements matching `.action` when
   the page loads, or whenever a matching fragment is [updated through Unpoly](/up.replace)
   later.
 

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

@@ -44,46 +44,68 @@ up.tooltip = (($) ->
     The animation used to open a tooltip.
   @param {String} [config.closeAnimation='fade-out']
     The animation used to close a tooltip.
+  @param {Number} [config.openDuration]
+    The duration of the open animation (in milliseconds).
+  @param {Number} [config.closeDuration]
+    The duration of the close animation (in milliseconds).
+  @param {String} [config.openEasing]
+    The timing function controlling the acceleration of the opening animation.
+  @param {String} [config.closeEasing]
+    The timing function controlling the acceleration of the closing animation.
   @stable
   ###
   config = u.config
     position: 'top'
     openAnimation: 'fade-in'
     closeAnimation: 'fade-out'
+    openDuration: 100
+    closeDuration: 50
+    openEasing: null
+    closeEasing: null
+
+  state = u.config
+    phase: 'closed'      # can be 'opening', 'opened', 'closing' and 'closed'
+    $anchor: null        # the element to which the tooltip is anchored
+    $tooltip: null       # the tooltiop element
+    position: null       # the position of the tooltip element relative to its anchor
+
+  chain = new u.DivertibleChain()
 
   reset = ->
     # Destroy the tooltip container regardless whether it's currently in a closing animation
-    close(animation: false)
+    state.$tooltip?.remove()
+    state.reset()
+    chain.reset()
     config.reset()
 
-  setPosition = ($link, $tooltip, position) ->
+  align = ->
     css = {}
-    tooltipBox = u.measure($tooltip)
+    tooltipBox = u.measure(state.$tooltip)
 
-    if u.isFixed($link)
-      linkBox = $link.get(0).getBoundingClientRect()
+    if u.isFixed(state.$anchor)
+      linkBox = state.$anchor.get(0).getBoundingClientRect()
       css['position'] = 'fixed'
     else
-      linkBox = u.measure($link)
+      linkBox = u.measure(state.$anchor)
 
-    switch position
-      when "top"
+    switch state.position
+      when 'top'
         css['top'] = linkBox.top - tooltipBox.height
         css['left'] = linkBox.left + 0.5 * (linkBox.width - tooltipBox.width)
-      when "left"
+      when 'left'
         css['top'] = linkBox.top + 0.5 * (linkBox.height - tooltipBox.height)
         css['left'] = linkBox.left - tooltipBox.width
-      when "right"
+      when 'right'
         css['top'] = linkBox.top + 0.5 * (linkBox.height - tooltipBox.height)
         css['left'] = linkBox.left + linkBox.width
-      when "bottom"
+      when 'bottom'
         css['top'] = linkBox.top + linkBox.height
         css['left'] = linkBox.left + 0.5 * (linkBox.width - tooltipBox.width)
       else
-        u.error("Unknown position option '%s'", position)
+        u.error("Unknown position option '%s'", state.position)
 
-    $tooltip.attr('up-position', position)
-    $tooltip.css(css)
+    state.$tooltip.attr('up-position', state.position)
+    state.$tooltip.css(css)
 
   createElement = (options) ->
     $element = u.$createElementFromSelector('.up-tooltip')
@@ -92,7 +114,7 @@ up.tooltip = (($) ->
     else
       $element.html(options.html)
     $element.appendTo(document.body)
-    $element
+    state.$tooltip = $element
 
   ###*
   Opens a tooltip over the given element.
@@ -100,7 +122,7 @@ up.tooltip = (($) ->
       up.tooltip.attach('.help', {
         html: 'Enter multiple words or phrases'
       });
-  
+
   @function up.tooltip.attach
   @param {Element|jQuery|String} elementOrSelector
   @param {String} [options.html]
@@ -114,33 +136,68 @@ up.tooltip = (($) ->
     A promise that will be resolved when the tooltip's opening animation has finished.
   @stable
   ###
-  attach = (linkOrSelector, options = {}) ->
-    $link = $(linkOrSelector)
-    html = u.option(options.html, $link.attr('up-tooltip-html'))
-    text = u.option(options.text, $link.attr('up-tooltip'))
-    position = u.option(options.position, $link.attr('up-position'), config.position)
-    animation = u.option(options.animation, u.castedAttr($link, 'up-animation'), config.openAnimation)
-    animateOptions = up.motion.animateOptions(options, $link)
-    close()
-    $tooltip = createElement(text: text, html: html)
-    setPosition($link, $tooltip, position)
-    up.animate($tooltip, animation, animateOptions)
+  attachAsap = (elementOrSelector, options = {}) ->
+    curriedAttachNow = -> attachNow(elementOrSelector, options)
+    if isOpen()
+      chain.asap(closeNow, curriedAttachNow)
+    else
+      chain.asap(curriedAttachNow)
+    chain.promise()
+
+  attachNow = (elementOrSelector, options) ->
+    $anchor = $(elementOrSelector)
+    options = u.options(options)
+    html = u.option(options.html, $anchor.attr('up-tooltip-html'))
+    text = u.option(options.text, $anchor.attr('up-tooltip'))
+    position = u.option(options.position, $anchor.attr('up-position'), config.position)
+    animation = u.option(options.animation, u.castedAttr($anchor, 'up-animation'), config.openAnimation)
+    animateOptions = up.motion.animateOptions(options, $anchor, duration: config.openDuration, easing: config.openEasing)
+
+    state.phase = 'opening'
+    state.$anchor = $anchor
+    createElement(text: text, html: html)
+    state.position = position
+    align()
+    up.animate(state.$tooltip, animation, animateOptions).then ->
+      state.phase = 'opened'
 
   ###*
   Closes a currently shown tooltip.
   Does nothing if no tooltip is currently shown.
-  
+
   @function up.tooltip.close
   @param {Object} options
     See options for [`up.animate`](/up.animate).
+  @return {Promise}
+    A promise for the end of the closing animation.
   @stable
   ###
-  close = (options) ->
-    $tooltip = $('.up-tooltip')
-    if $tooltip.length
-      options = u.options(options, animation: config.closeAnimation)
-      options = u.merge(options, up.motion.animateOptions(options))
-      up.destroy($tooltip, options)
+  closeAsap = (options) ->
+    if isOpen()
+      chain.asap -> closeNow(options)
+    chain.promise()
+
+  closeNow = (options) ->
+    unless isOpen() # this can happen when a request fails and the chain proceeds to the next task
+      return u.resolvedPromise()
+
+    options = u.options(options, animation: config.closeAnimation)
+    animateOptions = up.motion.animateOptions(options, duration: config.closeDuration, easing: config.closeEasing)
+    u.extend(options, animateOptions)
+    state.phase = 'closing'
+    up.destroy(state.$tooltip, options).then ->
+      state.phase = 'closed'
+      state.$tooltip = null
+      state.$anchor = null
+
+  ###*
+  Returns whether a tooltip is currently showing.
+
+  @function up.tooltip.isOpen
+  @stable
+  ###
+  isOpen = ->
+    state.phase == 'opening' || state.phase == 'opened'
 
   ###*
   Displays a tooltip with text content when hovering the mouse over this element:
@@ -171,30 +228,28 @@ up.tooltip = (($) ->
   @selector [up-tooltip-html]
   @stable
   ###
-  up.compiler('[up-tooltip], [up-tooltip-html]', ($link) ->
+  up.compiler('[up-tooltip], [up-tooltip-html]', ($opener) ->
     # Don't register these events on document since *every*
     # mouse move interaction  bubbles up to the document. 
-    $link.on('mouseenter', -> attach($link))
-    $link.on('mouseleave', -> close())
+    $opener.on('mouseenter', -> attachAsap($opener))
+    $opener.on('mouseleave', -> closeAsap())
   )
 
   # Close the tooltip when someone clicks anywhere.
   up.on('click', 'body', (event, $body) ->
-    close()
+    closeAsap()
   )
 
   # The framework is reset between tests, so also close
   # a currently open tooltip.
-  up.on 'up:framework:reset', close
+  up.on 'up:framework:reset', reset
 
   # Close the tooltip when the user presses ESC.
-  up.bus.onEscape(-> close())
-
-  # The framework is reset between tests
-  up.on 'up:framework:reset', reset
+  up.bus.onEscape(-> closeAsap())
 
-  attach: attach
-  close: close
-  open: -> u.error('up.tooltip.open no longer exists. Use up.tooltip.attach instead.')
+  config: config
+  attach: attachAsap
+  isOpen: isOpen
+  close: closeAsap
 
 )(jQuery)