Notes form JS update
Updated the JS to have a standard class with standard actions for each form Created ability to have toolbar buttons that insert different prefixes dependant upon the data-prefix attribute
This commit is contained in:
parent
8ee04ebe29
commit
82164a9f77
|
@ -0,0 +1,40 @@
|
||||||
|
class @GLForm
|
||||||
|
constructor: (@form) ->
|
||||||
|
@textarea = @form.find(".js-note-text")
|
||||||
|
|
||||||
|
@setupForm()
|
||||||
|
|
||||||
|
setupForm: ->
|
||||||
|
isNewForm = @form.is(':not(.gfm-form)')
|
||||||
|
|
||||||
|
@form.removeClass "js-new-note-form"
|
||||||
|
|
||||||
|
if isNewForm
|
||||||
|
@form.find('.div-dropzone').remove()
|
||||||
|
@form.addClass('gfm-form')
|
||||||
|
disableButtonIfEmptyField @form.find(".js-note-text"), @form.find(".js-comment-button")
|
||||||
|
|
||||||
|
# remove notify commit author checkbox for non-commit notes
|
||||||
|
GitLab.GfmAutoComplete.setup()
|
||||||
|
new DropzoneInput(@form)
|
||||||
|
|
||||||
|
autosize(@textarea)
|
||||||
|
|
||||||
|
# Setup action buttons
|
||||||
|
actions = new GLFormActions @form, @textarea
|
||||||
|
@form.data 'form-actions', actions
|
||||||
|
|
||||||
|
# form and textarea event listeners
|
||||||
|
@addEventListeners()
|
||||||
|
|
||||||
|
# hide discard button
|
||||||
|
@form.find('.js-note-discard').hide()
|
||||||
|
|
||||||
|
@form.show()
|
||||||
|
|
||||||
|
addEventListeners: ->
|
||||||
|
@textarea.on 'focus', ->
|
||||||
|
$(@).closest('.md-area').addClass 'is-focused'
|
||||||
|
|
||||||
|
@textarea.on 'blur', ->
|
||||||
|
$(@).closest('.md-area').removeClass 'is-focused'
|
|
@ -0,0 +1,43 @@
|
||||||
|
class @GLFormActions
|
||||||
|
constructor: (@form, @textarea) ->
|
||||||
|
@clearEventListeners()
|
||||||
|
@addEventListeners()
|
||||||
|
|
||||||
|
clearEventListeners: ->
|
||||||
|
@form.off 'click', '.js-toolbar-button'
|
||||||
|
|
||||||
|
addEventListeners: ->
|
||||||
|
@form.on 'click', '.js-toolbar-button', @toolbarButtonClick
|
||||||
|
|
||||||
|
toolbarButtonClick: (e) =>
|
||||||
|
$btn = $(e.currentTarget)
|
||||||
|
|
||||||
|
# Get the prefix from the button
|
||||||
|
prefix = $btn.data('prefix')
|
||||||
|
@addPrefixToTextarea(prefix)
|
||||||
|
|
||||||
|
addPrefixToTextarea: (prefix) ->
|
||||||
|
caretStart = @textarea.get(0).selectionStart
|
||||||
|
caretEnd = @textarea.get(0).selectionEnd
|
||||||
|
textEnd = @textarea.val().length
|
||||||
|
|
||||||
|
beforeSelection = @textarea.val().substring 0, caretStart
|
||||||
|
afterSelection = @textarea.val().substring caretEnd, textEnd
|
||||||
|
|
||||||
|
beforeSelectionSplit = beforeSelection.split ''
|
||||||
|
beforeSelectionLength = beforeSelection.length
|
||||||
|
|
||||||
|
# Get the last character in the before selection
|
||||||
|
beforeSelectionLastChar = beforeSelectionSplit[beforeSelectionLength - 1]
|
||||||
|
|
||||||
|
if beforeSelectionLastChar? and beforeSelectionLastChar isnt ''
|
||||||
|
# Append a white space char to the prefix if the previous char isn't a space
|
||||||
|
prefix = " #{prefix}"
|
||||||
|
|
||||||
|
# Update the textarea
|
||||||
|
@textarea.val beforeSelection + prefix + afterSelection
|
||||||
|
@textarea.get(0).setSelectionRange caretStart + prefix.length, caretEnd + prefix.length
|
||||||
|
|
||||||
|
# Focus the textarea
|
||||||
|
@textarea.focus()
|
||||||
|
@textarea.trigger('keyup')
|
|
@ -283,32 +283,10 @@ class @Notes
|
||||||
show the form
|
show the form
|
||||||
###
|
###
|
||||||
setupNoteForm: (form) ->
|
setupNoteForm: (form) ->
|
||||||
disableButtonIfEmptyField form.find(".js-note-text"), form.find(".js-comment-button")
|
new GLForm form
|
||||||
form.removeClass "js-new-note-form"
|
|
||||||
form.find('.div-dropzone').remove()
|
|
||||||
|
|
||||||
# hide discard button
|
|
||||||
form.find('.js-note-discard').hide()
|
|
||||||
|
|
||||||
# setup preview buttons
|
|
||||||
previewButton = form.find(".js-md-preview-button")
|
|
||||||
|
|
||||||
textarea = form.find(".js-note-text")
|
textarea = form.find(".js-note-text")
|
||||||
|
|
||||||
textarea.on "input", ->
|
|
||||||
if $(this).val().trim() isnt ""
|
|
||||||
previewButton.removeClass("turn-off").addClass "turn-on"
|
|
||||||
else
|
|
||||||
previewButton.removeClass("turn-on").addClass "turn-off"
|
|
||||||
|
|
||||||
textarea.on 'focus', ->
|
|
||||||
$(this).closest('.md-area').addClass 'is-focused'
|
|
||||||
|
|
||||||
textarea.on 'blur', ->
|
|
||||||
$(this).closest('.md-area').removeClass 'is-focused'
|
|
||||||
|
|
||||||
autosize(textarea)
|
|
||||||
|
|
||||||
new Autosave textarea, [
|
new Autosave textarea, [
|
||||||
"Note"
|
"Note"
|
||||||
form.find("#note_commit_id").val()
|
form.find("#note_commit_id").val()
|
||||||
|
@ -317,11 +295,6 @@ class @Notes
|
||||||
form.find("#note_noteable_id").val()
|
form.find("#note_noteable_id").val()
|
||||||
]
|
]
|
||||||
|
|
||||||
# remove notify commit author checkbox for non-commit notes
|
|
||||||
GitLab.GfmAutoComplete.setup()
|
|
||||||
new DropzoneInput(form)
|
|
||||||
form.show()
|
|
||||||
|
|
||||||
###
|
###
|
||||||
Called in response to the new note form being submitted
|
Called in response to the new note form being submitted
|
||||||
|
|
||||||
|
@ -375,34 +348,15 @@ class @Notes
|
||||||
note = $(this).closest(".note")
|
note = $(this).closest(".note")
|
||||||
note.addClass "is-editting"
|
note.addClass "is-editting"
|
||||||
form = note.find(".note-edit-form")
|
form = note.find(".note-edit-form")
|
||||||
isNewForm = form.is(':not(.gfm-form)')
|
|
||||||
if isNewForm
|
|
||||||
form.addClass('gfm-form')
|
|
||||||
form.addClass('current-note-edit-form')
|
form.addClass('current-note-edit-form')
|
||||||
|
|
||||||
# Show the attachment delete link
|
# Show the attachment delete link
|
||||||
note.find(".js-note-attachment-delete").show()
|
note.find(".js-note-attachment-delete").show()
|
||||||
|
|
||||||
# Setup markdown form
|
new GLForm form
|
||||||
if isNewForm
|
|
||||||
GitLab.GfmAutoComplete.setup()
|
|
||||||
new DropzoneInput(form)
|
|
||||||
|
|
||||||
textarea = form.find("textarea")
|
form.find(".js-note-text").focus()
|
||||||
textarea.focus()
|
|
||||||
|
|
||||||
if isNewForm
|
|
||||||
autosize(textarea)
|
|
||||||
|
|
||||||
# HACK (rspeicher/DouweM): Work around a Chrome 43 bug(?).
|
|
||||||
# The textarea has the correct value, Chrome just won't show it unless we
|
|
||||||
# modify it, so let's clear it and re-set it!
|
|
||||||
value = textarea.val()
|
|
||||||
textarea.val ""
|
|
||||||
textarea.val value
|
|
||||||
|
|
||||||
if isNewForm
|
|
||||||
disableButtonIfEmptyField textarea, form.find(".js-comment-button")
|
|
||||||
|
|
||||||
###
|
###
|
||||||
Called in response to clicking the edit note link
|
Called in response to clicking the edit note link
|
||||||
|
@ -570,6 +524,10 @@ class @Notes
|
||||||
# only remove the form
|
# only remove the form
|
||||||
form.remove()
|
form.remove()
|
||||||
|
|
||||||
|
# Remove the note actions
|
||||||
|
actions = form.data('form-actions')
|
||||||
|
actions.clearEventListeners()
|
||||||
|
form.data('form-actions', null)
|
||||||
|
|
||||||
cancelDiscussionForm: (e) =>
|
cancelDiscussionForm: (e) =>
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
= form_for [@project.namespace.becomes(Namespace), @project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form gfm-form" }, authenticity_token: true do |f|
|
= form_for [@project.namespace.becomes(Namespace), @project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form" }, authenticity_token: true do |f|
|
||||||
= hidden_field_tag :view, diff_view
|
= hidden_field_tag :view, diff_view
|
||||||
= hidden_field_tag :line_type
|
= hidden_field_tag :line_type
|
||||||
= note_target_fields(@note)
|
= note_target_fields(@note)
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
.comment-toolbar.clearfix
|
.comment-toolbar.clearfix
|
||||||
|
%button.toolbar-button.js-toolbar-button{ type: 'button', data: { prefix: ':' }, tabindex: '-1' }
|
||||||
|
= icon('smile-o', class: 'toolbar-button-icon')
|
||||||
|
Emoji
|
||||||
.toolbar-text
|
.toolbar-text
|
||||||
Styling with
|
Styling with
|
||||||
= link_to 'Markdown', help_page_path('markdown', 'markdown'), target: '_blank', tabindex: -1
|
= link_to 'Markdown', help_page_path('markdown', 'markdown'), target: '_blank', tabindex: -1
|
||||||
|
|
Loading…
Reference in New Issue