unpoly-rails 0.57.0 → 0.60.0

data/lib/assets/javascripts/unpoly/{layout.coffee.erb → viewport.coffee.erb}

@@ -1,31 +1,43 @@
 ###**
-Application layout
-==================
+Scrolling viewports
+===================
 
-You can [make Unpoly aware](/up.layout.config) of fixed elements in your
+The `up.viewport` module controls the scroll position of scrollable containers ("viewports").
+
+The default viewport for any web application is the main document. An application may
+define additional viewports by giving the CSS property `{ overflow-y: scroll }` to any `<div>`.
+
+
+\#\#\# Revealing new content
+
+When following a [link to a fragment](/a-up-target) Unpoly will automatically
+scroll the document's viewport to [reveal](/up.viewport) the updated content.
+
+You should [make Unpoly aware](/up.viewport.config#config.fixedTop) of fixed elements in your
 layout, such as navigation bars or headers. Unpoly will respect these sticky
-elements when [revealing elements](/up.reveal) or [opening a modal dialog](/a-up-modal).
+elements when [revealing updated fragments](/up.reveal).
 
-This modules also contains functions to programmatically [scroll a viewport](/up.scroll)
-or [reveal an element within its viewport](/up.reveal).
+You should also [tell Unpoly](/up.viewport.config#config.viewports) when your application has more than one viewport,
+you should so Unpoly can pick the right viewport to scroll for each fragment update.
 
-Bootstrap integration
----------------------
+
+\#\#\# Bootstrap integration
 
 When using Bootstrap integration (`unpoly-bootstrap3.js` and `unpoly-bootstrap3.css`)
 Unpoly will automatically be aware of sticky Bootstrap components such as
 [fixed navbar](https://getbootstrap.com/examples/navbar-fixed-top/).
 
-@class up.layout
+@module up.viewport
 ###
-up.layout = (($) ->
+up.viewport = do ->
 
   u = up.util
+  e = up.element
 
   ###**
   Configures the application layout.
 
-  @property up.layout.config
+  @property up.viewport.config
   @param {Array} [config.viewports]
     An array of CSS selectors that find viewports
     (containers that scroll their contents).
@@ -41,40 +53,43 @@ up.layout = (($) ->
     An array of CSS selectors that find elements anchored to the
     right edge of the screen (using `right:0` with `position: fixed` or `position: absolute`).
     See [`[up-anchored="right"]`](/up-anchored-right) for details.
-  @param {number} [config.duration=0]
-    The duration of the scrolling animation in milliseconds.
-    Setting this to `0` will disable scrolling animations.
-  @param {string} [config.easing='swing']
-    The timing function that controls the animation's acceleration.
-    See [W3C documentation](http://www.w3.org/TR/css3-transitions/#transition-timing-function)
-    for a list of pre-defined timing functions.
-  @param {number} [config.snap=50]
+  @param {number} [config.revealSnap=50]
     When [revealing](/up.reveal) elements, Unpoly will scroll an viewport
-    to the top when the revealed element is closer to the top than `config.snap`.
-  @param {number} [config.substance=150]
-    A number indicating how many top pixel rows of an element to [reveal](/up.reveal).
+    to the top when the revealed element is closer to the top than `config.revealSnap`.
+  @param {number} [config.revealPadding=0]
+    The desired padding between a [revealed](/up.reveal) element and the
+    closest [viewport](/up.viewport) edge (in pixels).
+  @param {number} [config.scrollSpeed=1]
+    The speed of the scrolling motion when [scrolling](/up.scroll) with `{ behavior: 'smooth' }`.
+
+    The default value (`1`) roughly corresponds to the speed of Chrome's
+    [native smooth scrolling](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/behavior).
   @stable
   ###
-  config = u.config
+  config = new up.Config
     duration: 0
-    viewports: ['.up-modal-viewport', '[up-viewport]']
+    viewports: ['.up-modal-viewport', '[up-viewport]', '[up-fixed]']
     fixedTop: ['[up-fixed~=top]']
     fixedBottom: ['[up-fixed~=bottom]']
     anchoredRight: ['[up-anchored~=right]', '[up-fixed~=top]', '[up-fixed~=bottom]', '[up-fixed~=right]']
-    snap: 50
-    substance: 150
-    easing: 'swing'
+    revealSnap: 50
+    revealPadding: 0,
+    scrollSpeed: 1
+
+#  up.legacy.renamedProperty(config, 'snap', 'revealSnap')
+#  up.legacy.removedProperty(config, 'easing')
+#  up.legacy.removedProperty(config, 'duration')
 
   lastScrollTops = new up.Cache
     size: 30,
     key: up.history.normalizeUrl
 
-  scrollingTracker = new up.MotionTracker('scrolling')
+  scrollingController = new up.MotionController('scrolling')
 
   reset = ->
     config.reset()
     lastScrollTops.clear()
-    scrollingTracker.reset()
+    scrollingController.reset()
 
   ###**
   Scrolls the given viewport to the given Y-position.
@@ -86,16 +101,13 @@ up.layout = (($) ->
 
   This will scroll a `<div class="main">...</div>` to a Y-position of 100 pixels:
 
-      up.scroll('.main', 100);
+      up.scroll('.main', 100)
 
   \#\#\# Animating the scrolling motion
 
   The scrolling can (optionally) be animated.
 
-      up.scroll('.main', 100, {
-        easing: 'swing',
-        duration: 250
-      });
+      up.scroll('.main', 100, { behavior: 'smooth' })
 
   If the given viewport is already in a scroll animation when `up.scroll()`
   is called a second time, the previous animation will instantly jump to the
@@ -106,49 +118,26 @@ up.layout = (($) ->
     The container element to scroll.
   @param {number} scrollPos
     The absolute number of pixels to set the scroll position to.
-  @param {number}[options.duration]
-    The number of miliseconds for the scrolling's animation.
-  @param {string}[options.easing]
-    The timing function that controls the acceleration for the scrolling's animation.
+  @param {string}[options.behavior='auto']
+    When set to `'auto'`, this will immediately scroll to the new position.
+
+    When set to `'smooth'`, this will scroll smoothly to the new position.
+  @param {number}[options.speed]
+    The speed of the scrolling motion when scrolling with `{ behavior: 'smooth' }`.
+
+    Defaults to `up.viewport.config.scrollSpeed`.
   @return {Promise}
     A promise that will be fulfilled when the scrolling ends.
   @experimental
   ###
   scroll = (viewport, scrollTop, options) ->
-    $viewport = $(viewport)
-    options = u.options(options)
-    options.duration = u.option(options.duration, config.duration)
-    options.easing = u.option(options.easing, config.easing)
-
-    finishScrolling($viewport).then ->
-      if up.motion.isEnabled() && options.duration > 0
-        scrollWithAnimateNow($viewport, scrollTop, options)
-      else
-        scrollAbruptlyNow($viewport, scrollTop)
-
-  scrollWithAnimateNow = ($scrollable, scrollTop, animateOptions) ->
-    start = ->
-      finish = ->
-        # jQuery exposes a finish() method that completes all animations orchestrated through jQuery.
-        # This will also resolve the promise returned by $element.animate(..).promise().
-        $scrollable.finish()
-
-      $scrollable.on(scrollingTracker.eventName, finish)
-      scrollDone = $scrollable.animate({ scrollTop }, animateOptions).promise()
-      scrollDone.then -> $scrollable.off(scrollingTracker.eventName)
-      scrollDone
-
-    # Tracker will either finish or wait for previous scrolling animations before starting the next
-    scrollingTracker.claim($scrollable, start)
-
-  scrollAbruptlyNow = ($scrollable, scrollTop) ->
-    $scrollable.scrollTop(scrollTop)
-    Promise.resolve()
+    motion = new up.ScrollMotion(viewport, scrollTop, options)
+    scrollingController.startMotion(viewport, motion, options)
 
   ###**
   Finishes scrolling animations in the given element, its ancestors or its descendants.
 
-  @function up.layout.finishScrolling
+  @function up.viewport.finishScrolling
   @param {string|Element|jQuery}
   @return {Promise}
   @internal
@@ -157,16 +146,16 @@ up.layout = (($) ->
     # Don't emit expensive events if no animation can be running anyway
     return Promise.resolve() unless up.motion.isEnabled()
 
-    $scrollable = viewportOf(element)
-    scrollingTracker.finish($scrollable)
+    scrollable = closest(element)
+    scrollingController.finish(scrollable)
 
   ###**
-  @function up.layout.anchoredRight
+  @function up.viewport.anchoredRight
   @internal
   ###
   anchoredRight = ->
     selector = config.anchoredRight.join(',')
-    $(selector)
+    e.all(selector)
 
   ###**
   @function measureObstruction
@@ -175,7 +164,7 @@ up.layout = (($) ->
   ###
   measureObstruction = (viewportHeight) ->
     composeHeight = (obstructor, distanceFromEdgeProps) ->
-      distanceFromEdge = u.sum(distanceFromEdgeProps, (prop) -> u.readComputedStyleNumber(obstructor, prop)) || 0
+      distanceFromEdge = u.sum(distanceFromEdgeProps, (prop) -> e.styleNumber(obstructor, prop)) || 0
       distanceFromEdge + obstructor.offsetHeight
 
     measureTopObstructor = (obstructor) ->
@@ -184,11 +173,11 @@ up.layout = (($) ->
     measureBottomObstructor = (obstructor) ->
       composeHeight(obstructor, ['bottom', 'margin-bottom'])
 
-    $topObstructors = $(config.fixedTop.join(', '))
-    $bottomObstructors = $(config.fixedBottom.join(', '))
+    topObstructors = e.all(config.fixedTop.join(', '))
+    bottomObstructors = e.all(config.fixedBottom.join(', '))
 
-    topObstructions = u.map($topObstructors, measureTopObstructor)
-    bottomObstructions = u.map($bottomObstructors, measureBottomObstructor)
+    topObstructions = u.map(topObstructors, measureTopObstructor)
+    bottomObstructions = u.map(bottomObstructors, measureBottomObstructor)
 
     top: Math.max(0, topObstructions...)
     bottom: Math.max(0, bottomObstructions...)
@@ -209,7 +198,7 @@ up.layout = (($) ->
   - the currently open [modal](/up.modal)
   - an element with the attribute `[up-viewport]`
   - the `<body>` element
-  - an element matching the selector you have configured using `up.layout.config.viewports.push('my-custom-selector')`
+  - an element matching the selector you have configured using `up.viewport.config.viewports.push('my-custom-selector')`
 
   \#\#\# Fixed elements obstruction the viewport
 
@@ -221,79 +210,47 @@ up.layout = (($) ->
   To make `up.reveal()` aware fixed elements you can either:
 
   - give the element an attribute [`up-fixed="top"`](/up-fixed-top) or [`up-fixed="bottom"`](up-fixed-bottom)
-  - [configure default options](/up.layout.config) for `fixedTop` or `fixedBottom`
+  - [configure default options](/up.viewport.config) for `fixedTop` or `fixedBottom`
 
   @function up.reveal
   @param {string|Element|jQuery} element
-  @param {number} [options.duration]
-  @param {string} [options.easing]
+  @param {number} [options.speed]
   @param {string} [options.snap]
   @param {string|Element|jQuery} [options.viewport]
   @param {boolean} [options.top=false]
     Whether to scroll the viewport so that the first element row aligns
     with the top edge of the viewport.
-  @return {Promise}
-    A promise that fulfills when the element is revealed.
-  @stable
-  ###
-  reveal = (elementOrSelector, options) ->
-    $element = $(elementOrSelector).first() # we can only reveal one element
-    up.puts 'Revealing fragment %o', $element.get(0)
-    options = u.options(options)
+  @param {string}[options.behavior='auto']
+    When set to `'auto'`, this will immediately scroll to the new position.
 
-    u.rejectOnError ->
-      $viewport = if options.viewport then $(options.viewport) else viewportOf($element)
+    When set to `'smooth'`, this will scroll smoothly to the new position.
+  @param {number}[options.speed]
+    The speed of the scrolling motion when scrolling with `{ behavior: 'smooth' }`.
 
-      snap = u.option(options.snap, config.snap)
+    Defaults to `up.viewport.config.scrollSpeed`.
+  @param {number} [config.padding=0]
+    The desired padding between the revealed element and the
+    closest [viewport](/up.viewport) edge (in pixels).
+  @param {number|boolean} [config.snap]
+    Whether to snap to the top of the viewport if the new scroll position
+    after revealing the element is close to the top edge.
 
-      viewportIsDocument = $viewport.is(up.browser.documentViewportSelector())
-      viewportHeight = if viewportIsDocument then u.clientSize().height else $viewport.outerHeight()
-      originalScrollPos = $viewport.scrollTop()
-      newScrollPos = originalScrollPos
+    You may pass a maximum number of pixels under which to snap to the top.
 
-      offsetShift = undefined
-      obstruction = undefined
+    Passing `false` will disable snapping.
 
-      if viewportIsDocument
-        obstruction = measureObstruction(viewportHeight)
-        # Within the body, $.position will always return the distance
-        # from the document top and *not* the distance of the viewport
-        # top. This is what the calculations below expect, so don't shift.
-        offsetShift = 0
-      else
-        obstruction = { top: 0, bottom: 0 }
-        # When the scrolled element is not <body> but instead a container
-        # with overflow-y: scroll, $.position returns the distance to the
-        # viewport's currently visible top edge (instead of the distance to
-        # the first row of the viewport's entire canvas buffer).
-        # http://codepen.io/anon/pen/jPojGE
-        offsetShift = originalScrollPos
-
-      predictFirstVisibleRow = -> newScrollPos + obstruction.top
-      predictLastVisibleRow = -> newScrollPos + viewportHeight - obstruction.bottom
-
-      elementDims = u.measure($element, relative: $viewport, includeMargin: true)
-      firstElementRow = elementDims.top + offsetShift
-      lastElementRow = firstElementRow + Math.min(elementDims.height, config.substance)
-
-      if lastElementRow > predictLastVisibleRow()
-        # Try to show the full height of the element
-        newScrollPos += (lastElementRow - predictLastVisibleRow())
-
-      if firstElementRow < predictFirstVisibleRow() || options.top
-        # If the full element does not fit, scroll to the first row
-        newScrollPos = firstElementRow - obstruction.top
-
-      if newScrollPos < snap && elementDims.top < (0.5 * viewportHeight)
-        newScrollPos = 0
-
-      if newScrollPos != originalScrollPos
-        scroll($viewport, newScrollPos, options)
-      else
-        Promise.resolve()
+    Passing `true` will use the snap pixel value from `up.viewport.config.revealSnap`.
+  @return {Promise}
+    A promise that fulfills when the element is revealed.
+  @stable
+  ###
+  reveal = (elementOrSelector, options) ->
+    element = e.get(elementOrSelector)
+    motion = new up.RevealMotion(element, options)
+    scrollingController.startMotion(element, motion, options)
 
   ###**
-  @function up.layout.scrollAfterInsertFragment
+  @function up.viewport.scrollAfterInsertFragment
   @param {boolean|object} [options.restoreScroll]
   @param {boolean|string|jQuery|Element} [options.reveal]
   @param {boolean|string} [options.reveal]
@@ -301,45 +258,42 @@ up.layout = (($) ->
     A promise that is fulfilled when the scrolling has finished.
   @internal
   ###
-  scrollAfterInsertFragment = (selectorOrElement, options) ->
-    options = u.options(options)
-    $element = $(selectorOrElement)
-
+  scrollAfterInsertFragment = (element, options = {}) ->
     hashOpt = options.hash
     revealOpt = options.reveal
     restoreScrollOpt = options.restoreScroll
 
-    durationOptions = u.only(options, 'duration')
+    scrollOptions = u.only(options, 'scrollBehavior', 'scrollSpeed')
 
     if restoreScrollOpt
       # If options.restoreScroll is an object, its keys map viewport selectors
       # to scroll positions. If it is just true, we leave the scrollTops option
       # undefined and let restoreScroll() retrieve previous scrollTops from cache.
       givenTops = u.presence(restoreScrollOpt, u.isObject)
-      return restoreScroll(around: $element, scrollTops: givenTops)
+      return restoreScroll(around: element, scrollTops: givenTops)
 
     else if hashOpt && revealOpt == true # hash revealing can be disabled with { reveal: false }
-      return revealHash(hashOpt, durationOptions)
+      return revealHash(hashOpt, scrollOptions)
 
     else if revealOpt
       # We allow to pass another element as { reveal } option
       if u.isElement(revealOpt) || u.isJQuery(revealOpt)
-        $element = $(revealOpt)
+        element = e.get(revealOpt)
 
       # We allow to pass a selector as { reveal } option
       else if u.isString(revealOpt)
-        selector = up.dom.resolveSelector(revealOpt, options.origin)
-        $element = up.first(selector)
+        selector = e.resolveSelector(revealOpt, options.origin)
+        element = up.fragment.first(selector)
 
       else
-        # We reveal the given $element
+        # We reveal the given element
 
       # If selectorOrElement was a CSS selector, don't blow up by calling reveal()
       # with an empty jQuery collection. This might happen if a failed form submission
       # reveals the first validation error message, but the error is shown in an
       # unexpected element.
-      if $element.length
-        return reveal($element, durationOptions)
+      if element
+        return reveal(element, scrollOptions)
 
     else
       # If we didn't need to scroll above, just return a resolved promise
@@ -358,60 +312,168 @@ up.layout = (($) ->
 
   If no element matches the given `#hash` anchor, a resolved promise is returned.
 
-  @function up.layout.revealHash
+  \#\#\# Example
+
+      up.revealHash('#chapter2')
+
+  @function up.viewport.revealHash
+  @param {string} hash
+
   @return {Promise}
     A promise that is fulfilled when scroll position has changed to match the location hash.
   @experimental
   ###
   revealHash = (hash) ->
-    if (hash) && ($match = firstHashTarget(hash))
-      reveal($match, top: true)
+    if (hash) && (match = firstHashTarget(hash))
+      reveal(match, top: true)
     else
       Promise.resolve()
 
-  viewportSelector = ->
+  allSelector = ->
     # On Edge the document viewport can be changed from CSS
-    [up.browser.documentViewportSelector(), config.viewports...].join(',')
+    [rootSelector(), config.viewports...].join(',')
 
   ###**
-  Returns the viewport for the given element.
+  Returns the scrolling container for the given element.
 
-  Returns the [document's scrolling element](https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement)
-  if no closer viewpoint exists.
+  Returns the [document's scrolling element](/up.viewport.root)
+  if no closer viewport exists.
 
-  @function up.layout.viewportOf
+  @function up.viewport.closest
   @param {string|Element|jQuery} selectorOrElement
-  @return {jQuery}
-  @internal
+  @return {Element}
+  @experimental
   ###
-  viewportOf = (selectorOrElement, options = {}) ->
-    $element = $(selectorOrElement)
-    $element.closest(viewportSelector())
+  closest = (selectorOrElement) ->
+    element = e.get(selectorOrElement)
+    e.closest(element, allSelector())
 
   ###**
   Returns a jQuery collection of all the viewports contained within the
   given selector or element.
 
-  @function up.layout.viewportsWithin
+  @function up.viewport.subtree
   @param {string|Element|jQuery} selectorOrElement
-  @return jQuery
+  @return List<Element>
   @internal
   ###
-  viewportsWithin = (selectorOrElement) ->
-    $element = $(selectorOrElement)
-    u.selectInSubtree($element, viewportSelector())
+  getSubtree = (selectorOrElement) ->
+    element = e.get(selectorOrElement)
+    e.subtree(element, allSelector())
+
+  getAround = (selectorOrElement) ->
+    element = e.get(selectorOrElement)
+    e.list(closest(element), getSubtree(element))
 
   ###**
-  Returns a jQuery collection of all the viewports on the screen.
+  Returns a list of all the viewports on the screen.
 
-  @function up.layout.viewports
+  @function up.viewport.all
   @internal
   ###
-  viewports = ->
-    $(viewportSelector())
+  getAll = ->
+    e.all(allSelector())
+
+  rootSelector = ->
+    # The spec says this should be <html> in standards mode
+    # and <body> in quirks mode. However, it is currently (2018-07)
+    # always <body> in Webkit browsers (not Blink). Luckily Webkit
+    # also supports document.scrollingElement.
+    if element = document.scrollingElement
+      element.tagName
+    else
+      # IE11
+      'html'
+
+  ###**
+  Return the [scrolling element](https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement)
+  for the browser's main content area.
+
+  @function up.viewport.root
+  @return {Element}
+  @experimental
+  ###
+  getRoot = ->
+    document.querySelector(rootSelector())
+
+  rootWidth = ->
+    # This should happen on the <html> element, regardless of document.scrollingElement
+    e.root().clientWidth
+
+  rootHeight = ->
+  # This should happen on the <html> element, regardless of document.scrollingElement
+    e.root().clientHeight
+
+  isRoot = (element) ->
+    e.matches(element, rootSelector())
+
+  ###**
+  Returns whether the given element is currently showing a vertical scrollbar.
+
+  @function up.viewport.rootHasVerticalScrollbar
+  @internal
+  ###
+  rootHasVerticalScrollbar = ->
+    # We could also check if scrollHeight > offsetHeight for the document viewport.
+    # However, we would also need to check overflow-y for that element.
+    # Also we have no control whether developers set the property on <body> or <html>.
+    # https://tylercipriani.com/blog/2014/07/12/crossbrowser-javascript-scrollbar-detection/
+    window.innerWidth > document.documentElement.offsetWidth
+
+  ###**
+  Returns the element that controls the `overflow-y` behavior for the
+  [document viewport](/up.viewport.root()).
+
+  @function up.viewport.rootOverflowElement
+  @internal
+  ###
+  rootOverflowElement = ->
+    body = document.body
+    html = document.documentElement
+
+    element = u.find([html, body], wasChosenAsOverflowingElement)
+    element || getRoot()
+
+  ###**
+  Returns whether the given element was chosen as the overflowing
+  element by the developer.
+
+  We have no control whether developers set the property on <body> or
+  <html>. The developer also won't know what is going to be the
+  [scrolling element](/up.viewport.root()) on the user's brower.
+
+  @function wasChosenAsOverflowingElement
+  @internal
+  ###
+  wasChosenAsOverflowingElement = (element) ->
+    overflowY = e.style(element, 'overflow-y')
+    overflowY == 'auto' || overflowY == 'scroll'
+
+  ###**
+  Returns the width of a scrollbar.
+
+  This only runs once per page load.
+
+  @function up.viewport.scrollbarWidth
+  @internal
+  ###
+  scrollbarWidth = u.memoize ->
+    # This is how Bootstrap does it also:
+    # https://github.com/twbs/bootstrap/blob/c591227602996c542b9fd0cb65cff3cc9519bdd5/dist/js/bootstrap.js#L1187
+    outerStyle =
+      position:  'absolute'
+      top:       '0'
+      left:      '0'
+      width:     '100px'
+      height:    '100px' # Firefox needs at least 100px to show a scrollbar
+      overflowY: 'scroll'
+    outer = up.element.affix(document.body, '[up-viewport]', { style: outerStyle })
+    width = outer.offsetWidth - outer.clientWidth
+    up.element.remove(outer)
+    width
 
   scrollTopKey = (viewport) ->
-    u.selectorForElement(viewport)
+    e.toSelector(viewport)
 
   ###**
   Returns a hash with scroll positions.
@@ -419,64 +481,54 @@ up.layout = (($) ->
   Each key in the hash is a viewport selector. The corresponding
   value is the viewport's top scroll position:
 
-      up.layout.scrollTops()
+      up.viewport.scrollTops()
       => { '.main': 0, '.sidebar': 73 }
 
-  @function up.layout.scrollTops
+  @function up.viewport.scrollTops
   @return Object<string, number>
   @internal
   ###
   scrollTops = ->
-    topsBySelector = {}
-    for group in config.viewports
-      $(group).each ->
-        $viewport = $(this)
-        key = scrollTopKey($viewport)
-        top = $viewport.scrollTop()
-        topsBySelector[key] = top
-    topsBySelector
+    u.mapObject getAll(), (viewport) ->
+      [scrollTopKey(viewport), viewport.scrollTop]
 
   ###**
-  @function up.layout.fixedChildren
+  @function up.viewport.fixedElements
   @internal
   ###
-  fixedChildren = (root = undefined) ->
-    root ||= document.body
-    $root = $(root)
-    $elements = $root.find('[up-fixed]')
-    $elements = $elements.add($root.find(config.fixedTop.join(', '))) if u.isPresent(config.fixedTop)
-    $elements = $elements.add($root.find(config.fixedBottom.join(', '))) if u.isPresent(config.fixedBottom)
-    $elements
+  fixedElements = (root = document) ->
+    queryParts = ['[up-fixed]'].concat(config.fixedTop).concat(config.fixedBottom)
+    root.querySelectorAll(queryParts.join(','))
 
   ###**
   Saves the top scroll positions of all the
-  viewports configured in [`up.layout.config.viewports`](/up.layout.config).
+  viewports configured in [`up.viewport.config.viewports`](/up.viewport.config).
 
   The scroll positions will be associated with the current URL.
-  They can later be restored by calling [`up.layout.restoreScroll()`](/up.layout.restoreScroll)
+  They can later be restored by calling [`up.viewport.restoreScroll()`](/up.viewport.restoreScroll)
   at the same URL.
 
   Unpoly automatically saves scroll positions whenever a fragment was updated on the page.
 
-  @function up.layout.saveScroll
+  @function up.viewport.saveScroll
   @param {string} [options.url]
   @param {Object<string, number>} [options.tops]
   @experimental
   ###
   saveScroll = (options = {}) ->
-    url = u.option(options.url, up.history.url())
-    tops = u.option(options.tops, scrollTops())
+    url = options.url ? up.history.url()
+    tops = options.tops ? scrollTops()
     lastScrollTops.set(url, tops)
 
   ###**
-  Restores [previously saved](/up.layout.saveScroll) scroll positions of viewports
-  viewports configured in [`up.layout.config.viewports`](/up.layout.config).
+  Restores [previously saved](/up.viewport.saveScroll) scroll positions of viewports
+  viewports configured in [`up.viewport.config.viewports`](/up.viewport.config).
 
   Unpoly automatically restores scroll positions when the user presses the back button.
   You can disable this behavior by setting [`up.history.config.restoreScroll = false`](/up.history.config).
 
-  @function up.layout.restoreScroll
-  @param {jQuery} [options.around]
+  @function up.viewport.restoreScroll
+  @param {Element} [options.around]
     If set, only restores viewports that are either an ancestor
     or descendant of the given element.
   @return {Promise}
@@ -485,20 +537,11 @@ up.layout = (($) ->
   ###
   restoreScroll = (options = {}) ->
     url = up.history.url()
-
-    $viewports = undefined
-
-    if options.around
-      $descendantViewports = viewportsWithin(options.around)
-      $ancestorViewports = viewportOf(options.around)
-      $viewports = $ancestorViewports.add($descendantViewports)
-    else
-      $viewports = viewports()
-
+    viewports = if options.around then getAround(options.around) else getAll()
     scrollTopsForUrl = options.scrollTops || lastScrollTops.get(url) || {}
 
     up.log.group 'Restoring scroll positions for URL %s to %o', url, scrollTopsForUrl, ->
-      allScrollPromises = u.map $viewports, (viewport) ->
+      allScrollPromises = u.map viewports, (viewport) ->
         key = scrollTopKey(viewport)
         scrollTop = scrollTopsForUrl[key] || 0
         scroll(viewport, scrollTop, duration: 0)
@@ -508,59 +551,68 @@ up.layout = (($) ->
   ###**
   @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,
+  absolutize = (elementOrSelector, options = {}) ->
+    element = e.get(elementOrSelector)
+    viewport = up.viewport.closest(element)
+
+    viewportRect = viewport.getBoundingClientRect()
+    originalRect = element.getBoundingClientRect()
+
+    boundsRect = new up.Rect
+      left: originalRect.left - viewportRect.left
+      top: originalRect.top - viewportRect.top
+      width: originalRect.width
+      height: originalRect.height
+
+    # Allow the caller to run code before we start shifting elements around.
+    options.afterMeasure?()
+
+    e.setStyle 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%'
+      position: if element.style.position == 'static' then 'static' else 'relative'
+      top:    'auto' # CSS default
+      right:  'auto' # CSS default
+      bottom: 'auto' # CSS default
+      left:   'auto' # CSS default
+      width:  '100%' # stretch to the .up-bounds width we set below
+      height: '100%' # stretch to the .up-bounds height we set below
 
     # 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)
+    bounds = e.createFromSelector('.up-bounds')
+    # Insert the bounds object before our element, then move element into it.
+    e.insertBefore(element, bounds)
+    bounds.appendChild(element)
 
-    top = originalDims.top
+    moveBounds = (diffX, diffY) ->
+      boundsRect.left += diffX
+      boundsRect.top += diffY
+      e.setStyle(bounds, boundsRect)
 
-    moveTop = (diff) ->
-      if diff != 0
-        top += diff
-        u.writeInlineStyle($bounds, { top })
+    # Position the bounds initially
+    moveBounds(0, 0)
 
-    # 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)
+    # 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.
+    newElementRect = element.getBoundingClientRect()
+    moveBounds(originalRect.left - newElementRect.left, originalRect.top - newElementRect.top)
 
-    $fixedElements = up.layout.fixedChildren($element)
-    for fixedElement in $fixedElements
-      u.fixedToAbsolute(fixedElement, $viewport)
+    u.each(fixedElements(element), e.fixedToAbsolute)
 
-    { $element, $bounds, moveTop }
+    bounds: bounds
+    moveBounds: moveBounds
 
   ###**
   Marks this element as a scrolling container ("viewport").
 
   Apply this attribute if your app uses a custom panel layout with fixed positioning
   instead of scrolling `<body>`. As an alternative you can also push a selector
-  matching your custom viewport to the [`up.layout.config.viewports`](/up.layout.config) array.
+  matching your custom viewport to the [`up.viewport.config.viewports`](/up.viewport.config) array.
 
   [`up.reveal()`](/up.reveal) will always try to scroll the viewport closest
   to the element that is being revealed. By default this is the `<body>` element.
@@ -618,7 +670,7 @@ up.layout = (($) ->
   Unpoly will then scroll the viewport far enough that the revealed element is fully visible.
 
   Instead of using this attribute,
-  you can also configure a selector in [`up.layout.config.fixedTop`](/up.layout.config#config.fixedTop).
+  you can also configure a selector in [`up.viewport.config.fixedTop`](/up.viewport.config#config.fixedTop).
 
   \#\#\# Example
 
@@ -638,7 +690,7 @@ up.layout = (($) ->
   Unpoly will then scroll the viewport far enough that the revealed element is fully visible.
 
   Instead of using this attribute,
-  you can also configure a selector in [`up.layout.config.fixedBottom`](/up.layout.config#config.fixedBottom).
+  you can also configure a selector in [`up.viewport.config.fixedBottom`](/up.viewport.config#config.fixedBottom).
 
   \#\#\# Example
 
@@ -662,7 +714,7 @@ up.layout = (($) ->
   with a CSS of `right: 0` with `position: fixed` or `position:absolute`.
 
   Instead of giving this attribute to any affected element,
-  you can also configure a selector in [`up.layout.config.anchoredRight`](/up.layout.config#config.anchoredRight).
+  you can also configure a selector in [`up.viewport.config.anchoredRight`](/up.viewport.config#config.anchoredRight).
 
   \#\#\# Example
 
@@ -685,22 +737,29 @@ up.layout = (($) ->
   ###
 
   ###**
-  @function up.layout.firstHashTarget
+  @function up.viewport.firstHashTarget
   @internal
   ###
   firstHashTarget = (hash) ->
     if hash = pureHash(hash)
-      byID = u.attributeSelector('id', hash)
-      byName = 'a' + u.attributeSelector('name', hash)
-      up.first("#{byID},#{byName}")
-
+      selector = [
+        # First match an <* up-id="hash">. This won't be picked up without JS,
+        # preventing the scroll position from jump if up.viewport.revealPadding
+        # is set.
+        e.attributeSelector('up-id', hash),
+        # Match an <* id="hash">
+        e.attributeSelector('id', hash),
+        # Match an <a name="hash">
+        'a' + e.attributeSelector('name', hash)
+      ].join(',')
+      up.fragment.first(selector)
 
   ###**
   Returns `'foo'` if the hash is `'#foo'`.
 
   Returns undefined if the hash is `'#'`, `''` or `undefined`.
 
-  @function up.browser.hash
+  @function pureHash
   @internal
   ###
   pureHash = (value) ->
@@ -708,6 +767,8 @@ up.layout = (($) ->
       value = value.substr(1)
     u.presence(value)
 
+
+
   up.on 'up:app:booted', -> revealHash(location.hash)
 
   up.on 'up:framework:reset', reset
@@ -718,19 +779,28 @@ up.layout = (($) ->
   firstHashTarget: firstHashTarget
   scroll: scroll
   config: config
-  viewportOf: viewportOf
-  viewportsWithin: viewportsWithin
-  viewports: viewports
+  closest: closest
+  subtree: getSubtree
+  around: getAround
+  all: getAll
+  rootSelector: rootSelector
+  root: getRoot
+  rootWidth: rootWidth
+  rootHeight: rootHeight
+  rootHasVerticalScrollbar: rootHasVerticalScrollbar
+  rootOverflowElement: rootOverflowElement
+  isRoot: isRoot
+  scrollbarWidth: scrollbarWidth
   scrollTops: scrollTops
   saveScroll: saveScroll
   restoreScroll: restoreScroll
   scrollAfterInsertFragment: scrollAfterInsertFragment
   anchoredRight: anchoredRight
-  fixedChildren: fixedChildren
+  fixedElements: fixedElements
   absolutize: absolutize
 
-)(jQuery)
+up.scroll = up.viewport.scroll
+up.reveal = up.viewport.reveal
+up.revealHash = up.viewport.revealHash
 
-up.scroll = up.layout.scroll
-up.reveal = up.layout.reveal
-up.revealHash = up.layout.revealHash
+up.legacy.renamedModule 'layout', 'viewport'