upjs-rails 0.14.1 → 0.15.0

data/spec_app/spec/javascripts/up/form_spec.js.coffee

@@ -1,10 +1,68 @@
 describe 'up.form', ->
-  
+
+  u = up.util
+
   describe 'Javascript functions', ->
     
     describe 'up.observe', ->
 
-      it 'should have tests'
+      changeEvents = if up.browser.canInputEvent()
+# Actually we only need `input`, but we want to notice
+# if another script manually triggers `change` on the element.
+        ['input', 'change']
+      else
+# Actually we won't ever get `input` from the user in this browser,
+# but we want to notice if another script manually triggers `input`
+# on the element.
+        ['input', 'change', 'keypress', 'paste', 'cut', 'click', 'propertychange']
+
+      u.each changeEvents, (eventName) ->
+
+        describe 'when the first argument is a form field', ->
+
+          it "runs the callback when the input receives a '#{eventName}' event and the value changed", (done) ->
+            $input = affix('input[value="old-value"]')
+            callback = jasmine.createSpy('change callback')
+            up.observe($input, callback)
+            $input.val('new-value')
+            u.times 2, -> $input.trigger(eventName)
+            u.nextFrame ->
+              expect(callback).toHaveBeenCalledWith('new-value', $input)
+              expect(callback.calls.count()).toEqual(1)
+              done()
+
+          it "does not run the callback when the input receives a '#{eventName}' event, but the value didn't change", (done) ->
+            $input = affix('input[value="old-value"]')
+            callback = jasmine.createSpy('change callback')
+            up.observe($input, callback)
+            $input.trigger(eventName)
+            u.nextFrame ->
+              expect(callback).not.toHaveBeenCalled()
+              done()
+
+        describe 'when the first argument is a form', ->
+
+          it "runs the callback when any of the form's inputs receives a '#{eventName}' event and the value changed", (done) ->
+            $form = affix('form')
+            $input = $form.affix('input[value="old-value"]')
+            callback = jasmine.createSpy('change callback')
+            up.observe($form, callback)
+            $input.val('new-value')
+            u.times 2, -> $input.trigger(eventName)
+            u.nextFrame ->
+              expect(callback).toHaveBeenCalledWith('new-value', $input)
+              expect(callback.calls.count()).toEqual(1)
+              done()
+
+          it "does not run the callback when any of the form's inputs receives a '#{eventName}' event, but the value didn't change", (done) ->
+            $form = affix('form')
+            $input = $form.affix('input[value="old-value"]')
+            callback = jasmine.createSpy('change callback')
+            up.observe($form, callback)
+            $input.trigger(eventName)
+            u.nextFrame ->
+              expect(callback).not.toHaveBeenCalled()
+              done()
 
     describe 'up.submit', ->
       
@@ -99,7 +157,33 @@ describe 'up.form', ->
 
       it 'rigs the form to use up.submit instead of a standard submit'
 
-    describe 'input[up-observe]', ->
+    describe 'input[up-autosubmit]', ->
+
+      it 'submits the form when a change is observed in the given form field', (done) ->
+        $form = affix('form')
+        $field = $form.affix('input[up-autosubmit][val="old-value"]')
+        up.hello($field)
+        submitSpy = up.form.knife.mock('submit').and.returnValue(u.unresolvablePromise())
+        $field.val('new-value')
+        $field.trigger('change')
+        u.nextFrame ->
+          expect(submitSpy).toHaveBeenCalled()
+          done()
+
+    describe 'form[up-autosubmit]', ->
+
+      it 'submits the form when a change is observed in any of its fields', (done) ->
+        $form = affix('form[up-autosubmit]')
+        $field = $form.affix('input[val="old-value"]')
+        up.hello($form)
+        submitSpy = up.form.knife.mock('submit').and.returnValue(u.unresolvablePromise())
+        $field.val('new-value')
+        $field.trigger('change')
+        u.nextFrame ->
+          expect(submitSpy).toHaveBeenCalled()
+          done()
+
+    describe '[up-observe]', ->
 
       it 'should have tests'
 

data/spec_app/spec/javascripts/up/modal_spec.js.coffee

@@ -100,13 +100,39 @@ describe 'up.modal', ->
         expect(followSpy).toHaveBeenCalledWith($link)
 
     describe '[up-close]', ->
+
+      describe 'when clicked inside a modal', ->
       
