unpoly-rails 0.55.1 → 0.56.0

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

@@ -124,34 +124,35 @@ up.popup = (($) ->
     config.reset()
 
   align = ->
-    css = {}
+    style = {}
 
     popupBox = u.measure(state.$popup)
 
     if u.isFixed(state.$anchor)
       linkBox = state.$anchor.get(0).getBoundingClientRect()
-      css['position'] = 'fixed'
+      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
-        css['top'] = linkBox.top + linkBox.height
-        css['left'] = linkBox.left + linkBox.width - popupBox.width
+        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
-        css['top'] = linkBox.top + linkBox.height
-        css['left'] = linkBox.left
+        style.top = linkBox.top + linkBox.height
+        style.left = linkBox.left
       when 'top-right' # anchored to top-right of link, opens to top-left
-        css['top'] = linkBox.top - popupBox.height
-        css['left'] = linkBox.left + linkBox.width - popupBox.width
+        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
-        css['top'] = linkBox.top - popupBox.height
-        css['left'] = linkBox.left
+        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)
-    state.$popup.css(css)
+
+    u.writeInlineStyle(state.$popup, style)
 
   discardHistory = ->
     state.coveredTitle = null
@@ -344,7 +345,7 @@ up.popup = (($) ->
     attachNow($link, options)
 
   toggleAsap = ($link, options) ->
-    if $link.is('.up-current')
+    if u.hasClass($link, 'up-current')
       closeAsap()
     else
       attachAsap($link, options)

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

@@ -39,7 +39,7 @@ up.radio = (($) ->
   @internal
   ###
   hungrySelector = ->
-    u.multiSelector(config.hungry)
+    config.hungry.join(',')
 
   ###**
   Elements with this attribute are [updated](/up.replace) whenever there is a

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

@@ -376,22 +376,14 @@ up.syntax = (($) ->
   @internal
   ###
   clean = ($fragment) ->
-    prepareClean($fragment)()
-
-  ###**
-  @function up.syntax.prepareClean
-  @param {jQuery} $fragment
-  @return {Function}
-  @internal
-  ###
-  prepareClean = ($fragment) ->
-    $candidates = u.selectInSubtree($fragment, ".#{DESTRUCTIBLE_CLASS}")
-    destructors = u.map $candidates, (candidate) -> $(candidate).data(DESTRUCTORS_KEY)
-    # Although destructible elements should always have an destructor function, we might be
-    # destroying a clone of such an element. E.g. Unpoly creates a clone when keeping an
-    # [up-keep] element, and that clone still has the .up-destructible class.
-    destructors = u.compact destructors
-    u.sequence(destructors...)
+    $destructibles = u.selectInSubtree($fragment, ".#{DESTRUCTIBLE_CLASS}")
+    u.each $destructibles, (destructible) ->
+      # The destructor function may be undefined at this point.
+      # Although destructible elements should always have an destructor function, we might be
+      # destroying a clone of such an element. E.g. Unpoly creates a clone when keeping an
+      # [up-keep] element, and that clone still has the .up-destructible class.
+      if destructor = $(destructible).data(DESTRUCTORS_KEY)
+        destructor()
 
   ###**
   Checks if the given element has an [`up-data`](/up-data) attribute.
@@ -487,7 +479,6 @@ up.syntax = (($) ->
   macro: macro
   compile: compile
   clean: clean
-  prepareClean: prepareClean
   data: data
 
 )(jQuery)

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

@@ -79,33 +79,33 @@ up.tooltip = (($) ->
     config.reset()
 
   align = ->
-    css = {}
+    style = {}
     tooltipBox = u.measure(state.$tooltip)
 
     if u.isFixed(state.$anchor)
       linkBox = state.$anchor.get(0).getBoundingClientRect()
-      css['position'] = 'fixed'
+      style.position = 'fixed'
     else
       linkBox = u.measure(state.$anchor)
 
     switch state.position
       when 'top'
-        css['top'] = linkBox.top - tooltipBox.height
-        css['left'] = linkBox.left + 0.5 * (linkBox.width - tooltipBox.width)
+        style.top = linkBox.top - tooltipBox.height
+        style.left = linkBox.left + 0.5 * (linkBox.width - tooltipBox.width)
       when 'left'
-        css['top'] = linkBox.top + 0.5 * (linkBox.height - tooltipBox.height)
-        css['left'] = linkBox.left - tooltipBox.width
+        style.top = linkBox.top + 0.5 * (linkBox.height - tooltipBox.height)
+        style.left = linkBox.left - tooltipBox.width
       when 'right'
-        css['top'] = linkBox.top + 0.5 * (linkBox.height - tooltipBox.height)
-        css['left'] = linkBox.left + linkBox.width
+        style.top = linkBox.top + 0.5 * (linkBox.height - tooltipBox.height)
+        style.left = linkBox.left + linkBox.width
       when 'bottom'
-        css['top'] = linkBox.top + linkBox.height
-        css['left'] = linkBox.left + 0.5 * (linkBox.width - tooltipBox.width)
+        style.top = linkBox.top + linkBox.height
+        style.left = linkBox.left + 0.5 * (linkBox.width - tooltipBox.width)
       else
         up.fail("Unknown position option '%s'", state.position)
 
     state.$tooltip.attr('up-position', state.position)
-    state.$tooltip.css(css)
+    u.writeInlineStyle(state.$tooltip, style)
 
   createElement = (options) ->
     $element = u.$createElementFromSelector('.up-tooltip')

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

@@ -15,7 +15,15 @@ up.util = (($) ->
   @function up.util.noop
   @experimental
   ###
-  noop = $.noop
+  noop = (->)
+
+  ###**
+  A function that returns a resolved promise.
+
+  @function up.util.asyncNoop
+  @internal
+  ###
+  asyncNoop = -> Promise.resolve()
 
   ###**
   Ensures that the given function can only be called a single time.
@@ -97,7 +105,8 @@ up.util = (($) ->
   ###
   parseUrl = (urlOrAnchor) ->
     # In case someone passed us a $link, unwrap it
-    urlOrAnchor = unJQuery(urlOrAnchor)
+    if isJQuery(urlOrAnchor)
+      urlOrAnchor = getElement(urlOrAnchor)
 
     # If we are handed a parsed URL, just return it
     if urlOrAnchor.pathname
@@ -159,7 +168,8 @@ up.util = (($) ->
     $root
 
   ###**
-  @function $create
+  @function $createPlaceHolder
+  @internal
   ###
   $createPlaceholder = (selector, container = document.body) ->
     $placeholder = $createElementFromSelector(selector)
@@ -273,6 +283,7 @@ up.util = (($) ->
   @stable
   ###
   map = (array, block) ->
+    return [] if array.length == 0
     block = listBlock(block)
     for item, index in array
       block(item, index)
@@ -346,7 +357,7 @@ up.util = (($) ->
   @stable
   ###
   isMissing = (object) ->
-    isUndefined(object) || isNull(object) # || isNaN(object)
+    isUndefined(object) || isNull(object)
 
   ###**
   Returns whether the given argument is neither `undefined` nor `null`.
@@ -385,9 +396,11 @@ up.util = (($) ->
   @stable
   ###
   isBlank = (object) ->
-    isMissing(object) ||                  # null or undefined
-    (isObject(object) && Object.keys(object).length == 0) ||
-    (object.length == 0)                  # string, Array, jQuery
+    return true if isMissing(object)
+    return false if isFunction(object)
+    return true if isObject(object) && Object.keys(object).length == 0 # object
+    return true if object.length == 0 # string, array, jQuery
+    return false
 
   ###**
   Returns the given argument if the argument is [present](/up.util.isPresent),
@@ -566,16 +579,20 @@ up.util = (($) ->
     object
 
   ###**
-  If given a jQuery collection, returns the underlying array of DOM element.
+  If given a jQuery collection, returns the first native DOM element in the collection.
+  If given a string, returns the first element matching that string.
   If given any other argument, returns the argument unchanged.
 
-  @function up.util.unJQuery
-  @param object
+  @function up.util.element
+  @param {jQuery|Element|String} object
+  @return {Element}
   @internal
   ###
-  unJQuery = (object) ->
+  getElement = (object) ->
     if isJQuery(object)
       object.get(0)
+    else if isString(object)
+      $(object).get(0)
     else
       object
 
@@ -607,10 +624,9 @@ up.util = (($) ->
     if defaults
       for key, defaultValue of defaults
         value = merged[key]
-        if !isGiven(value)
-          merged[key] = defaultValue
-        else if isObject(defaultValue) && isObject(value)
-          merged[key] = options(value, defaultValue)
+        if isMissing(value)
+          value = defaultValue
+        merged[key] = value
     merged
 
   ###**
@@ -711,9 +727,7 @@ up.util = (($) ->
   ###
   uniq = (array) ->
     return array if array.length < 2
-    set = new Set()
-    each array, (element) -> set.add(element)
-    setToArray(set)
+    setToArray(arrayToSet(array))
 
   ###*
   This function is like [`uniq`](/up.util.uniq), accept that
@@ -747,6 +761,15 @@ up.util = (($) ->
     set.forEach (elem) -> array.push(elem)
     array
 
+  ###*
+  @function up.util.arrayToSet
+  @internal
+  ###
+  arrayToSet = (array) ->
+    set = new Set()
+    array.forEach (elem) -> set.add(elem)
+    set
+
   ###**
   Returns all elements from the given array that return
   a truthy value when passed to the given function.
@@ -791,6 +814,28 @@ up.util = (($) ->
     select array1, (element) ->
       contains(array2, element)
 
+  addClass = (element, klassOrKlasses) ->
+    changeClassList(element, klassOrKlasses, 'add')
+
+  removeClass = (element, klassOrKlasses) ->
+    changeClassList(element, klassOrKlasses, 'remove')
+
+  changeClassList = (element, klassOrKlasses, fnName) ->
+    classList = getElement(element).classList
+    if isArray(klassOrKlasses)
+      each klassOrKlasses, (klass) ->
+        classList[fnName](klass)
+    else
+      classList[fnName](klassOrKlasses)
+
+  addTemporaryClass = (element, klassOrKlasses) ->
+    addClass(element, klassOrKlasses)
+    -> removeClass(element, klassOrKlasses)
+
+  hasClass = (element, klass) ->
+    classList = getElement(element).classList
+    classList.contains(klass)
+
   ###**
   Returns the first [present](/up.util.isPresent) element attribute
   among the given list of attribute names.
@@ -869,8 +914,9 @@ up.util = (($) ->
     # This is how Bootstrap does it also:
     # https://github.com/twbs/bootstrap/blob/c591227602996c542b9fd0cb65cff3cc9519bdd5/dist/js/bootstrap.js#L1187
     $outer = $('<div>')
+    outer = $outer.get(0)
     $outer.attr('up-viewport', '')
-    $outer.css
+    writeInlineStyle outer,
       position:  'absolute'
       top:       '0'
       left:      '0'
@@ -878,7 +924,6 @@ up.util = (($) ->
       height:    '100px' # Firefox needs at least 100px to show a scrollbar
       overflowY: 'scroll'
     $outer.appendTo(document.body)
-    outer = $outer.get(0)
     width = outer.offsetWidth - outer.clientWidth
     $outer.remove()
     width
@@ -894,32 +939,17 @@ up.util = (($) ->
     $body = $(body)
     html = document.documentElement
 
-    bodyOverflow = $body.css('overflow-y')
+    bodyOverflow = readComputedStyle($body, 'overflowY')
 
     forcedScroll = (bodyOverflow == 'scroll')
     forcedHidden = (bodyOverflow == 'hidden')
 
     forcedScroll || (!forcedHidden && html.scrollHeight > html.clientHeight)
 
-  ###**
-  Modifies the given function so it only runs once.
-  Subsequent calls will return the previous return value.
-
-  @function up.util.once
-  @param {Function} fun
-  @experimental
-  ###
-  once = (fun) ->
-    result = undefined
-    (args...) ->
-      result = fun(args...) if fun?
-      fun = undefined
-      result
-
   ###**
   Temporarily sets the CSS for the given element.
 
-  @function up.util.temporaryCss
+  @function up.util.writeTemporaryStyle
   @param {jQuery} $element
   @param {Object} css
   @param {Function} [block]
@@ -929,35 +959,18 @@ up.util = (($) ->
     A function that restores the original CSS when called.
   @internal
   ###
-  temporaryCss = (elementOrSelector, css, block) ->
+  writeTemporaryStyle = (elementOrSelector, newCss, block) ->
     $element = $(elementOrSelector)
-    oldCss = $element.css(Object.keys(css))
-    $element.css(css)
-    memo = -> $element.css(oldCss)
+    oldStyles = readInlineStyle($element, Object.keys(newCss))
+    restoreOldStyles = -> writeInlineStyle($element, oldStyles)
+    writeInlineStyle($element, newCss)
     if block
+      # If a block was passed, we run the block and restore old styles.
       block()
-      memo()
-    else
-      once(memo)
-
-  ###**
-  Forces the given jQuery element into an accelerated compositing layer.
-
-  @function up.util.forceCompositing
-  @internal
-  ###
-  forceCompositing = ($element) ->
-    oldTransforms = $element.css(['transform', '-webkit-transform'])
-    if isBlank(oldTransforms) || oldTransforms['transform'] == 'none'
-      memo = -> $element.css(oldTransforms)
-      $element.css
-        'transform': 'translateZ(0)'
-        '-webkit-transform': 'translateZ(0)' # Safari
+      restoreOldStyles()
     else
-      # Since the element already has a transform, it is already
-      # drawn using compositing. Do nothing.
-      memo = ->
-    memo
+      # If no block was passed, we return the restoration function.
+      restoreOldStyles
 
   ###**
   Forces a repaint of the given element.
@@ -966,21 +979,30 @@ up.util = (($) ->
   @internal
   ###
   forceRepaint = (element) ->
-    element = unJQuery(element)
+    element = getElement(element)
     element.offsetHeight
 
-  cssAnimate = (elementOrSelector, lastFrame, opts) ->
+  ###*
+  @function up.util.finishTransition
+  @internal
+  ###
+  concludeCssTransition = (element) ->
+    undo = writeTemporaryStyle(element, transition: 'none')
+    # Browsers need to paint at least one frame without a transition to stop the
+    # animation. In theory we could just wait until the next paint, but in case
+    # someone will set another transition after us, let's force a repaint here.
+    forceRepaint(element)
+    return undo
 
   ###**
   @internal
   ###
   margins = (selectorOrElement) ->
-    $element = $(selectorOrElement)
-    withUnits = $element.css(['margin-top', 'margin-right', 'margin-bottom', 'margin-left'])
-    top:    parseFloat(withUnits['margin-top'])
-    right:  parseFloat(withUnits['margin-right'])
-    bottom: parseFloat(withUnits['margin-bottom'])
-    left:   parseFloat(withUnits['margin-left'])
+    element = getElement(selectorOrElement)
+    top:    readComputedStyleNumber(element, 'marginTop')
+    right:  readComputedStyleNumber(element, 'marginRight')
+    bottom: readComputedStyleNumber(element, 'marginBottom')
+    left:   readComputedStyleNumber(element, 'marginLeft')
 
   ###**
   Measures the given element.
@@ -1047,7 +1069,12 @@ up.util = (($) ->
   @internal
   ###
   selectInSubtree = ($element, selector) ->
-    $element.find(selector).addBack(selector)
+    # This implementation is faster than $element.find(selector).addBack(Seelctor)
+    $matches = $()
+    if $element.is(selector)
+      $matches = $matches.add($element)
+    $matches = $matches.add($element.find(selector))
+    $matches
 
   ###**
   Looks for the given selector in the element, its descendants and its ancestors.
@@ -1109,7 +1136,7 @@ up.util = (($) ->
   only = (object, properties...) ->
     filtered = {}
     for property in properties
-      if object.hasOwnProperty(property)
+      if property of object
         filtered[property] = object[property]
     filtered
 
@@ -1188,63 +1215,6 @@ up.util = (($) ->
       array.splice(index, 1)
       element
 
-  ###**
-  @function up.util.multiSelector
-  @internal
-  ###
-  multiSelector = (parts) ->
-
-    obj = {}
-    selectors = []
-    elements = []
-
-    for part in parts
-      if isString(part)
-        selectors.push(part)
-      else
-        elements.push(part)
-
-    obj.parsed = elements
-
-    if selectors.length
-      # Although other methods would work with an array of
-      # selectors, we combine them to a single separator for
-      # performance reasons.
-      combinedSelector = selectors.join(', ')
-      obj.parsed.push(combinedSelector)
-
-    obj.select = ->
-      obj.find(undefined)
-
-    obj.find = ($root) ->
-      $result = nullJQuery()
-      for selector in obj.parsed
-        $matches = if $root then $root.find(selector) else $(selector)
-        $result = $result.add($matches)
-      $result
-
-    obj.selectInSubtree = ($start) ->
-      $matches = obj.find($start)
-      $matches = $matches.add($start) if obj.doesMatch($start)
-      $matches
-
-    obj.doesMatch = (element) ->
-      $element = $(element)
-      any obj.parsed, (selector) -> $element.is(selector)
-
-    obj.seekUp = (start) ->
-      $start = $(start)
-      $element = $start
-      $result = undefined
-      while $element.length
-        if obj.doesMatch($element)
-          $result = $element
-          break
-        $element = $element.parent()
-      $result || nullJQuery()
-
-    obj
-
   ###**
   If the given `value` is a function, calls the function with the given `args`.
   Otherwise it just returns `value`.
@@ -1290,7 +1260,7 @@ up.util = (($) ->
   @internal
   ###
   unwrapElement = (wrapper) ->
-    wrapper = unJQuery(wrapper)
+    wrapper = getElement(wrapper)
     parent = wrapper.parentNode;
     wrappedNodes = toArray(wrapper.childNodes)
     each wrappedNodes, (wrappedNode) ->
@@ -1304,7 +1274,7 @@ up.util = (($) ->
   offsetParent = ($element) ->
     $match = undefined
     while ($element = $element.parent()) && $element.length
-      position = $element.css('position')
+      position = readComputedStyle($element, 'position')
       if position == 'absolute' || position == 'relative' || $element.is('body')
         $match = $element
         break
@@ -1319,7 +1289,7 @@ up.util = (($) ->
   isFixed = (element) ->
     $element = $(element)
     loop
-      position = $element.css('position')
+      position = readComputedStyle($element, 'position')
       if position == 'fixed'
         return true
       else
@@ -1339,7 +1309,7 @@ up.util = (($) ->
     # scrollTop of the viewport.
     elementCoords = $element.position()
     futureParentCoords = $futureOffsetParent.offset()
-    $element.css
+    writeInlineStyle $element,
       position: 'absolute'
       left: elementCoords.left - futureParentCoords.left
       top: elementCoords.top - futureParentCoords.top + $viewport.scrollTop()
@@ -1560,12 +1530,76 @@ up.util = (($) ->
     else
       {}
 
+  CASE_CONVERSION_GROUP = /[^\-\_]+?(?=[A-Z\-\_]|$)/g
+
+  convertCase = (string, separator, fn) ->
+    parts = string.match(CASE_CONVERSION_GROUP)
+    parts = map parts, fn
+    parts.join(separator)
+
+  ###**
+  Returns a copy of the given string that is transformed to `kebab-case`.
+
+  @function up.util.kebabCase
+  @param {string} string
+  @return {string}
+  @internal
+  ###
+  kebabCase = (string) ->
+    convertCase string, '-', (part) -> part.toLowerCase()
+
+  ###**
+  Returns a copy of the given string that is transformed to `camelCase`.
+
+  @function up.util.camelCase
+  @param {string} string
+  @return {string}
+  @internal
+  ###
+  camelCase = (string) ->
+    convertCase string, '', (part, i) ->
+      if i == 0
+        part.toLowerCase()
+      else
+        part.charAt(0).toUpperCase() + part.substr(1).toLowerCase()
+
+  ###**
+  Returns a copy of the given object with all keys renamed
+  in `kebab-case`.
+
+  Does not change the given object.
+
+  @function up.util.kebabCaseKeys
+  @param {object} obj
+  @return {object}
+  @internal
+  ###
+  kebabCaseKeys = (obj) ->
+    copyWithRenamedKeys(obj, kebabCase)
+
+  ###**
+  Returns a copy of the given object with all keys renamed
+  in `camelCase`.
+
+  Does not change the given object.
+
+  @function up.util.camelCaseKeys
+  @param {object} obj
+  @return {object}
+  @internal
+  ###
+  camelCaseKeys = (obj) ->
+    copyWithRenamedKeys(obj, camelCase)
+
+  copyWithRenamedKeys = (obj, keyTransformer) ->
+    result = {}
+    for k, v of obj
+      k = keyTransformer(k)
+      result[k] = v
+    result
+
   opacity = (element) ->
-    rawOpacity = $(element).css('opacity')
-    if isGiven(rawOpacity)
-      parseFloat(rawOpacity)
-    else
-      undefined
+    readComputedStyleNumber(element, 'opacity')
 
   whenReady = memoize ->
     if $.isReady
@@ -1583,7 +1617,7 @@ up.util = (($) ->
   @internal
   ###
   isDetached = (element) ->
-    element = unJQuery(element)
+    element = getElement(element)
     # This is by far the fastest way to do this
     not $.contains(document.documentElement, element)
 
@@ -1726,6 +1760,135 @@ up.util = (($) ->
     $insertion.replaceWith($new)
     $old
 
+  ###**
+  Hides the given element faster than `jQuery.fn.hide()`.
+
+  @function up.util.hide
+  @param {jQuery|Element} element
+  ###
+  hide = (element) ->
+    writeInlineStyle(element, display: 'none')
+
+  ###**
+  Gets the computed style(s) for the given element.
+
+  @function up.util.readComputedStyle
+  @param {jQuery|Element} element
+  @param {String|Array} propOrProps
+    One or more CSS property names in camelCase.
+  @return {string|object}
+  @internal
+  ###
+  readComputedStyle = (element, props) ->
+    element = getElement(element)
+    style = window.getComputedStyle(element)
+    extractFromStyleObject(style, props)
+
+  ###**
+  Gets a computed style value for the given element.
+  If a value is set, the value is parsed to a number before returning.
+
+  @function up.util.readComputedStyleNumber
+  @param {jQuery|Element} element
+  @param {String} prop
+    A CSS property name in camelCase.
+  @return {string|object}
+  @internal
+  ###
+  readComputedStyleNumber = (element, prop) ->
+    rawValue = readComputedStyle(element, prop)
+    if isGiven(rawValue)
+      parseFloat(rawValue)
+    else
+      undefined
+
+  ###**
+  Gets the given inline style(s) from the given element's `[style]` attribute.
+
+  @function up.util.readInlineStyle
+  @param {jQuery|Element} element
+  @param {String|Array} propOrProps
+    One or more CSS property names in camelCase.
+  @return {string|object}
+  @internal
+  ###
+  readInlineStyle = (element, props) ->
+    element = getElement(element)
+    style = element.style
+    extractFromStyleObject(style, props)
+
+  extractFromStyleObject = (style, keyOrKeys) ->
+    if isString(keyOrKeys)
+      style[keyOrKeys]
+    else # array
+      only(style, keyOrKeys...)
+
+  ###**
+  Merges the given inline style(s) into the given element's `[style]` attribute.
+
+  @function up.util.readInlineStyle
+  @param {jQuery|Element} element
+  @param {Object} props
+    One or more CSS properties with camelCase keys.
+  @return {string|object}
+  @internal
+  ###
+  writeInlineStyle = (element, props) ->
+    element = getElement(element)
+    style = element.style
+    for key, value of props
+      value = normalizeStyleValueForWrite(key, value)
+      style[key] = value
+
+  normalizeStyleValueForWrite = (key, value) ->
+    if isMissing(value)
+      value = ''
+    else if CSS_LENGTH_PROPS.has(key)
+      value = cssLength(value)
+    value
+
+  CSS_LENGTH_PROPS = arrayToSet [
+    'top', 'right', 'bottom', 'left',
+    'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+    'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+    'width', 'height',
+    'maxWidth', 'maxHeight',
+    'minWidth', 'minHeight',
+  ]
+
+  ###*
+  Converts the given value to a CSS length value, adding a `px` unit if required.
+
+  @function up.util.cssLength
+  @internal
+  ###
+  cssLength = (obj) ->
+    if isNumber(obj) || (isString(obj) && /^\d+$/.test(obj))
+      obj.toString() + "px"
+    else
+      obj
+
+  ###*
+  Returns whether the given element has a CSS transition set.
+
+  @function up.util.hasCssTransition
+  @return {boolean}
+  @internal
+  ###
+  hasCssTransition = (elementOrStyleHash) ->
+    if isOptions(elementOrStyleHash)
+      style = elementOrStyleHash
+    else
+      element = getElement(element)
+      style = getComputedStyle(element)
+
+    prop = style.transitionProperty
+    duration = style.transitionDuration
+    # The default transition for elements is actually "all 0s ease 0s"
+    # instead of "none", although that has the same effect as "none".
+    noTransition = (prop == 'none' || (prop == 'all' && duration == 0))
+    not noTransition
+
   ###**
   Flattens the given `array` a single level deep.
 
@@ -1822,6 +1985,16 @@ up.util = (($) ->
   isBodyDescendant = (element) ->
     $(element).parents('body').length > 0
 
+  isEqual = (a, b) ->
+    if typeof(a) != typeof(b)
+      false
+    else if isArray(a)
+      a.length == b.length && all(a, (elem, index) -> isEqual(elem, b[index]))
+    else if isObject(a)
+      fail('isEqual cannot compare objects yet')
+    else
+      a == b
+
   requestDataAsArray: requestDataAsArray
   requestDataAsQuery: requestDataAsQuery
   appendRequestData: appendRequestData
@@ -1880,14 +2053,17 @@ up.util = (($) ->
   isUnmodifiedKeyEvent: isUnmodifiedKeyEvent
   isUnmodifiedMouseEvent: isUnmodifiedMouseEvent
   nullJQuery: nullJQuery
-  unJQuery: unJQuery
+  element: getElement
   setTimer: setTimer
   nextFrame: nextFrame
   measure: measure
-  temporaryCss: temporaryCss
-  cssAnimate: cssAnimate
-  forceCompositing: forceCompositing
+  addClass: addClass
+  removeClass: removeClass
+  hasClass: hasClass
+  addTemporaryClass: addTemporaryClass
+  writeTemporaryStyle: writeTemporaryStyle
   forceRepaint: forceRepaint
+  concludeCssTransition: concludeCssTransition
   escapePressed: escapePressed
   copyAttributes: copyAttributes
   selectInSubtree: selectInSubtree
@@ -1908,7 +2084,10 @@ up.util = (($) ->
   config: config
   openConfig: openConfig
   unwrapElement: unwrapElement
-  multiSelector: multiSelector
+  camelCase: camelCase
+  camelCaseKeys: camelCaseKeys
+  kebabCase: kebabCase
+  kebabCaseKeys: kebabCaseKeys
   error: fail
   pluckData: pluckData
   pluckKey: pluckKey
@@ -1916,6 +2095,7 @@ up.util = (($) ->
   extractOptions: extractOptions
   isDetached: isDetached
   noop: noop
+  asyncNoop: asyncNoop
   opacity: opacity
   whenReady: whenReady
   identity: identity
@@ -1937,7 +2117,14 @@ up.util = (($) ->
   isBodyDescendant: isBodyDescendant
   isCrossDomain: isCrossDomain
   microtask: microtask
-
+  isEqual: isEqual
+  hide: hide
+  cssLength: cssLength
+  readComputedStyle: readComputedStyle
+  readComputedStyleNumber: readComputedStyleNumber
+  readInlineStyle: readInlineStyle
+  writeInlineStyle: writeInlineStyle
+  hasCssTransition: hasCssTransition
 
 )(jQuery)