Improved performance of tab highlighting.

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

View file

@ -47,7 +47,7 @@ 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)
@ -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) =>
@ -178,6 +177,7 @@ class App.TicketZoom extends App.Controller
# 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

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(

View file

@ -48,12 +48,8 @@ class ArticleViewItem extends App.Controller
# set highlighter # set highlighter
@setHighlighter() @setHighlighter()
if !@shown
# set see more # set see more
@setSeeMore() @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')
# use delay do no ui blocking
#@highligher.loadHighlights(@ticket_article_id)
d = =>
@highligher.loadHighlights(@ticket_article_id) @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) =>

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