unpoly-rails 0.57.0 → 0.60.0

data/lib/assets/stylesheets/unpoly/dom.sass

@@ -1,5 +1,5 @@
 .up-insertion
   // The element must not display inline, since inline elements have no height:
   // https://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced
-  // This causes u.measure in up.layout.reveal to return an element with a top, but a zero height.
+  // This causes u.measure in up.viewport.reveal to return an element with a top, but a zero height.
   display: inline-block

data/lib/assets/stylesheets/unpoly/layout.sass

@@ -0,0 +1,2 @@
+.up-bounds
+  position: absolute

data/lib/assets/stylesheets/unpoly/popup.sass

@@ -2,7 +2,6 @@ $stratum: 20000
 
 .up-popup
   z-index: $stratum
-  position: absolute
   background-color: #fff
   padding: 15px
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)

data/lib/assets/stylesheets/unpoly/tooltip.sass

@@ -1,16 +1,11 @@
 $stratum: 30000
-$distance-from-trigger: 6px
-$corner-size: 8px
+$distance-from-origin: 10px
+$corner-size: 6px
 $background-color: #111
 
 .up-tooltip
-  position: absolute
   z-index: $stratum
-  background-color: $background-color
-  color: white
-  padding: 6px 9px
-  white-space: nowrap
-  pointer-events: none
+  position: relative
 
   &:after
     content: ''
@@ -21,7 +16,8 @@ $background-color: #111
     border: $corner-size solid transparent
 
   &[up-position=top]
-    margin-top: -$distance-from-trigger
+    margin-bottom: $distance-from-origin
+
     &:after
       border-top-color: $background-color
       border-bottom-width: 0
@@ -30,7 +26,8 @@ $background-color: #111
       margin-left: -$corner-size
 
   &[up-position=left]
-    margin-left: -$distance-from-trigger
+    margin-right: $distance-from-origin
+
     &:after
       border-left-color: $background-color
       border-right-width: 0
@@ -39,7 +36,8 @@ $background-color: #111
       margin-top: -$corner-size
 
   &[up-position=right]
-    margin-left: $distance-from-trigger
+    margin-left: $distance-from-origin
+
     &:after
       border-right-color: $background-color
       border-left-width: 0
@@ -48,10 +46,17 @@ $background-color: #111
       margin-top: -$corner-size
 
   &[up-position=bottom]
-    margin-top: $distance-from-trigger
+    margin-top: $distance-from-origin
+
     &:after
       border-bottom-color: $background-color
       border-top-width: 0
       top: -$corner-size
       left: 50%
       margin-left: -$corner-size
+
+.up-tooltip-content
+  background-color: $background-color
+  color: white
+  padding: 6px 9px
+  white-space: nowrap

data/lib/unpoly/rails/version.rb

@@ -4,6 +4,6 @@ module Unpoly
     # The current version of the unpoly-rails gem.
     # This version number is also used for releases of the Unpoly
     # frontend code.
-    VERSION = '0.57.0'
+    VERSION = '0.60.0'
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unpoly",
-  "version": "0.57.0",
+  "version": "0.60.0",
   "description": "Unobtrusive JavaScript framework",
   "main": "dist/unpoly.js",
   "files": [
@@ -34,6 +34,5 @@
   },
   "homepage": "https://unpoly.com",
   "dependencies": {
-    "jquery": ">=1.9.0"
   }
 }

data/spec_app/Gemfile

@@ -23,7 +23,8 @@ gem 'sprockets', '=2.12.3'
 group :development, :test do
   gem 'byebug'
   gem 'web-console', '~> 2.0'
-  gem 'jasmine-rails'
+  gem 'jasmine-rails', git: 'https://github.com/triskweline/jasmine-rails.git', branch: 'hk/jasmine3'
+  gem 'jasmine-core', '<3'
 end
 
 group :test do

data/spec_app/Gemfile.lock

@@ -1,7 +1,18 @@
+GIT
+  remote: https://github.com/triskweline/jasmine-rails.git
+  revision: d0f337e7c2ccf72de88dfcb5da4a1ecceba45326
+  branch: hk/jasmine3
+  specs:
+    jasmine-rails (0.14.7)
+      jasmine-core (>= 1.3, < 4.0)
+      phantomjs (>= 1.9)
+      railties (>= 3.2.0)
+      sprockets-rails
+
 PATH
   remote: ..
   specs:
-    unpoly-rails (0.56.7)
+    unpoly-rails (0.60.0)
       rails (>= 3)
 
 GEM
@@ -56,19 +67,21 @@ GEM
       columnize (~> 0.8)
       debugger-linecache (~> 1.2)
       slop (~> 3.6)
-    coffee-rails (4.1.0)
+    coffee-rails (4.1.1)
       coffee-script (>= 2.2.0)
