upjs-rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: a95bff232406d1e7ca5ca6919fad7af7e7b110ac
+  data.tar.gz: d30a63428b8ec0d20e302e27d53c96c5e540cf80
+SHA512:
+  metadata.gz: 0fe59a20209d977d270cef3a1277a7d0a288c8102d68290d0d0bd0654b9c7a8444a9681a81b028d3cf180486e9ac803558ebc7e6b04b3435735fcf56c9573dda
+  data.tar.gz: 9c51d41fb1cbbc28adf735ae1c72e6036f83a7ff65cdbd9b7d1edc678465c21dab68b9eb085222bd24eaad8e8acbcd2b6a77e12583f31532c13140ffc5284435

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+.idea
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/.ruby-version

@@ -0,0 +1,2 @@
+2.1.2
+

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 Henning Koch
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,47 @@
+# Up + Rails bindings (WIP)
+
+Up.js is a solution for Rails apps that need fast-responding UI
+but don't want to pay the Javascript MVC complexity tax.
+
+## Design manifesto
+
+### Client-side code is a complexity driver
+
+### Server-side code should stay the same
+- We like the simplicity of classic Rails development
+- It should not require extra controller actions to update a page part via AJAX
+
+### Batteries included
+- We will ship a basic implementation for the most established UI patterns like navigation bars, infinite scrolling, drop-down menus, modals
+- We will split this out into a plugin architecture eventually, but not now
+
+### Ruby on Rails first
+- We will leverage the assumptions that Rails is underneath
+- Other frameworks once we’re happy with Rails
+
+### Not for ambitious UIs
+- We don’t want to compromise ease of use for simple patterns by providing a million hooks and options
+- Limits in configurability
+- You can always roll your own code
+- Probably the wrong choice if you want to create something very ambitious
+
+### (Sort of) Plays nice with existing JS code
+- If you're ready to go into our event binding
+
+### URLs are important
+- Every page has an URL
+- Works nice with Google
+ Works with browsers that don’t speak Up.js (e. g. IE9 doesn’t speak pushState)
+
+### Be small
+
+### Few dependencies
+- jQuery
+
+### Convention over configuration
+
+### Interface: Both UJS and programmatic
+
+
+
+

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/bin/doc-server

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+yuidoc -c doc/yuidoc.json --server 3001

data/bin/install-ydoc

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+npm install -g yuidocjs
+

data/design/animation-ghosting.txt

