unpoly-rails 0.57.0 → 0.60.0

data/spec_app/app/views/error_test/trigger.erb

@@ -1,5 +1,5 @@
 <script>
-  up.dom.config.fallbacks = [];
+  up.fragment.config.fallbacks = [];
 </script>
 
 <div class="example">

data/spec_app/app/views/form_test/basics/new.erb

@@ -21,9 +21,7 @@
     <p>
       <label>
         input[type=checkbox]
-        <select name="checkbox-param">
-          <option value="checkbox-value">checkbox-label</option>
-        </select>
+        <input type="checkbox" name="checkbox-param" value="checkbox-value">
       </label>
     </p>
 

data/spec_app/app/views/pages/start.erb

@@ -9,11 +9,14 @@
       <%= link_to 'Jasmine specs with jQuery 3', '/specs?jquery=3' %>
       <ul>
         <% %w[
-          up.dom
+          up.browser
+          up.element
+          up.event
           up.feedback
           up.form
+          up.fragment
           up.history
-          up.layout
+          up.legacy
           up.link
           up.log
           up.modal
@@ -26,6 +29,7 @@
           up.toast
           up.tooltip
           up.util
+          up.viewport
         ].each do |mod| %>
           <li><%= link_to mod, "/specs?spec=#{mod}" %></li>
         <% end %>
@@ -62,7 +66,10 @@
     <li><%= link_to 'Fragment update', '/replace_test/page1' %></li>
     <li><%= link_to 'Hash links (without Unpoly)', '/hash_test/vanilla#one' %></li>
     <li><%= link_to 'Hash links (with Unpoly)', '/hash_test/unpoly#one' %></li>
+    <li><%= link_to 'Revealing content in an overflowing <div> ', '/reveal_test/within_overflowing_div_viewport' %></li>
+    <li><%= link_to 'Revealing content in the document viewport ', '/reveal_test/within_document_viewport' %></li>
     <li><%= link_to 'Revealing long pages', '/reveal_test/long1' %></li>
+    <li><%= link_to 'Scrolling behavior', '/scroll_test/long1' %></li>
     <li><%= link_to 'Animations', '/motion_test/animations' %></li>
     <li><%= link_to 'Transitions', '/motion_test/transitions' %></li>
   </ul>

data/spec_app/app/views/reveal_test/long1.erb

@@ -1,6 +1,6 @@
 <script>
   up.motion.config.duration = 2000
-  up.layout.config.duration = 2000
+  up.viewport.config.duration = 2000
 </script>
 
 <div class="long-page" style="height: 2000px; background-color: rgba(0, 0, 255, 0.3)">

data/spec_app/app/views/reveal_test/long2.erb

@@ -1,6 +1,6 @@
 <script>
   up.motion.config.duration = 2000
-  up.layout.config.duration = 2000
+  up.viewport.config.duration = 2000
 </script>
 
 <div class="long-page" style="height: 2000px; background-color: rgba(255, 0, 0, 0.3)">

data/spec_app/app/views/reveal_test/within_document_viewport.erb

@@ -0,0 +1,24 @@
+<div class="fixed-top-bar" up-fixed="top" style="margin: 25px">
+  <span class="button" onclick="up.reveal('.small', { behavior: 'smooth' })">Reveal .small</span>
+  <span class="button" onclick="up.reveal('.large', { behavior: 'smooth' })">Reveal .large</span>
+  <span class="button" onclick="up.viewport.config.revealPadding += 25">Increase padding</span>
+</div>
+
+<div class="fixed-bottom-bar" up-fixed="bottom" style="margin: 25px">
+</div>
+
+<div style="height: 1000px; background-color: rgba(0, 0, 255, 0.2)">
+  above
+</div>
+
+<div class="example small" style="background-color: rgba(255, 0, 0, 0.4); height: 50px">
+  .small
+</div>
+
+<div class="example large" style="background-color: rgba(0, 255, 0, 0.4); height: 2000px">
+  .large
+</div>
+
+<div style="height: 1000px; background-color: rgba(0, 0, 255, 0.2)">
+  below
+</div>

data/spec_app/app/views/reveal_test/within_overflowing_div_viewport.erb

