ticketZoom: remove clickCatcher, improve ux

This commit is contained in:
Felix Niklas 2015-11-17 13:46:12 +01:00
parent 0840b521fa
commit 8ebf1bcfe3
2 changed files with 40 additions and 50 deletions

View file

@ -18,19 +18,20 @@ class App.TicketZoomArticleNew extends App.Controller
#'.recipient-list .list-arrow': 'recipientListArrow' #'.recipient-list .list-arrow': 'recipientListArrow'
events: events:
'click .js-toggleVisibility': 'toggleVisibility' 'click .js-toggleVisibility': 'toggleVisibility'
'click .js-articleTypeItem': 'selectArticleType' 'click .js-articleTypeItem': 'selectArticleType'
'click .js-selectedArticleType': 'showSelectableArticleType' 'click .js-selectedArticleType': 'showSelectableArticleType'
'click .recipient-picker': 'toggle_recipients' 'click .recipient-picker': 'toggle_recipients'
'click .recipient-list': 'stopPropagation' 'click .recipient-list': 'stopPropagation'
'click .list-entry-type div': 'change_type' 'click .js-mail-inputs': 'stopPropagation'
'submit .recipient-list form': 'add_recipient' 'click .js-writeArea': 'stopPropagation'
'focus .js-textarea': 'openTextarea' 'click .list-entry-type div': 'change_type'
'input .js-textarea': 'detectEmptyTextarea' 'submit .recipient-list form': 'add_recipient'
#'dragenter': 'onDragenter' 'focus .js-textarea': 'openTextarea'
#'dragleave': 'onDragleave' #'dragenter': 'onDragenter'
#'drop': 'onFileDrop' #'dragleave': 'onDragleave'
#'change input[type=file]': 'onFilePick' #'drop': 'onFileDrop'
#'change input[type=file]': 'onFilePick'
constructor: -> constructor: ->
super super
@ -129,6 +130,9 @@ class App.TicketZoomArticleNew extends App.Controller
if @subscribeIdTextModule if @subscribeIdTextModule
App.Ticket.unsubscribe(@subscribeIdTextModule) App.Ticket.unsubscribe(@subscribeIdTextModule)
@(window).off 'click.ticket-zoom-select-type'
$(window).on 'click.ticket-zoom-textarea'
render: -> render: ->
ticket = App.Ticket.fullLocal( @ticket_id ) ticket = App.Ticket.fullLocal( @ticket_id )
@ -182,7 +186,6 @@ class App.TicketZoomArticleNew extends App.Controller
@attachmentPlaceholder.addClass('hide') @attachmentPlaceholder.addClass('hide')
@attachmentUpload.removeClass('hide') @attachmentUpload.removeClass('hide')
@cancelContainer.removeClass('hide') @cancelContainer.removeClass('hide')
console.log('upload start')
onAborted: => onAborted: =>
@attachmentPlaceholder.removeClass('hide') @attachmentPlaceholder.removeClass('hide')
@ -202,7 +205,6 @@ class App.TicketZoomArticleNew extends App.Controller
@progressText.text('') @progressText.text('')
@renderAttachment(response.data) @renderAttachment(response.data)
console.log('upload complete', response.data )
# Called during upload progress, first parameter # Called during upload progress, first parameter
# is decimal value from 0 to 100. # is decimal value from 0 to 100.
@ -212,7 +214,6 @@ class App.TicketZoomArticleNew extends App.Controller
# hide cancel on 90% # hide cancel on 90%
if parseInt(progress) >= 90 if parseInt(progress) >= 90
@cancelContainer.addClass('hide') @cancelContainer.addClass('hide')
console.log('uploadProgress ', parseInt(progress))
) )
) )
@ -293,10 +294,10 @@ class App.TicketZoomArticleNew extends App.Controller
add_recipient: (e) -> add_recipient: (e) ->
e.stopPropagation() e.stopPropagation()
e.preventDefault() e.preventDefault()
console.log 'add recipient', e
# store recipient # store recipient
toggleVisibility: -> toggleVisibility: (event) ->
event.stopPropagation()
if @articleNewEdit.hasClass 'is-public' if @articleNewEdit.hasClass 'is-public'
@articleNewEdit @articleNewEdit
.removeClass 'is-public' .removeClass 'is-public'
@ -311,26 +312,24 @@ class App.TicketZoomArticleNew extends App.Controller
@$('[name=internal]').val '' @$('[name=internal]').val ''
showSelectableArticleType: => showSelectableArticleType: (event) =>
event.stopPropagation()
@el.find('.js-articleTypes').removeClass('is-hidden') @el.find('.js-articleTypes').removeClass('is-hidden')
$(window).on 'click.ticket-zoom-select-type', @hideSelectableArticleType
@selectTypeCatcher = new App.ClickCatcher selectArticleType: (event) =>
holder: @el.offsetParent() event.stopPropagation()
callback: @hideSelectableArticleType articleTypeToSet = $(event.target).closest('.pop-selectable').data('value')
zIndexScale: 6
selectArticleType: (e) =>
articleTypeToSet = $(e.target).closest('.pop-selectable').data('value')
@setArticleType( articleTypeToSet ) @setArticleType( articleTypeToSet )
@hideSelectableArticleType() @hideSelectableArticleType()
@selectTypeCatcher.remove() $(window).off 'click.ticket-zoom-select-type'
@selectTypeCatcher = null
hideSelectableArticleType: => hideSelectableArticleType: =>
@el.find('.js-articleTypes').addClass('is-hidden') @el.find('.js-articleTypes').addClass('is-hidden')
setArticleType: (type) -> setArticleType: (type) ->
wasScrolledToBottom = @isScrolledToBottom()
@type = type @type = type
@$('[name=type]').val(type) @$('[name=type]').val(type)
@articleNewEdit.attr('data-type', type) @articleNewEdit.attr('data-type', type)
@ -377,11 +376,14 @@ class App.TicketZoomArticleNew extends App.Controller
else else
@$('[data-name=body] [data-signature=true]').remove() @$('[data-name=body] [data-signature=true]').remove()
detectEmptyTextarea: => @scrollToBottom() if wasScrolledToBottom
if !@textarea.text().trim()
@addTextareaCatcher() isScrolledToBottom: ->
else console.log 'isScrolledToBottom', @el.scrollParent().scrollTop() + @el.scrollParent().height(), @el.scrollParent().prop('scrollHeight')
@removeTextareaCatcher() return @el.scrollParent().scrollTop() + @el.scrollParent().height() is @el.scrollParent().prop('scrollHeight')
scrollToBottom: ->
@el.scrollParent().scrollTop @el.scrollParent().prop('scrollHeight')
openTextarea: (event, withoutAnimation) => openTextarea: (event, withoutAnimation) =>
if @articleNewEdit.hasClass('is-open') if @articleNewEdit.hasClass('is-open')
@ -400,7 +402,7 @@ class App.TicketZoomArticleNew extends App.Controller
options: options:
duration: duration duration: duration
easing: 'easeOutQuad' easing: 'easeOutQuad'
complete: => @addTextareaCatcher() complete: => $(window).on 'click.ticket-zoom-textarea', @closeTextarea
@textBubble.velocity @textBubble.velocity
properties: properties:
@ -443,21 +445,9 @@ class App.TicketZoomArticleNew extends App.Controller
options: options:
duration: duration duration: duration
addTextareaCatcher: =>
if @articleNewEdit.is(':visible')
@textareaCatcher = new App.ClickCatcher
holder: @articleNewEdit.offsetParent()
callback: @closeTextarea
zIndexScale: 4
removeTextareaCatcher: ->
return if !@textareaCatcher
@textareaCatcher.remove()
@textareaCatcher = null
closeTextarea: => closeTextarea: =>
@removeTextareaCatcher()
if !@textarea.text().trim() && !@attachments.length && not @isIE10() if !@textarea.text().trim() && !@attachments.length && not @isIE10()
$(window).off 'click.ticket-zoom-textarea'
@textarea.velocity @textarea.velocity
properties: properties:

View file

@ -45,16 +45,16 @@
<div class="formGroup-label"> <div class="formGroup-label">
<label for=""><%- @T('To') %></label> <label for=""><%- @T('To') %></label>
</div> </div>
<div class="controls"><input id="" type="text" name="to" value="<%= @article.to %>" class="form-control" required="required"></div> <div class="controls"><input id="" type="text" name="to" value="<%= @article.to %>" class="form-control js-mail-inputs" required="required"></div>
</div> </div>
<div class="input form-group"> <div class="input form-group">
<div class="formGroup-label"> <div class="formGroup-label">
<label for=""><%- @T('Cc') %></label> <label for=""><%- @T('Cc') %></label>
</div> </div>
<div class="controls"><input id="" type="text" name="cc" value="<%= @article.cc %>" class="form-control"></div> <div class="controls"><input id="" type="text" name="cc" value="<%= @article.cc %>" class="form-control js-mail-inputs"></div>
</div> </div>
<div class="textBubble"> <div class="textBubble js-writeArea">
<div class="bubble-arrow"></div> <div class="bubble-arrow"></div>
<div class="js-textarea articleNewEdit-body" contenteditable="true" data-name="body"><%- @article.body %></div> <div class="js-textarea articleNewEdit-body" contenteditable="true" data-name="body"><%- @article.body %></div>
<!-- .textBubble grows with textarea (and expanding clone) --> <!-- .textBubble grows with textarea (and expanding clone) -->