@@ -0,0 +1,72 @@
+animate($element)
+
+  gar nix, ghosting macht NUR transition
+  
+  ($old und $new muss anders gehandelt werden)
+
+transition($old, $new)
+
+  1. $old.css(display: none)
+  
+  2. $new in den DOM setzen
+  
+  3. $new ausmessen
+  
+  4. ghost von $new erstellen
+     DOM kopieren
+     mit position: fixed
+     mit ausmessen des originals
+       left, top setzen
+       right, bottom löschen
+       width, height setzen
+       margin löschen
+
+  5. $new.css(display: none)
+  
+  6. $old.css(display: previousDisplay)
+        
+  7. ghost von $old erstellen
+  
+  8. $old.css(opacity: 0) // damit es den platz wegnimmt
+          
+  9. transition($oldGhost, $newGhost)
+  
+  10. $old löschen
+      $oldGhost löschen
+      $newGhost löschen
+  
+  11. $new.css(display: previousDisplay)
+  
+  
+was löst das, was nicht?
+========================
+
+- die teile müssen nicht mehr absolut gestellt werden
+- old muss immer noch absolut gehen :(
+ 
+
+  
+    
+
+
+
+  1. Ich kopiere $old zu $ghost
+
+  2. Ich setze die opacity von $old auf 0
+
+  3. Ich setze $ghost auf die Größe von $old
+    mit position: fixed
+    mit ausmessen des originals
+      left, top setzen
+      right, bottom löschen
+      width, height setzen
+      margin löschen
+      
+  ???????????
+
+  4. ich gebe $ghost an die animation
+
+  5. nach der animation
+    setze ich $opacity von $element auf 1
+    lösche ich $ghost
+

data/design/design.txt

@@ -0,0 +1,34 @@
+Gedanke 1
+---------
+- Immer die ganze Seite rendern ist langsam
+  - Optimierung nicht möglich: Layout überspringen wenn up-Request
+  - Optimierung nicht möglich: Manche Bereiche nicht rendern wenn up-Request
+  - Optimierung nicht möglich: Manche Bereiche nur für bestimmte X-Up-Selectors rendern
+- Das alles nur, um beim Back-Button sofort das HTML anzeigen zu können?
+- Sogar Turbolinks macht das nur Opt-In
+- Ich kann genauso gut bei popstate den aktuellen State replacen
+- Später: Opportunistisch cachen. Wann immer ich einen vollen Page-Load (mit/ohne Layout) sehe => cachen
+
+Gedanke 2
+---------
+- Das mit dem up.app und up.page checkt kein Mensch
+- In der Praxis wird es so sein, dass wichtige page-Handler nicht mehr in der Seite stehen
+- Ich brauche auch noch Code, um <script>-Tags auszuführen
+- Die Unterscheidung mache ich ja nur, um installierte Callbacks wieder wegzuräumen
+- Was ich eigentlich bräuchte, wäre ein Weg, installierte Callbacks geregelt lozuwerden
+
+     z. B.
+
+     up.awaken('.note_form', function($element) {
+
+      var timer = setTimeout(...)
+
+      function uninstall() {
+        clearInterval(timer);
+      }
+
+      return uninstall;
+
+     });
+
+- Vor dem Ersetzen eines Elements kann ich dann die uninstall-Funktion aufrufen.

data/design/draft.html.erb

@@ -0,0 +1,48 @@
+GUT:
+
+<a href="/terms" up-modal=".main" up-modal-style="right">
+
+<a href="/terms" up-on-click="up.modal.open(this, '.main', { style: 'right' })">
+
+<a href="/terms" onclick="up.modal.open(this, '.main', { style: 'right' }); return false">
+
+
+WEIRD:
+
+<a href="/terms" up-target=".main" up-presentation="modal/right">
+
+<a href="/terms" up-target=".main" up-modal up-modal-presentation="right">
+
+<a href="/terms" up-target="@modal(.main)" up-presentation="modal/right">
+
+
+
+<a href="/sites" up-popup=".main" up-popup-anchor="bottom" up-history="push">
+
+
+<!-- cards/edit.html.erb -->
+
+<%= form_for @card do |form| %>
+
+  = form.label :title
+  = form.text_field :title
+
+  <div class="modifiers">
+    ....
+    <%= link_to 'Edit modifiers', edit_card_meta_path(@card), 'up-modal' => '.meta_form' %>
+  </div>
+
+<% end %>
+
+
+<!-- cards/meta/edit.html.erb -->
+
+<%= form_for @card, html: { class: 'meta_form', 'up-target' => '.modifiers' } do |form| %>
+
+   ...
+
+<% end %>
+
+
+
+<a href="close" up-close-modal>X</a>

data/design/draft.rb

@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+<a href="/terms" up-modal=".main">

data/lib/assets/javascripts/up/browser.js.coffee

@@ -0,0 +1,20 @@
+up.browser = (->
+  
+#  safari = false
+#  
+#  detect = ->
+#    agent = navigator.userAgent
+#    agentHas = (substring) -> agent.indexOf(substring) >= 1
+#    safari = agentHas('Safari') && !agentHas('Chrome')
+#    
+#  transitionEndEvent = ->
+#    if safari
+#      'webkitTransitionEnd'
+#    else
+#      'transitionend'
+#
+#  detect()
+#  
+#  transitionEndEvent: transitionEndEvent
+      
+)()

data/lib/assets/javascripts/up/bus.js.coffee

@@ -0,0 +1,54 @@
+###*
+Event bus for up-related events:
+  
+- `app:ready`
+- `fragment:ready` with arguments `($fragment)`
+- `fragment:destroy` with arguments `($fragment)`
+  
+TODO: This might eventually be rolled into regular document events.
+  
+@class up.bus  
+###
+up.bus = (->
+
+  callbacksByEvent = {}
+
+  callbacksFor = (event) ->
+    callbacksByEvent[event] ||= []
+
+  ###*
+  Registers an event handler to be called when the given
+  event is triggered.
+  
+  @method up.bus.listen
+  @param {String} eventName
+    The event name to match.
+  @param {Function} handler
+    The event handler to be called with the event arguments.  
+  ###
+  # We cannot call this function "on" because Coffeescript
+  # https://makandracards.com/makandra/29733-english-words-that-you-cannot-use-in-coffeescript
+  listen = (eventName, handler) ->
+    callbacksFor(eventName).push(handler)
+
+  ###*
+  Triggers an event.
+  
+  @method up.bus.emit
+  @param {String} eventName
+    The name of the event.
+  @param {Anything...} args
+    The arguments that describe the event. 
+  ###
+  emit = (eventName, args...) ->
+    console.log("bus emitting", eventName, args)
+    callbacks = callbacksFor(eventName)
+    up.util.each(callbacks, (callback) ->
+      callback(args...)
+    )
+
+  return (
+    on: listen
+    emit: emit
+  )
+)()

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

@@ -0,0 +1,160 @@
+###*
+Page flow.
+
+@class up.flow
+###
+up.flow = (->
+
+  setSource = (element, sourceUrl) ->
+    $element = $(element)
+    sourceUrl = up.util.normalizeUrl(sourceUrl) if up.util.isPresent(sourceUrl)
+    $element.attr("up-source", sourceUrl)
+
+  source = (element) ->
+    $element = $(element).closest("[up-source]")
+    $element.attr("up-source") || location.href
+
+  ###*
+  Replaces elements on the current page with corresponding elements
+  from a new page fetched from the server.
+
+  The current and new elements must have the same CSS selector.
+
+  @method up.replace
+  @param {String|Element|jQuery} selectorOrElement
+    The CSS selector to update. You can also pass a DOM element or jQuery element
+    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.transition]
+  @param {String|Boolean} [options.source]
+  ###
+  replace = (selectorOrElement, url, options) ->
+
+    selector = if up.util.presence(selectorOrElement)
+      selectorOrElement
+    else
+      up.util.createSelectorFromElement($(selectorOrElement))
+
+    options = up.util.options(options, history: { url: url })
+    
+    if up.util.isMissing(options.source) || options.source == true
+      options.source = url
+      
+    up.util.get(url, selector: selector)
+      .done (html) -> implant(selector, html, options)
+      .fail(up.util.error)
+
+  ###*
+  @method up.flow.implant
+  @protected
+  @param {String} selector
+  @param {String} html
+  @param {String} [options.source]
+  @param {String} [options.history.url]
+  @param {String} [options.history.method='push']
+  @param {String} [options.transition]
+  ###
+  implant = (selector, html, options) ->
+    
+    options = up.util.options(options, history: { method: '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)
+        
+    for step in implantSteps(selector, options)
+      $old = $(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)
+  
+      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)
+    else
+      up.bus.emit('fragment:destroy', old)
+      $old.replaceWith($new)
+      up.bus.emit('fragment:ready', $new)
+      afterInsert()
+    
+
+  implantSteps = (selector, options) ->
+    transitionString = options.transition || options.animation || 'none'
+    comma = /\ *,\ */
+    disjunction = selector.split(comma)
+    transitions = transitionString.split(comma) if up.util.isPresent(transitionString)    
+    for selectorAtom, i in disjunction
+      transition = transitions[i] || up.util.last(transitions)
+      selector: selectorAtom
+      transition: transition
+
+  autofocus = ($element) ->
+    $control = $element.find('[autofocus]:last')
+    if $control.length && $control.get(0) != document.activeElement
+      $control.focus()
+      
+  ###*
+  Destroys the given element or selector.
+  Takes care that all destructors, if any, are called.
+  
+  @method up.destroy
+  @param {String|Element|jQuery} selectorOrElement 
+  ###
+  destroy = (selectorOrElement, options) ->
+    $element = $(selectorOrElement)
+    options = up.util.options(options, animation: 'none')
+    $element.addClass('up-destroying')
+    up.bus.emit('fragment:destroy', $element)
+    up.motion.animate($element, options.animation).then ->
+      $element.remove()
+      
+  ###*
+  Replaces the given selector or element with a fresh copy
+  fetched from the server.
+
+  @method up.reload
+  @param {String|Element|jQuery} selectorOrElement
+  ###
+  reload = (selectorOrElement) ->
+    sourceUrl = source(selectorOrElement)
+    replace(selectorOrElement, sourceUrl)
+
+  
+  up.bus.on('app:ready', ->
+    setSource(document.body, location.href)
+  )
+
+  replace: replace
+  reload: reload
+  destroy: destroy
+  implant: implant
+
+)()
+
+up.replace = up.flow.replace
+up.reload = up.flow.reload
+up.destroy = up.flow.destroy

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

@@ -0,0 +1,162 @@
+###*
+Form handling
+@class up.form
+###
+up.form = (->
+
+  ###*
+  Submits a form using the Up.js flow.
+
+  @method up.submit
+  @param {Element|jQuery|String} formOrSelector
+    A reference or selector for the form to submit.
+  @param {String} [options.target]
+  @param {String} [options.failTarget]
+  @param {Boolean} [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`.
+  @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.addClass('up-active')
+
+    request = {
+      url: $form.attr('action') || location.href
+      type: $form.attr('method')?.toUpperCase() || 'POST',
+      data: $form.serialize(),
+      selector: successSelector
+    }
+
+    successUrl = (xhr) ->
+      if pushHistory
+        if redirectLocation = xhr.getResponseHeader('X-Up-Previous-Redirect-Location')
+          redirectLocation
+        else if request.type == 'GET'
+          request.url + '?' + request.data
+        else
+          null
+
+    up.util.ajax(request)
+      .always ->
+        $form.removeClass('up-active')
+      .done (html, textStatus, xhr) ->
+        up.flow.implant(successSelector, html,
+          history: { url: successUrl(xhr) },
+          transition: successTransition
+        )
+      .fail (xhr, textStatus, errorThrown) ->
+        html = xhr.responseText
+        up.flow.implant(failureSelector, html,
+          transition: failureTransition
+        )
+
+  ###*
+  Observes an input field by periodic polling its value.
+  Executes code when the value changes.
+
+  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
+    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)
+    knownValue = null
+    timer = null
+    callback = null
+    if codeOnChange = $field.attr('up-observe')
+      callback = (value, $field) ->
+        eval(codeOnChange)
+    else if options.change
+      callback = options.change
+    else
+      up.util.error('observe: No change callback given')
+
+    check = ->
+      value = $field.val()
+      skipCallback = _.isNull(knownValue) # don't run the callback for the check during initialization
+      if knownValue != value
+        knownValue = value
+        callback.apply($field.get(0), [value, $field]) unless skipCallback
+
+    resetTimer = ->
+      if timer
+        clearTimer()
+        startTimer()
+
+    clearTimer = ->
+      clearInterval(timer)
+      timer = null
+
+    startTimer = ->
+      timer = setInterval(check, options.frequency)
+
+    # reset counter after user interaction
+    $field.bind "keyup click mousemove", resetTimer # mousemove is for selects
+
+    check()
+    startTimer()
+
+    # return destructor
+    return clearTimer
+
+  up.on 'submit', 'form[up-target]', (event, $form) ->
+    event.preventDefault()
+    submit($form)
+
+  up.awaken '[up-observe]', ($field) ->
+    return observe($field)
+
+#  up.awaken '[up-autosubmit]', ($field) ->
+#    return observe($field, change: ->
+#      $form = $field.closest('form')
+#      $field.addClass('up-active')
+#      up.submit($form).always ->
+#        $field.removeClass('up-active')
+#    )
+
+  submit: submit
+  observe: observe
+
+)()
+
+up.submit = up.form.submit
+up.observe = up.form.observe