Revert tailing changes
This commit is contained in:
Piotr Sarnacki
parent
492802920e
commit
d7bef2b94e
|
|
@ -33,7 +33,7 @@ unless window.TravisApplication
|
|||
|
||||
@slider = new Travis.Slider()
|
||||
@pusher = new Travis.Pusher(Travis.config.pusher_key) if Travis.config.pusher_key
|
||||
@tailing = new Travis.Tailing($(window), '#tail', '#log')
|
||||
@tailing = new Travis.Tailing()
|
||||
|
||||
@set('auth', Travis.Auth.create(app: this, endpoint: Travis.config.api_endpoint))
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,12 @@
|
|||
class @Travis.Tailing
|
||||
@Travis.Tailing = ->
|
||||
@position = $(window).scrollTop()
|
||||
$(window).scroll( $.throttle( 200, @onScroll.bind(this) ) )
|
||||
this
|
||||
|
||||
$.extend Travis.Tailing.prototype,
|
||||
options:
|
||||
timeout: 200
|
||||
|
||||
tail: ->
|
||||
$(@tail_selector)
|
||||
log: ->
|
||||
$(@log_selector)
|
||||
|
||||
constructor: (@window, @tail_selector, @log_selector) ->
|
||||
@position = @window.scrollTop()
|
||||
@window.scroll( $.throttle( 200, @onScroll.bind(this) ) )
|
||||
this
|
||||
|
||||
run: ->
|
||||
@autoScroll()
|
||||
@positionButton()
|
||||
|
|
@ -21,43 +16,37 @@ class @Travis.Tailing
|
|||
if @active() then @stop() else @start()
|
||||
|
||||
active: ->
|
||||
@tail().hasClass('active')
|
||||
$('#tail').hasClass('active')
|
||||
|
||||
start: ->
|
||||
@tail().addClass('active')
|
||||
$('#tail').addClass('active')
|
||||
@run()
|
||||
|
||||
stop: ->
|
||||
@tail().removeClass('active')
|
||||
$('#tail').removeClass('active')
|
||||
|
||||
autoScroll: ->
|
||||
return false unless @active()
|
||||
logBottom = @log().offset().top + @log().outerHeight() + 40
|
||||
winBottom = @window.scrollTop() + @window.height()
|
||||
|
||||
if logBottom - winBottom > 0
|
||||
@window.scrollTop(logBottom - @window.height())
|
||||
true
|
||||
else
|
||||
false
|
||||
return unless @active()
|
||||
win = $(window)
|
||||
log = $('#log')
|
||||
logBottom = log.offset().top + log.outerHeight() + 40
|
||||
winBottom = win.scrollTop() + win.height()
|
||||
win.scrollTop(logBottom - win.height()) if logBottom - winBottom > 0
|
||||
|
||||
onScroll: ->
|
||||
@positionButton()
|
||||
position = @window.scrollTop()
|
||||
position = $(window).scrollTop()
|
||||
@stop() if position < @position
|
||||
@position = position
|
||||
|
||||
positionButton: ->
|
||||
return if @tail().length is 0
|
||||
offset = @window.scrollTop() - @log().offset().top
|
||||
max = @log().height() - @tail().height() + 5
|
||||
|
||||
if offset > 0 && offset <= max
|
||||
@tail().removeClass('bottom')
|
||||
@tail().addClass('scrolling')
|
||||
tail = $('#tail')
|
||||
return if tail.length is 0
|
||||
offset = $(window).scrollTop() - $('#log').offset().top
|
||||
max = $('#log').height() - $('#tail').height() + 5
|
||||
offset = max if offset > max
|
||||
if offset > 0
|
||||
tail.css(top: offset - 2)
|
||||
else
|
||||
if offset > max
|
||||
@tail().addClass('bottom')
|
||||
else
|
||||
@tail().removeClass('bottom')
|
||||
@tail().removeClass('scrolling')
|
||||
tail.css(top: 0)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,7 @@
|
|||
<div id="log-container">
|
||||
<a href="#" id="tail" {{action "toggleTailing" target="view"}}>
|
||||
<span class="status"></span>
|
||||
|
||||
<label>
|
||||
{{#if view.job.isFinished}}
|
||||
Scroll to end of logs
|
||||
{{else}}
|
||||
Follow logs
|
||||
{{/if}}
|
||||
</label>
|
||||
<label>Follow logs</label>
|
||||
</a>
|
||||
<pre id="log" class="ansi"></pre>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,89 +0,0 @@
|
|||
fakeWindow =
|
||||
scroll: sinon.spy()
|
||||
scrollTop: sinon.stub().returns(0)
|
||||
height: sinon.stub().returns(40)
|
||||
element = jQuery('<div id="specTail"></div>')
|
||||
log = jQuery('<div id="specLog"></div>')
|
||||
tail = new Travis.Tailing(fakeWindow, '#specTail', '#specLog')
|
||||
tail.tail = -> element
|
||||
tail.log = -> log
|
||||
|
||||
module "Travis.Tailing",
|
||||
setup: ->
|
||||
jQuery('body').append(element)
|
||||
jQuery('body').append(log)
|
||||
|
||||
teardown: ->
|
||||
element.remove()
|
||||
log.remove()
|
||||
tail.stop()
|
||||
|
||||
test "toggle", ->
|
||||
equal(element.hasClass('active'), false)
|
||||
tail.toggle()
|
||||
equal(element.hasClass('active'), true)
|
||||
tail.toggle()
|
||||
stop()
|
||||
|
||||
Ember.run.later ->
|
||||
start()
|
||||
equal(element.hasClass('active'), false)
|
||||
, 300
|
||||
|
||||
test "active", ->
|
||||
equal(tail.active(), false)
|
||||
element.addClass('active')
|
||||
equal(tail.active(), true)
|
||||
|
||||
test "autoscroll when inactive", ->
|
||||
tail.scrollTo = sinon.spy()
|
||||
|
||||
equal(tail.active(), false)
|
||||
equal(tail.autoScroll(), false)
|
||||
equal(tail.scrollTo.called, false)
|
||||
|
||||
test "autoscroll", ->
|
||||
element.addClass('active')
|
||||
log.offset = -> {top: 1}
|
||||
log.outerHeight = -> 1
|
||||
|
||||
equal(tail.active(), true)
|
||||
equal(tail.autoScroll(), true)
|
||||
equal(fakeWindow.scrollTop.calledWith(2), true)
|
||||
|
||||
test "autoscroll when we're at the bottom", ->
|
||||
element.addClass('active')
|
||||
log.offset = -> {top: 0}
|
||||
log.outerHeight = -> 0
|
||||
|
||||
equal(tail.active(), true)
|
||||
equal(tail.autoScroll(), false)
|
||||
equal(fakeWindow.scrollTop.calledWith(0), false)
|
||||
|
||||
test 'should stop scrolling if the position changed', ->
|
||||
element.addClass('active')
|
||||
tail.position = 100
|
||||
tail.onScroll()
|
||||
equal(element.hasClass('active'), false)
|
||||
|
||||
test 'positionButton adds the scrolling class', ->
|
||||
log.offset = -> {top: -1}
|
||||
|
||||
tail.positionButton()
|
||||
equal(element.hasClass('scrolling'), true)
|
||||
equal(element.hasClass('bottom'), false)
|
||||
|
||||
test 'positionButton removes the scrolling class', ->
|
||||
log.offset = -> {top: 1}
|
||||
tail.positionButton()
|
||||
equal(element.hasClass('scrolling'), false)
|
||||
equal(element.hasClass('bottom'), false)
|
||||
|
||||
test 'positionButton sets the button as bottom', ->
|
||||
log.offset = -> {top: -100}
|
||||
log.height = -> 50
|
||||
tail.height = -> 1
|
||||
|
||||
tail.positionButton()
|
||||
equal(element.hasClass('scrolling'), false)
|
||||
equal(element.hasClass('bottom'), true)
|
||||
|
|
@ -88,66 +88,44 @@ pre#log
|
|||
#log-container
|
||||
position: relative
|
||||
|
||||
#log-container
|
||||
#tail
|
||||
z-index: 99
|
||||
position: absolute
|
||||
display: block
|
||||
top: 0
|
||||
right: 2px
|
||||
margin: 13px 10px 0 0
|
||||
padding: 0 2px 0 3px
|
||||
color: #666
|
||||
text-shadow: 0px 1px 0px #fff
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
|
||||
font-size: $font-size-tiny
|
||||
line-height: 14px
|
||||
text-decoration: none
|
||||
white-space: nowrap
|
||||
border: 1px solid #bbb
|
||||
border-top-color: #ddd
|
||||
border-bottom-color: #bbb
|
||||
@include border-radius(8px)
|
||||
@include background(linear-gradient(#fff, #e0e0e0))
|
||||
#log-container #tail
|
||||
z-index: 99
|
||||
position: absolute
|
||||
display: block
|
||||
top: 0
|
||||
right: 2px
|
||||
margin: 13px 10px 0 0
|
||||
padding: 0 2px 0 3px
|
||||
color: #666
|
||||
text-shadow: 0px 1px 0px #fff
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
|
||||
font-size: $font-size-tiny
|
||||
line-height: 14px
|
||||
text-decoration: none
|
||||
white-space: nowrap
|
||||
border: 1px solid #bbb
|
||||
border-top-color: #ddd
|
||||
border-bottom-color: #bbb
|
||||
@include border-radius(8px)
|
||||
@include background(linear-gradient(#fff, #e0e0e0))
|
||||
|
||||
label
|
||||
display: none
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
padding: 1px 4px 1px 6px
|
||||
label
|
||||
display: none
|
||||
cursor: pointer
|
||||
display: inline
|
||||
|
||||
&:hover
|
||||
padding: 1px 4px 1px 6px
|
||||
label
|
||||
display: inline
|
||||
|
||||
&.scrolling
|
||||
position: fixed
|
||||
right: 32px
|
||||
|
||||
&.bottom
|
||||
bottom: 45px
|
||||
top: inherit
|
||||
|
||||
.status
|
||||
display: inline-block
|
||||
margin-right: 1px
|
||||
width: 8px
|
||||
height: 8px
|
||||
background-color: #aaa
|
||||
@include border-radius(4px)
|
||||
@include box-shadow(white 1px 1px 2px)
|
||||
|
||||
&.active .status
|
||||
background-color: #6b0
|
||||
|
||||
.to-top
|
||||
position: fixed
|
||||
.status
|
||||
display: inline-block
|
||||
bottom: 5px
|
||||
right: 35px
|
||||
width: 50px
|
||||
float: right
|
||||
margin-right: 2px
|
||||
padding-right: 16px
|
||||
text-align: right
|
||||
color: #999
|
||||
background: inline-image('ui/to-top.png') no-repeat right 6px
|
||||
margin-right: 1px
|
||||
width: 8px
|
||||
height: 8px
|
||||
background-color: #aaa
|
||||
@include border-radius(4px)
|
||||
@include box-shadow(white 1px 1px 2px)
|
||||
|
||||
&.active .status
|
||||
background-color: #6b0
|
||||
|
|
|
|||
|
|
@ -3,3 +3,12 @@
|
|||
// float: left
|
||||
margin-top: 0
|
||||
color: #999
|
||||
.to-top
|
||||
display: inline-block
|
||||
width: 50px
|
||||
float: right
|
||||
margin-right: 2px
|
||||
padding-right: 16px
|
||||
text-align: right
|
||||
color: #999
|
||||
background: inline-image('ui/to-top.png') no-repeat right 6px
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user