-      railties (>= 4.0.0, < 5.0)
-    coffee-script (2.3.0)
+      railties (>= 4.0.0, < 5.1.x)
+    coffee-script (2.4.1)
       coffee-script-source
       execjs
-    coffee-script-source (1.8.0)
+    coffee-script-source (1.12.2)
     columnize (0.9.0)
+    concurrent-ruby (1.1.4)
+    crass (1.0.4)
     debug_inspector (0.0.2)
     debugger-linecache (1.2.0)
     diff-lcs (1.2.5)
     erubis (2.7.0)
-    execjs (2.2.2)
+    execjs (2.7.0)
     globalid (0.3.6)
       activesupport (>= 4.1.0)
     haml (4.1.0.beta.1)
@@ -86,31 +99,28 @@ GEM
       haml (>= 4.0.0.rc.1)
       hpricot (~> 0.8.6)
       ruby_parser (~> 3.1.1)
-    i18n (0.8.6)
-    jasmine-core (2.8.0)
-    jasmine-rails (0.14.1)
-      jasmine-core (>= 1.3, < 3.0)
-      phantomjs (>= 1.9)
-      railties (>= 3.2.0)
-      sprockets-rails
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jasmine-core (2.99.2)
     jquery-rails (4.3.1)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
     json (1.8.6)
     libv8 (3.16.14.3)
-    loofah (2.0.3)
+    loofah (2.2.3)
+      crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.6.3)
       mime-types (>= 1.16, < 3)
     mime-types (2.99)
-    mini_portile2 (2.2.0)
-    minitest (5.10.3)
-    multi_json (1.12.1)
-    nokogiri (1.8.0)
-      mini_portile2 (~> 2.2.0)
+    mini_portile2 (2.4.0)
+    minitest (5.11.3)
+    multi_json (1.13.1)
+    nokogiri (1.9.1)
+      mini_portile2 (~> 2.4.0)
     phantomjs (2.1.1.0)
-    rack (1.6.8)
+    rack (1.6.11)
     rack-test (0.6.3)
       rack (>= 1.0)
     rails (4.2.0)
@@ -126,12 +136,12 @@ GEM
       sprockets-rails
     rails-deprecated_sanitizer (1.0.3)
       activesupport (>= 4.2.0.alpha)
-    rails-dom-testing (1.0.8)
-      activesupport (>= 4.2.0.beta, < 5.0)
+    rails-dom-testing (1.0.9)
+      activesupport (>= 4.2.0, < 5.0)
       nokogiri (~> 1.6)
       rails-deprecated_sanitizer (>= 1.0.1)
-    rails-html-sanitizer (1.0.3)
-      loofah (~> 2.0)
+    rails-html-sanitizer (1.0.4)
+      loofah (~> 2.2, >= 2.2.2)
     railties (4.2.0)
       actionpack (= 4.2.0)
       activesupport (= 4.2.0)
@@ -180,10 +190,10 @@ GEM
     therubyracer (0.12.1)
       libv8 (~> 3.16.14.0)
       ref
-    thor (0.20.0)
+    thor (0.20.3)
     thread_safe (0.3.6)
     tilt (1.4.1)
-    tzinfo (1.2.3)
+    tzinfo (1.2.5)
       thread_safe (~> 0.1)
     uglifier (2.6.0)
       execjs (>= 0.3.0)
@@ -203,7 +213,8 @@ DEPENDENCIES
   byebug
   coffee-rails (~> 4.1.0)
   haml-rails
-  jasmine-rails
+  jasmine-core (< 3)
+  jasmine-rails!
   jquery-rails
   rails (= 4.2.0)
   rake (< 11)

data/spec_app/app/assets/javascripts/integration_test.coffee

@@ -1,4 +1,5 @@
 #= require jquery
+#= require helpers/jquery_no_conflict
 #= require jquery_ujs
 #= require es6-promise.auto
 #= require helpers/knife

data/spec_app/app/assets/javascripts/jasmine_specs.coffee

@@ -1,6 +1,5 @@
+#= require helpers/jquery_no_conflict
 #= require jquery_ujs
-#= require jasmine-jquery
-#= require jasmine-fixture
 #= require jasmine-ajax
 #= require helpers/knife
 #= require es6-promise.auto

data/spec_app/app/assets/stylesheets/integration_test.sass

@@ -33,7 +33,7 @@ a
 .fixed-top-bar,
 .fixed-bottom-bar
   position: fixed
-  z-index: 9999999
+  z-index: 999
   top: 0
   left: 0
   right: 0
@@ -63,6 +63,10 @@ a
   background-color: #37b
   color: white
   text-decoration: none
+  box-sizing: border-box
+
+  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.2), inset 0 -2px 5px rgba(0, 0, 0, 0.2)
+
   &.up-current
     background-color: #e21
   &:hover
