unpoly-rails 0.57.0 → 0.60.0

data/lib/assets/javascripts/unpoly/namespace.coffee.erb

@@ -3,8 +3,3 @@
 ###
 window.up =
   version: <%= Unpoly::Rails::VERSION.to_json %>
-
-  deprecateRenamedModule: (oldName, newName) ->
-    Object.defineProperty? up, oldName, get: ->
-      up.warn("Deprecated: up.#{oldName} has been renamed to up.#{newName}")
-      up[newName]

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

@@ -36,27 +36,36 @@ Popups have a minimal default design:
 The easiest way to change how the popup looks is to override the
 [default CSS styles](https://github.com/unpoly/unpoly/blob/master/lib/assets/stylesheets/unpoly/popup.sass).
 
-The HTML of a popup element is simply this:
+The HTML of a popup element looks like this:
 
     <div class="up-popup">
-      ...
+      <div class="up-popup-content">
+        Fragment content here
+      </div>
     </div>
 
+The popup element is appended to the [viewport](/up.viewport) of the anchor element.
 
-@class up.popup
+@module up.popup
 ###
-up.popup = (($) ->
+up.popup = do ->
 
   u = up.util
+  e = up.element
 
   ###**
   Sets default options for future popups.
 
   @property up.popup.config
-  @param {string} [config.position='bottom-right']
-    Defines where the popup is attached to the opening element.
+  @param {string} [config.position='bottom']
+    Defines on which side of the opening element the popup is attached.
 
-    Valid values are `'bottom-right'`, `'bottom-left'`, `'top-right'` and `'top-left'`.
+    Valid values are `'top'`, `'right'`, `'bottom'` and `'left'`.
+  @param {string} [config.align='left']
+    Defines the alignment of the popup along its side.
+
+    When the popup's `{ position }` is `'top'` or `'bottom'`, valid `{ align }` values are `'left'`, `center'` and `'right'`.
+    When the popup's `{ position }` is `'left'` or `'right'`, valid `{ align }` values are `top'`, `center'` and `bottom'`.
   @param {string} [config.history=false]
     Whether opening a popup will add a browser history entry.
   @param {string} [config.openAnimation='fade-in']
@@ -76,14 +85,15 @@ up.popup = (($) ->
     open even it changes the page in the background.
   @stable
   ###
-  config = u.config
+  config = new up.Config
     openAnimation: 'fade-in'
     closeAnimation: 'fade-out'
     openDuration: 150
     closeDuration: 100
     openEasing: null
     closeEasing: null
-    position: 'bottom-right'
+    position: 'bottom'
+    align: 'left'
     history: false
 
   ###**
@@ -105,70 +115,56 @@ up.popup = (($) ->
   @experimental
   ###
 
-  state = u.config
+  state = new up.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
+    anchor: null         # the element to which the tooltip is anchored
+    popup: null          # the .up-popup element
+    content: null        # the .up-popup-content element
+    tether: null         # the up.Tether instance controlling the popup's position
     position: null       # the position of the popup container element relative to its anchor
+    align: null
     sticky: null
     url: null
     coveredUrl: null
     coveredTitle: null
 
-  chain = new u.DivertibleChain()
+  chain = new up.DivertibleChain()
 
   reset = ->
-    state.$popup?.remove()
+    state.tether?.destroy()
     state.reset()
     chain.reset()
     config.reset()
 
-  align = ->
-    style = {}
-
-    popupBox = u.measure(state.$popup)
-
-    if u.isFixed(state.$anchor)
-      linkBox = state.$anchor.get(0).getBoundingClientRect()
-      style.position = 'fixed'
-    else
-      linkBox = u.measure(state.$anchor)
-
-    switch state.position
-      when 'bottom-right' # anchored to bottom-right of link, opens towards bottom-left
-        style.top = linkBox.top + linkBox.height
-        style.left = linkBox.left + linkBox.width - popupBox.width
-      when 'bottom-left' # anchored to bottom-left of link, opens towards bottom-right
-        style.top = linkBox.top + linkBox.height
-        style.left = linkBox.left
-      when 'top-right' # anchored to top-right of link, opens to top-left
-        style.top = linkBox.top - popupBox.height
-        style.left = linkBox.left + linkBox.width - popupBox.width
-      when 'top-left' # anchored to top-left of link, opens to top-right
-        style.top = linkBox.top - popupBox.height
-        style.left = linkBox.left
-      else
-        up.fail("Unknown position option '%s'", state.position)
-
-    state.$popup.attr('up-position', state.position)
-
-    u.writeInlineStyle(state.$popup, style)
-
   discardHistory = ->
     state.coveredTitle = null
     state.coveredUrl = null
 
-  createHiddenFrame = (target) ->
-    $popup = u.$createElementFromSelector('.up-popup')
+  createHiddenFrame = (targetSelector) ->
+    state.tether = new up.Tether(u.only(state, 'anchor', 'position', 'align'))
+    state.popup = e.affix(state.tether.root, '.up-popup', 'up-position': state.position, 'up-align': state.align)
+    state.content = e.affix(state.popup, '.up-popup-content')
+
     # Create an empty element that will match the
     # selector that is being replaced.
-    u.$createPlaceholder(target, $popup)
-    $popup.hide()
-    $popup.appendTo(document.body)
-    state.$popup = $popup
+    up.fragment.createPlaceholder(targetSelector, state.content)
+    e.hide(state.popup)
 
   unveilFrame = ->
-    state.$popup.show()
+    e.show(state.popup)
+
+  ###**
+  Forces the popup to update its position relative to its anchor element.
+
+  Unpoly automatically keep popups aligned when
+  the document is resized or scrolled. Complex layout changes may make
+  it necessary to call this function.
+
+  @function up.popup.sync
+  @experimental
+  ###
+  syncPosition = ->
+    state.tether?.sync()
 
   ###**
   Returns whether popup modal is currently open.
@@ -196,10 +192,15 @@ up.popup = (($) ->
     Will be ignored if `options.html` is given.
   @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.
+  @param {string} [options.position='bottom']
+    Defines on which side of the opening element the popup is attached.
+
+    Valid values are `'top'`, `'right'`, `'bottom'` and `'left'`.
+  @param {string} [options.align='left']
+    Defines the alignment of the popup along its side.
 
-    Valid values are `'bottom-right'`, `'bottom-left'`, `'top-right'` and `'top-left'`.
+    When the popup's `{ position }` is `'top'` or `'bottom'`, valid `{ align }` values are `'left'`, `center'` and `'right'`.
+    When the popup's `{ position }` is `'left'` or `'right'`, valid `{ align }` values are `top'`, `center'` and `bottom'`.
   @param {string} [options.html]
     A string of HTML from which to extract the popup contents. No network request will be made.
   @param {string} [options.confirm]
@@ -228,39 +229,40 @@ up.popup = (($) ->
     chain.asap closeNow, (-> attachNow(elementOrSelector, options))
 
   attachNow = (elementOrSelector, options) ->
-    $anchor = $(elementOrSelector)
-    $anchor.length or up.fail('Cannot attach popup to non-existing element %o', elementOrSelector)
+    anchor = e.get(elementOrSelector)
 
-    options = u.options(options)
-    url = u.option(u.pluckKey(options, 'url'), $anchor.attr('up-href'), $anchor.attr('href'))
-    html = u.option(u.pluckKey(options, 'html'))
+    options ?= {}
+    url = u.pluckKey(options, 'url') ? anchor.getAttribute('up-href') ? anchor.getAttribute('href')
+    html = u.pluckKey(options, 'html')
     url or html or up.fail('up.popup.attach() requires either an { url } or { html } option')
-    target = u.option(u.pluckKey(options, 'target'), $anchor.attr('up-popup')) or up.fail('No target selector given for [up-popup]')
-    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)
+    target = u.pluckKey(options, 'target') ? anchor.getAttribute('up-popup') or up.fail('No target selector given for [up-popup]')
+    position = options.position ? anchor.getAttribute('up-position') ? config.position
+    align = options.align ? anchor.getAttribute('up-align') ? config.align
+    options.animation ?= anchor.getAttribute('up-animation') ? config.openAnimation
+    options.sticky ?= e.booleanAttr(anchor, 'up-sticky') ? config.sticky
+    options.history = if up.browser.canPushState() then (options.history ? e.booleanOrStringAttr(anchor, 'up-history') ? config.history) else false
+    options.confirm ?= anchor.getAttribute('up-confirm')
+    options.method = up.link.followMethod(anchor, options)
     options.layer = 'popup'
-    options.failTarget = u.option(options.failTarget, $anchor.attr('up-fail-target'))
-    options.failLayer = u.option(options.failLayer, $anchor.attr('up-fail-layer'), 'auto')
+    options.failTarget ?= anchor.getAttribute('up-fail-target')
+    options.failLayer ?= anchor.getAttribute('up-fail-layer')
 
     # This will prevent up.replace() from looking for fallbacks, since
     # it knows the target will always exist.
     options.provideTarget = -> createHiddenFrame(target)
 
-    animateOptions = up.motion.animateOptions(options, $anchor, duration: config.openDuration, easing: config.openEasing)
+    animateOptions = up.motion.animateOptions(options, anchor, duration: config.openDuration, easing: config.openEasing)
     extractOptions = u.merge(options, animation: false)
 
     if options.preload && url
       return up.replace(target, url, options)
 
     up.browser.whenConfirmed(options).then ->
-      up.bus.whenEmitted('up:popup:open', url: url, message: 'Opening popup').then ->
+      up.event.whenEmitted('up:popup:open', url: url, anchor: anchor, log: 'Opening popup').then ->
         state.phase = 'opening'
-        state.$anchor = $anchor
+        state.anchor = anchor
         state.position = position
+        state.align = align
         if options.history
           state.coveredUrl = up.browser.url()
           state.coveredTitle = document.title
@@ -270,18 +272,20 @@ up.popup = (($) ->
         else
           promise = up.replace(target, url, extractOptions)
         promise = promise.then ->
-          align()
           unveilFrame()
-          up.animate(state.$popup, options.animation, animateOptions)
+          syncPosition()
+          up.animate(state.popup, options.animation, animateOptions)
         promise = promise.then ->
           state.phase = 'opened'
-          up.emit('up:popup:opened', message: 'Popup opened')#
+          up.emit(state.popup, 'up:popup:opened', anchor: state.anchor, log: 'Popup opened')#
         promise
 
   ###**
   This event is [emitted](/up.emit) when a popup is starting to open.
 
   @event up:popup:open
+  @param {Element} event.anchor
+    The element to which the popup will be attached.
   @param event.preventDefault()
     Event listeners may call this method to prevent the popup from opening.
   @stable
@@ -291,6 +295,8 @@ up.popup = (($) ->
   This event is [emitted](/up.emit) when a popup has finished opening.
 
   @event up:popup:opened
+  @param {Element} event.anchor
+    The element to which the popup was attached.
   @stable
   ###
 
@@ -324,37 +330,42 @@ up.popup = (($) ->
     animateOptions = up.motion.animateOptions(options, duration: config.closeDuration, easing: config.closeEasing)
     u.assign(options, animateOptions)
 
-    up.bus.whenEmitted('up:popup:close', message: 'Closing popup', $element: state.$popup).then ->
+    up.event.whenEmitted('up:popup:close', anchor: state.anchor, log: 'Closing popup').then ->
       state.phase = 'closing'
       state.url = null
       state.coveredUrl = null
       state.coveredTitle = null
 
-      up.destroy(state.$popup, options).then ->
+      up.destroy(state.popup, options).then ->
         state.phase = 'closed'
-        state.$popup = null
-        state.$anchor = null
+        state.tether.destroy()
+        state.tether = null
+        state.popup = null
+        state.content = null
+        state.anchor = null
         state.sticky = null
-        up.emit('up:popup:closed', message: 'Popup closed')
+        up.emit('up:popup:closed', anchor: state.anchor, log: 'Popup closed')
 
-  preloadNow = ($link, options) ->
+  preloadNow = (link, options) ->
     options = u.options(options)
     options.preload = true
     # Use attachNow() and not attachAsap() so (1) we don't close a currently open popup
     # and (2) our pending AJAX request does not prevent other popups from opening
-    attachNow($link, options)
+    attachNow(link, options)
 
-  toggleAsap = ($link, options) ->
-    if u.hasClass($link, 'up-current')
+  toggleAsap = (link, options) ->
+    if link.classList.contains('up-current')
       closeAsap()
     else
-      attachAsap($link, options)
+      attachAsap(link, options)
 
   ###**
   This event is [emitted](/up.emit) when a popup dialog
   is starting to [close](/up.popup.close).
 
   @event up:popup:close
+  @param {Element} event.anchor
+    The element to which the popup is attached.
   @param event.preventDefault()
     Event listeners may call this method to prevent the popup from closing.
   @stable
@@ -365,6 +376,8 @@ up.popup = (($) ->
   is done [closing](/up.popup.close).
 
   @event up:popup:closed
+  @param {Element} event.anchor
+    The element to which the popup was attached.
   @stable
   ###
       
@@ -384,8 +397,8 @@ up.popup = (($) ->
   @stable
   ###
   contains = (elementOrSelector) ->
-    $element = $(elementOrSelector)
-    $element.closest('.up-popup').length > 0
+    element = e.get(elementOrSelector)
+    !!e.closest(element, '.up-popup')
 
   ###**
   Opens this link's destination of in a popup overlay:
@@ -402,10 +415,15 @@ up.popup = (($) ->
   @param {string} up-popup
     The CSS selector that will be extracted from the response and
     displayed in a popup overlay.
-  @param [up-position]
-    Defines where the popup is attached to the opening element.
+  @param {string} [up-position]
+    Defines on which side of the opening element the popup is attached.
 
-    Valid values are `'bottom-right'`, `'bottom-left'`, `'top-right'` and `'top-left'`.
+    Valid values are `'top'`, `'right'`, `'bottom'` and `'left'`.
+  @param {string} [up-align]
+    Defines the alignment of the popup along its side.
+
+    When the popup's `{ position }` is `'top'` or `'bottom'`, valid `{ align }` values are `'left'`, `center'` and `'right'`.
+    When the popup's `{ position }` is `'left'` or `'right'`, valid `{ align }` values are `top'`, `center'` and `bottom'`.
   @param {string} [up-confirm]
     A message that will be displayed in a cancelable confirmation dialog
     before the popup is opened.
@@ -424,29 +442,29 @@ up.popup = (($) ->
   ###
   up.link.addFollowVariant '[up-popup]',
     # Don't just pass the `toggleAsap` function reference so we can stub it in tests
-    follow: ($link, options) -> toggleAsap($link, options)
-    preload: ($link, options) -> preloadNow($link, options)
+    follow: (link, options) -> toggleAsap(link, options)
+    preload: (link, options) -> preloadNow(link, options)
 
   # We close the popup when someone clicks on the document.
   # We also need to listen to up:action:consumed in case an [up-instant] link
   # was followed on mousedown.
   up.on 'click up:action:consumed', (event) ->
-    $target = $(event.target)
+    target = event.target
     # Don't close when the user clicked on a popup opener.
-    unless $target.closest('.up-popup, [up-popup]').length
+    unless e.closest(target, '.up-popup, [up-popup]')
       u.muteRejection closeAsap()
       # Do not halt the event chain here. The user is allowed to directly activate
       # a link in the background, even with a (now closing) popup open.
 
-  up.on 'up:fragment:inserted', (event, $fragment) ->
-    if contains($fragment)
-      if newSource = $fragment.attr('up-source')
+  up.on 'up:fragment:inserted', (event, fragment) ->
+    if contains(fragment)
+      if newSource = fragment.getAttribute('up-source')
         state.url = newSource
     else if event.origin && contains(event.origin)
       u.muteRejection autoclose()
 
   # Close the pop-up overlay when the user presses ESC.
-  up.bus.onEscape ->
+  up.event.onEscape ->
     u.muteRejection closeAsap()
 
   ###**
@@ -471,12 +489,12 @@ up.popup = (($) ->
   @selector .up-popup [up-close]
   @stable
   ###
-  up.on 'click', '.up-popup [up-close]', (event, $element) ->
+  up.on 'click', '.up-popup [up-close]', (event) ->
     u.muteRejection 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.
-    up.bus.consumeAction(event)
+    up.event.consumeAction(event)
 
   # When the user uses the back button we will usually restore <body> or a base container.
   # We close any open modal because it probably won't match the restored state.
@@ -494,5 +512,4 @@ up.popup = (($) ->
   config: config
   contains: contains
   isOpen: isOpen
-
-)(jQuery)
+  sync: syncPosition

data/lib/assets/javascripts/unpoly/protocol.coffee

@@ -172,11 +172,12 @@ The **simplest implementation** is to set this cookie for every request that is
 an existing cookie should be deleted.
 
 
-@class up.protocol
+@module up.protocol
 ###
-up.protocol = (($) ->
+up.protocol = do ->
 
   u = up.util
+  e = up.element
 
   ###**
   @function up.protocol.locationFromXhr
@@ -215,7 +216,7 @@ up.protocol = (($) ->
   # Remove the method cookie as soon as possible.
   # Don't wait until the first call to initialRequestMethod(),
   # which might be much later.
-  up.bus.on('up:framework:booted', initialRequestMethod)
+  up.on('up:framework:booted', initialRequestMethod)
 
   ###**
   Configures strings used in the optional [server protocol](/up.protocol).
@@ -237,7 +238,7 @@ up.protocol = (($) ->
     The name of the HTTP header that will include the
     [CSRF token](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Synchronizer_token_pattern)
     for AJAX requests.
-  @param {String|Function} [config.csrfParam]
+  @param {string|Function(): string} [config.csrfParam]
     The `name` of the hidden `<input>` used for sending a
     [CSRF token](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Synchronizer_token_pattern) when
     submitting a default, non-AJAX form. For AJAX request the token is sent as an HTTP header instead.
@@ -249,7 +250,7 @@ up.protocol = (($) ->
 
         <meta name="csrf-param" content="authenticity_token" />
 
-  @param {String|Function} [config.csrfToken]
+  @param {string|Function(): string} [config.csrfToken]
     The [CSRF token](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Synchronizer_token_pattern)
     to send for unsafe requests. The token will be sent as either a HTTP header (for AJAX requests)
     or hidden form `<input>` (for default, non-AJAX form submissions).
@@ -263,7 +264,7 @@ up.protocol = (($) ->
 
   @experimental
   ###
-  config = u.config
+  config = new up.Config
     targetHeader: 'X-Up-Target'
     failTargetHeader: 'X-Up-Fail-Target'
     locationHeader: 'X-Up-Location'
@@ -272,8 +273,8 @@ up.protocol = (($) ->
     methodHeader: 'X-Up-Method'
     methodCookie: '_up_method'
     methodParam: '_method'
-    csrfParam: -> $('meta[name="csrf-param"]').attr('content')
-    csrfToken: -> $('meta[name="csrf-token"]').attr('content')
+    csrfParam: -> e.metaContent('csrf-param')
+    csrfToken: -> e.metaContent('csrf-token')
     csrfHeader: 'X-CSRF-Token'
 
   csrfParam = ->
@@ -282,14 +283,11 @@ up.protocol = (($) ->
   csrfToken = ->
     u.evalOption(config.csrfToken)
 
-  ## Unfortunately we cannot offer reset via event without introducing cycles
-  ## in the asset load order
-  #
-  # up.on 'up:framework:reset', reset
-
   reset = ->
     config.reset()
 
+  up.on 'up:framework:reset', reset
+
   config: config
   reset: reset
   locationFromXhr: locationFromXhr
@@ -298,5 +296,3 @@ up.protocol = (($) ->
   csrfParam :csrfParam
   csrfToken: csrfToken
   initialRequestMethod: initialRequestMethod
-
-)(jQuery)