@@ -0,0 +1,28 @@
+<div class="fixed-top-bar" up-fixed="top" style="margin: 25px">
+  <span class="button" onclick="up.reveal('.small', { behavior: 'smooth' })">Reveal .small</span>
+  <span class="button" onclick="up.reveal('.large', { behavior: 'smooth' })">Reveal .large</span>
+  <span class="button" onclick="up.viewport.config.revealPadding += 25">Increase padding</span>
+</div>
+
+<div class="fixed-bottom-bar" up-fixed="bottom" style="margin: 25px">
+</div>
+
+<div up-viewport style="overflow-y: scroll; width: 300px; height: 100vh">
+
+  <div style="height: 1000px; background-color: rgba(0, 0, 255, 0.2)">
+    above
+  </div>
+
+  <div class="example small" style="background-color: rgba(255, 0, 0, 0.4); height: 50px">
+    .small
+  </div>
+
+  <div class="example large" style="background-color: rgba(0, 255, 0, 0.4); height: 2000px">
+    .large
+  </div>
+
+  <div style="height: 1000px; background-color: rgba(0, 0, 255, 0.2)">
+    below
+  </div>
+
+</div>

data/spec_app/app/views/scroll_test/long1.erb

@@ -0,0 +1,30 @@
+<div class="example">
+
+  <p>
+    <a class="button" href="#" onclick="up.scroll(document.scrollingElement, document.getElementById('bottom').offsetTop, { behavior: 'smooth' }); return false">Scroll down with Unpoly</a>
+    <a class="button" href="#" onclick="document.scrollingElement.scrollTo({ top: document.getElementById('bottom').offsetTop, behavior: 'smooth' }); return false">Scroll down with native</a>
+  </p>
+
+  <h2>Long page</h2>
+
+  <div style="height: 2000px" id="content">
+    Content height:
+    <a href="#" onclick="document.getElementById('content').style.height = '100px'; return false">100px</a>
+    <a href="#" onclick="document.getElementById('content').style.height = '300px'; return false">300px</a>
+    <a href="#" onclick="document.getElementById('content').style.height = '600px'; return false">600px</a>
+    <a href="#" onclick="document.getElementById('content').style.height = '1000px'; return false">1000px</a>
+    <a href="#" onclick="document.getElementById('content').style.height = '3000px'; return false">3000px</a>
+    <a href="#" onclick="document.getElementById('content').style.height = '10000px'; return false">10000px</a>
+    <a href="#" onclick="document.getElementById('content').style.height = '90000px'; return false">90000px</a>
+  </div>
+
+  <p id="bottom">
+    <a class="button" href="#" onclick="up.scroll(document.scrollingElement, 0, { behavior: 'smooth' }); return false">Scroll up with Unpoly</a>
+    <a class="button" href="#" onclick="document.scrollingElement.scrollTo({ top: 0, behavior: 'smooth' }); return false">Scroll up with native</a>
+  </p>
+
+  <div style="height: 3000px">
+    <!-- rest -->
+  </div>
+
+</div>

data/spec_app/config/routes.rb

@@ -13,6 +13,7 @@ Rails.application.routes.draw do
   get 'replace_test/:action', controller: 'replace_test'
   get 'hash_test/:action', controller: 'hash_test'
   get 'reveal_test/:action', controller: 'reveal_test'
+  get 'scroll_test/:action', controller: 'scroll_test'
   get 'motion_test/:action', controller: 'motion_test'
 
   namespace :form_test do

data/spec_app/spec/javascripts/helpers/agent_detector.coffee

@@ -1,3 +1,6 @@
+u = up.util
+$ = jQuery
+
 @AgentDetector = do ->
 
   match = (regexp) ->

data/spec_app/spec/javascripts/helpers/async_sequence.js.coffee

@@ -1,4 +1,5 @@
 u = up.util
+$ = jQuery
 
 LOG_ENABLED = false
 

data/spec_app/spec/javascripts/helpers/browser_switches.js.coffee

@@ -1,9 +1,21 @@
-window.describeCapability = (capability, examples) ->
-  if up.browser[capability]()
+u = up.util
+$ = jQuery
+
+window.describeCapability = (capabilities, examples) ->
+  capabilities = u.wrapList(capabilities)
+  allSupported = u.every capabilities, (c) ->
+    if fn = up.browser[c]
+      fn()
+    else
+      u.fail("Unknown capability: up.browser.#{c}()")
+    up.browser[c]()
+  if allSupported
     examples()
 
