Reduced dom operations.
This commit is contained in:
parent
f0b37a4fa9
commit
c4a74d0e3d
3 changed files with 29 additions and 40 deletions
|
@ -1,7 +1,7 @@
|
||||||
class App.TicketZoomArticleActions extends App.Controller
|
class App.TicketZoomArticleActions extends App.Controller
|
||||||
events:
|
events:
|
||||||
'click [data-type=public]': 'public_internal'
|
'click [data-type=public]': 'publicInternal'
|
||||||
'click [data-type=internal]': 'public_internal'
|
'click [data-type=internal]': 'publicInternal'
|
||||||
'click [data-type=reply]': 'reply'
|
'click [data-type=reply]': 'reply'
|
||||||
'click [data-type=replyAll]': 'replyAll'
|
'click [data-type=replyAll]': 'replyAll'
|
||||||
|
|
||||||
|
@ -20,8 +20,9 @@ class App.TicketZoomArticleActions extends App.Controller
|
||||||
else
|
else
|
||||||
@html ''
|
@html ''
|
||||||
|
|
||||||
public_internal: (e) ->
|
publicInternal: (e) ->
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
articleContainer = $(e.target).closest('.ticket-article-item')
|
||||||
article_id = $(e.target).parents('[data-id]').data('id')
|
article_id = $(e.target).parents('[data-id]').data('id')
|
||||||
|
|
||||||
# storage update
|
# storage update
|
||||||
|
@ -35,9 +36,9 @@ class App.TicketZoomArticleActions extends App.Controller
|
||||||
|
|
||||||
# runntime update
|
# runntime update
|
||||||
if internal
|
if internal
|
||||||
$(e.target).closest('.ticket-article-item').addClass('is-internal')
|
articleContainer.addClass('is-internal')
|
||||||
else
|
else
|
||||||
$(e.target).closest('.ticket-article-item').removeClass('is-internal')
|
articleContainer.removeClass('is-internal')
|
||||||
|
|
||||||
@render()
|
@render()
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,16 @@
|
||||||
class App.TicketZoomArticleView extends App.Controller
|
class App.TicketZoomArticleView extends App.Controller
|
||||||
constructor: ->
|
constructor: ->
|
||||||
super
|
super
|
||||||
|
|
||||||
@article_controller = {}
|
@article_controller = {}
|
||||||
|
@run()
|
||||||
|
|
||||||
execute: (params) ->
|
execute: (params) =>
|
||||||
|
@ticket_article_ids = params.ticket_article_ids
|
||||||
|
@run()
|
||||||
|
|
||||||
|
run: =>
|
||||||
all = []
|
all = []
|
||||||
for ticket_article_id in params.ticket_article_ids
|
for ticket_article_id in @ticket_article_ids
|
||||||
if !@article_controller[ticket_article_id]
|
if !@article_controller[ticket_article_id]
|
||||||
el = $('<div></div>')
|
el = $('<div></div>')
|
||||||
@article_controller[ticket_article_id] = new ArticleViewItem(
|
@article_controller[ticket_article_id] = new ArticleViewItem(
|
||||||
|
@ -27,8 +31,7 @@ class ArticleViewItem extends App.Controller
|
||||||
'.textBubble-overflowContainer': 'textBubbleOverflowContainer'
|
'.textBubble-overflowContainer': 'textBubbleOverflowContainer'
|
||||||
|
|
||||||
events:
|
events:
|
||||||
'click .show_toogle': 'show_toogle'
|
'click .textBubble': 'toggleMetaWithDelay'
|
||||||
'click .textBubble': 'toggle_meta_with_delay'
|
|
||||||
'click .textBubble a': 'stopPropagation'
|
'click .textBubble a': 'stopPropagation'
|
||||||
'click .js-unfold': 'unfold'
|
'click .js-unfold': 'unfold'
|
||||||
|
|
||||||
|
@ -36,6 +39,7 @@ class ArticleViewItem extends App.Controller
|
||||||
super
|
super
|
||||||
|
|
||||||
@seeMore = false
|
@seeMore = false
|
||||||
|
@force = true
|
||||||
|
|
||||||
@render()
|
@render()
|
||||||
|
|
||||||
|
@ -52,7 +56,8 @@ class ArticleViewItem extends App.Controller
|
||||||
|
|
||||||
# rerender, e. g. on language change
|
# rerender, e. g. on language change
|
||||||
@bind('ui:rerender', =>
|
@bind('ui:rerender', =>
|
||||||
@render(undefined, true)
|
@force = true
|
||||||
|
@render(undefined)
|
||||||
)
|
)
|
||||||
|
|
||||||
# subscribe to changes
|
# subscribe to changes
|
||||||
|
@ -87,7 +92,7 @@ class ArticleViewItem extends App.Controller
|
||||||
@articleAttributesLastUpdate = articleAttributesLastUpdateCheck
|
@articleAttributesLastUpdate = articleAttributesLastUpdateCheck
|
||||||
true
|
true
|
||||||
|
|
||||||
render: (article, force = false) =>
|
render: (article) =>
|
||||||
|
|
||||||
# get articles
|
# get articles
|
||||||
@article = App.TicketArticle.fullLocal(@ticket_article_id)
|
@article = App.TicketArticle.fullLocal(@ticket_article_id)
|
||||||
|
@ -106,9 +111,10 @@ class ArticleViewItem extends App.Controller
|
||||||
@el.removeClass('is-internal')
|
@el.removeClass('is-internal')
|
||||||
|
|
||||||
# check if rerender is needed
|
# check if rerender is needed
|
||||||
if !force && !@hasChanged(@article)
|
if !@force && !@hasChanged(@article)
|
||||||
@lastArticle = @article.attributes()
|
@lastArticle = @article.attributes()
|
||||||
return
|
return
|
||||||
|
@force = false
|
||||||
|
|
||||||
# prepare html body
|
# prepare html body
|
||||||
if @article.content_type is 'text/html'
|
if @article.content_type is 'text/html'
|
||||||
|
@ -199,32 +205,20 @@ class ArticleViewItem extends App.Controller
|
||||||
else
|
else
|
||||||
bubbleOvervlowContainer.addClass('hide')
|
bubbleOvervlowContainer.addClass('hide')
|
||||||
|
|
||||||
show_toogle: (e) ->
|
|
||||||
e.stopPropagation()
|
|
||||||
e.preventDefault()
|
|
||||||
#$(e.target).hide()
|
|
||||||
if $(e.target).next('div')[0]
|
|
||||||
if $(e.target).next('div').hasClass('hide')
|
|
||||||
$(e.target).next('div').removeClass('hide')
|
|
||||||
$(e.target).text( App.i18n.translateContent('Fold in') )
|
|
||||||
else
|
|
||||||
$(e.target).text( App.i18n.translateContent('See more') )
|
|
||||||
$(e.target).next('div').addClass('hide')
|
|
||||||
|
|
||||||
stopPropagation: (e) ->
|
stopPropagation: (e) ->
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
|
|
||||||
toggle_meta_with_delay: (e) =>
|
toggleMetaWithDelay: (e) =>
|
||||||
# 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 < 100
|
if @lastClick and +new Date - @lastClick < 80
|
||||||
clearTimeout(@toggleMetaTimeout)
|
clearTimeout(@toggleMetaTimeout)
|
||||||
else
|
else
|
||||||
@toggleMetaTimeout = setTimeout(@toggle_meta, 100, e)
|
@toggleMetaTimeout = setTimeout(@toggleMeta, 80, e)
|
||||||
@lastClick = +new Date
|
@lastClick = +new Date
|
||||||
|
|
||||||
toggle_meta: (e) =>
|
toggleMeta: (e) =>
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
animSpeed = 300
|
animSpeed = 300
|
||||||
|
|
|
@ -2565,12 +2565,6 @@ footer {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.show_toogle {
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.well {
|
.well {
|
||||||
background: white;
|
background: white;
|
||||||
border: 1px solid hsl(240,3%,92%);
|
border: 1px solid hsl(240,3%,92%);
|
||||||
|
|
Loading…
Reference in a new issue