Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Improved performance of tab highlighting.

Browse source
This commit is contained in:
Martin Edenhofer 2015-10-02 15:30:18 +02:00
parent 798b4d279f
commit a71776ba1b
4 changed files with 78 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
app/assets/javascripts/app/controllers/ticket_zoom.coffee
View file

@ -14,7 +14,7 @@ class App.TicketZoom extends App.Controller
# check authentication # check authentication
if !@authenticate() if !@authenticate()
App.TaskManager.remove( @task_key ) App.TaskManager.remove(@task_key)
return return
@navupdate '#' @navupdate '#'
@ -32,14 +32,14 @@ class App.TicketZoom extends App.Controller
@overview_id = false @overview_id = false
@key = 'ticket::' + @ticket_id @key = 'ticket::' + @ticket_id
cache = App.Store.get( @key ) cache = App.Store.get(@key)
if cache if cache
@load(cache) @load(cache)
update = => update = =>
@fetch( @ticket_id, false ) @fetch(@ticket_id, false)
# check if ticket has beed updated every 30 min # check if ticket has beed updated every 30 min
@interval( update, 1800000, 'pull_check' ) @interval(update, 1800000, 'pull_check')
# fetch new data if triggered # fetch new data if triggered
@bind( @bind(
@ -47,14 +47,14 @@ class App.TicketZoom extends App.Controller
(data) => (data) =>
# check if current ticket has changed # check if current ticket has changed
if data.id.toString() is @ticket_id.toString() return if data.id.toString() isnt @ticket_id.toString()
# check if we already have the request queued # check if we already have the request queued
#@log 'notice', 'TRY', @ticket_id, new Date(data.updated_at), new Date(@ticketUpdatedAtLastCall) #@log 'notice', 'TRY', @ticket_id, new Date(data.updated_at), new Date(@ticketUpdatedAtLastCall)
update = => update = =>
@fetch( @ticket_id, false ) @fetch( @ticket_id, false )
if !@ticketUpdatedAtLastCall || ( new Date(data.updated_at).toString() isnt new Date(@ticketUpdatedAtLastCall).toString() ) if !@ticketUpdatedAtLastCall || ( new Date(data.updated_at).toString() isnt new Date(@ticketUpdatedAtLastCall).toString() )
@delay( update, 1200, 'ticket-zoom-' + @ticket_id ) @delay( update, 1200, 'ticket-zoom-' + @ticket_id )
) )
# rerender view, e. g. on langauge change # rerender view, e. g. on langauge change
@ -85,7 +85,7 @@ class App.TicketZoom extends App.Controller
# set icon and title based on ticket # set icon and title based on ticket
if @ticket if @ticket
@ticket = App.Ticket.fullLocal( @ticket.id ) @ticket = App.Ticket.fullLocal(@ticket.id)
meta.head = @ticket.title meta.head = @ticket.title
meta.title = '#' + @ticket.number + ' - ' + @ticket.title meta.title = '#' + @ticket.number + ' - ' + @ticket.title
meta.class = "task-state-#{ @ticket.getState() }" meta.class = "task-state-#{ @ticket.getState() }"
@ -102,7 +102,7 @@ class App.TicketZoom extends App.Controller
@navupdate '#' @navupdate '#'
# set all notifications to seen # set all notifications to seen
App.OnlineNotification.seen( 'Ticket', @ticket_id ) App.OnlineNotification.seen('Ticket', @ticket_id)
# if controller is executed twice, go to latest article # if controller is executed twice, go to latest article
if @activeState if @activeState
@ -116,7 +116,7 @@ class App.TicketZoom extends App.Controller
if !@shown if !@shown
# trigger shown to article # trigger shown to article
App.Event.trigger('ui::ticket::shown', { ticket_id: @ticket_id } ) App.Event.trigger('ui::ticket::shown', { ticket_id: @ticket_id })
# observe content header position # observe content header position
@positionPageHeaderStart() @positionPageHeaderStart()
@ -134,8 +134,8 @@ class App.TicketZoom extends App.Controller
return false if !@ticket return false if !@ticket
formCurrent = @formParam( @el.find('.edit') ) formCurrent = @formParam( @el.find('.edit') )
ticket = App.Ticket.find(@ticket_id).attributes() ticket = App.Ticket.find(@ticket_id).attributes()
modelDiff = App.Utils.formDiff( formCurrent, ticket ) modelDiff = App.Utils.formDiff(formCurrent, ticket)
return false if !modelDiff || _.isEmpty( modelDiff ) return false if !modelDiff || _.isEmpty(modelDiff)
return true return true
release: => release: =>
@ -143,14 +143,13 @@ class App.TicketZoom extends App.Controller
@positionPageHeaderStop() @positionPageHeaderStop()
fetch: (ticket_id, force) -> fetch: (ticket_id, force) ->
return if !@Session.get() return if !@Session.get()
# get data # get data
@ajax( @ajax(
id: 'ticket_zoom_' + ticket_id id: "ticket_zoom_#{ticket_id}"
type: 'GET' type: 'GET'
url: @apiPath + '/ticket_full/' + ticket_id url: "#{@apiPath}/ticket_full/#{ticket_id}"
processData: true processData: true
success: (data, status, xhr) => success: (data, status, xhr) =>
@ -163,21 +162,22 @@ class App.TicketZoom extends App.Controller
# notify if ticket changed not by my self # notify if ticket changed not by my self
if newTicketRaw.updated_by_id isnt @Session.get('id') if newTicketRaw.updated_by_id isnt @Session.get('id')
App.TaskManager.notify( @task_key ) App.TaskManager.notify(@task_key)
# remember current data # remember current data
@ticketUpdatedAtLastCall = newTicketRaw.updated_at @ticketUpdatedAtLastCall = newTicketRaw.updated_at
@load(data, force) @load(data, force)
App.Store.write( @key, data ) App.Store.write(@key, data)
if !@doNotLog if !@doNotLog
@doNotLog = 1 @doNotLog = 1
@recentView( 'Ticket', ticket_id ) @recentView('Ticket', ticket_id)
# scroll to end of page # scroll to end of page
if force if force
@scrollToBottom() @scrollToBottom()
@positionPageHeaderUpdate()
error: (xhr) => error: (xhr) =>
statusText = xhr.statusText statusText = xhr.statusText
@ -235,10 +235,10 @@ class App.TicketZoom extends App.Controller
@form_meta = data.form_meta @form_meta = data.form_meta
# load assets # load assets
App.Collection.loadAssets( data.assets ) App.Collection.loadAssets(data.assets)
# get data # get data
@ticket = App.Ticket.fullLocal( @ticket_id ) @ticket = App.Ticket.fullLocal(@ticket_id)
@ticket.article = undefined @ticket.article = undefined
# render page # render page
@ -334,9 +334,9 @@ class App.TicketZoom extends App.Controller
# rerender whole sidebar if customer or organization has changed # rerender whole sidebar if customer or organization has changed
if @ticketLastAttributes.customer_id isnt @ticket.customer_id || @ticketLastAttributes.organization_id isnt @ticket.organization_id if @ticketLastAttributes.customer_id isnt @ticket.customer_id || @ticketLastAttributes.organization_id isnt @ticket.organization_id
new App.WidgetAvatar( new App.WidgetAvatar(
el: @$('.ticketZoom-header .js-avatar') el: @$('.ticketZoom-header .js-avatar')
user_id: @ticket.customer_id user_id: @ticket.customer_id
size: 50 size: 50
) )
new App.TicketZoomSidebar( new App.TicketZoomSidebar(
el: @el.find('.tabsSidebar') el: @el.find('.tabsSidebar')
@ -374,7 +374,7 @@ class App.TicketZoom extends App.Controller
@positionPageHeaderStart() @positionPageHeaderStart()
# trigger shown if init shown render # trigger shown if init shown render
App.Event.trigger('ui::ticket::shown', { ticket_id: @ticket_id } ) App.Event.trigger('ui::ticket::shown', { ticket_id: @ticket_id })
scrollToBottom: => scrollToBottom: =>
@main.scrollTop( @main.prop('scrollHeight') ) @main.scrollTop( @main.prop('scrollHeight') )
@ -593,9 +593,9 @@ class App.TicketZoom extends App.Controller
# reset form after save # reset form after save
@reset() @reset()
App.TaskManager.mute( @task_key ) App.TaskManager.mute(@task_key)
@fetch( ticket.id, true ) @fetch(ticket.id, true)
) )
bookmark: (e) -> bookmark: (e) ->
@ -609,7 +609,7 @@ class App.TicketZoom extends App.Controller
@taskReset() @taskReset()
# reset edit ticket / reset new article # reset edit ticket / reset new article
App.Event.trigger('ui::ticket::taskReset', { ticket_id: @ticket.id } ) App.Event.trigger('ui::ticket::taskReset', { ticket_id: @ticket.id })
# hide reset button # hide reset button
@$('.js-reset').addClass('hide') @$('.js-reset').addClass('hide')
@ -630,18 +630,18 @@ class App.TicketZoom extends App.Controller
taskUpdate: (area, data) => taskUpdate: (area, data) =>
@localTaskData[area] = data @localTaskData[area] = data
App.TaskManager.update( @task_key, { 'state': @localTaskData }) App.TaskManager.update(@task_key, { 'state': @localTaskData })
taskUpdateAll: (data) => taskUpdateAll: (data) =>
@localTaskData = data @localTaskData = data
App.TaskManager.update( @task_key, { 'state': @localTaskData }) App.TaskManager.update(@task_key, { 'state': @localTaskData })
# reset task state # reset task state
taskReset: => taskReset: =>
@localTaskData = @localTaskData =
ticket: {} ticket: {}
article: {} article: {}
App.TaskManager.update( @task_key, { 'state': @localTaskData }) App.TaskManager.update(@task_key, { 'state': @localTaskData })
class TicketZoomRouter extends App.ControllerPermanent class TicketZoomRouter extends App.ControllerPermanent
constructor: (params) -> constructor: (params) ->

2
app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee
View file

@ -162,7 +162,7 @@ class App.TicketZoomArticleNew extends App.Controller
@$('[data-name="body"]').ce({ @$('[data-name="body"]').ce({
mode: 'richtext' mode: 'richtext'
multiline: true multiline: true
maxlength: 5000 maxlength: 40000
}) })
html5Upload.initialize( html5Upload.initialize(

23
app/assets/javascripts/app/controllers/ticket_zoom/article_view.coffee
View file

@ -48,12 +48,8 @@ class ArticleViewItem extends App.Controller
# set highlighter # set highlighter
@setHighlighter() @setHighlighter()
if !@shown # set see more
@setSeeMore()
# set see more
@setSeeMore()
@shown = true
) )
# subscribe to changes # subscribe to changes
@ -64,7 +60,11 @@ class ArticleViewItem extends App.Controller
setHighlighter: => setHighlighter: =>
return if !@el.is(':visible') return if !@el.is(':visible')
@highligher.loadHighlights(@ticket_article_id) # use delay do no ui blocking
#@highligher.loadHighlights(@ticket_article_id)
d = =>
@highligher.loadHighlights(@ticket_article_id)
@delay(d, 800)
hasChanged: (article) => hasChanged: (article) =>
@ -127,6 +127,7 @@ class ArticleViewItem extends App.Controller
) )
# set see more # set see more
@shown = false
@setSeeMore() @setSeeMore()
# set highlighter # set highlighter
@ -134,6 +135,10 @@ class ArticleViewItem extends App.Controller
# set see more options # set see more options
setSeeMore: => setSeeMore: =>
return if !@el.is(':visible')
return if @shown
@shown = true
maxHeight = 560 maxHeight = 560
bubbleContent = @textBubbleContent bubbleContent = @textBubbleContent
bubbleOvervlowContainer = @textBubbleOverflowContainer bubbleOvervlowContainer = @textBubbleOverflowContainer
@ -183,10 +188,10 @@ class ArticleViewItem extends App.Controller
# allow double click select # allow double click select
# by adding a delay to the toggle # by adding a delay to the toggle
if @lastClick and +new Date - @lastClick < 150 if @lastClick and +new Date - @lastClick < 100
clearTimeout(@toggleMetaTimeout) clearTimeout(@toggleMetaTimeout)
else else
@toggleMetaTimeout = setTimeout(@toggle_meta, 150, e) @toggleMetaTimeout = setTimeout(@toggle_meta, 100, e)
@lastClick = +new Date @lastClick = +new Date
toggle_meta: (e) => toggle_meta: (e) =>

