upjs-rails 0.12.5 → 0.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0f13c82c612066844882580ed4073b0f025cda22
-  data.tar.gz: a0cef27d64bfdd0ea2ae249d668b679b23321841
+  metadata.gz: 22234d5edc76355380cc9a8c1c4996a59bf53afe
+  data.tar.gz: ee6e5cd9ec9a5932389cf08de790f855c2f8b558
 SHA512:
-  metadata.gz: 008081bdca8fe235b86454baf676c3e5e19e7f89f3d76a6b58ee47502852f448411b26f5a0d0b0234b1a344a1c23276948efae1eefb1f04cbbd238b53981fa04
-  data.tar.gz: 1775166c4643ffdcd0d2801669ea94557b6fa75adf38b5176b9b159f319aeae1dce2e8ffd8e4b17f43597bb9d1bf765d2f9b17aaf75df83b49925f185913eb1c
+  metadata.gz: 3ec849ae6db3272550ba10cfc26d906389a403751f2c1a7c2e71a7b66a59572595729077eb5d3c282097e8e1f1fdad579da12da60cc40cea21b6e4fbe8b667bf
+  data.tar.gz: d7c90fd8186375cb8584e0ba4413fa296182208e804a361bdf9ffea63f5c29f5a3ceb50d8c7219b87b86ddbbd781b8c00cac6a6ba7d307a4cf3d354745b1ff95

data/.rdoc_options

@@ -0,0 +1,23 @@
+--- !ruby/object:RDoc::Options
+encoding: UTF-8
+static_path: []
+rdoc_include:
+- "./README.md"
+- "./lib"
+charset: UTF-8
+exclude: 
+hyperlink_all: false
+line_numbers: false
+locale: 
+locale_dir: locale
+locale_name: 
+main_page: README.md
+markup: markdown
+output_decoration: true
+page_dir: 
+show_hash: false
+tab_width: 2
+template_stylesheets: []
+title: upjs-rails - Rails bindings for Up.js
+visibility: :protected
+webcvs: 

