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
|
||||
events:
|
||||
'click [data-type=public]': 'public_internal'
|
||||
'click [data-type=internal]': 'public_internal'
|
||||
'click [data-type=public]': 'publicInternal'
|
||||
'click [data-type=internal]': 'publicInternal'
|
||||
'click [data-type=reply]': 'reply'
|
||||
'click [data-type=replyAll]': 'replyAll'
|
||||
|
||||
|
@ -20,8 +20,9 @@ class App.TicketZoomArticleActions extends App.Controller
|
|||
else
|
||||
@html ''
|
||||
|
||||
public_internal: (e) ->
|
||||
publicInternal: (e) ->
|
||||
e.preventDefault()
|
||||
articleContainer = $(e.target).closest('.ticket-article-item')
|
||||
article_id = $(e.target).parents('[data-id]').data('id')
|
||||
|
||||
# storage update
|
||||
|
@ -35,9 +36,9 @@ class App.TicketZoomArticleActions extends App.Controller
|
|||
|
||||
# runntime update
|
||||
if internal
|
||||
$(e.target).closest('.ticket-article-item').addClass('is-internal')
|
||||
articleContainer.addClass('is-internal')
|
||||
else
|
||||
$(e.target).closest('.ticket-article-item').removeClass('is-internal')
|
||||
articleContainer.removeClass('is-internal')
|
||||
|
||||
@render()
|
||||
|
||||
|
|
|
@ -1,12 +1,16 @@
|
|||
class App.TicketZoomArticleView extends App.Controller
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
@article_controller = {}
|
||||
@run()
|
||||
|
||||
execute: (params) ->
|
||||
execute: (params) =>
|
||||
@ticket_article_ids = params.ticket_article_ids
|
||||
@run()
|
||||
|
||||
run: =>
|
||||
all = []
|
||||
for ticket_article_id in params.ticket_article_ids
|
||||
for ticket_article_id in @ticket_article_ids
|
||||
if !@article_controller[ticket_article_id]
|
||||
el = $('<div></div>')
|
||||
@article_controller[ticket_article_id] = new ArticleViewItem(
|
||||
|
@ -17,7 +21,7 @@ class App.TicketZoomArticleView extends App.Controller
|
|||
highligher: @highligher
|
||||
)
|
||||
all.push el
|
||||
@el.append( all )
|
||||
@el.append(all)
|
||||
|
||||
class ArticleViewItem extends App.Controller
|
||||
hasChangedAttributes: ['from', 'to', 'cc', 'subject', 'body', 'preferences']
|
||||
|
@ -27,15 +31,15 @@ class ArticleViewItem extends App.Controller
|
|||
'.textBubble-overflowContainer': 'textBubbleOverflowContainer'
|
||||
|
||||
events:
|
||||
'click .show_toogle': 'show_toogle'
|
||||
'click .textBubble': 'toggle_meta_with_delay'
|
||||
'click .textBubble a': 'stopPropagation'
|
||||
'click .js-unfold': 'unfold'
|
||||
'click .textBubble': 'toggleMetaWithDelay'
|
||||
'click .textBubble a': 'stopPropagation'
|
||||
'click .js-unfold': 'unfold'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
@seeMore = false
|
||||
@force = true
|
||||
|
||||
@render()
|
||||
|
||||
|
@ -52,7 +56,8 @@ class ArticleViewItem extends App.Controller
|
|||
|
||||
# rerender, e. g. on language change
|
||||
@bind('ui:rerender', =>
|
||||
@render(undefined, true)
|
||||
@force = true
|
||||
@render(undefined)
|
||||
)
|
||||
|
||||
# subscribe to changes
|
||||
|
@ -87,10 +92,10 @@ class ArticleViewItem extends App.Controller
|
|||
@articleAttributesLastUpdate = articleAttributesLastUpdateCheck
|
||||
true
|
||||
|
||||
render: (article, force = false) =>
|
||||
render: (article) =>
|
||||
|
||||
# get articles
|
||||
@article = App.TicketArticle.fullLocal( @ticket_article_id )
|
||||
@article = App.TicketArticle.fullLocal(@ticket_article_id)
|
||||
|
||||
# set @el attributes
|
||||
if !article
|
||||
|
@ -106,9 +111,10 @@ class ArticleViewItem extends App.Controller
|
|||
@el.removeClass('is-internal')
|
||||
|
||||
# check if rerender is needed
|
||||
if !force && !@hasChanged(@article)
|
||||
if !@force && !@hasChanged(@article)
|
||||
@lastArticle = @article.attributes()
|
||||
return
|
||||
@force = false
|
||||
|
||||
# prepare html body
|
||||
if @article.content_type is 'text/html'
|
||||
|
@ -199,32 +205,20 @@ class ArticleViewItem extends App.Controller
|
|||
else
|
||||
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) ->
|
||||
e.stopPropagation()
|
||||
|
||||
toggle_meta_with_delay: (e) =>
|
||||
toggleMetaWithDelay: (e) =>
|
||||
# allow double click select
|
||||
# by adding a delay to the toggle
|
||||
|
||||
if @lastClick and +new Date - @lastClick < 100
|
||||
if @lastClick and +new Date - @lastClick < 80
|
||||
clearTimeout(@toggleMetaTimeout)
|
||||
else
|
||||
@toggleMetaTimeout = setTimeout(@toggle_meta, 100, e)
|
||||
@toggleMetaTimeout = setTimeout(@toggleMeta, 80, e)
|
||||
@lastClick = +new Date
|
||||
|
||||
toggle_meta: (e) =>
|
||||
toggleMeta: (e) =>
|
||||
e.preventDefault()
|
||||
|
||||
animSpeed = 300
|
||||
|
|
|
@ -1368,7 +1368,7 @@ textarea,
|
|||
box-shadow: none;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
|
||||
|
||||
&.form-control--small {
|
||||
padding: 5px 8px 4px;
|
||||
height: 31px;
|
||||
|
@ -2565,12 +2565,6 @@ footer {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.show_toogle {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.well {
|
||||
background: white;
|
||||
border: 1px solid hsl(240,3%,92%);
|
||||
|
|
Loading…
Reference in a new issue