38
app/assets/javascripts/app/controllers/ticket_zoom/higlighter.coffee
View file

@ -38,6 +38,8 @@ class App.TicketZoomHighlighter extends App.Controller
return if !@isRole('Agent') return if !@isRole('Agent')
@currentHighlights = {}
rangy.init() rangy.init()
@highlighter = rangy.createHighlighter(document, 'TextRange') @highlighter = rangy.createHighlighter(document, 'TextRange')
@ -86,6 +88,8 @@ class App.TicketZoomHighlighter extends App.Controller
articles = @el.closest('.content').find('.textBubble-content') articles = @el.closest('.content').find('.textBubble-content')
articles.off('mouseup', @onMouseUp) articles.off('mouseup', @onMouseUp)
articles.on('mouseup', @onMouseUp) #future: touchend articles.on('mouseup', @onMouseUp) #future: touchend
articles.off('mousedown', @onMouseDown)
articles.on('mousedown', @onMouseDown) #future: touchend
# for testing purposes the highlights get stored in localStorage # for testing purposes the highlights get stored in localStorage
loadHighlights: (ticket_article_id) -> loadHighlights: (ticket_article_id) ->
@ -95,7 +99,9 @@ class App.TicketZoomHighlighter extends App.Controller
return if !article.preferences.highlight return if !article.preferences.highlight
return if _.isEmpty(article.preferences.highlight) return if _.isEmpty(article.preferences.highlight)
return if article.preferences.highlight is 'type:TextRange' return if article.preferences.highlight is 'type:TextRange'
@highlighter.deserialize(article.preferences['highlight']) return if @currentHighlights[ticket_article_id] is article.preferences.highlight
@currentHighlights[ticket_article_id] = article.preferences.highlight
@highlighter.deserialize(article.preferences.highlight)
# the serialization creates one string for the entiery ticket # the serialization creates one string for the entiery ticket
# containing the offsets and the highlight classes # containing the offsets and the highlight classes
@ -136,6 +142,8 @@ class App.TicketZoomHighlighter extends App.Controller
articles.attr('data-highlightcolor', @colors[@activeColorIndex].name) articles.attr('data-highlightcolor', @colors[@activeColorIndex].name)
toggleHighlight: (e) => toggleHighlight: (e) =>
@mouseDownInside = false
@mouseUpInside = false
if @isActive if @isActive
$(e.currentTarget).removeClass('active') $(e.currentTarget).removeClass('active')
@ -168,19 +176,31 @@ class App.TicketZoomHighlighter extends App.Controller
# check if selection exists - highlight it or remove highlight # check if selection exists - highlight it or remove highlight
@toggleHighlightAtSelection(@content, @article_id) @toggleHighlightAtSelection(@content, @article_id)
onMouseUp: (e) => onMouseDown: (e) =>
@updateSelectedArticle(e) if @updateSelectedArticle(e)
@mouseDownInside = true
else
@mouseDownInside = false
console.log('onMouseUp', @isActive, @content, @article_id) onMouseUp: (e) =>
if @isActive if @updateSelectedArticle(e)
@toggleHighlightAtSelection(@content, @article_id) # @articles.selector @mouseUpInside = true
else
@mouseUpInside = false
return if !@mouseDownInside
return if !@mouseUpInside
return if !@isActive
@toggleHighlightAtSelection(@content, @article_id)
updateSelectedArticle: (e) => updateSelectedArticle: (e) =>
@content = $(e.currentTarget).closest('.textBubble-content') @content = $(e.currentTarget).closest('.textBubble-content')
@article_id = @content.data('id') @article_id = @content.data('id')
if !@article_id return true if @article_id
@content = $(e.currentTarget) @content = $(e.currentTarget)
@article_id = @content.data('id') @article_id = @content.data('id')
return true if @article_id
false
# #
# toggle Highlight # toggle Highlight