Moved to easier page header show/hide implementation of long pages.

This commit is contained in:
Martin Edenhofer 2014-12-15 21:02:53 +01:00
parent 6ce75e975e
commit 6491d18f34
4 changed files with 41 additions and 1816 deletions

View file

@ -1,6 +1,8 @@
class App.TicketZoom extends App.Controller
elements:
'.main': 'main'
'.ticketZoom': 'ticketZoom'
'.scrollPageHeader': 'scrollPageHeader'
events:
'click .js-submit': 'submit'
@ -59,12 +61,10 @@ class App.TicketZoom extends App.Controller
show: =>
App.OnlineNotification.seen( 'Ticket', @ticket_id )
@navupdate '#'
if @scrollHeader
@scrollHeader.continue()
@positionPageHeaderStart()
hide: =>
if @scrollHeader
@scrollHeader.pause()
@positionPageHeaderStop()
changed: =>
formCurrent = @formParam( @el.find('.edit') )
@ -74,9 +74,8 @@ class App.TicketZoom extends App.Controller
return true
release: =>
# nothing
@autosaveStop()
@scrollHeader.destroy() if @scrollHeader
@positionPageHeaderStop()
fetch: (ticket_id, force) ->
@ -149,6 +148,36 @@ class App.TicketZoom extends App.Controller
# render page
@render(force)
positionPageHeaderStart: =>
# scroll is also fired on window resize, if element scroll is changed
@main.bind(
'scroll'
@positionPageHeaderUpdate
)
positionPageHeaderStop: =>
@main.unbind('scroll', @positionPageHeaderUpdate)
positionPageHeaderUpdate: =>
pageHeader = @scrollPageHeader.height()
mainScrollHeigth = @main.prop('scrollHeight')
mainHeigth = @main.height()
# if page header is possible to use, show page header
top = 0
if mainScrollHeigth > mainHeigth + pageHeader
offset = @ticketZoom.offset()
if offset.top >= 0
top = offset.top
# if page header is not possible to use - mainScrollHeigth to low - hide page header
else
top = pageHeader
#console.log('TOP', top, @ticket.id, new Date)
@scrollPageHeader.css('transform', "translateY(-#{top}px)")
render: (force) =>
# update taskbar with new meta data
@ -404,21 +433,11 @@ class App.TicketZoom extends App.Controller
@scrollToBottom()
@bindScrollPageHeader()
@positionPageHeaderStart()
scrollToBottom: =>
@main.scrollTop( @main.prop('scrollHeight') )
bindScrollPageHeader: ->
pageHeader = @$('.page-header')
scrollBody = @main.prop('scrollHeight') - @main.height()
if scrollBody > pageHeader.height()
# TODO: recalculate the distance when adding a comment
@scrollHeader = skrollr.init
forceHeight: false
holder: @main.get(0)
autosaveStop: =>
@autosaveLast = {}
@clearInterval( 'autosave' )

File diff suppressed because it is too large Load diff

View file

@ -1,11 +1,7 @@
<div class="tabsSidebar-holder">
<div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer">
<div class="ticketZoom">
<div class="scrollPageHeader tabsSidebar-sidebarSpacer zIndex-3 horizontal center"
data-anchor-target=".ticketZoom .page-header"
data-128-top-bottom="transform: translateY(-64px);"
data-64-top-bottom="transform: translateY(0px);"
>
<div class="scrollPageHeader tabsSidebar-sidebarSpacer zIndex-3 horizontal center">
<small><%- @C('ticket_hook') %> <span class="ticket-number"><%- @ticket.number %></span></small>
<div class="ticket-title flex"></div>
<div class="pagination-counter">

View file

@ -11,7 +11,6 @@
//= require ./app/lib/animations/velocity.min.js
//= require ./app/lib/animations/velocity.ui.js
//= require ./app/lib/animations/skrollr.js
//not_used= require_tree ./app/lib/spine
//= require ./app/lib/spine/spine.coffee