RubyGems - upjs-rails - Versions diffs - 0.1.0 → 0.2.0 - Mend

upjs-rails 0.1.0 → 0.2.0

Files changed (409) hide show

data/lib/assets/javascripts/up/flow.js.coffee CHANGED Viewed

@@ -1,18 +1,24 @@
 ###*
-Page flow.
+Changing page fragments programmatically
+========================================
+TODO: Write some documentation
 @class up.flow
 ###
 up.flow = (->
+  u = up.util
   setSource = (element, sourceUrl) ->
     $element = $(element)
-    sourceUrl = up.util.normalizeUrl(sourceUrl) if up.util.isPresent(sourceUrl)
+    sourceUrl = u.normalizeUrl(sourceUrl) if u.isPresent(sourceUrl)
     $element.attr("up-source", sourceUrl)
   source = (element) ->
     $element = $(element).closest("[up-source]")
-    $element.attr("up-source") || location.href
+    u.presence($element.attr("up-source")) || up.browser.url()
   ###*
   Replaces elements on the current page with corresponding elements
@@ -26,111 +32,163 @@ up.flow = (->
     here, in which case a selector will be inferred from the element's class and ID.
   @param {String} url
     The URL to fetch from the server.
-  @param {String} [options.history.url=url]
-    An alternative URL to use for the browser's location bar and history.
-  @param {String} [options.history.method='push']
+  @param {String} [options.title]
+  @param {String|Boolean} [options.history=true]
+    If a `String` is given, it is used as the URL the browser's location bar and history.
+    If omitted or true, the `url` argument will be used.
+    If set to `false`, the history will remain unchanged.
+  @param {String|Boolean} [options.source=true]
   @param {String} [options.transition]
-  @param {String|Boolean} [options.source]
+  @param {String} [options.historyMethod='push']
   ###
   replace = (selectorOrElement, url, options) ->
-    selector = if up.util.presence(selectorOrElement)
+    options = u.options(options)
+    selector = if u.presence(selectorOrElement)
       selectorOrElement
     else
-      up.util.createSelectorFromElement($(selectorOrElement))
+      u.createSelectorFromElement($(selectorOrElement))
-    options = up.util.options(options, history: { url: url })
+    if u.isMissing(options.history) || u.castsToTrue(options.history)
+      options.history = url
-    if up.util.isMissing(options.source) || options.source == true
+    if u.isMissing(options.source) || u.castsToTrue(options.source)
       options.source = url
-    up.util.get(url, selector: selector)
+    u.get(url, selector: selector)
       .done (html) -> implant(selector, html, options)
-      .fail(up.util.error)
+      .fail(u.error)
   ###*
+  Replaces the given selector with the same selector from the given HTML string.
   @method up.flow.implant
   @protected
   @param {String} selector
   @param {String} html
+  @param {String} [options.title]
   @param {String} [options.source]
-  @param {String} [options.history.url]
-  @param {String} [options.history.method='push']
-  @param {String} [options.transition]
+  @param {Object} [options.transition]
+  @param {String} [options.history]
+  @param {String} [options.historyMethod='push']
   ###
   implant = (selector, html, options) ->
-    options = up.util.options(options, history: { method: 'push' })
+    options = u.options(options,
+      historyMethod: 'push'
+    )
     # jQuery cannot construct transient elements that contain <html> or <body> tags,
     # so we're using the native browser API to grep through the HTML
-    htmlElement = up.util.createElementFromHtml(html)
+    htmlElement = u.createElementFromHtml(html)
+    # TODO: extract title from HTTP header
+    options.title ||= htmlElement.querySelector("title")?.textContent
     for step in implantSteps(selector, options)
-      $old = $(step.selector)
+      $old =
+        # always prefer to replace content in popups or modals
+        u.presence($(".up-popup " + step.selector)) ||
+        u.presence($(".up-modal " + step.selector)) ||
+        u.presence($(step.selector))
       if fragment = htmlElement.querySelector(step.selector)
         $new = $(fragment)
-        swapElements $old, $new, step.transition, ->
-          options.insert?($new)
-          title = htmlElement.querySelector("title")?.textContent # todo: extract title from header
-          if options.history.url
-#            alert(options.history)
-#            alert(options.history.url)
-            document.title = title if title
-            up.history[options.history.method](options.history.url)
-            # Remember where the element came from so we can make
-            # smaller page loads in the future (does this even make sense?).
-          setSource($new, options.source || history.url)
-          autofocus($new)
+        swapElements $old, $new, step.pseudoClass, step.transition, options
       else
-        up.util.error("Could not find selector (#{step.selector}) in response (#{html})")
-  swapElements = ($old, $new, transitionName, afterInsert) ->
-    if up.util.isGiven(transitionName)
-      if $old.is('body') && transitionName != 'none'
-        up.util.error('Cannot apply transitions to body-elements', transitionName)
-      $new.insertAfter($old)
-      # Make sure that any element enhancements happen BEFORE we morph
-      # through the transition.
-      afterInsert()
-      up.bus.emit('fragment:ready', $new) # this should happen before the transition, so transitions see .up-current classes
-      up.morph($old, $new, transitionName).then -> destroy($old)
+        u.error("Could not find selector (#{step.selector}) in response (#{html})")
+  elementsInserted = ($new, options) ->
+    $new.each ->
+      $element = $(this)
+      options.insert?($element)
+      if options.history
+        document.title = options.title if options.title
+        up.history[options.historyMethod](options.history)
+      # Remember where the element came from so we can
+      # offer reload functionality.
+      setSource($element, u.presence(options.source) || options.history)
+      autofocus($element)
+      # The fragment should be readiet before the transition,
+      # so transitions see .up-current classes
+      up.ready($element)
+  swapElements = ($old, $new, pseudoClass, transition, options) ->
+    transition ||= 'none'
+    if pseudoClass
+      insertionMethod = if pseudoClass == 'before' then 'prepend' else 'append'
+      # Keep a reference to the children append/prepend because
+      # we need to compile them further down
+      $addedChildren = $new.children()
+      # Insert contents() instead of $children since contents()
+      # also includes text nodes.
+      $old[insertionMethod]($new.contents())
+      u.copyAttributes($new, $old)
+      elementsInserted($addedChildren, options)
+      # Since we're adding content instead of replacing, we'll only
+      # animate $new instead of morphing between $old and $new
+      up.animate($new, transition)
     else
-      up.bus.emit('fragment:destroy', old)
-      $old.replaceWith($new)
-      up.bus.emit('fragment:ready', $new)
-      afterInsert()
+      # Wrap the replacement as a destroy animation, so $old will
+      # get marked as .up-destroying right away.
+      destroy $old, animation: ->
+        $new.insertAfter($old)
+        elementsInserted($new, options)
+        if $old.is('body') && transition != 'none'
+          u.error('Cannot apply transitions to body-elements', transition)
+        up.morph($old, $new, transition)
   implantSteps = (selector, options) ->
     transitionString = options.transition || options.animation || 'none'
     comma = /\ *,\ */
     disjunction = selector.split(comma)
-    transitions = transitionString.split(comma) if up.util.isPresent(transitionString)
+    transitions = transitionString.split(comma) if u.isPresent(transitionString)
     for selectorAtom, i in disjunction
-      transition = transitions[i] || up.util.last(transitions)
-      selector: selectorAtom
+      # Splitting the atom
+      selectorParts = selectorAtom.match(/^(.+?)(?:\:(before|after))?$/)
+      transition = transitions[i] || u.last(transitions)
+      selector: selectorParts[1]
+      pseudoClass: selectorParts[2]
       transition: transition
   autofocus = ($element) ->
-    $control = $element.find('[autofocus]:last')
+    selector = '[autofocus]:last'
+    $control = u.findWithSelf($element, selector)
     if $control.length && $control.get(0) != document.activeElement
       $control.focus()
+#  executeScripts = ($new) ->
+#    $new.find('script').each ->
+#      $script = $(this)
+#      type = $script.attr('type')
+#      if u.isBlank(type) || type.indexOf('text/javascript') == 0
+#        code = $script.text()
+#        console.log("Evaling javascript code", code)
+#        eval(code)
   ###*
   Destroys the given element or selector.
   Takes care that all destructors, if any, are called.
   @method up.destroy
   @param {String|Element|jQuery} selectorOrElement
+  @param {String|Function|Object} [options.animation]
+  @param {String} [options.url]
+  @param {String} [options.title]
   ###
   destroy = (selectorOrElement, options) ->
     $element = $(selectorOrElement)
-    options = up.util.options(options, animation: 'none')
+    options = u.options(options, animation: 'none')
     $element.addClass('up-destroying')
+    # If e.g. a modal or popup asks us to restore a URL, do this
+    # before emitting `fragment:destroy`. This way up.navigate sees the
+    # new URL and can assign/remove .up-current classes accordingly.
+    up.history.push(options.url) if u.isPresent(options.url)
+    document.title = options.title if u.isPresent(options.title)
     up.bus.emit('fragment:destroy', $element)
-    up.motion.animate($element, options.animation).then ->
-      $element.remove()
+    animationPromise = u.presence(options.animation, u.isPromise) ||
+      up.motion.animate($element, options.animation)
+    animationPromise.then -> $element.remove()
   ###*
   Replaces the given selector or element with a fresh copy
@@ -143,18 +201,33 @@ up.flow = (->
     sourceUrl = source(selectorOrElement)
     replace(selectorOrElement, sourceUrl)
+  ###*
+  Resets Up.js to the state when it was booted.
+  All custom event handlers, animations, etc. that have been registered
+  will be discarded.
+  This is an internal method for to enable unit testing.
+  Don't use this in production.
+  @protected
+  @method up.reset
+  ###
+  reset = ->
+    up.bus.emit('framework:reset')
   up.bus.on('app:ready', ->
-    setSource(document.body, location.href)
+    setSource(document.body, up.browser.url())
   )
   replace: replace
   reload: reload
   destroy: destroy
   implant: implant
+  reset: reset
 )()
 up.replace = up.flow.replace
 up.reload = up.flow.reload
 up.destroy = up.flow.destroy
+up.reset = up.flow.reset

data/lib/assets/javascripts/up/form.js.coffee CHANGED Viewed

@@ -1,67 +1,74 @@
 ###*
-Form handling
+Forms and controls
+==================
+TODO: Write some documentation
 @class up.form
 ###
 up.form = (->
+  u = up.util
   ###*
-  Submits a form using the Up.js flow.
+  Submits a form using the Up.js flow:
+      up.submit('form.new_user')
   @method up.submit
   @param {Element|jQuery|String} formOrSelector
     A reference or selector for the form to submit.
+    If the argument points to an element that is not a form,
+    Up.js will search its ancestors for the closest form.
   @param {String} [options.target]
   @param {String} [options.failTarget]
-  @param {Boolean} [options.history=true]
+  @param {Boolean|String} [options.history=true]
     Successful form submissions will add a history entry and change the browser's
     location bar if the form either uses the `GET` method or the response redirected
     to another page (this requires the `upjs-rails` gem).
     If want to prevent history changes in any case, set this to `false`.
+    If you pass a `String`, it is used as the URL for the browser history.
   @param {String} [options.transition]
   @param {String} [options.failTransition]
   @return {Promise}
     A promise for the AJAX response
-  @example
-      up.submit('form')
-  @example
-      <form method="POST" action="/users" up-target=".main">
-        ...
-      </form>
   ###
   submit = (formOrSelector, options) ->
-    options = up.util.options(options)
-    $form = $(formOrSelector)
-    successSelector = options.target || $form.attr('up-target') || 'body'
-    failureSelector = options.failTarget || $form.attr('up-fail-target') || up.util.createSelectorFromElement($form)
-    pushHistory = options.history != false && $form.attr('up-history') != 'false'
-    successTransition = options.transition || $form.attr('up-transition')
-    failureTransition = options.failTransition || $form.attr('up-fail-transition')
+    $form = $(formOrSelector).closest('form')
+    options = u.options(options)
+    successSelector = u.option(options.target, $form.attr('up-target'), 'body')
+    failureSelector = u.option(options.failTarget, $form.attr('up-fail-target'), -> u.createSelectorFromElement($form))
+    historyOption = u.option(options.history, $form.attr('up-history'), true)
+    successTransition = u.option(options.transition, $form.attr('up-transition'))
+    failureTransition = u.option(options.failTransition, $form.attr('up-fail-transition'))
     $form.addClass('up-active')
     request = {
-      url: $form.attr('action') || location.href
+      url: $form.attr('action') || up.browser.url()
       type: $form.attr('method')?.toUpperCase() || 'POST',
       data: $form.serialize(),
       selector: successSelector
     }
     successUrl = (xhr) ->
-      if pushHistory
-        if redirectLocation = xhr.getResponseHeader('X-Up-Previous-Redirect-Location')
+      url = if historyOption
+        if u.isString(historyOption)
+          historyOption
+        else if redirectLocation = xhr.getResponseHeader('X-Up-Previous-Redirect-Location')
           redirectLocation
         else if request.type == 'GET'
           request.url + '?' + request.data
-        else
-          null
+      u.option(url, false)
-    up.util.ajax(request)
+    u.ajax(request)
       .always ->
         $form.removeClass('up-active')
       .done (html, textStatus, xhr) ->
         up.flow.implant(successSelector, html,
-          history: { url: successUrl(xhr) },
+          history: successUrl(xhr),
           transition: successTransition
         )
       .fail (xhr, textStatus, errorThrown) ->
@@ -74,31 +81,27 @@ up.form = (->
   Observes an input field by periodic polling its value.
   Executes code when the value changes.
+      up.observe('input', { change: function(value, $input) {
+        up.submit($input)
+      } });
   This is useful for observing text fields while the user is typing,
   since browsers will only fire a `change` event once the user
   blurs the text field.
   @method up.observe
   @param {Element|jQuery|String} fieldOrSelector
-  @param {Function|String} options.change
+  @param {Function(value, $field)|String} options.change
     The callback to execute when the field's value changes.
     If given as a function, it must take two arguments (`value`, `$field`).
     If given as a string, it will be evaled as Javascript code in a context where
     (`value`, `$field`) are set.
   @param {Number} [options.frequency=500]
-  @example
-      up.observe('form', { change: function(value, $form) {
-        up.submit($form)
-      } });
-  @example
-      <form method="GET" action="/search">
-        <input type="query" up-observe="up.form.submit(this)">
-      </form>
   ###
   observe = (fieldOrSelector, options) ->
     $field = $(fieldOrSelector)
-    options = up.util.options(options, frequency: 500)
+    options = u.options(options, frequency: 500)
     knownValue = null
     timer = null
     callback = null
@@ -108,7 +111,7 @@ up.form = (->
     else if options.change
       callback = options.change
     else
-      up.util.error('observe: No change callback given')
+      u.error('observe: No change callback given')
     check = ->
       value = $field.val()
@@ -138,10 +141,42 @@ up.form = (->
     # return destructor
     return clearTimer
+  ###*
+  Submits the form through AJAX, searches the response for the selector
+  given in `up-target` and replaces the selector content in the current page:
+      <form method="POST" action="/users" up-target=".main">
+        ...
+      </form>
+  @method form[up-target]
+  @ujs
+  @param {String} up-target
+  @param {String} [up-fail-target]
+  @param {String} [up-history]
+  @param {String} [up-transition]
+  @param {String} [up-fail-transition]
+  ###
   up.on 'submit', 'form[up-target]', (event, $form) ->
     event.preventDefault()
     submit($form)
+  ###*
+  Observes this form control by periodically polling its value.
+  Executes the given Javascript if the value changes:
+      <form method="GET" action="/search">
+        <input type="query" up-observe="up.form.submit(this)">
+      </form>
+  This is useful for observing text fields while the user is typing,
+  since browsers will only fire a `change` event once the user
+  blurs the text field.
+  @method input[up-observe]
+  @ujs
+  @param {String} up-observe
+  ###
   up.awaken '[up-observe]', ($field) ->
     return observe($field)

data/lib/assets/javascripts/up/history.js.coffee CHANGED Viewed

@@ -1,10 +1,33 @@
+###*
+Manipulating the browser history
+=======
+TODO: Write some documentation
+@class up.history
+###
 up.history = (->
+  u = up.util
+  isCurrentUrl = (url) ->
+    u.normalizeUrl(url, hash: true) == u.normalizeUrl(up.browser.url(), hash: true)
+  ###*
+  @method up.history.replace
+  @param {String} url
+  @protected
+  ###
   replace = (url) ->
-    manipulate "replace", url
+    manipulate("replace", url) unless isCurrentUrl(url)
+  ###*
+  @method up.history.push
+  @param {String} url
+  @protected
+  ###
   push = (url) ->
-    manipulate "push", url
+    manipulate("push", url) unless isCurrentUrl(url)
   manipulate = (method, url) ->
     method += "State" # resulting in either pushState or replaceState
@@ -13,18 +36,17 @@ up.history = (->
   pop = (event) ->
     state = event.originalEvent.state
     console.log "popping state", state
-    console.log "current href", currentUrl()
+    console.log "current href", up.browser.url()
     if state?.fromUp
-      up.visit currentUrl(), history: { method: 'replace' }
+      up.visit up.browser.url(), historyMethod: 'replace'
     else
       console.log "null state"
-  currentUrl = ->
-    location.href
+  # Defeat an unnecessary popstate that some browsers trigger on pageload (Chrome?).
+  # We should check in 2016 if we can remove this.
   setTimeout (->
     $(window).on "popstate", pop
-    replace(currentUrl())
+    replace(up.browser.url())
   ), 200
   push: push