-      it 'closes the modal when clicked', ->
-        closeSpy = up.modal.knife.mock('close')
-        $link = affix('a[up-close]')
-        up.hello($link)
-        $link.click()
-        expect(closeSpy).toHaveBeenCalled()
+        it 'closes the open modal and prevents the default action', ->
+          $modal = affix('.up-modal')
+          $link = $modal.affix('a[up-close]') # link is within the modal
+          up.hello($link)
+          wasDefaultPrevented = false
+          wasClosed = false
+          up.on 'click', 'a[up-close]', (event) ->
+            wasDefaultPrevented = event.isDefaultPrevented()
+            true # the line above might return false and cancel propagation / prevent default
+          up.on 'up:modal:close', ->
+            wasClosed = true
+          $link.click()
+          expect(wasClosed).toBe(true)
+          expect(wasDefaultPrevented).toBe(true)
+
+      describe 'when no modal is open', ->
+
+        it 'does neither close the modal nor prevent the default action', ->
+          $link = affix('a[up-close]') # link is outside the modal
+          up.hello($link)
+          wasDefaultPrevented = false
+          wasClosed = false
+          up.on 'click', 'a[up-close]', (event) ->
+            wasDefaultPrevented = event.isDefaultPrevented()
+            true # the line above might return false and cancel propagation / prevent default
+          up.on 'up:modal:close', ->
+            wasClosed = true
+          $link.click()
+          expect(wasClosed).toBe(false)
+          expect(wasDefaultPrevented).toBe(false)
 
     describe 'when following links inside a modal', ->
 

data/spec_app/spec/javascripts/up/motion_spec.js.coffee

@@ -4,7 +4,7 @@ describe 'up.motion', ->
   
     describe 'up.animate', ->
 
-      if up.browser.canCssAnimation()
+      if up.browser.canCssTransition()
 
         it 'animates the given element', (done) ->
           $element = affix('.element').text('content')
@@ -35,7 +35,7 @@ describe 'up.motion', ->
 
     describe 'up.morph', ->
 
-      if up.browser.canCssAnimation()
+      if up.browser.canCssTransition()
 
         it 'transitions between two element by animating two copies while keeping the originals in the background', (done) ->
 

data/spec_app/spec/javascripts/up/popup_spec.js.coffee

@@ -32,9 +32,52 @@ describe 'up.popup', ->
 
     describe 'a[up-popup]', ->
 
-      it 'should have tests'
+      it "loads this link's destination in a popup when clicked", ->
+        $link = affix('a[href="/path/to"][up-popup=".middle"]').text('link')
+        $link.click()
+        expect(@lastRequest().url).toMatch /\/path\/to$/
+        @respondWith """
+          <div class="before">new-before</div>
+          <div class="middle">new-middle</div>
+          <div class="after">new-after</div>
+          """
+        expect($('.up-popup')).toExist()
+        expect($('.up-popup .middle')).toHaveText('new-middle')
+        expect($('.up-popup .before')).not.toExist()
+        expect($('.up-popup .after')).not.toExist()
 
     describe '[up-close]', ->
 
-      it 'should have tests'
+      describe 'when clicked inside a popup', ->
+
+        it 'closes the open popup and prevents the default action', ->
+          $popup = affix('.up-popup')
+          $link = $popup.affix('a[up-close]') # link is within the popup
+          up.hello($link)
+          wasDefaultPrevented = false
+          wasClosed = false
+          up.on 'click', 'a[up-close]', (event) ->
+            wasDefaultPrevented = event.isDefaultPrevented()
+            true # the line above might return false and cancel propagation / prevent default
+          up.on 'up:popup:close', ->
+            wasClosed = true
+          $link.click()
+          expect(wasClosed).toBe(true)
+          expect(wasDefaultPrevented).toBe(true)
+
+      describe 'when no popup is open', ->
+
+        it 'does neither close the popup nor prevent the default action', ->
+          $link = affix('a[up-close]') # link is outside the popup
+          up.hello($link)
+          wasDefaultPrevented = false
+          wasClosed = false
+          up.on 'click', 'a[up-close]', (event) ->
+            wasDefaultPrevented = event.isDefaultPrevented()
+            true # the line above might return false and cancel propagation / prevent default
+          up.on 'up:popup:close', ->
+            wasClosed = true
+          $link.click()
+          expect(wasClosed).toBe(false)
+          expect(wasDefaultPrevented).toBe(false)
       

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: upjs-rails
 version: !ruby/object:Gem::Version
-  version: 0.14.1
+  version: 0.15.0
 platform: ruby
 authors:
 - Henning Koch
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-01-04 00:00:00.000000000 Z
+date: 2016-01-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -81,7 +81,6 @@ files:
 - design/ghost-debugging.txt
 - design/homepage.txt
 - design/rename.txt
-- design/up-validate.js.coffee
 - dist/up-bootstrap.css
 - dist/up-bootstrap.js
 - dist/up-bootstrap.min.css

data/design/up-validate.js.coffee

@@ -1,284 +0,0 @@
-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
----------------
-
-    selectorForElement = ($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.selectorForElement($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.selectorForElement($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.selectorForElement($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
-