unpoly-rails 0.57.0 → 0.60.0

data/spec_app/spec/javascripts/up/{layout_spec.js.coffee → viewport_spec.js.coffee}

@@ -1,14 +1,15 @@
-describe 'up.layout', ->
+u = up.util
+e = up.element
+$ = jQuery
 
-  u = up.util
+describe 'up.viewport', ->
 
   describe 'JavaScript functions', ->
 
     describe 'up.reveal', ->
 
       beforeEach ->
-        up.layout.config.snap = 0
-        up.layout.config.substance = 99999
+        up.viewport.config.revealSnap = 0
 
       describe 'when the viewport is the document', ->
 
@@ -19,7 +20,7 @@ describe 'up.layout', ->
           @$container = $('<div class="container">').prependTo($body)
           @$container.css(opacity: 0.2) # reduce flashing during test runs
 
-          @clientHeight = u.clientSize().height
+          @clientHeight = up.viewport.rootHeight()
 
           elementPlans = [
             { height: @clientHeight, backgroundColor: 'yellow' }, # [0]
@@ -36,7 +37,7 @@ describe 'up.layout', ->
           @$container.remove()
 
         $documentViewport = ->
-          $(up.browser.documentViewportSelector())
+          $(up.viewport.root())
 
         it 'reveals the given element', asyncSpec (next) ->
           up.reveal(@$elements[0])
@@ -79,8 +80,8 @@ describe 'up.layout', ->
           up.reveal(@$elements[2])
           next => expect($(document).scrollTop()).toBe(@clientHeight + 50 + 20)
 
-        it 'snaps to the top if the space above the future-visible area is smaller than the value of config.snap', asyncSpec (next) ->
-          up.layout.config.snap = 30
+        it 'snaps to the top if the space above the future-visible area is smaller than the value of config.revealSnap', asyncSpec (next) ->
+          up.viewport.config.revealSnap = 30
 
           @$elements[0].css(height: '20px')
 
@@ -107,7 +108,7 @@ describe 'up.layout', ->
             expect($(document).scrollTop()).toBe(0)
 
         it 'does not snap to the top if it would un-reveal an element at the bottom edge of the screen (bugfix)', asyncSpec (next) ->
-          up.layout.config.snap = 100
+          up.viewport.config.revealSnap = 100
 
           up.reveal(@$elements[1])
 
@@ -121,7 +122,7 @@ describe 'up.layout', ->
 
 
         it 'scrolls far enough so the element is not obstructed by an element fixed to the top', asyncSpec (next) ->
-          $topNav = affix('[up-fixed=top]').css(
+          $topNav = $fixture('[up-fixed=top]').css(
             position: 'fixed',
             top: '0',
             left: '0',
@@ -129,7 +130,7 @@ describe 'up.layout', ->
             height: '100px'
           )
 
-          up.reveal(@$elements[0], viewport: @viewport)
+          up.reveal(@$elements[0])
 
           next =>
             # ---------------------
@@ -174,7 +175,7 @@ describe 'up.layout', ->
             expect($(document).scrollTop()).toBe(@clientHeight + 50 - 100 - 50)
 
         it 'scrolls far enough so the element is not obstructed by an element fixed to the top with margin, padding, border and non-zero top properties', asyncSpec (next) ->
-          $topNav = affix('[up-fixed=top]').css(
+          $topNav = $fixture('[up-fixed=top]').css(
             position: 'fixed',
             top: '29px',
             margin: '16px',
@@ -205,7 +206,7 @@ describe 'up.layout', ->
             )
 
         it 'scrolls far enough so the element is not obstructed by an element fixed to the bottom', asyncSpec (next) ->
-          $bottomNav = affix('[up-fixed=bottom]').css(
+          $bottomNav = $fixture('[up-fixed=bottom]').css(
             position: 'fixed',
             bottom: '0',
             left: '0',
@@ -247,7 +248,7 @@ describe 'up.layout', ->
             expect($(document).scrollTop()).toBe(@clientHeight + 50)
 
         it 'scrolls far enough so the element is not obstructed by an element fixed to the bottom with margin, padding, border and non-zero bottom properties', asyncSpec (next) ->
-          $bottomNav = affix('[up-fixed=bottom]').css(
+          $bottomNav = $fixture('[up-fixed=bottom]').css(
             position: 'fixed',
             bottom: '29px',
             margin: '16px',
@@ -277,17 +278,29 @@ describe 'up.layout', ->
             )
 
         it 'does not crash when called with a CSS selector (bugfix)', (done) ->
-          promise = up.reveal('.container')
-          promiseState(promise).then (result) ->
-            expect(result.state).toEqual('fulfilled')
+          promise = up.reveal('.container', { behavior: 'instant' })
+          promise.then ->
+            expect(true).toBe(true)
             done()
 
+        it 'scrolls the viewport to the first row if the element if the element is higher than the viewport', asyncSpec (next) ->
+          @$elements[0].css(height: '1000px')
+          @$elements[1].css(height: '3000px')
+
+          up.reveal(@$elements[1])
+
+          next =>
+            # [0] 0 ............ 999
+            # [1] 1000 ........ 4999
+            expect($(document).scrollTop()).toBe(1000)
+
+
         describe 'with { top: true } option', ->
 
           it 'scrolls the viewport to the first row of the element, even if that element is already fully revealed', asyncSpec (next) ->
             @$elements[0].css(height: '20px')
 
-            up.reveal(@$elements[1], { top: true })
+            up.reveal(@$elements[1], { top: true, snap: false })
 
             next =>
               # [0] 0 ............ 19
@@ -301,7 +314,7 @@ describe 'up.layout', ->
       describe 'when the viewport is a container with overflow-y: scroll', ->
 
         it 'reveals the given element', asyncSpec (next) ->
-          $viewport = affix('div').css
+          $viewport = $fixture('div').css
             'position': 'absolute'
             'top': '50px'
             'left': '50px'
@@ -326,7 +339,7 @@ describe 'up.layout', ->
 
           # See that the view only scrolls down as little as possible
           # in order to reveal the element
-          up.reveal($elements[3], viewport: $viewport)
+          up.reveal($elements[3], viewport: $viewport[0])
 
           next =>
             # [0] 000..049
@@ -341,14 +354,14 @@ describe 'up.layout', ->
 
             # See that the view doesn't move if the element
             # is already revealed
-            up.reveal($elements[2], viewport: $viewport)
+            up.reveal($elements[2], viewport: $viewport[0])
 
           next =>
             expect($viewport.scrollTop()).toBe(100)
 
             # See that the view scrolls as far down as it cans
             # to show the bottom element
-            up.reveal($elements[5], viewport: $viewport)
+            up.reveal($elements[5], viewport: $viewport[0])
 
           next =>
             # [0] 000..049
@@ -361,7 +374,7 @@ describe 'up.layout', ->
             # ------------
             expect($viewport.scrollTop()).toBe(200)
 
-            up.reveal($elements[1], viewport: $viewport)
+            up.reveal($elements[1], viewport: $viewport[0])
 
           next =>
             # See that the view only scrolls up as little as possible
@@ -376,111 +389,91 @@ describe 'up.layout', ->
             # [5] 250..299
             expect($viewport.scrollTop()).toBe(50)
 
-      it 'only reveals the top number of pixels defined in config.substance', asyncSpec (next) ->
-
-        up.layout.config.substance = 20
-
-        $viewport = affix('div').css
-          'position': 'absolute'
-          'top': '50px'
-          'left': '50px'
-          'width': '100px'
-          'height': '100px'
-          'overflow-y': 'scroll'
-        $elements = []
-        u.each [0..5], ->
-          $element = $('<div>').css(height: '50px')
-          $element.appendTo($viewport)
-          $elements.push($element)
-
-        # [0] 000..049
-        # [1] 050..099
-        # [2] 100..149
-        # [3] 150..199
-        # [4] 200..249
-        # [5] 250..299
-
-        # Viewing 0 .. 99
-        expect($viewport.scrollTop()).toBe(0)
-
-        # See that the view only scrolls down as little as possible
-        # in order to reveal the first 20 rows of the element
-        up.reveal($elements[3], viewport: $viewport)
-
-        next =>
-          # Viewing 70 to 169
-          expect($viewport.scrollTop()).toBe(50 + 20)
-
-          # See that the view doesn't move if the element
-          # is already revealed
-          up.reveal($elements[2], viewport: $viewport)
-
-        next =>
-          expect($viewport.scrollTop()).toBe(50 + 20)
-
-          # See that the view scrolls as far down as it cans
-          # to show the first 20 rows of the bottom element
-          up.reveal($elements[5], viewport: $viewport)
-
-        next =>
-          # Viewing 170 to 269
-          expect($viewport.scrollTop()).toBe(150 + 20)
-
-          # See that the view only scrolls up as little as possible
-          # in order to reveal the first 20 rows element
-          up.reveal($elements[2], viewport: $viewport)
-
-        next =>
-          # Viewing 100 to 199
-          expect($viewport.scrollTop()).toBe(100)
-
-    describe 'up.layout.revealHash', ->
+    describe 'up.viewport.revealHash', ->
 
       it 'reveals an element with an ID matching the given #hash', asyncSpec (next) ->
-        revealSpy = up.layout.knife.mock('reveal')
-        $match = affix('div#hash')
-        up.layout.revealHash('#hash')
-        next => expect(revealSpy).toHaveBeenCalledWith($match, top: true)
+        revealSpy = up.viewport.knife.mock('reveal')
+        $match = $fixture('div#hash')
+        up.viewport.revealHash('#hash')
+        next => expect(revealSpy).toHaveBeenCalledWith($match[0], top: true)
 
       it 'reveals a named anchor matching the given #hash', asyncSpec (next) ->
-        revealSpy = up.layout.knife.mock('reveal')
-        $match = affix('a[name="hash"]')
-        up.layout.revealHash('#hash')
-        next => expect(revealSpy).toHaveBeenCalledWith($match, top: true)
+        revealSpy = up.viewport.knife.mock('reveal')
+        $match = $fixture('a[name="hash"]')
+        up.viewport.revealHash('#hash')
+        next => expect(revealSpy).toHaveBeenCalledWith($match[0], top: true)
+
+      it 'reveals an element with an [up-id] attribute matching the given #hash', asyncSpec (next) ->
+        revealSpy = up.viewport.knife.mock('reveal')
+        $match = $fixture('div[up-id="hash"]')
+        up.viewport.revealHash('#hash')
+        next => expect(revealSpy).toHaveBeenCalledWith($match[0], top: true)
 
       it 'does nothing and returns a fulfilled promise if no element or anchor matches the given #hash', (done) ->
-        revealSpy = up.layout.knife.mock('reveal')
-        promise = up.layout.revealHash('#hash')
+        revealSpy = up.viewport.knife.mock('reveal')
+        promise = up.viewport.revealHash('#hash')
         expect(revealSpy).not.toHaveBeenCalled()
         promiseState(promise).then (result) ->
           expect(result.state).toEqual('fulfilled')
           done()
 
       it 'does nothing and returns a fulfilled promise if no #hash is given', (done) ->
-        revealSpy = up.layout.knife.mock('reveal')
-        promise = up.layout.revealHash('')
+        revealSpy = up.viewport.knife.mock('reveal')
+        promise = up.viewport.revealHash('')
         expect(revealSpy).not.toHaveBeenCalled()
         promiseState(promise).then (result) ->
           expect(result.state).toEqual('fulfilled')
           done()
 
-    describe 'up.layout.viewportsWithin', ->
+    describe 'up.viewport.all', ->
 
-      it 'should have tests'
+      it 'returns a list of all viewports on the screen', ->
+        viewportElement = $fixture('[up-viewport]')[0]
+        results = up.viewport.all()
+        expect(results).toMatchList([viewportElement, up.viewport.root()])
+
+    describe 'up.viewport.subtree', ->
+
+      it 'returns descendant viewports of the given element', ->
+        $motherViewport = $fixture('.mother[up-viewport]')
+        $element = $motherViewport.affix('.element')
+        $childViewport = $element.affix('.child[up-viewport]')
+        $grandChildViewport = $childViewport.affix('.grand-child[up-viewport]')
+        actual = up.viewport.subtree($element[0])
+        expected = $childViewport.add($grandChildViewport)
+
+        expect(actual).toMatchList(expected)
 
-    describe 'up.layout.viewportOf', ->
+      it 'returns the given element if it is a viewport', ->
+        viewportElement = $fixture('[up-viewport]')[0]
+        results = up.viewport.subtree(viewportElement)
+        expect(results).toMatchList([viewportElement])
+
+    describe 'up.viewport.around', ->
+
+      it 'returns viewports that  are either ancestors, descendants, or the given element itself', ->
+        $motherViewport = $fixture('.mother[up-viewport]')
+        $element = $motherViewport.affix('.element')
+        $childViewport = $element.affix('.child[up-viewport]')
+        $grandChildViewport = $childViewport.affix('.grand-child[up-viewport]')
+        actual = up.viewport.around($element[0])
+        expected = $motherViewport.add($childViewport).add($grandChildViewport)
+
+        expect(actual).toMatchList(expected)
+
+    describe 'up.viewport.closest', ->
 
       it 'seeks upwards from the given element', ->
-        up.layout.config.viewports = ['.viewport1', '.viewport2']
-        $viewport1 = affix('.viewport1')
-        $viewport2 = affix('.viewport2')
-        $element = affix('div').appendTo($viewport2)
-        expect(up.layout.viewportOf($element)).toEqual($viewport2)
+        up.viewport.config.viewports = ['.viewport1', '.viewport2']
+        $viewport1 = $fixture('.viewport1')
+        $viewport2 = $fixture('.viewport2')
+        $element = $fixture('div').appendTo($viewport2)
+        expect(up.viewport.closest($element)).toEqual($viewport2[0])
 
       it 'returns the given element if it is a configured viewport itself', ->
-        up.layout.config.viewports = ['.viewport']
-        $viewport = affix('.viewport')
-        expect(up.layout.viewportOf($viewport)).toEqual($viewport)
+        up.viewport.config.viewports = ['.viewport']
+        $viewport = $fixture('.viewport')
+        expect(up.viewport.closest($viewport)).toEqual($viewport[0])
 
       describe 'when no configured viewport matches', ->
 
@@ -489,44 +482,44 @@ describe 'up.layout', ->
           @resetHtmlCss?()
 
         it 'falls back to the scrolling element', ->
-          $element = affix('.element').css(height: '3000px')
-          $result = up.layout.viewportOf($element)
-          expect($result).toMatchSelector(up.browser.documentViewportSelector())
+          $element = $fixture('.element').css(height: '3000px')
+          $result = up.viewport.closest($element)
+          expect($result).toMatchSelector(up.viewport.rootSelector())
 
         it 'falls back to the scrolling element if <body> is configured to scroll (fix for Edge)', ->
-          $element = affix('.element').css(height: '3000px')
-          @resetHtmlCss = u.writeTemporaryStyle('html', 'overflow-y': 'hidden')
-          @resetBodyCss = u.writeTemporaryStyle('body', 'overflow-y': 'scroll')
-          $result = up.layout.viewportOf($element)
-          expect($result).toMatchSelector(up.browser.documentViewportSelector())
+          $element = $fixture('.element').css(height: '3000px')
+          @resetHtmlCss = e.setTemporaryStyle(document.documentElement, 'overflow-y': 'hidden')
+          @resetBodyCss = e.setTemporaryStyle(document.body, 'overflow-y': 'scroll')
+          $result = up.viewport.closest($element)
+          expect($result).toMatchSelector(up.viewport.rootSelector())
 
         it 'falls back to the scrolling element if <html> is configured to scroll (fix for Edge)', ->
-          $element = affix('.element').css(height: '3000px')
-          @resetHtmlCss = u.writeTemporaryStyle('html', 'overflow-y': 'scroll')
-          @resetBodyCss = u.writeTemporaryStyle('body', 'overflow-y': 'hidden')
-          $result = up.layout.viewportOf($element)
-          expect($result).toMatchSelector(up.browser.documentViewportSelector())
+          $element = $fixture('.element').css(height: '3000px')
+          @resetHtmlCss = e.setTemporaryStyle(document.documentElement, 'overflow-y': 'scroll')
+          @resetBodyCss = e.setTemporaryStyle(document.body, 'overflow-y': 'hidden')
+          $result = up.viewport.closest($element)
+          expect($result).toMatchSelector(up.viewport.rootSelector())
 
-    describe 'up.layout.restoreScroll', ->
+    describe 'up.viewport.restoreScroll', ->
 
       it "restores a viewport's previously saved scroll position", (done) ->
-        $viewport = affix('#viewport[up-viewport]').css(height: '100px', overflowY: 'scroll')
+        $viewport = $fixture('#viewport[up-viewport]').css(height: '100px', overflowY: 'scroll')
         $content = $viewport.affix('.content').css(height: '1000px')
         up.hello($viewport)
         $viewport.scrollTop(50)
-        up.layout.saveScroll()
+        up.viewport.saveScroll()
         $viewport.scrollTop(70)
 
-        up.layout.restoreScroll().then ->
+        up.viewport.restoreScroll().then ->
           expect($viewport.scrollTop()).toEqual(50)
           done()
 
       it "scrolls a viewport to the top (and does not crash) if no previous scroll position is known", (done) ->
-        $viewport = affix('#viewport[up-viewport]').css(height: '100px', overflowY: 'scroll')
+        $viewport = $fixture('#viewport[up-viewport]').css(height: '100px', overflowY: 'scroll')
         $content = $viewport.affix('.content').css(height: '1000px')
         $viewport.scrollTop(70)
 
-        up.layout.restoreScroll().then ->
+        up.viewport.restoreScroll().then ->
           expect($viewport.scrollTop()).toEqual(0)
           done()
 
@@ -534,41 +527,74 @@ describe 'up.layout', ->
 
       it 'should have tests'
 
-    describe 'up.layout.absolutize', ->
+    describe 'up.viewport.rootOverflowElement', ->
+
+      beforeEach ->
+        @body = document.body
+        @html = document.documentElement
+        @restoreBodyOverflowY = e.setTemporaryStyle(@body, 'overflow-y': 'visible')
+        @restoreHtmlOverflowY = e.setTemporaryStyle(@html, 'overflow-y': 'visible')
+
+      afterEach ->
+        @restoreBodyOverflowY()
+        @restoreHtmlOverflowY()
+
+      it 'returns the <html> element if the developer set { overflow-y: scroll } on it', ->
+        @html.style.overflowY = 'scroll'
+        expect(up.viewport.rootOverflowElement()).toBe(@html)
+
+      it 'returns the <html> element if the developer set { overflow-y: auto } on it', ->
+        @html.style.overflowY = 'auto'
+        expect(up.viewport.rootOverflowElement()).toBe(@html)
+
+      it 'returns the <body> element if the developer set { overflow-y: scroll } on it', ->
+        @body.style.overflowY = 'scroll'
+        expect(up.viewport.rootOverflowElement()).toBe(@body)
+
+      it 'returns the <body> element if the developer set { overflow-y: auto } on it', ->
+        @body.style.overflowY = 'auto'
+        expect(up.viewport.rootOverflowElement()).toBe(@body)
+
+      it 'returns the scrolling element if the developer set { overflow-y: visible } on both <html> and <body>', ->
+        @html.style.overflowY = 'visible'
+        @body.style.overflowY = 'visible'
+        expect(up.viewport.rootOverflowElement()).toBe(up.viewport.root())
+
+    describe 'up.viewport.absolutize', ->
 
       afterEach ->
         $('.up-bounds, .fixture').remove()
 
       it 'absolutely positions the element, preserving visual position and size', ->
-        $element = affix('.element').text('element text').css(paddingTop: '20px', paddingLeft: '20px')
+        $element = $fixture('.element').text('element text').css(paddingTop: '20px', paddingLeft: '20px')
 
         expect($element.css('position')).toEqual('static')
-        previousDims = u.measure($element)
+        previousDims = $element[0].getBoundingClientRect()
 
-        up.layout.absolutize($element)
+        up.viewport.absolutize($element)
 
         expect($element.closest('.up-bounds').css('position')).toEqual('absolute')
 
-        newDims = u.measure($element)
+        newDims = $element[0].getBoundingClientRect()
         expect(newDims).toEqual(previousDims)
 
       it 'accurately positions the ghost over an element with margins', ->
-        $element = affix('.element').css(margin: '40px')
-        previousDims = u.measure($element)
+        $element = $fixture('.element').css(margin: '40px')
+        previousDims = $element[0].getBoundingClientRect()
 
-        up.layout.absolutize($element)
+        up.viewport.absolutize($element)
 
-        newDims = u.measure($element)
+        newDims = $element[0].getBoundingClientRect()
         expect(newDims).toEqual(previousDims)
 
       it "doesn't change the position of a child whose margins no longer collapse", ->
-        $element = affix('.element')
+        $element = $fixture('.element')
         $child = $('<div class="child">child text</div>').css(margin: '40px').appendTo($element)
-        previousChildDims = u.measure($child)
+        previousChildDims = $child[0].getBoundingClientRect()
 
-        up.layout.absolutize($element)
+        up.viewport.absolutize($element)
 
-        newChildDims = u.measure($child)
+        newChildDims = $child[0].getBoundingClientRect()
         expect(newChildDims).toEqual(previousChildDims)
 
       it 'correctly positions an element within a scrolled body', ->
@@ -577,15 +603,15 @@ describe 'up.layout', ->
         $element2 = $('<div class="fixture"></div>').css(height: '100px').insertAfter($element1)
         $body.scrollTop(33)
 
-        previousDims = u.measure($element2)
+        previousDims = $element2[0].getBoundingClientRect()
 
-        up.layout.absolutize($element2)
+        up.viewport.absolutize($element2)
 
-        newDims = u.measure($element2)
+        newDims = $element2[0].getBoundingClientRect()
         expect(newDims).toEqual(previousDims)
 
       it 'correctly positions an element within a scrolled parent element (that has overflow-y: scroll)', ->
-        $viewport = affix('div').css
+        $viewport = $fixture('div').css
           overflowY: 'scroll'
           height: '50px'
 
@@ -593,15 +619,15 @@ describe 'up.layout', ->
         $element2 = $('<div class="fixture"></div>').css(height: '100px').insertAfter($element1)
         $viewport.scrollTop(33)
 
-        previousDims = u.measure($element2)
+        previousDims = $element2[0].getBoundingClientRect()
 
-        up.layout.absolutize($element2)
+        up.viewport.absolutize($element2)
 
-        newDims = u.measure($element2)
+        newDims = $element2[0].getBoundingClientRect()
         expect(newDims).toEqual(previousDims)
 
       it 'converts fixed elements within the copies to absolutely positioning (relative to the closest offset parent)', ->
-        $element = affix('.element').css
+        $element = $fixture('.element').css
           position: 'absolute'
           top: '50px'
           left: '50px'
@@ -610,7 +636,7 @@ describe 'up.layout', ->
           left: '77px'
           top: '77px'
         $fixedChild.appendTo($element)
-        up.layout.absolutize($element)
+        up.viewport.absolutize($element)
 
         expect($fixedChild.css(['position', 'left', 'top'])).toEqual
           position: 'absolute',
@@ -618,12 +644,12 @@ describe 'up.layout', ->
           top: '27px'
 
       it "does not convert fixed elements outside the element's subtree (bugfix)", ->
-        $element = affix('.element').css(position: 'absolute')
+        $element = $fixture('.element').css(position: 'absolute')
         $fixedChild = $('<div class="fixed-child" up-fixed></div>').css(position: 'fixed')
         $fixedChild.appendTo($element)
-        $fixedSibling = affix('[up-fixed]').css(position: 'fixed')
+        $fixedSibling = $fixture('[up-fixed]').css(position: 'fixed')
 
-        up.layout.absolutize($element)
+        up.viewport.absolutize($element)
 
         expect($fixedChild.css('position')).toEqual('absolute')
         expect($fixedSibling.css('position')).toEqual('fixed')