From 82164a9f777f7eee37707b19ae6ec514a588c1ec Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 5 Apr 2016 10:17:00 +0100 Subject: 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 --- app/assets/javascripts/gl_form.js.coffee | 40 ++++++++++++++++ app/assets/javascripts/gl_form_actions.js.coffee | 43 ++++++++++++++++++ app/assets/javascripts/notes.js.coffee | 58 ++++-------------------- app/views/projects/notes/_form.html.haml | 2 +- app/views/projects/notes/_hints.html.haml | 3 ++ 5 files changed, 95 insertions(+), 51 deletions(-) create mode 100644 app/assets/javascripts/gl_form.js.coffee create mode 100644 app/assets/javascripts/gl_form_actions.js.coffee diff --git a/app/assets/javascripts/gl_form.js.coffee b/app/assets/javascripts/gl_form.js.coffee new file mode 100644 index 00000000000..efa9284ed09 --- /dev/null +++ b/app/assets/javascripts/gl_form.js.coffee @@ -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' diff --git a/app/assets/javascripts/gl_form_actions.js.coffee b/app/assets/javascripts/gl_form_actions.js.coffee new file mode 100644 index 00000000000..d8de63a2be9 --- /dev/null +++ b/app/assets/javascripts/gl_form_actions.js.coffee @@ -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') diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index a67890200dd..0581774424f 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -283,32 +283,10 @@ class @Notes show the form ### setupNoteForm: (form) -> - disableButtonIfEmptyField form.find(".js-note-text"), form.find(".js-comment-button") - 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") + new GLForm form 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, [ "Note" form.find("#note_commit_id").val() @@ -317,11 +295,6 @@ class @Notes 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 @@ -375,34 +348,15 @@ class @Notes note = $(this).closest(".note") note.addClass "is-editting" form = note.find(".note-edit-form") - isNewForm = form.is(':not(.gfm-form)') - if isNewForm - form.addClass('gfm-form') + form.addClass('current-note-edit-form') # Show the attachment delete link note.find(".js-note-attachment-delete").show() - # Setup markdown form - if isNewForm - GitLab.GfmAutoComplete.setup() - new DropzoneInput(form) - - textarea = form.find("textarea") - textarea.focus() + new GLForm form - 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") + form.find(".js-note-text").focus() ### Called in response to clicking the edit note link @@ -570,6 +524,10 @@ class @Notes # only remove the form form.remove() + # Remove the note actions + actions = form.data('form-actions') + actions.clearEventListeners() + form.data('form-actions', null) cancelDiscussionForm: (e) => e.preventDefault() diff --git a/app/views/projects/notes/_form.html.haml b/app/views/projects/notes/_form.html.haml index c446ecec2c3..261eef4df4f 100644 --- a/app/views/projects/notes/_form.html.haml +++ b/app/views/projects/notes/_form.html.haml @@ -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 :line_type = note_target_fields(@note) diff --git a/app/views/projects/notes/_hints.html.haml b/app/views/projects/notes/_hints.html.haml index 0b002043408..0c6758210b1 100644 --- a/app/views/projects/notes/_hints.html.haml +++ b/app/views/projects/notes/_hints.html.haml @@ -1,4 +1,7 @@ .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 Styling with = link_to 'Markdown', help_page_path('markdown', 'markdown'), target: '_blank', tabindex: -1 -- cgit v1.2.1