unpoly-rails 0.55.1 → 0.56.0

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

@@ -2,12 +2,13 @@
 Navigation feedback
 ===================
 
-Unpoly automatically adds CSS classes to links while they are
-currently loading ([`.up-active`](/a.up-active)) or
-pointing to the current location ([`.up-current`](/a.up-current)).
+Unpoly automatically adds the class [`.up-active`](/a.up-active) to links or forms while they are loading.
 
-By styling these classes with CSS you can provide instant feedback to user interactions.
-This improves the perceived speed of your interface.
+By marking navigation elements as [`[up-nav]`](/up-nav), contained links that point to the current location
+automatically get the [`.up-current`](/up-nav-a.up-current) class.
+
+You should style [`.up-active`](/a.up-active) and [`.up-current`](/up-nav a.up-current) with CSS to
+provide instant feedback to user interactions. This improves the perceived speed of your interface.
 
 \#\#\# Example
 
@@ -45,92 +46,122 @@ up.feedback = (($) ->
   @property up.feedback.config
   @param {Array<string>} [config.currentClasses]
     An array of classes to set on [links that point the current location](/a.up-current).
+  @param {Array<string>} [config.navs]
+    An array of CSS selectors that match [navigation components](/up-nav).
   @stable
   ###
   config = u.config
     currentClasses: ['up-current']
+    navs: ['[up-nav]']
+
+  previousUrlSet = undefined
+  currentUrlSet = undefined
 
   reset = ->
     config.reset()
-
-  currentClass = ->
-    classes = config.currentClasses
-    classes = classes.concat(['up-current'])
-    classes = u.uniq(classes)
-    classes.join(' ')
+    previousUrlSet = undefined
+    currentUrlSet = undefined
 
   CLASS_ACTIVE = 'up-active'
-  SELECTOR_SECTION = 'a, [up-href]'
+  SELECTOR_LINK = 'a, [up-href]'
+
+  navSelector = ->
+    config.navs.join(',')
 
   normalizeUrl = (url) ->
     if u.isPresent(url)
       u.normalizeUrl(url, stripTrailingSlash: true)
 
+  NORMALIZED_SECTION_URLS_KEY = 'up-normalized-urls'
+
   sectionUrls = ($section) ->
-    urls = []
-    for attr in ['href', 'up-href', 'up-alias']
-      if value = u.presentAttr($section, attr)
-        values = if attr == 'up-alias' then value.split(' ') else [value]
-        for url in values
-          unless url == '#'
-            url = normalizeUrl(url)
-            urls.push(url)
+    # Check if we have computed the URLs before.
+    # Computation is sort of expensive (multiplied by number of links),
+    # so we cache the results in a data attribute.
+    unless urls = $section.data(NORMALIZED_SECTION_URLS_KEY)
+      urls = buildSectionUrls($section)
+      $section.data(NORMALIZED_SECTION_URLS_KEY, urls)
     urls
 
-  urlSet = (urls) ->
-    urls = u.map(urls, normalizeUrl)
-    urls = u.compact(urls)
-
-    matches = (testUrl) ->
-      if testUrl.substr(-1) == '*'
-        doesMatchPrefix(testUrl.slice(0, -1))
-      else
-        doesMatchFully(testUrl)
-
-    doesMatchFully = (testUrl) ->
-      u.contains(urls, testUrl)
-
-    doesMatchPrefix = (prefix) ->
-      u.detect urls, (url) ->
-        url.indexOf(prefix) == 0
-
-    matchesAny = (testUrls) ->
-      u.detect(testUrls, matches)
-
-    matchesAny: matchesAny
-
-  locationChanged = ->
-    currentUrls = urlSet([
-      up.browser.url(),
-      up.modal.url(),
-      up.modal.coveredUrl(),
-      up.popup.url(),
-      up.popup.coveredUrl()
-    ])
-
-    klass = currentClass()
+  buildSectionUrls = ($section) ->
+    urls = []
 
-    u.each $(SELECTOR_SECTION), (section) ->
-      $section = $(section)
-      # if $section is marked up with up-follow,
-      # the actual link might be a child element.
-      urls = sectionUrls($section)
+    # A link with an unsafe method will never be higlighted with .up-current,
+    # so we cache an empty array.
+    if up.link.isSafe($section)
+      for attr in ['href', 'up-href', 'up-alias']
+        if value = u.presentAttr($section, attr)
+          # Allow to include multiple space-separated URLs in [up-alias]
+          for url in value.split(/\s+/)
+            unless url == '#'
+              url = normalizeUrl(url)
+              urls.push(url)
+    urls
 
-      if up.link.isSafe($section) && currentUrls.matchesAny(urls)
-        $section.addClass(klass)
-      else if $section.hasClass(klass) && $section.closest('.up-destroying').length == 0
-        $section.removeClass(klass)
+  buildCurrentUrlSet = ->
+    urls = [
+      up.browser.url(),      # The URL displayed in the address bar
+      up.modal.url(),        # Even when a modal does not change the address bar, we consider the URL of its content
+      up.modal.coveredUrl(), # The URL of the page behind the modal
+      up.popup.url(),        # Even when a popup does not change the address bar, we consider the URL of its content
+      up.popup.coveredUrl()  # The URL of the page behind the popup
+    ]
+    new up.UrlSet(urls, { normalizeUrl })
+
+  updateAllNavigationSectionsIfLocationChanged = ->
+    previousUrlSet = currentUrlSet
+    currentUrlSet = buildCurrentUrlSet()
+    unless currentUrlSet.isEqual(previousUrlSet)
+      updateAllNavigationSections($('body'))
+
+  updateAllNavigationSections = ($root) ->
+    $navs = u.selectInSubtree($root, navSelector())
+    $sections = u.selectInSubtree($navs, SELECTOR_LINK)
+    updateCurrentClassForLinks($sections)
+
+  updateNavigationSectionsInNewFragment = ($fragment) ->
+    if $fragment.closest(navSelector()).length
+      # If the new fragment is an [up-nav], or if the new fragment is a child of an [up-nav],
+      # all links in the new fragment are considered sections that we need to update.
+      # Note that:
+      # - The [up-nav] element might not be part of this update.
+      #   It might already be in the DOM, and only a child was updated.
+      # - The $fragment might be a link itself
+      # - We do not need to update sibling links of $fragment that have been processed before.
+      $sections = u.selectInSubtree($fragment, SELECTOR_LINK)
+      updateCurrentClassForLinks($sections)
+    else
+      updateAllNavigationSections($fragment)
+
+  updateCurrentClassForLinks = ($links) ->
+    currentUrlSet ||= buildCurrentUrlSet()
+    u.each $links, (link) ->
+      $link = $(link)
+      urls = sectionUrls($link)
+
+      # We use Element#classList to manipulate classes instead of jQuery's
+      # addClass and removeClass. Since we are in an inner loop, we want to
+      # be as fast as we can.
+      classList = link.classList
+      if currentUrlSet.matchesAny(urls)
+        for klass in config.currentClasses
+          # Once we drop IE11 support in 2020 we can call add() with multiple arguments
+          classList.add(klass)
+      else
+        for klass in config.currentClasses
+          # Once we drop IE11 support in 2020 we can call remove() with multiple arguments
+          classList.remove(klass)
 
   ###**
-  @function findActionableArea
+  @function findActivatableArea
   @param {string|Element|jQuery} elementOrSelector
   @internal
   ###
-  findActionableArea = (elementOrSelector) ->
+  findActivatableArea = (elementOrSelector) ->
     $area = $(elementOrSelector)
-    if $area.is(SELECTOR_SECTION)
+    if $area.is(SELECTOR_LINK)
       # Try to enlarge links that are expanded with [up-expand] on a surrounding container.
-      $area = u.presence($area.parent(SELECTOR_SECTION)) || $area
+      $area = u.presence($area.parent(SELECTOR_LINK)) || $area
     $area
 
   ###**
@@ -167,7 +198,7 @@ up.feedback = (($) ->
     elementOrSelector = args.shift()
     action = args.pop()
     options = u.options(args[0])
-    $element = findActionableArea(elementOrSelector)
+    $element = findActivatableArea(elementOrSelector)
     unless options.preload
       $element.addClass(CLASS_ACTIVE)
     if action
@@ -249,39 +280,57 @@ up.feedback = (($) ->
   @internal
   ###
   stop = (elementOrSelector) ->
-    $element = findActionableArea(elementOrSelector)
+    $element = findActivatableArea(elementOrSelector)
     $element.removeClass(CLASS_ACTIVE)
 
   ###**
-  Links that point to the current location are assigned
-  the `up-current` class automatically.
+  Marks this element as a navigation component, such as a menu or navigation bar.
+
+  When a link within an `[up-nav]` element points to the current location, it is assigned the `.up-current` class. When the browser navigates to another location, the class is removed automatically.
 
-  The use case for this is navigation bars:
+  You may also assign `[up-nav]` to an individual link instead of an navigational container.
 
-      <nav>
+  If you don't want to manually add this attribute to every navigational element, you can configure selectors to automatically match your navigation components in [`up.feedback.config.navs`](/up.feedback.config#config.navs).
+
+
+  \#\#\# Example
+
+  Let's take a simple menu with two links. The menu has been marked with the `[up-nav]` attribute:
+
+      <div up-nav>
         <a href="/foo">Foo</a>
         <a href="/bar">Bar</a>
-      </nav>
+      </div>
 
-  If the browser location changes to `/foo`, the markup changes to this:
+  If the browser location changes to `/foo`, the first link is marked as `.up-current`:
 
-      <nav>
+      <div up-nav>
         <a href="/foo" class="up-current">Foo</a>
         <a href="/bar">Bar</a>
-      </nav>
+      </div>
+
+  If the browser location changes to `/bar`, the first link automatically loses its `.up-current` class. Now the second link is marked as `.up-current`:
+
+      <div up-nav>
+        <a href="/foo">Foo</a>
+        <a href="/bar" class="up-current">Bar</a>
+      </div>
+
 
-  \#\#\# What's considered to be "current"?
+  \#\#\# What is considered to be "current"?
 
   The current location is considered to be either:
 
   - the URL displayed in the browser window's location bar
-  - the source URL of a currently opened [modal dialog](/up.modal)
-  - the source URL of a currently opened [popup overlay](/up.popup)
+  - the source URL of a [modal dialog](/up.modal)
+  - the URL of the page behind a [modal dialog](/up.modal)
+  - the source URL of a [popup overlay](/up.popup)
+  - the URL of the content behind a [popup overlay](/up.popup)
 
   A link matches the current location (and is marked as `.up-current`) if it matches either:
 
   - the link's `href` attribute
-  - the link's [`up-href`](#turn-any-element-into-a-link) attribute
+  - the link's `up-href` attribute
   - a space-separated list of URLs in the link's `up-alias` attribute
 
   \#\#\# Matching URL by prefix
@@ -289,27 +338,29 @@ up.feedback = (($) ->
   You can mark a link as `.up-current` whenever the current URL matches a prefix.
   To do so, end the `up-alias` attribute in an asterisk (`*`).
 
-  For instance, the following link is highlighted for both `/reports` and `/reports/123`:
+  For instance, the following `[up-nav]` link is highlighted for both `/reports` and `/reports/123`:
 
-      <a href="/reports" up-alias="/reports/*">Reports</a>
+      <a up-nav href="/reports" up-alias="/reports/*">Reports</a>
 
-  @selector a.up-current
+  @selector [up-nav]
   @stable
   ###
-  up.on 'up:fragment:inserted', ->
-    # When a fragment is inserted it might either have brought a location change
-    # with it, or it might have opened a modal / popup which we consider
-    # to be secondary location sources (the primary being the browser's
-    # location bar).
-    locationChanged()
-
-  up.on 'up:fragment:destroyed', (event, $fragment) ->
-    # If the destroyed fragment is a modal or popup container
-    # this changes which URLs we consider currents.
-    # Also modals and popups restore their previous history
-    # once they close.
-    if $fragment.is('.up-modal, .up-popup')
-      locationChanged()
+
+  ###**
+  When a link within an `[up-nav]` element points to the current location, it is assigned the `.up-current` class.
+
+  See [`[up-nav]`](/up-nav) for more documentation and examples.
+
+  @selector [up-nav] a.up-current
+  @stable
+  ###
+
+  # Even when the modal or popup does not change history, we consider the URLs of the content it displays.
+  up.on 'up:history:pushed up:history:replaced up:history:restored up:modal:opened up:modal:closed up:popup:opened up:popup:closed', (event) ->
+    updateAllNavigationSectionsIfLocationChanged()
+
+  up.on 'up:fragment:inserted', (event, $newFragment) ->
+    updateNavigationSectionsInNewFragment($newFragment)
 
   # The framework is reset between tests
   up.on 'up:framework:reset', reset

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

@@ -45,7 +45,7 @@ up.form = (($) ->
   @internal
   ###
   fieldSelector = ->
-    u.multiSelector(config.fields)
+    config.fields.join(',')
 
   ###**
   Submits a form via AJAX and updates a page fragment with the response.
@@ -283,7 +283,7 @@ up.form = (($) ->
     delay = u.option(u.presentAttr($element, 'up-delay'), options.delay, config.observeDelay)
     delay = parseInt(delay)
 
-    $fields = fieldSelector().selectInSubtree($element)
+    $fields = u.selectInSubtree($element, fieldSelector())
 
     destructors = u.map $fields, (field) ->
       observeField($(field), delay, callback)
@@ -816,6 +816,28 @@ up.form = (($) ->
     A CSS selector for elements whose visibility depends on this field's value.
   @stable
   ###
+
+  ###**
+  Only shows this element if an input field with [`[up-switch]`](/input-up-switch) has one of the given values.
+
+  See [`input[up-switch]`](/input-up-switch) for more documentation and examples.
+
+  @selector [up-show-for]
+  @param {string} [up-show-for]
+    A space-separated list of input values for which this element should be shown.
+  @stable
+  ###
+
+  ###**
+  Hides this element if an input field with [`[up-switch]`](/input-up-switch) has one of the given values.
+
+  See [`input[up-switch]`](/input-up-switch) for more documentation and examples.
+
+  @selector [up-hide-for]
+  @param {string} [up-hide-for]
+    A space-separated list of input values for which this element should be hidden.
+  @stable
+  ###
   up.compiler '[up-switch]', ($field) ->
     switchTargets($field)
 
@@ -944,6 +966,8 @@ up.form = (($) ->
   ###
   up.compiler '[up-autosubmit]', ($formOrField) -> autosubmit($formOrField)
 
+  up.compiler '[autofocus]', { batch: true }, ($input) -> $input.last().focus()
+
   up.on 'up:framework:reset', reset
 
   <% if ENV['JS_KNIFE'] %>knife: eval(Knife.point)<% end %>

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

@@ -94,7 +94,8 @@ up.history = (($) ->
   @internal
   ###
   replace = (url) ->
-    manipulate('replaceState', url)
+    if manipulate('replaceState', url)
+      up.emit('up:history:replaced', url: url)
 
   ###**
   Adds a new history entry and updates the browser's

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

@@ -57,7 +57,7 @@ up.layout = (($) ->
   ###
   config = u.config
     duration: 0
-    viewports: [document, '.up-modal-viewport', '[up-viewport]']
+    viewports: ['.up-modal-viewport', '[up-viewport]']
     fixedTop: ['[up-fixed~=top]']
     fixedBottom: ['[up-fixed~=bottom]']
     anchoredRight: ['[up-anchored~=right]', '[up-fixed~=top]', '[up-fixed~=bottom]', '[up-fixed~=right]']
@@ -74,7 +74,7 @@ up.layout = (($) ->
   reset = ->
     config.reset()
     lastScrollTops.clear()
-    scrollingTracker.finish()
+    scrollingTracker.reset()
 
   ###**
   Scrolls the given viewport to the given Y-position.
@@ -161,6 +161,9 @@ up.layout = (($) ->
   @internal
   ###
   finishScrolling = (element) ->
+    # Don't emit expensive events if no animation can be running anyway
+    return Promise.resolve() unless up.motion.isEnabled()
+
     $scrollable = scrollableElementForViewport(element)
     scrollingTracker.finish($scrollable)
 
@@ -169,7 +172,8 @@ up.layout = (($) ->
   @internal
   ###
   anchoredRight = ->
-    u.multiSelector(config.anchoredRight).select()
+    selector = config.anchoredRight.join(',')
+    $(selector)
 
   ###**
   @function measureObstruction
@@ -179,10 +183,10 @@ up.layout = (($) ->
   measureObstruction = ->
     measurePosition = (obstructor, cssAttr) ->
       $obstructor = $(obstructor)
-      anchorPosition = $obstructor.css(cssAttr)
+      anchorPosition = u.readComputedStyleNumber($obstructor, cssAttr)
       unless u.isPresent(anchorPosition)
         up.fail("Fixed element %o must have a CSS attribute %s", $obstructor.get(0), cssAttr)
-      parseFloat(anchorPosition) + $obstructor.height()
+      anchorPosition + $obstructor.height()
 
     fixedTopBottoms = for obstructor in $(config.fixedTop.join(', '))
       measurePosition(obstructor, 'top')
@@ -313,22 +317,23 @@ up.layout = (($) ->
       Promise.resolve()
 
   viewportSelector = ->
-    u.multiSelector(config.viewports)
+    config.viewports.join(',')
 
   ###**
   Returns the viewport for the given element.
 
-  Throws an error if no viewport could be found.
+  Returns `$(document)` if no better viewpoint could be found.
 
   @function up.layout.viewportOf
   @param {string|Element|jQuery} selectorOrElement
+  @return {jQuery}
   @internal
   ###
   viewportOf = (selectorOrElement, options = {}) ->
     $element = $(selectorOrElement)
-    $viewport = viewportSelector().seekUp($element)
-    if $viewport.length == 0 && options.strict isnt false
-      up.fail("Could not find viewport for %o", $element)
+    $viewport = $element.closest(viewportSelector())
+    if $viewport.length == 0
+      $viewport = $(document)
     $viewport
 
   ###**
@@ -342,7 +347,7 @@ up.layout = (($) ->
   ###
   viewportsWithin = (selectorOrElement) ->
     $element = $(selectorOrElement)
-    viewportSelector().selectInSubtree($element)
+    u.selectInSubtree($element, viewportSelector())
 
   ###**
   Returns a jQuery collection of all the viewports on the screen.
@@ -351,7 +356,7 @@ up.layout = (($) ->
   @internal
   ###
   viewports = ->
-    viewportSelector().select()
+    $(document).add(viewportSelector())
 
   scrollTopKey = (viewport) ->
     $viewport = $(viewport)
@@ -497,6 +502,56 @@ up.layout = (($) ->
       selector += ", a[name='#{selector}']"
     selector
 
+  ###**
+  @internal
+  ###
+  absolutize = ($element, options) ->
+    options = u.options(options, afterMeasure: u.noop)
+    $viewport = up.layout.viewportOf($element)
+    originalDims = u.measure($element, relative: true, inner: true)
+    originalOffset = $element.offset()
+    options.afterMeasure()
+
+    u.writeInlineStyle $element,
+      # If the element had a layout context before, make sure the
+      # ghost will have layout context as well (and vice versa).
+      position: if u.readComputedStyle($element, 'position') == 'static' then 'static' else 'relative'
+      top:    'auto'
+      right:  'auto'
+      bottom: 'auto'
+      left:   'auto'
+      width:  '100%'
+      height: '100%'
+
+    # Wrap the ghost in another container so its margin can expand
+    # freely. If we would position the element directly (old implementation),
+    # it would gain a layout context which cannot be crossed by margins.
+    $bounds = $('<div class="up-bounds"></div>')
+    boundsStyle = u.merge(originalDims, position: 'absolute')
+    u.writeInlineStyle($bounds, boundsStyle)
+    $bounds.insertBefore($element)
+    $element.appendTo($bounds)
+
+    top = originalDims.top
+
+    moveTop = (diff) ->
+      if diff != 0
+        top += diff
+        u.writeInlineStyle($bounds, { top })
+
+    # In theory, $element should not have moved visually.
+    # However, $element (or a child of $element) might collapse its margin
+    # against a previous sibling element, and now that it is absolute it does
+    # not have the same sibling. So we manually correct $element's top
+    # position so it aligns with the previous top position.
+    moveTop(originalOffset.top - $element.offset().top)
+
+    $fixedElements = up.layout.fixedChildren($element)
+    for fixedElement in $fixedElements
+      u.fixedToAbsolute(fixedElement, $viewport)
+
+    { $element, $bounds, moveTop }
+
   ###**
   Marks this element as a scrolling container ("viewport").
 
@@ -653,6 +708,7 @@ up.layout = (($) ->
   revealOrRestoreScroll: revealOrRestoreScroll
   anchoredRight: anchoredRight
   fixedChildren: fixedChildren
+  absolutize: absolutize
 
 )(jQuery)