@@ -70,6 +74,15 @@ a
     color: white
   &.up-active
     background-color: #ff0
+  &.-green
+    background-color: green
+
 
 dt
   font-weight: bold
+
+.columns
+  display: flex
+
+.columns--column
+  flex: 1 1 50%

data/spec_app/app/controllers/scroll_test_controller.rb

@@ -0,0 +1,5 @@
+class ScrollTestController < ApplicationController
+
+  layout 'integration_test'
+
+end

data/spec_app/app/views/css_test/modal.erb

@@ -3,12 +3,12 @@
   up.compiler('.clamped-open', function($link) {
     $link.on('click', function(event) {
       event.preventDefault();
-      u.nextFrame(function() {
-        u.nextFrame(function() {
-          u.nextFrame(function() {
-            u.nextFrame(function() {
-              u.nextFrame(function() {
-                u.nextFrame(function() {
+      u.task(function() {
+        u.task(function() {
+          u.task(function() {
+            u.task(function() {
+              u.task(function() {
+                u.task(function() {
                   up.modal.follow($link, {
                     target: '.contents',
                     duration: 1000

data/spec_app/app/views/css_test/popup.erb

@@ -1,15 +1,15 @@
 <script>
   var u = up.util;
-  up.compiler('.clamped-open', function($link) {
-    $link.on('click', function(event) {
+  up.compiler('.clamped-open', function(link) {
+    link.addEventListener('click', function(event) {
       event.preventDefault();
-      u.nextFrame(function() {
-        u.nextFrame(function() {
-          u.nextFrame(function() {
-            u.nextFrame(function() {
-              u.nextFrame(function() {
-                u.nextFrame(function() {
-                  up.popup.attach($link, {
+      u.task(function() {
+        u.task(function() {
+          u.task(function() {
+            u.task(function() {
+              u.task(function() {
+                u.task(function() {
+                  up.popup.attach(link, {
                     target: '.contents',
                     duration: 1000
                   });
@@ -24,32 +24,58 @@
 </script>
 
 
-<div class="fixed-top-bar">
-  <a class="button" href="/css_test/popup_contents?1" up-popup=".contents" up-position="top-left">Top-left popup</a>
-  <a class="button" href="/css_test/popup_contents?2" up-popup=".contents" up-position="top-right">Top-right popup</a>
-  <a class="button" href="/css_test/popup_contents?3" up-popup=".contents" up-position="bottom-right">Bottom-right popup</a>
-  <a class="button" href="/css_test/popup_contents?4" up-popup=".contents" up-position="bottom-left">Bottom-left popup</a>
+<div class="fixed-top-bar" up-fixed="top">
+  <a class="button" href="/css_test/popup_contents?1" up-popup=".contents" up-position="top" up-align="left">top/left popup</a>
+  <a class="button" href="/css_test/popup_contents?2" up-popup=".contents" up-position="top" up-align="right">top/right popup</a>
+  <a class="button" href="/css_test/popup_contents?3" up-popup=".contents" up-position="bottom" up-align="right">bottom/right popup</a>
+  <a class="button" href="/css_test/popup_contents?4" up-popup=".contents" up-position="bottom" up-align="left">bottom/left popup</a>
 </div>
 
 <div class="spacer">
 </div>
 
+
 <div class="example">
-  <a class="button" href="/css_test/popup_contents?5" up-popup=".contents" up-position="top-left">Top-left popup</a>
+  <a class="button" href="/css_test/popup_contents?5" up-popup=".contents" up-position="top" up-align="left">top/left popup</a>
+  <a class="button" href="/css_test/popup_contents?6" up-popup=".contents" up-position="top" up-align="center">top/center popup</a>
+  <a class="button" href="/css_test/popup_contents?7" up-popup=".contents" up-position="top" up-align="right">top/right popup</a>
 </div>
 
 <div class="example">
-  <a class="button" href="/css_test/popup_contents?6" up-popup=".contents" up-position="top-right">Top-right popup</a>
+  <a class="button" href="/css_test/popup_contents?8" up-popup=".contents" up-position="right" up-align="top">right/top popup</a>
+  <a class="button" href="/css_test/popup_contents?9" up-popup=".contents" up-position="right" up-align="center">right/center popup</a>
+  <a class="button" href="/css_test/popup_contents?a" up-popup=".contents" up-position="right" up-align="bottom">right/bottom popup</a>
 </div>
 
 <div class="example">
-  <a class="button" href="/css_test/popup_contents?7" up-popup=".contents" up-position="bottom-right">Bottom-right popup</a>
+  <a class="button" href="/css_test/popup_contents?b" up-popup=".contents" up-position="bottom" up-align="right">  bottom/right popup</a>
+  <a class="button" href="/css_test/popup_contents?c" up-popup=".contents" up-position="bottom" up-align="center">bottom/center popup</a>
+  <a class="button" href="/css_test/popup_contents?d" up-popup=".contents" up-position="bottom" up-align="left"> bottom/left popup</a>
 </div>
 
 <div class="example">
-  <a class="button" href="/css_test/popup_contents?8" up-popup=".contents" up-position="bottom-left">Bottom-left popup</a>
+  <a class="button" href="/css_test/popup_contents?e" up-popup=".contents" up-position="left" up-align="bottom">left/bottom popup</a>
+  <a class="button" href="/css_test/popup_contents?f" up-popup=".contents" up-position="left" up-align="top">left/top popup</a>
+  <a class="button" href="/css_test/popup_contents?g" up-popup=".contents" up-position="left" up-align="center">left/center popup</a>
 </div>
 
+
 <div class="example">
   <a class="button clamped-open" href="/css_test/popup_contents">Clamped open</a>
 </div>
+
+<div class="example">
+  <div up-viewport style="height: 300px; width: 500px; overflow-y: scroll; background-color: rgba(0,0,0,0.2)">
+    <div class="spacer"></div>
+    <a class="button" href="/css_test/popup_contents?8" up-popup=".contents" up-position="bottom">Popup within a viewport that has no position</a>
+    <div class="spacer"></div>
+  </div>
+</div>
+
+<div class="example">
+  <div up-viewport style="height: 300px; width: 500px; overflow-y: scroll; background-color: rgba(0,0,0,0.2); position: relative">
+    <div class="spacer"></div>
+    <a class="button" href="/css_test/popup_contents?8" up-popup=".contents" up-position="bottom">Popup within a viewport that has position</a>
+    <div class="spacer"></div>
+  </div>
+</div>

data/spec_app/app/views/css_test/tooltip.erb

@@ -9,21 +9,40 @@
 </div>
 
 <div class="example">
-  <a class="button" href="#" up-tooltip="Tooltip text" up-position="top">Top tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="top" up-align="left">top/left tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="top" up-align="center">top/center tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="top" up-align="right">top/right tooltip</a>
 </div>
 
 <div class="example">
-  <a class="button" href="#" up-tooltip="Tooltip text" up-position="bottom">Bottom tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="right" up-align="top">right/top tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="right" up-align="center">right/center tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="right" up-align="bottom">right/bottom tooltip</a>
 </div>
 
 <div class="example">
-  <a class="button" href="#" up-tooltip="Tooltip text" up-position="left">Left tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="bottom" up-align="right">  bottom/right tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="bottom" up-align="center">bottom/center tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="bottom" up-align="left"> bottom/left tooltip</a>
 </div>
 
 <div class="example">
-  <a class="button" href="#" up-tooltip="Tooltip text" up-position="right">Right tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="left" up-align="bottom">left/bottom tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="left" up-align="top">left/top tooltip</a>
+  <a class="button" href="#" up-tooltip="Tooltip text" up-position="left" up-align="center">left/center tooltip</a>
 </div>
 
 <div class="example">
   <% 1.upto(100) do |i| %><a class="button" href="#" up-tooltip="Tooltip <%= i %>"><%= i %></a><% end %>
 </div>
+
+<!--<a class="button -green" href="#" up-tooltip="Tooltip text" style="position: fixed; left: 0; top: 0; z-index: 9999">Auto tooltip</a>-->
+<!--<a class="button -green" href="#" up-tooltip="Tooltip text" style="position: fixed; left: 0; bottom: 0; z-index: 9999">Auto tooltip</a>-->
+<!--<a class="button -green" href="#" up-tooltip="Tooltip text" style="position: fixed; left: 0; top: calc(50vh - 25px); z-index: 9999">Auto tooltip</a>-->
+
+<!--<a class="button -green" href="#" up-tooltip="Tooltip text" style="position: fixed; left: calc(50vw - 25px); top: 0; z-index: 9999">Auto tooltip</a>-->
+<!--<a class="button -green" href="#" up-tooltip="Tooltip text" style="position: fixed; left: calc(50vw - 25px); bottom: 0; z-index: 9999">Auto tooltip</a>-->
+
+<!--<a class="button -green" href="#" up-tooltip="Tooltip text" style="position: fixed; right: 0; top: 0; z-index: 9999">Auto tooltip</a>-->
+<!--<a class="button -green" href="#" up-tooltip="Tooltip text" style="position: fixed; right: 0; bottom: 0; z-index: 9999">Auto tooltip</a>-->
+<!--<a class="button -green" href="#" up-tooltip="Tooltip text" style="position: fixed; right: 0; top: calc(50vh - 25px); z-index: 9999">Auto tooltip</a>-->