-window.describeFallback = (capability, examples) ->
-  describe "in a browser without #{capability}", ->
+window.describeFallback = (capabilities, examples) ->
+  capabilities = u.wrapList(capabilities)
+  describe "(in a browser without #{capabilities.join(', ')})", ->
     beforeEach ->
-      spyOn(up.browser, capability).and.returnValue(false)
+      u.each capabilities, (c) ->
+        spyOn(up.browser, c).and.returnValue(false)
     examples()

data/spec_app/spec/javascripts/helpers/enable_logging.js.coffee

@@ -1,2 +1,2 @@
 beforeEach ->
-  up.log.enable()
+  up.log.disable()

data/spec_app/spec/javascripts/helpers/fixture.js.coffee

@@ -0,0 +1,25 @@
+e = up.element
+$ = jQuery
+
+fixturesContainer = undefined
+
+ensureContainerExists = ->
+  fixturesContainer ||= e.affix(document.body, '.fixtures')
+
+afterEach ->
+  if fixturesContainer
+    e.remove(fixturesContainer)
+    fixturesContainer = undefined
+
+appendFixture = (args...) ->
+  container = ensureContainerExists()
+  e.affix(container, args...)
+
+$appendFixture = (args...) ->
+  $(appendFixture(args...))
+
+window.fixture = appendFixture
+window.$fixture = $appendFixture
+
+# A lot of legacy tests require this jQuery function
+$.fn.affix = (args...) -> $(e.affix(this[0], args...))

data/spec_app/spec/javascripts/helpers/jquery_no_conflict.js

@@ -0,0 +1 @@
+jQuery.noConflict();

data/spec_app/spec/javascripts/helpers/last_request.js.coffee

@@ -1,4 +1,5 @@
 u = up.util
+$ = jQuery
 
 beforeEach ->
   @lastRequest = ->

data/spec_app/spec/javascripts/helpers/mock_ajax.js.coffee

@@ -2,7 +2,7 @@ beforeEach ->
   jasmine.Ajax.install()
 
 afterEach (done) ->
-  up.util.nextFrame ->
+  up.util.task ->
     jasmine.Ajax.uninstall()
     done()
 

data/spec_app/spec/javascripts/helpers/parse_form_data.js.coffee

@@ -6,10 +6,10 @@ beforeEach ->
 
     parse: (params) ->
       if up.browser.canInspectFormData()
-        array = up.params.toArray(params)
+        array = new up.Params(params).toArray()
       else if params.originalArray
         # In browser that don't support FormData#entries(),
-        # up.params.toArray() stores the original array with the generated
+        # up.Params#toArray() stores the original array with the generated
         # FormData object.
         array = params.originalArray
       else

data/spec_app/spec/javascripts/helpers/protect_jasmine_runner.coffee

@@ -1,5 +1,8 @@
+u = up.util
+$ = jQuery
+
 beforeEach ->
-  up.dom.config.fallbacks = ['.default-fallback']
+  up.fragment.config.fallbacks = ['.default-fallback']
   up.history.config.popTargets = ['.default-fallback']
   $element = $('<div class="default-fallback"></div>')
   $element.appendTo(document.body)

data/spec_app/spec/javascripts/helpers/remove_body_margin.js.coffee

@@ -1,3 +1,6 @@
+u = up.util
+$ = jQuery
+
 # We have a lot of specs that measure the distance of elements
 # from the screen edge, so we can't have the Jasmine runner to have
 # any margins on the body.

data/spec_app/spec/javascripts/helpers/reset_history.js.coffee

@@ -1,4 +1,5 @@
 u = up.util
+$ = jQuery
 
 replaceStateHelperCount = 0
 
@@ -7,7 +8,7 @@ beforeAll ->
   @titleBeforeSuite = document.title
 
 afterAll (done) ->
-  up.util.nextFrame =>
+  up.util.task =>
     history.replaceState?({ fromResetPathHelper: true }, '', @hrefBeforeSuite)
     document.title = @titleBeforeSuite
     done()

data/spec_app/spec/javascripts/helpers/reset_knife.js.coffee

@@ -1,2 +1,2 @@
-#afterEach ->
-#  Knife.reset()
+afterEach ->
+  Knife.reset()

data/spec_app/spec/javascripts/helpers/reset_up.js.coffee

