unpoly-rails 0.24.1 → 0.25.0

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

@@ -6,7 +6,7 @@ Instead of [linking to a page fragment](/up.link), you can choose
 to show a fragment in a modal dialog. The existing page will remain
 open in the background and reappear once the modal is closed.
 
-To open a modal, add an [`up-modal` attribute](/a-up-modal) to a link,
+To open a modal, add an [`up-modal` attribute](/up-modal) to a link,
 or call the Javascript functions [`up.modal.follow`](/up.modal.follow)
 and [`up.modal.visit`](/up.modal.visit).
   
@@ -46,7 +46,7 @@ configure Unpoly to [use a different HTML structure](/up.modal.config).
 \#\#\#\# Closing behavior
 
 By default the dialog automatically closes
-*whenever a page fragment behind the dialog is updated*.
+*when a link inside a modal changes a fragment behind the modal*.
 This is useful to have the dialog interact with the page that
 opened it, e.g. by updating parts of a larger form or by signing in a user
 and revealing additional information.
@@ -109,6 +109,9 @@ up.modal = (($) ->
     The timing function controlling the acceleration of the opening animation.
   @param {String} [config.closeEasing]
     The timing function controlling the acceleration of the closing animation.
+  @param {Boolean} [options.sticky=false]
+    If set to `true`, the modal remains
+    open even it changes the page in the background.
   @stable
   ###
   config = u.config
@@ -119,13 +122,14 @@ up.modal = (($) ->
     history: true
     openAnimation: 'fade-in'
     closeAnimation: 'fade-out'
-    closeDuration: null
-    closeEasing: null
     openDuration: null
+    closeDuration: null
     openEasing: null
+    closeEasing: null
     backdropOpenAnimation: 'fade-in'
     backdropCloseAnimation: 'fade-out'
     closeLabel: '×'
+    flavors: { default: {} }
 
     template: (config) ->
       """
@@ -133,8 +137,8 @@ up.modal = (($) ->
         <div class="up-modal-backdrop"></div>
         <div class="up-modal-viewport">
           <div class="up-modal-dialog">
-            <div class="up-modal-close" up-close>#{config.closeLabel}</div>
             <div class="up-modal-content"></div>
+            <div class="up-modal-close" up-close>#{flavorDefault('closeLabel')}</div>
           </div>
         </div>
       </div>
@@ -151,6 +155,8 @@ up.modal = (($) ->
   ###
   currentUrl = undefined
 
+  currentFlavor = undefined
+
   ###*
   Returns the URL of the page behind the modal overlay.
 
@@ -165,10 +171,11 @@ up.modal = (($) ->
     # Destroy the modal container regardless whether it's currently in a closing animation
     close(animation: false)
     currentUrl = undefined
+    currentFlavor = undefined
     config.reset()
 
   templateHtml = ->
-    template = config.template
+    template = flavorDefault('template')
     if u.isFunction(template)
       template(config)
     else
@@ -180,20 +187,27 @@ up.modal = (($) ->
     $modal.removeAttr('up-covered-title')
 
   createFrame = (target, options) ->
-    $modal = $(templateHtml())
-    $modal.attr('up-sticky', '') if options.sticky
-    $modal.attr('up-covered-url', up.browser.url())
-    $modal.attr('up-covered-title', document.title)
-    $dialog = $modal.find('.up-modal-dialog')
-    $dialog.css('width', options.width) if u.isPresent(options.width)
-    $dialog.css('max-width', options.maxWidth) if u.isPresent(options.maxWidth)
-    $dialog.css('height', options.height) if u.isPresent(options.height)
-    $content = $modal.find('.up-modal-content')
-    # Create an empty element that will match the
-    # selector that is being replaced.
-    u.$createPlaceholder(target, $content)
-    $modal.appendTo(document.body)
-    $modal
+    promise = u.resolvedPromise()
+    if isOpen()
+      promise = promise.then -> close()
+    promise = promise.then ->
+      currentFlavor = options.flavor
+      $modal = $(templateHtml())
+      $modal.attr('up-flavor', currentFlavor)
+      $modal.attr('up-sticky', '') if options.sticky
+      $modal.attr('up-covered-url', up.browser.url())
+      $modal.attr('up-covered-title', document.title)
+      $dialog = $modal.find('.up-modal-dialog')
+      $dialog.css('width', options.width) if u.isPresent(options.width)
+      $dialog.css('max-width', options.maxWidth) if u.isPresent(options.maxWidth)
+      $dialog.css('height', options.height) if u.isPresent(options.height)
+      $content = $modal.find('.up-modal-content')
+      # Create an empty element that will match the
+      # selector that is being replaced.
+      u.$createPlaceholder(target, $content)
+      $modal.appendTo(document.body)
+    return promise
+
   unshifters = []
 
   # Gives `<body>` a right padding in the width of a scrollbar.
@@ -204,32 +218,35 @@ up.modal = (($) ->
   # modal overlay, which has its own scroll bar.
   # This is screwed up, but Bootstrap does the same.
   shiftElements = ->
-    if unshifters.length
-      u.error('Tried to call shiftElements multiple times %o', unshifters.length)
-    $('.up-modal').addClass('up-modal-ready')
-    scrollbarWidth = u.scrollbarWidth()
-    bodyRightPadding = parseInt($('body').css('padding-right'))
-    bodyRightShift = scrollbarWidth + bodyRightPadding
-    unshiftBody = u.temporaryCss($('body'),
-      'padding-right': "#{bodyRightShift}px",
-      'overflow-y': 'hidden'
-    )
-    unshifters.push(unshiftBody)
-    up.layout.anchoredRight().each ->
-      $element = $(this)
-      elementRight = parseInt($element.css('right'))
-      elementRightShift = scrollbarWidth + elementRight
-      unshifter = u.temporaryCss($element, 'right': elementRightShift)
-      unshifters.push(unshifter)
+    return if unshifters.length > 0
+
+    if u.documentHasVerticalScrollbar()
+      $body = $('body')
+      scrollbarWidth = u.scrollbarWidth()
+      bodyRightPadding = parseInt($body.css('padding-right'))
+      bodyRightShift = scrollbarWidth + bodyRightPadding
+      unshiftBody = u.temporaryCss($body,
+        'padding-right': "#{bodyRightShift}px",
+        'overflow-y': 'hidden'
+      )
+      unshifters.push(unshiftBody)
+      up.layout.anchoredRight().each ->
+        $element = $(this)
+        elementRight = parseInt($element.css('right'))
+        elementRightShift = scrollbarWidth + elementRight
+        unshifter = u.temporaryCss($element, 'right': elementRightShift)
+        unshifters.push(unshifter)
+
 
   # Reverts the effects of `shiftElements`.
   unshiftElements = ->
-    $('.up-modal').removeClass('up-modal-ready')
     unshifter() while unshifter = unshifters.pop()
 
   ###*
   Returns whether a modal is currently open.
 
+  This also returns `true` if the modal is in an opening or closing animation.
+
   @function up.modal.isOpen
   @stable
   ###
@@ -259,7 +276,7 @@ up.modal = (($) ->
     By [default](/up.modal.config) the dialog will grow to fit its contents.
   @param {Boolean} [options.sticky=false]
     If set to `true`, the modal remains
-    open even if the page changes in the background.
+    open even it changes the page in the background.
   @param {String} [options.confirm]
     A message that will be displayed in a cancelable confirmation dialog
     before the modal is being opened.
@@ -353,42 +370,38 @@ up.modal = (($) ->
     options = u.options(options)
     $link = u.option(u.pluckKey(options, '$link'), u.nullJQuery())
     url = u.option(u.pluckKey(options, 'url'), $link.attr('up-href'), $link.attr('href'))
-    html = u.pluckKey(options, 'html')
+    html = u.option(u.pluckKey(options, 'html'))
     target = u.option(u.pluckKey(options, 'target'), $link.attr('up-modal'), 'body')
-    options.width = u.option(options.width, $link.attr('up-width'), config.width)
-    options.maxWidth = u.option(options.maxWidth, $link.attr('up-max-width'), config.maxWidth)
-    options.height = u.option(options.height, $link.attr('up-height'), config.height)
-    options.animation = u.option(options.animation, $link.attr('up-animation'), config.openAnimation)
-    options.backdropAnimation = u.option(options.backdropAnimation, $link.attr('up-backdrop-animation'), config.backdropOpenAnimation)
-    options.sticky = u.option(options.sticky, u.castedAttr($link, 'up-sticky'))
+    options.flavor = u.option(options.flavor, $link.attr('up-flavor'))
+    options.width = u.option(options.width, $link.attr('up-width'), flavorDefault('width', options.flavor))
+    options.maxWidth = u.option(options.maxWidth, $link.attr('up-max-width'), flavorDefault('maxWidth', options.flavor))
+    options.height = u.option(options.height, $link.attr('up-height'), flavorDefault('height'))
+    options.animation = u.option(options.animation, $link.attr('up-animation'), flavorDefault('openAnimation', options.flavor))
+    options.backdropAnimation = u.option(options.backdropAnimation, $link.attr('up-backdrop-animation'), flavorDefault('backdropOpenAnimation', options.flavor))
+    options.sticky = u.option(options.sticky, u.castedAttr($link, 'up-sticky'), flavorDefault('sticky', options.flavor))
     options.confirm = u.option(options.confirm, $link.attr('up-confirm'))
-    animateOptions = up.motion.animateOptions(options, $link, { duration: config.openDuration, easing: config.openEasing })
+    animateOptions = up.motion.animateOptions(options, $link, duration: flavorDefault('openDuration', options.flavor), easing: flavorDefault('openEasing', options.flavor))
 
     # Although we usually fall back to full page loads if a browser doesn't support pushState,
     # in the case of modals we assume that the developer would rather see a dialog
     # without an URL update.
-    options.history = u.option(options.history, u.castedAttr($link, 'up-history'), config.history)
+    options.history = u.option(options.history, u.castedAttr($link, 'up-history'), flavorDefault('history', options.flavor))
     options.history = false unless up.browser.canPushState()
 
     up.browser.confirm(options).then ->
       if up.bus.nobodyPrevents('up:modal:open', url: url, message: 'Opening modal')
-        wasOpen = isOpen()
-        close(animation: false) if wasOpen
         options.beforeSwap = -> createFrame(target, options)
         extractOptions = u.merge(options, animation: false)
-        if url
-          promise = up.replace(target, url, extractOptions)
-        else
+        if html
           promise = up.extract(target, html, extractOptions)
-        # If we're not animating the dialog, don't animate the backdrop either
-        unless wasOpen || up.motion.isNone(options.animation)
-          promise = promise.then ->
-            $.when(
-              up.animate($('.up-modal-backdrop'), options.backdropAnimation, animateOptions),
-              up.animate($('.up-modal-viewport'), options.animation, animateOptions)
-            )
+        else
+          promise = up.replace(target, url, extractOptions)
         promise = promise.then ->
           shiftElements()
+
+        promise = promise.then -> animate(options.animation, options.backdropAnimation, animateOptions)
+
+        promise = promise.then ->
           up.emit('up:modal:opened', message: 'Modal opened')
         promise
       else
@@ -432,18 +445,15 @@ up.modal = (($) ->
     $modal = $('.up-modal')
     if $modal.length
       if up.bus.nobodyPrevents('up:modal:close', $element: $modal, message: 'Closing modal')
-        unshiftElements()
-        viewportCloseAnimation = u.option(options.animation, config.closeAnimation)
-        backdropCloseAnimation = u.option(options.backdropAnimation, config.backdropCloseAnimation)
-        animateOptions = up.motion.animateOptions(options, { duration: config.closeDuration, easing: config.closeEasing })
-        if up.motion.isNone(viewportCloseAnimation)
-          # If we're not animating the dialog, don't animate the backdrop either
-          promise = u.resolvedPromise()
-        else
-          promise = $.when(
-            up.animate($('.up-modal-viewport'), viewportCloseAnimation, animateOptions),
-            up.animate($('.up-modal-backdrop'), backdropCloseAnimation, animateOptions)
-          )
+        viewportCloseAnimation = u.option(options.animation, flavorDefault('closeAnimation'))
+        backdropCloseAnimation = u.option(options.backdropAnimation, flavorDefault('backdropCloseAnimation'))
+        animateOptions = up.motion.animateOptions(options, duration: flavorDefault('closeDuration'), easing: flavorDefault('closeEasing'))
+
+        promise = u.resolvedPromise()
+
+        promise = promise.then ->
+          animate(viewportCloseAnimation, backdropCloseAnimation, animateOptions)
+
         promise = promise.then ->
           destroyOptions = u.options(
             u.except(options, 'animation', 'duration', 'easing', 'delay'),
@@ -454,16 +464,37 @@ up.modal = (($) ->
           # since up.navigation listens to up:fragment:destroyed and then
           # re-assigns .up-current classes.
           currentUrl = undefined
-          up.destroy($modal, destroyOptions)
+
+          return up.destroy($modal, destroyOptions)
+
+        promise = promise.then ->
+          unshiftElements()
+          currentFlavor = undefined
           up.emit('up:modal:closed', message: 'Modal closed')
+
         promise
       else
-        # Although someone prevented the destruction,
-        # keep a uniform API for callers by returning
-        # a Deferred that will never be resolved.
-        u.unresolvableDeferred()
+        # 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()
+
+  markAsAnimating = (state = true) ->
+    $('.up-modal').toggleClass('up-modal-animating', state)
+
+  animate = (viewportAnimation, backdropAnimation, animateOptions) ->
+    # If we're not animating the dialog, don't animate the backdrop either
+    if up.motion.isNone(viewportAnimation)
+      u.resolvedPromise()
     else
-      u.resolvedDeferred()
+      markAsAnimating()
+      promise = $.when(
+        up.animate($('.up-modal-viewport'), viewportAnimation, animateOptions),
+        up.animate($('.up-modal-backdrop'), backdropAnimation, animateOptions)
+      )
+      promise = promise.then -> markAsAnimating(false)
+      promise
 
   ###*
   This event is [emitted](/up.emit) when a modal dialog
@@ -500,6 +531,66 @@ up.modal = (($) ->
     $element = $(elementOrSelector)
     $element.closest('.up-modal').length > 0
 
+  ###*
+  Register a new modal variant with its own default configuration, CSS or HTML template.
+
+  \#\#\#\# Example
+
+  Let's implement a drawer that slides in from the right:
+
+      up.modal.flavor('drawer', {
+        openAnimation: 'move-from-right',
+        closeAnimation: 'move-to-right',
+        maxWidth: 400
+      }
+
+  Modals with that flavor will have a container `<div class='up-modal' up-flavor='drawer'>...</div>`.
+  We can target the `up-flavor` attribute override the default dialog styles:
+
+      .up-modal[up-flavor='drawer'] {
+
+        // Align drawer on the right
+        .up-modal-viewport { text-align: right; }
+
+        // Remove margin so the drawer starts at the screen edge
+        .up-modal-dialog { margin: 0; }
+
+        // Stretch drawer background to full window height
+        .up-modal-content { min-height: 100vh; }
+      }
+
+  @function up.modal.flavor
+  @param {String} name
+    The name of the new flavor.
+  @param {Object} [overrideConfig]
+    An object whose properties override the defaults in [`/up.modal.config`](/up.modal.config).
+  @experimental
+  ###
+  flavor = (name, overrideConfig = {}) ->
+    u.extend(flavorOverrides(name), overrideConfig)
+
+  ###*
+  Returns a config object for the given flavor.
+  Properties in that config should be preferred to the defaults in
+  [`/up.modal.config`](/up.modal.config).
+
+  @function flavorOverrides
+  @internal
+  ###
+  flavorOverrides = (flavor) ->
+    config.flavors[flavor] ||= {}
+
+  ###*
+  Returns the config option for the current flavor.
+
+  @function flavorDefault
+  @internal
+  ###
+  flavorDefault = (key, flavorName = currentFlavor) ->
+    value = flavorOverrides(flavorName)[key] if flavorName
+    value = config[key] if u.isMissing(value)
+    value
+
   ###*
   Clicking this link will load the destination via AJAX and open
   the given selector in a modal dialog.
@@ -513,7 +604,7 @@ up.modal = (($) ->
   and place the matching `.blog-list` tag will be placed in
   a modal dialog.
 
-  @selector a[up-modal]
+  @selector [up-modal]
   @param {String} [up-confirm]
     A message that will be displayed in a cancelable confirmation dialog
     before the modal is opened.
@@ -527,11 +618,12 @@ up.modal = (($) ->
   @param {String} [up-height]
     The width of the dialog in pixels.
     By [default](/up.modal.config) the dialog will grow to fit its contents.
-  @param [up-width]
+  @param {String} [up-width]
     The width of the dialog in pixels.
     By [default](/up.modal.config) the dialog will grow to fit its contents.
-  @param [up-history="true"]
+  @param {String} [up-history="true"]
     Whether to add a browser history entry for the modal's source URL.
+
   @stable
   ###
   up.link.onAction '[up-modal]', ($link) ->
@@ -594,5 +686,6 @@ up.modal = (($) ->
   contains: contains
   source: -> up.error('up.modal.source no longer exists. Please use up.popup.url instead.')
   isOpen: isOpen
+  flavor: flavor
 
 )(jQuery)

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

@@ -150,7 +150,9 @@ up.navigation = (($) ->
     $element = findClickArea(elementOrSelector, options)
     $element.removeClass(CLASS_ACTIVE)
 
-  withActiveMark = (elementOrSelector, options, block) ->
+  withActiveMark = (elementOrSelector, args...) ->
+    block = args.pop()
+    options = u.options(args.pop())
     $element = $(elementOrSelector)
     markActive($element, options)
     promise = block()

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

@@ -5,7 +5,7 @@ Pop-up overlays
 Instead of [linking to a page fragment](/up.link), you can choose
 to show a fragment in a popup overlay that rolls down from an anchoring element.
 
-To open a popup, add an [`up-popup` attribute](/a-up-popup) to a link,
+To open a popup, add an [`up-popup` attribute](/up-popup) to a link,
 or call the Javascript function [`up.popup.attach`](/up.popup.attach).
 
 For modal dialogs see [up.modal](/up.modal) instead.
@@ -31,7 +31,7 @@ By default the popup uses the following DOM structure:
 The popup closes when the user clicks anywhere outside the popup area.
 
 By default the popup also closes
-*whenever a page fragment behind the popup is updated*.
+*when a link within the popup changes a fragment behind the popup*.
 This is useful to have the popup interact with the page that
 opened it, e.g. by updating parts of a larger form or by signing in a user
 and revealing additional information.
@@ -71,21 +71,36 @@ up.popup = (($) ->
   Sets default options for future popups.
 
   @property up.popup.config
-  @param {String} [config.openAnimation='fade-in']
-    The animation used to open a popup.
-  @param {String} [config.closeAnimation='fade-out']
-    The animation used to close a popup.
   @param {String} [config.position='bottom-right']
     Defines where the popup is attached to the opening element.
 
     Valid values are `bottom-right`, `bottom-left`, `top-right` and `top-left`.
   @param {String} [config.history=false]
     Whether opening a popup will add a browser history entry.
+  @param {String} [config.openAnimation='fade-in']
+    The animation used to open a popup.
+  @param {String} [config.closeAnimation='fade-out']
+    The animation used to close a popup.
+  @param {String} [config.openDuration]
+    The duration of the open animation (in milliseconds).
+  @param {String} [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.
+  @param {Boolean} [options.sticky=false]
+    If set to `true`, the popup remains
+    open even it changes the page in the background.
   @stable
   ###
   config = u.config
     openAnimation: 'fade-in'
     closeAnimation: 'fade-out'
+    openDuration: null
+    closeDuration: null
+    openEasing: null
+    closeEasing: null
     position: 'bottom-right'
     history: false
 
@@ -147,15 +162,20 @@ up.popup = (($) ->
     $popup.removeAttr('up-covered-title')
     
   createFrame = (target, options) ->
-    $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
+    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
 
   ###*
   Returns whether popup modal is currently open.
@@ -174,6 +194,8 @@ up.popup = (($) ->
   @function up.popup.attach
   @param {Element|jQuery|String} elementOrSelector
   @param {String} [options.url]
+  @param {String} [options.target]
+    A CSS selector that will be extracted from the response and placed into the popup.
   @param {String} [options.position='bottom-right']
     Defines where the popup is attached to the opening element.
 
@@ -203,33 +225,35 @@ up.popup = (($) ->
     $link.length or u.error('Cannot attach popup to non-existing element %o', linkOrSelector)
     
     options = u.options(options)
-    url = u.option(options.url, $link.attr('href'))
-    target = u.option(options.target, $link.attr('up-popup'), 'body')
+    url = u.option(u.pluckKey(options, 'url'), $link.attr('up-href'), $link.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'))
+    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'))
-    animateOptions = up.motion.animateOptions(options, $link)
+    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')
-        wasOpen = isOpen()
-        close(animation: false) if wasOpen
         options.beforeSwap = -> createFrame(target, options)
-        promise = up.replace(target, url, u.merge(options, animation: false))
+        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)
-        unless wasOpen
-          promise = promise.then ->
-            up.animate($('.up-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')
         promise
       else
         # Although someone prevented the destruction, keep a uniform API for
-        # callers by returning a Deferred that will never be resolved.
-        u.unresolvableDeferred()
+        # 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.
@@ -257,7 +281,7 @@ up.popup = (($) ->
   @function up.popup.close
   @param {Object} options
     See options for [`up.animate`](/up.animate).
-  @return {Deferred}
+  @return {Promise}
     A promise that will be resolved once the modal's close
     animation has finished.
   @stable
@@ -271,17 +295,18 @@ up.popup = (($) ->
           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
-        deferred = up.destroy($popup, options)
-        deferred.then -> up.emit('up:popup:closed', message: 'Popup closed')
-        deferred
+        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 Deferred that will never be resolved.
-        u.unresolvableDeferred()
+        # Although someone prevented the destruction, keep a uniform API
+        # for callers by returning a promise that will never be resolved.
+        u.unresolvablePromise()
     else
-      u.resolvedDeferred()
+      u.resolvedPromise()
 
   ###*
   This event is [emitted](/up.emit) when a popup dialog
@@ -329,7 +354,7 @@ up.popup = (($) ->
       <a href="/decks" up-popup=".deck_list">Switch deck</a>
       <a href="/settings" up-popup=".options" up-sticky>Settings</a>
 
-  @selector a[up-popup]
+  @selector [up-popup]
   @param [up-position]
     Defines where the popup is attached to the opening element.
 

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

@@ -394,6 +394,7 @@ up.proxy = (($) ->
       promise = load(entry.request)
       promise.done (args...) -> entry.deferred.resolve(args...)
       promise.fail (args...) -> entry.deferred.reject(args...)
+      return
 
   ###*
   Makes the proxy assume that `newRequest` has the same response as the

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

@@ -255,6 +255,10 @@ up.syntax = (($) ->
   buildCompiler = (selector, args...) ->
     callback = args.pop()
     options = u.options(args[0], priority: 0)
+    if options.priority == 'first'
+      options.priority = Number.POSITIVE_INFINITY
+    else if options.priority == 'last'
+      options.priority = Number.NEGATIVE_INFINITY
     selector: selector
     callback: callback
     priority: options.priority
@@ -266,7 +270,7 @@ up.syntax = (($) ->
     return unless up.browser.isSupported()
     newCompiler = buildCompiler(args...)
     index = 0
-    while (oldCompiler = queue[index]) && (oldCompiler.priority <= newCompiler.priority)
+    while (oldCompiler = queue[index]) && (oldCompiler.priority >= newCompiler.priority)
       index += 1
     queue.splice(index, 0, newCompiler)
 
@@ -322,6 +326,7 @@ up.syntax = (($) ->
     u.findWithSelf($fragment, ".#{DESTROYABLE_CLASS}").each ->
       $element = $(this)
       destroyer = $element.data(DESTROYER_KEY)
+      $element.removeClass(DESTROYABLE_CLASS)
       destroyer()
 
   ###*
@@ -407,8 +412,9 @@ up.syntax = (($) ->
   @internal
   ###
   snapshot = ->
-    for compiler in compilers
-      compiler.isDefault = true
+    setDefault = (compiler) -> compiler.isDefault = true
+    u.each(compilers, setDefault)
+    u.each(macros, setDefault)
 
   ###*
   Resets the list of registered compiler directives to the
@@ -417,7 +423,9 @@ up.syntax = (($) ->
   @internal
   ###
   reset = ->
-    compilers = u.select compilers, (compiler) -> compiler.isDefault
+    isDefault = (compiler) -> compiler.isDefault
+    compilers = u.select(compilers, isDefault)
+    macros = u.select(macros, isDefault)
 
   up.on 'up:framework:boot', snapshot
   up.on 'up:framework:reset', reset