unpoly-rails 0.57.0 → 0.60.0

data/lib/assets/javascripts/unpoly/classes/css_transition.coffee

@@ -1,13 +1,12 @@
 u = up.util
+e = up.element
 
 class up.CssTransition
 
-  constructor: ($element, lastFrame, options) ->
-    @$element = $element
-    @element = u.element($element)
-    @lastFrameCamel = u.camelCaseKeys(lastFrame)
-    @lastFrameKebab = u.kebabCaseKeys(lastFrame)
+  constructor: (@element, @lastFrameKebab, options) ->
     @lastFrameKeysKebab = Object.keys(@lastFrameKebab)
+    if u.some(@lastFrameKeysKebab, (key) -> key.match(/A-Z/))
+      up.fail('Animation keys must be kebab-case')
     @finishEvent = options.finishEvent
     @duration = options.duration
     @delay = options.delay
@@ -35,11 +34,7 @@ class up.CssTransition
 
   listenToFinishEvent: =>
     if @finishEvent
-      @$element.on(@finishEvent, @onFinishEvent)
-
-  stopListenToFinishEvent: =>
-    if @finishEvent
-      @$element.off(@finishEvent, @onFinishEvent)
+      @stopListenToFinishEvent = @element.addEventListener(@finishEvent, @onFinishEvent)
 
   onFinishEvent: (event) =>
     # don't waste time letting the event bubble up the DOM
@@ -48,17 +43,14 @@ class up.CssTransition
 
   startFallbackTimer: =>
     timingTolerance = 100
-    @fallbackTimer = u.setTimer (@totalDuration + timingTolerance), =>
+    @fallbackTimer = u.timer (@totalDuration + timingTolerance), =>
       @finish()
 
   stopFallbackTimer: =>
     clearTimeout(@fallbackTimer)
 
   listenToTransitionEnd: =>
-    @$element.on 'transitionend', @onTransitionEnd
-
-  stopListenToTransitionEnd: =>
-    @$element.off 'transitionend', @onTransitionEnd
+    @stopListenToTransitionEnd = up.on(@element, 'transitionend', @onTransitionEnd)
 
   onTransitionEnd: (event) =>
     # Check if the transitionend event was caused by our own transition,
@@ -70,7 +62,7 @@ class up.CssTransition
     elapsed = new Date() - @startTime
     return unless elapsed > 0.25 * @totalDuration
 
-    completedPropertyKebab = event.originalEvent.propertyName
+    completedPropertyKebab = event.propertyName
     return unless u.contains(@lastFrameKeysKebab, completedPropertyKebab)
 
     @finish()
@@ -81,47 +73,46 @@ class up.CssTransition
     @finished = true
 
     @stopFallbackTimer()
-    @stopListenToFinishEvent()
-    @stopListenToTransitionEnd()
+    @stopListenToFinishEvent?()
+    @stopListenToTransitionEnd?()
 
     # Cleanly finish our own transition so the old transition
     # (or any other transition set right after that) will be able to take effect.
-    u.concludeCssTransition(@element)
+    e.concludeCssTransition(@element)
 
     @resumeOldTransition()
 
     @deferred.resolve()
 
   pauseOldTransition: =>