@@ -1,18 +1,25 @@
+u = up.util
+$ = jQuery
+
 afterEach (done) ->
   # If the spec has installed the Jasmine clock, uninstall it so
   # the timeout below will actually happen.
   jasmine.clock().uninstall()
 
-  # Wait one more frame so pending callbacks have a chance to run.
-  # Pending callbacks might change the URL or cause errors that bleed into
-  # the next example.
+  # Most pending promises will wait for an animation to finish.
+  promise = up.motion.finish()
+
+  u.always promise, ->
 
-  up.util.nextFrame =>
-    up.reset()
-    up.browser.popCookie(up.protocol.config.methodCookie)
+    # Wait one more frame so pending callbacks have a chance to run.
+    # Pending callbacks might change the URL or cause errors that bleed into
+    # the next example.
+    up.util.task =>
+      up.framework.reset()
+      up.browser.popCookie(up.protocol.config.methodCookie)
 
-    # Give async reset behavior another frame to play out,
-    # then start the next example.
-    up.util.nextFrame ->
-      $('.up-toast').remove()
-      done()
+      # Give async reset behavior another frame to play out,
+      # then start the next example.
+      up.util.task ->
+        $('.up-toast').remove()
+        done()

data/spec_app/spec/javascripts/helpers/restore_body_scroll.js.coffee

@@ -1,2 +1,5 @@
+u = up.util
+$ = jQuery
+
 afterEach ->
   $('body').scrollTop(0)

data/spec_app/spec/javascripts/helpers/show_lib_versions.coffee

@@ -1,3 +1,6 @@
+u = up.util
+$ = jQuery
+
 showVersions = ->
   $('.jasmine-version').text """
   jQuery #{$.fn.jquery}

data/spec_app/spec/javascripts/helpers/spec_util.coffee

@@ -0,0 +1,47 @@
+u = up.util
+e = up.element
+$ = jQuery
+
+up.specUtil = do ->
+
+  ###**
+  Returns whether the given element has been detached from the DOM
+  (or whether it was never attached).
+
+  @function up.util.isDetached
+  @internal
+  ###
+  isDetached = (element) ->
+    element = e.get(element)
+    # This is by far the fastest way to do this
+    not $.contains(document.documentElement, element)
+
+  isAttached = (element) ->
+    !isDetached(element)
+
+  isVisible = (element) ->
+    $(element).is(':visible')
+
+  isHidden = (element) ->
+    $(element).is(':hidden')
+
+  ###**
+  @function up.util.promiseTimer
+  @internal
+  ###
+  promiseTimer = (ms) ->
+    timeout = undefined
+    promise = new Promise (resolve, reject) ->
+      timeout = u.timer(ms, resolve)
+    promise.cancel = -> clearTimeout(timeout)
+    promise
+
+
+  isDetached: isDetached
+  isAttached: isAttached
+  isVisible: isVisible
+  isHidden: isHidden
+  promiseTimer: promiseTimer
+
+
+

data/spec_app/spec/javascripts/helpers/to_be_around.js.coffee

@@ -1,3 +1,6 @@
+u = up.util
+$ = jQuery
+
 beforeEach ->
   jasmine.addMatchers
     toBeAround: (util, customEqualityTesters) ->

data/spec_app/spec/javascripts/helpers/to_be_array.coffee

@@ -0,0 +1,5 @@
+beforeEach ->
+  jasmine.addMatchers
+    toBeArray: (util, customEqualityTesters) ->
+      compare: (actual) ->
+        pass: up.util.isArray(actual)

data/spec_app/spec/javascripts/helpers/to_be_attached.coffee

@@ -1,5 +1,9 @@
+u = up.util
+$ = jQuery
+
 beforeEach ->
   jasmine.addMatchers
     toBeAttached: (util, customEqualityTesters) ->
-      compare: (actual) ->
-        pass: !up.util.isDetached(actual)
+      compare: (element) ->
+        element = up.element.get(element)
+        pass: element && up.specUtil.isAttached(element)

data/spec_app/spec/javascripts/helpers/to_be_blank.js.coffee

@@ -1,3 +1,6 @@
+u = up.util
+$ = jQuery
+
 beforeEach ->
   jasmine.addMatchers
     toBeBlank: (util, customEqualityTesters) ->