data/CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
 This project mostly adheres to [Semantic Versioning](http://semver.org/).
 
 
+0.13.0
+------
+
+### Compatible changes
+
+- Support for server-side live validation of forms
+  using the [`[up-validate]`](/up-validate) selector.
+- Support for [non-standard CSS selectors from jQuery](https://api.jquery.com/category/selectors/),
+  such as [`:has`](http://api.jquery.com/has-selector/) or [`:visible`](http://api.jquery.com/visible-selector/).
+- Allow to refer to the current element as `&` in target selectors. This is useful
+  to reference containers that contain the triggering element, e.g.
+  `<a href="/path" up-target=".container:has(&)">`
+- Improve automatic generation of selectors for elements when no
+  explicit selector is given.
+- Forms with `file` inputs will now cause forms to fall back to a standard submission without AJAX.
+  In a future release we will be able to submit file inputs via AJAX.
+- The [request cache](/up.proxy) now reuses responses for `body` and `html` when asked for other selectors.
+- Server responses can now change the document title by including an `X-Up-Title` header.
+
+
 0.12.5
 ------
 

data/design/up-validate.js.coffee

@@ -0,0 +1,284 @@
+findSelector = (selector, $origin) ->
+
+  $match = undefined
+  
+  if u.isPresent($origin)
+    $match ||= filterFirstReal($origin.find(selector))
+    $match ||= filterFirstReal($origin.closest(selector))
+    $match ||= filterFirstReal($origin.closest('form').find(selector))
+    
+  $match ||= filterFirstReal($(".up-popup #{selector}"))
+  $match ||= filterFirstReal($(".up-modal #{selector}"))
+  $match ||= filterFirstReal($(selector))
+  
+  $match
+    
+        
+
+
+[1] Präferiert $origin selbst
+[2] Präferiert ein direkter Nachfahr von $origin
+[3] ein direkter Vorfahr von $origin
+[4] Präferiert im gleichen <form> von $origin
+[5] Präferiert in .up-modal
+[6] Präferiert in .up-popup
+[7] Sonst irgendwo im Dokument
+
+
+
+first(".up-popup #{selector}") ||
+  first(".up-modal #{selector}") ||
+  first(selector) ||
+  fragmentNotFound(selector)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Vielleicht Mittelding aus Variante 3 + hinterlegte
+
+Wie gehe ich damit um, dass .form-group nicht unique ist?
+
+    form.submit(origin: '[name=email]')
+    
+Oder in den CSS-Selektor mit Custom Selector? input[name=email]^^.form-group
+
+Oder kann ich bei elementFromSelector schlauer sein?
+
+Oder das hier passiert nicht mit replace?
+
+
+
+Variante 3: up-validate definiert Control-Gruppe
+================================================
+
+HTML
+----
+
+    <form>
+
+      <div class="form-group">
+        <label>E-mail</label>
+        <input type="text" name="email" up-validate=".form-group:has(&)" />
+      </div>
+
+      <div class="form-group">
+        <label>Password</label>
+        <input type="text" name="password" up-validate="& < .form-group" />
+      </div>
+      
+    </form>
+
+Con:
+----
+So kann ich up-validate nicht mehr für change/input verwenden, oder vielleicht mal die URL zu benennen
+Das könnten dann aber auch andere Attribute sein.
+
+Pro:
+----
+Das wäre vielleicht auch eine Lösung für das Selects-Visibility-For Problem:
+
+    <form>
+
+      <div class="form-group">
+        <label>Public card</label>
+        <input type="checkbox" name="is_public" up-validate=".form-group, .confidential" />
+      </div>
+
+      <% if @form.object.is_public? %>
+        <div class="form-group confidential">
+          <label>Confidentiality</label>
+          <input type="text" name="confidential" up-validate=".form-group" />
+        </div>
+      <% end %>
+      
+    </form>
+
+
+
+Implementierung
+---------------
+
+    createSelectorFromElement = ($element) ->
+      id = $element.attr("id")
+      upId = $element.attr("up-id")
+      name = $element.attr("name")
+      if present(upId)
+        selector = "[up-id='#{upId}']"
+      else if present(id)
+        selector = "##{id}" + id  if present(id)
+      else if present(name)
+        tagName = $element.prop("tagName").toLowerCase()
+        selector = "#{tagName}[name='#{name}']"
+      else
+        error('...')
+      selector
+
+    isGoodSelector = (selector) ->
+      u.contains(selector, '#') || u.contains(selector, '[name=]')
+
+    enhanceSelector = (selector, $origin) ->
+      unless isGoodSelector(selector)
+        $form = $origin.closest('form')
+        selector = "#{u.selectorFromElement($form)}:has(#{selector})"
+      selector
+
+    validate = (elementOrSelector, options) ->
+      $input = $(elementOrSelector)
+      closestGroupSelector = u.option(u.presence($input.attr('up-validate')), config.groups, 'form')
+      $group = $start.closest(closestGroupSelector)
+      $form = $group.closest('form')
+      $validateFlag = $('<input type="hidden" name="up-validate" value="1" >')
+      $validateFlag.appendTo($form)
+
+      groupSelector = u.createSelectorFromElement($group)
+      groupSelector = enhanceSelector(groupSelector)
+      
+      up.submit($form, target: groupSelector, failTarget: groupSelector)
+
+    up.on 'change', '[up-validate!="input"]', (event) -> validate(event.target)
+    up.on 'input', '[up-validate="input"]', (event) -> validate(event.target)
+
+
+
+
+
+
+
+Alternatives HTML
+------------------
+
+    <form>
+
+      <div class="form-group">
+        <label>E-mail</label>
+        <input type="text" name="email" up-changes=".form-group" />
+      </div>
+
+      <div class="form-group">
+        <label>Password</label>
+        <input type="text" name="password" up-changes=".form-group" />
+      </div>
+      
+    </form>
+
+
+
+
+
+
+
+Variante 2: up-validate an der Control-Gruppe
+==============================================
+
+HTML
+----
+
+    <form>
+
+      <div class="form-group" up-validate>
+        <label>E-mail</label>
+        <input type="text" name="email" />
+      </div>
+
+      <div class="form-group" up-validate>
+        <label>Password</label>
+        <input type="text" name="password" />
+      </div>
+      
+    </form>
+
+
+Implementierung
+---------------
+
+    validate = (elementOrSelector, options) ->
+      $start = $(elementOrSelector) # $start is either a control or a form group
+      $group = $start.closest('[up-validate], form')
+      $form = $formGroup.closest('form')
+      $validateFlag = $('<input type="hidden" name="up-validate" value="1" >')
+      $validateFlag.appendTo($form)
+      groupSelector = u.createSelectorFromElement($group)
+      up.submit($form, target: groupSelector, failTarget: groupSelector, origin: )
+
+    up.on 'change', '[up-validate!="input"]', (event) -> validate(event.target)
+    up.on 'input', '[up-validate="input"]', (event) -> validate(event.target)
+
+
+
+
+Variante 2: up-validate am Input, Up.js weiß wie Control-Gruppen gefunden werden
+================================================================================
+
+HTML
+----
+
+    <form>
+
+      <div class="form-group">
+        <label>E-mail</label>
+        <input type="text" name="email" up-validate />
+      </div>
+
+      <div class="form-group">
+        <label>Password</label>
+        <input type="text" name="password" up-validate />
+      </div>
+      
+    </form>
+
+
+Implementierung
+---------------
+
+    config.groups = ['.form-group']
+
+    validate = (elementOrSelector, options) ->
+      $control = $(elementOrSelector)
+      $formGroup = u.multiSelector(config.groups).seekUp($control) || $control.closest('form')
+      $form = $formGroup.closest('form')
+      $validateFlag = $('<input type="hidden" name="up-validate" value="1" >')
+      $validateFlag.appendTo($form)
+      groupSelector = u.createSelectorFromElement($formGroup)
+      up.submit($form, target: groupSelector, failTarget: groupSelector)
+
+    up.on 'change', '[up-validate!="input"]', (event) -> validate(this)
+    up.on 'input', '[up-validate="input"]', (event) -> validate(this)
+
+
+Alle Varianten: In Rails Controller
+===================================
+
+
+    class UsersController < ApplicationController
+
+      def create
+        build_user
+
+        if up?
+
+        if up.validate?
+
+
+        if request.up.validate?   # same as `params['up-validate'].present?`
+          @user.valid?            # run validations
+          render 'new'
+        elsif @user.save?
+          sign_in @user
+          redirect_to root_path
+        else
+          render 'new', status: :bad_request
+        end
+      end
+
+    end
+

data/dist/up-bootstrap.js

@@ -1,3 +1,7 @@
+(function() {
+  up.form.config.validateTargets.unshift('.form-group:has(&)');
+
+}).call(this);
 (function() {
   up.layout.config.fixedTop.push('.navbar-fixed-top');
 

data/dist/up-bootstrap.min.js

@@ -1 +1 @@
-(function(){up.layout.config.fixedTop.push(".navbar-fixed-top"),up.layout.config.fixedBottom.push(".navbar-fixed-bottom"),up.layout.config.anchoredRight.push(".navbar-fixed-top"),up.layout.config.anchoredRight.push(".navbar-fixed-bottom"),up.layout.config.anchoredRight.push(".footer")}).call(this),function(){up.modal.config.template='<div class="up-modal">\n  <div class="up-modal-dialog modal-dialog">\n    <div class="up-modal-content modal-content"></div>\n  </div>\n</div>'}.call(this),function(){up.navigation.config.currentClasses.push("active")}.call(this),function(){}.call(this);
+(function(){up.form.config.validateTargets.unshift(".form-group:has(&)")}).call(this),function(){up.layout.config.fixedTop.push(".navbar-fixed-top"),up.layout.config.fixedBottom.push(".navbar-fixed-bottom"),up.layout.config.anchoredRight.push(".navbar-fixed-top"),up.layout.config.anchoredRight.push(".navbar-fixed-bottom"),up.layout.config.anchoredRight.push(".footer")}.call(this),function(){up.modal.config.template='<div class="up-modal">\n  <div class="up-modal-dialog modal-dialog">\n    <div class="up-modal-content modal-content"></div>\n  </div>\n</div>'}.call(this),function(){up.navigation.config.currentClasses.push("active")}.call(this),function(){}.call(this);