-    oldTransition = u.readComputedStyle(@element, [
+    oldTransition = e.style(@element, [
       'transitionProperty',
       'transitionDuration',
       'transitionDelay',
       'transitionTimingFunction'
     ])
 
-    if u.hasCssTransition(oldTransition)
+    if e.hasCssTransition(oldTransition)
       # Freeze the previous transition at its current place, by setting the currently computed,
       # animated CSS properties as inline styles. Transitions on all properties will not be frozen,
       # since that would involve setting every single CSS property as an inline style.
       unless oldTransition.transitionProperty == 'all'
         oldTransitionProperties = oldTransition.transitionProperty.split(/\s*,\s*/)
-        oldTransitionFrameKebab = u.readComputedStyle(@element, oldTransitionProperties)
-        oldTransitionFrameCamel = u.camelCaseKeys(oldTransitionFrameKebab)
-        @setOldTransitionTargetFrame = u.writeTemporaryStyle(@element, oldTransitionFrameCamel)
+        oldTransitionFrameKebab = e.style(@element, oldTransitionProperties)
+        @setOldTransitionTargetFrame = e.setTemporaryStyle(@element, oldTransitionFrameKebab)
 
       # Stop the existing CSS transition so it does not emit transitionEnd events
-      @setOldTransition = u.concludeCssTransition(@element)
+      @setOldTransition = e.concludeCssTransition(@element)
 
   resumeOldTransition: =>
     @setOldTransitionTargetFrame?()
     @setOldTransition?()
 
   startMotion: =>
-    u.writeInlineStyle @element,
+    e.setStyle @element,
       transitionProperty: Object.keys(@lastFrameKebab).join(', ')
       transitionDuration: "#{@duration}ms"
       transitionDelay: "#{@delay}ms"
       transitionTimingFunction: @easing
-    u.writeInlineStyle(@element, @lastFrameCamel)
+    e.setStyle(@element, @lastFrameKebab)
 

data/lib/assets/javascripts/unpoly/classes/divertible_chain.coffee

@@ -0,0 +1,39 @@
+u = up.util
+
+###**
+A linear task queue whose (2..n)th tasks can be changed at any time.
+
+@function up.DivertibleChain
+@internal
+###
+class up.DivertibleChain
+
+  constructor: ->
+    @reset()
+
+  reset: =>
+    @queue = []
+    @currentTask = undefined
+
+  promise: =>
+    lastTask = u.last(@allTasks())
+    lastTask?.promise || Promise.resolve()
+
+  allTasks: =>
+    tasks = []
+    tasks.push(@currentTask) if @currentTask
+    tasks = tasks.concat(@queue)
+    tasks
+
+  poke: =>
+    unless @currentTask # don't start a new task while we're still running one
+      if @currentTask = @queue.shift()
+        promise = @currentTask()
+        u.always promise, =>
+          @currentTask = undefined
+          @poke()
+
+  asap: (newTasks...) =>
+    @queue = u.map(newTasks, u.previewable)
+    @poke()
+    @promise()

data/lib/assets/javascripts/unpoly/classes/event_listener.coffee

@@ -0,0 +1,116 @@
+u = up.util
+e = up.element
+
+class up.EventListener
+
+  constructor: (@element, @eventName, @selector, @callback, options = {}) ->
+    { @jQuery } = options
+    @key = @constructor.key(@eventName, @selector, @callback)
+    @isDefault = up.framework.isBooting()
+
+  bind: ->
+    map = (@element.upEventListeners ||= {})
+    if map[@key]
+      up.fail('up.on(): The %o callback %o cannot be registered more than once', @eventName, @callback)
+    map[@key] = this
+    @element.addEventListener(@eventName, @nativeCallback)
+
+  unbind: =>
+    if map = @element.upEventListeners
+      delete map[@key]
+    @element.removeEventListener(@eventName, @nativeCallback)
+
+  nativeCallback: (event) =>
+    # 1. Since we're listing on `document`, event.currentTarget is now `document`.
+    # 2. event.target is the element that received an event, which might be a
+    #    child of `selector`.
+    # 3. There is only a single event bubbling up the DOM, so we are only called once.
+
+    element = event.target
+    element = e.closest(element, @selector) if @selector
+
+    if element
+      elementArg = if @jQuery then jQuery(element) else element
+      args = [event, elementArg]
+
+      # Do not retrieve and parse [up-data] unless the listener function
+      # expects a third argument. Note that we must pass data for an argument
+      # count of 0, since then the function might take varargs.
+      expectedArgCount = @callback.length
+
+      unless expectedArgCount == 1 || expectedArgCount == 2
+        data = up.syntax.data(element)
+        args.push(data)
+
+      @callback.apply(element, args)
+
+  ###
+  Parses the following arg variants into an object:
+
+  - [elements, eventNames, selector, callback]
+  - [elements, eventNames,           callback]
+  - [          eventNames, selector, callback]
+  - [          eventNames,           callback]
+
+  @function up.EventListener#parseArgs
+  @internal
+  ###
+  @parseArgs = (args) ->
+    args = u.copy(args)
+
+    # A callback function is given in all arg variants.
+    callback = args.pop()
+    # Give the callback function a numeric identifier so it
+    # can become part of the upEventListeners key.
+    callback.upUid ||= u.uid()
+
+    # The user can pass an element (or the document, or the window) as the
+    # first argument. If omitted, the listener will bind to the document.
+    if args[0].addEventListener
+      elements = [args.shift()]
+    else if u.isJQuery(args[0]) || (u.isList(args[0]) && args[0][0].addEventListener)
+      elements = args.shift()
+    else
+      elements = [document]
+
+    # Event names are given in all arg variants
+    eventNames = u.splitValues(args.shift())
+    # eventNames = u.map(eventNames, up.legacy.fixEventName)
+
+    # A selector is given if the user wants to delegate events.
+    # It might be undefined.
+    selector = args[0]
+
+    { elements, eventNames, selector, callback }
+
+  @bind: (args, options) ->
+    parsed = @parseArgs(args)
+    unbindFns = []
+
+    for element in parsed.elements
+      for eventName in parsed.eventNames
+        listener = new @(element, eventName, parsed.selector, parsed.callback, options)
+        listener.bind()
+        unbindFns.push(listener.unbind)
+
+    u.sequence(unbindFns)
+
+  @key: (eventName, selector, callback) ->
+    [eventName, selector, callback.upUid].join('|')
+
+  @unbind: (args) ->
+    parsed = @parseArgs(args)
+    for element in parsed.elements
+      map = element.upEventListeners
+      for eventName in parsed.eventNames
+        key = @key(eventName, parsed.selector, parsed.callback)
+        if map && (listener = map[key])
+          listener.unbind()
+
+  @unbindNonDefault: (element) ->
+    if map = element.upEventListeners
+      listeners = u.values(map)
+      for listener in listeners
+        # Calling unbind() also removes the listener from element.upEventListeners
+        unless listener.isDefault
+          listener.unbind()

data/lib/assets/javascripts/unpoly/classes/extract_cascade.coffee

@@ -2,25 +2,25 @@ u = up.util
 
 class up.ExtractCascade
 
-  constructor: (selector, options) ->
+  constructor: (selectorOrElement, options) ->
     @options = u.options(options, humanizedTarget: 'selector', layer: 'auto')
-    @options.transition = u.option(@options.transition, @options.animation)
-    @options.hungry = u.option(@options.hungry, true)
+    @options.transition ?= @options.animation
+    @options.hungry ?= true
 
-    @candidates = @buildCandidates(selector)
+    @candidates = @buildCandidates(selectorOrElement)
     @plans = u.map @candidates, (candidate, i) =>
       planOptions = u.copy(@options)
       if i > 0
         # If we're using a fallback (any candidate that's not the first),
         # the original transition might no longer be appropriate.
-        planOptions.transition = u.option(up.dom.config.fallbackTransition, @options.transition)
+        planOptions.transition = up.fragment.config.fallbackTransition ? @options.transition
       new up.ExtractPlan(candidate, planOptions)
 
   buildCandidates: (selector) ->
-    candidates = [selector, @options.fallback, up.dom.config.fallbacks]
+    candidates = [selector, @options.fallback, up.fragment.config.fallbacks]
     candidates = u.flatten(candidates)
     # Remove undefined, null and false from the list
-    candidates = u.select(candidates, u.isTruthy)
+    candidates = u.filter(candidates, u.isTruthy)
     candidates = u.uniq(candidates)
 
     if @options.fallback == false || @options.provideTarget
@@ -39,7 +39,7 @@ class up.ExtractCascade
     @detectPlan('matchExists')
 
   detectPlan: (checker) =>
-    u.detect @plans, (plan) -> plan[checker]()
+    u.find @plans, (plan) -> plan[checker]()
 
   bestPreflightSelector: =>
     if @options.provideTarget

data/lib/assets/javascripts/unpoly/classes/extract_plan.coffee

@@ -1,4 +1,5 @@
 u = up.util
+e = up.element
 
 class up.ExtractPlan
 
@@ -9,25 +10,25 @@ class up.ExtractPlan
     @transition = options.transition
     @response = options.response
     @oldLayer = options.layer
-    originalSelector = up.dom.resolveSelector(selector, @origin)
+    originalSelector = e.resolveSelector(selector, @origin)
     @parseSteps(originalSelector)
 
   findOld: =>
     u.each @steps, (step) =>
-      step.$old = up.dom.first(step.selector, layer: @oldLayer)
+      step.oldElement = up.fragment.first(step.selector, layer: @oldLayer)
 
   findNew: =>
     u.each @steps, (step) =>
       # The response has no layers. It's always just the page.
-      step.$new = @response.first(step.selector)
+      step.newElement = @response.first(step.selector)
 
   oldExists: =>
     @findOld()
-    u.all @steps, (step) -> step.$old
+    u.every @steps, (step) -> step.oldElement
 
   newExists: =>
     @findNew()
-    u.all @steps, (step) -> step.$new
+    u.every @steps, (step) -> step.newElement
 
   matchExists: =>
     @oldExists() && @newExists()
@@ -42,16 +43,16 @@ class up.ExtractPlan
 
     # When two replacements target the same element, we would process
     # the same content twice. We never want that, so we only keep the first step.
-    compressed = u.uniqBy(compressed, (step) -> step.$old[0])
+    compressed = u.uniqBy(compressed, (step) -> step.oldElement)
 
-    compressed = u.select compressed, (candidateStep, candidateIndex) =>
-      u.all compressed, (rivalStep, rivalIndex) =>
+    compressed = u.filter compressed, (candidateStep, candidateIndex) =>
+      u.every compressed, (rivalStep, rivalIndex) =>
         if rivalIndex == candidateIndex
           true
         else
-          candidateElement = candidateStep.$old[0]
-          rivalElement = rivalStep.$old[0]
-          rivalStep.pseudoClass || !$.contains(rivalElement, candidateElement)
+          candidateElement = candidateStep.oldElement
+          rivalElement = rivalStep.oldElement
+          rivalStep.pseudoClass || !rivalElement.contains(candidateElement)
 
     # If we revealed before, we should reveal now
     compressed[0].reveal = @steps[0].reveal
@@ -93,16 +94,15 @@ class up.ExtractPlan
   addHungrySteps: =>
     hungrySteps = []
     if @hungry
-      $hungries = $(up.radio.hungrySelector())
-      transition = u.option(up.radio.config.hungryTransition, @transition)
-      for hungry in $hungries
-        $hungry = $(hungry)
-        selector = u.selectorForElement($hungry)
-        if $newHungry = @response.first(selector)
+      hungries = e.all(up.radio.hungrySelector())
+      transition = up.radio.config.hungryTransition ? @transition
+      for hungry in hungries
+        selector = e.toSelector(hungry)
+        if newHungry = @response.first(selector)
           hungrySteps.push
             selector: selector
-            $old: $hungry
-            $new: $newHungry
+            oldElement: hungry
+            newElement: newHungry
             transition: transition
             reveal: false # we never auto-reveal a hungry element
             origin: null # don't let the hungry element auto-close a non-sticky modal or popup

data/lib/assets/javascripts/unpoly/classes/field_observer.coffee

@@ -1,25 +1,24 @@
 u = up.util
+e = up.element
 
 class up.FieldObserver
 
-  # Although (depending on the browser) we only need/receive either input or change,
-  # we always bind to both events in case another script manually triggers it.
-  CHANGE_EVENTS = 'input change'
-
-  constructor: (@$field, options) ->
+  constructor: (fieldOrFields, options, @callback) ->
+    @fields = e.list(fieldOrFields)
     @delay = options.delay
-    @callback = options.callback
+    @batch = options.batch
 
   start: =>
-    # Don't use undefined since an unchecked checkbox actually has an undefined value
-    @scheduledValue = null
-    @processedValue = @readFieldValue()
+    @scheduledValues = null
+    @processedValues = @readFieldValues()
     @currentTimer = undefined
-    @currentCallback = undefined
-    @$field.on(CHANGE_EVENTS, @check)
+    @callbackRunning = false
+    # Although (depending on the browser) we only need/receive either input or change,
+    # we always bind to both events in case another script manually triggers it.
+    @unbind = up.on(@fields, 'input change', @check)
 
   stop: =>
-    @$field.off(CHANGE_EVENTS, @check)
+    @unbind()
     @cancelTimer()
 
   cancelTimer: =>
@@ -27,31 +26,55 @@ class up.FieldObserver
     @currentTimer = undefined
 
   scheduleTimer: =>
-    @currentTimer = u.setTimer @delay, =>
+    @cancelTimer()
+    @currentTimer = u.timer @delay, =>
       @currentTimer = undefined
       @requestCallback()
 
-  isNewValue: (value) =>
-    value != @processedValue && (@scheduledValue == null || @scheduledValue != value)
+  scheduleValues: (values) =>
+    @scheduledValues = values
+    @scheduleTimer()
+
+  isNewValues: (values) =>
+    !u.isEqual(values, @processedValues) && !u.isEqual(@scheduledValues, values)
 
   requestCallback: =>
-    if @scheduledValue != null && !@currentTimer && !@currentCallback
-      @processedValue = @scheduledValue
-      @scheduledValue = null
-      @currentCallback = => @callback.call(@$field.get(0), @processedValue, @$field)
-      # If the callback returns a promise x, Promise.resolve(x) will wait for it
-      callbackDone = Promise.resolve(@currentCallback())
-      u.always callbackDone, =>
-        # Don't use undefined since an unchecked checkbox actually has an undefined value
-        @currentCallback = undefined
+    if @scheduledValues != null && !@currentTimer && !@callbackRunning
+      diff = @changedValues(@processedValues, @scheduledValues)
+      @processedValues = @scheduledValues
+      @scheduledValues = null
+      @callbackRunning = true
+
+      callbackReturnValues = []
+      if @batch
+        callbackReturnValues.push(@callback(diff))
+      else
+        for name, value of diff
+          callbackReturnValues.push(@callback(value, name))
+
+      # Promise.all() will wait for any promises that might be
+      # contained in the `callbackReturnValues` array.
+      callbacksDone = Promise.all(callbackReturnValues)
+
+      u.always callbacksDone, =>
+        @callbackRunning = false
         @requestCallback()
 
-  readFieldValue: =>
-    u.submittedValue(@$field)
+  changedValues: (previous, next) ->
+    changes = {}
+    keys = Object.keys(previous)
+    keys = keys.concat(Object.keys(next))
+    keys = u.uniq(keys)
+    for key in keys
+      previousValue = previous[key]
+      nextValue = next[key]
+      unless u.isEqual(previousValue, nextValue)
+        changes[key] = nextValue
+    changes
+
+  readFieldValues: =>
+    up.Params.fromFields(@fields).toObject()
 
   check: =>
-    value = @readFieldValue()
-    if @isNewValue(value)
-      @scheduledValue = value
-      @cancelTimer()
-      @scheduleTimer()
+    values = @readFieldValues()
+    @scheduleValues(values) if @isNewValues(values)