diff options
Diffstat (limited to 'app/assets/javascripts')
| -rw-r--r-- | app/assets/javascripts/dispatcher.js.coffee | 4 | ||||
| -rw-r--r-- | app/assets/javascripts/dropzone_input.js.coffee | 242 | ||||
| -rw-r--r-- | app/assets/javascripts/markdown_area.js.coffee | 241 | ||||
| -rw-r--r-- | app/assets/javascripts/notes.js.coffee | 20 | ||||
| -rw-r--r-- | app/assets/javascripts/zen_mode.js.coffee | 12 |
5 files changed, 271 insertions, 248 deletions
diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee index e8b71a71945..e5349d80e94 100644 --- a/app/assets/javascripts/dispatcher.js.coffee +++ b/app/assets/javascripts/dispatcher.js.coffee @@ -33,17 +33,20 @@ class Dispatcher GitLab.GfmAutoComplete.setup() shortcut_handler = new ShortcutsNavigation() new ZenMode() + new DropzoneInput($('.issue-form')) when 'projects:merge_requests:new', 'projects:merge_requests:edit' GitLab.GfmAutoComplete.setup() new Diff() shortcut_handler = new ShortcutsNavigation() new ZenMode() + new DropzoneInput($('.merge-request-form')) when 'projects:merge_requests:show' new Diff() shortcut_handler = new ShortcutsIssueable() new ZenMode() when "projects:merge_requests:diffs" new Diff() + new ZenMode() when 'projects:merge_requests:index' shortcut_handler = new ShortcutsNavigation() when 'dashboard:show' @@ -108,6 +111,7 @@ class Dispatcher new Wikis() shortcut_handler = new ShortcutsNavigation() new ZenMode() + new DropzoneInput($('.wiki-form')) when 'snippets', 'labels', 'graphs' shortcut_handler = new ShortcutsNavigation() when 'team_members', 'deploy_keys', 'hooks', 'services', 'protected_branches' diff --git a/app/assets/javascripts/dropzone_input.js.coffee b/app/assets/javascripts/dropzone_input.js.coffee new file mode 100644 index 00000000000..a0f0d98a8dc --- /dev/null +++ b/app/assets/javascripts/dropzone_input.js.coffee @@ -0,0 +1,242 @@ +class @DropzoneInput + constructor: (form) -> + Dropzone.autoDiscover = false + alertClass = "alert alert-danger alert-dismissable div-dropzone-alert" + alertAttr = "class=\"close\" data-dismiss=\"alert\"" + "aria-hidden=\"true\"" + divHover = "<div class=\"div-dropzone-hover\"></div>" + divSpinner = "<div class=\"div-dropzone-spinner\"></div>" + divAlert = "<div class=\"" + alertClass + "\"></div>" + iconPicture = "<i class=\"fa fa-picture-o div-dropzone-icon\"></i>" + iconSpinner = "<i class=\"fa fa-spinner fa-spin div-dropzone-icon\"></i>" + btnAlert = "<button type=\"button\"" + alertAttr + ">×</button>" + project_image_path_upload = window.project_image_path_upload or null + + form_textarea = $(form).find("textarea.markdown-area") + form_textarea.wrap "<div class=\"div-dropzone\"></div>" + + form_dropzone = $(form).find('.div-dropzone') + form_dropzone.parent().addClass "div-dropzone-wrapper" + form_dropzone.append divHover + $(".div-dropzone-hover").append iconPicture + form_dropzone.append divSpinner + $(".div-dropzone-spinner").append iconSpinner + $(".div-dropzone-spinner").css + "opacity": 0 + "display": "none" + + # Preview button + $(document).off "click", ".js-md-preview-button" + $(document).on "click", ".js-md-preview-button", (e) -> + ### + Shows the Markdown preview. + + Lets the server render GFM into Html and displays it. + ### + e.preventDefault() + form = $(this).closest("form") + # toggle tabs + form.find(".js-md-write-button").parent().removeClass "active" + form.find(".js-md-preview-button").parent().addClass "active" + + # toggle content + form.find(".md-write-holder").hide() + form.find(".md-preview-holder").show() + + preview = form.find(".js-md-preview") + mdText = form.find(".markdown-area").val() + if mdText.trim().length is 0 + preview.text "Nothing to preview." + else + preview.text "Loading..." + $.get($(this).data("url"), + md_text: mdText + ).success (previewData) -> + preview.html previewData + + # Write button + $(document).off "click", ".js-md-write-button" + $(document).on "click", ".js-md-write-button", (e) -> + ### + Shows the Markdown textarea. + ### + e.preventDefault() + form = $(this).closest("form") + # toggle tabs + form.find(".js-md-write-button").parent().addClass "active" + form.find(".js-md-preview-button").parent().removeClass "active" + + # toggle content + form.find(".md-write-holder").show() + form.find(".md-preview-holder").hide() + + dropzone = form_dropzone.dropzone( + url: project_image_path_upload + dictDefaultMessage: "" + clickable: true + paramName: "markdown_img" + maxFilesize: 10 + uploadMultiple: false + acceptedFiles: "image/jpg,image/jpeg,image/gif,image/png" + headers: + "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content") + + previewContainer: false + + processing: -> + $(".div-dropzone-alert").alert "close" + + dragover: -> + form_textarea.addClass "div-dropzone-focus" + form.find(".div-dropzone-hover").css "opacity", 0.7 + return + + dragleave: -> + form_textarea.removeClass "div-dropzone-focus" + form.find(".div-dropzone-hover").css "opacity", 0 + return + + drop: -> + form_textarea.removeClass "div-dropzone-focus" + form.find(".div-dropzone-hover").css "opacity", 0 + form_textarea.focus() + return + + success: (header, response) -> + child = $(dropzone[0]).children("textarea") + $(child).val $(child).val() + formatLink(response.link) + "\n" + return + + error: (temp, errorMessage) -> + checkIfMsgExists = $(".error-alert").children().length + if checkIfMsgExists is 0 + $(".error-alert").append divAlert + $(".div-dropzone-alert").append btnAlert + errorMessage + return + + sending: -> + form_dropzone.find(".div-dropzone-spinner").css + "opacity": 0.7 + "display": "inherit" + return + + complete: -> + $(".dz-preview").remove() + $(".markdown-area").trigger "input" + $(".div-dropzone-spinner").css + "opacity": 0 + "display": "none" + return + ) + + child = $(dropzone[0]).children("textarea") + + formatLink = (str) -> + "![" + str.alt + "](" + str.url + ")" + + handlePaste = (e) -> + e.preventDefault() + my_event = e.originalEvent + + if my_event.clipboardData and my_event.clipboardData.items + processItem(my_event) + + processItem = (e) -> + image = isImage(e) + if image + filename = getFilename(e) or "image.png" + text = "{{" + filename + "}}" + pasteText(text) + uploadFile image.getAsFile(), filename + + else + text = e.clipboardData.getData("text/plain") + pasteText(text) + + isImage = (data) -> + i = 0 + while i < data.clipboardData.items.length + item = data.clipboardData.items[i] + if item.type.indexOf("image") isnt -1 + return item + i++ + return false + + pasteText = (text) -> + caretStart = $(child)[0].selectionStart + caretEnd = $(child)[0].selectionEnd + textEnd = $(child).val().length + + beforeSelection = $(child).val().substring 0, caretStart + afterSelection = $(child).val().substring caretEnd, textEnd + $(child).val beforeSelection + text + afterSelection + form_textarea.trigger "input" + + getFilename = (e) -> + if window.clipboardData and window.clipboardData.getData + value = window.clipboardData.getData("Text") + else if e.clipboardData and e.clipboardData.getData + value = e.clipboardData.getData("text/plain") + + value = value.split("\r") + value.first() + + uploadFile = (item, filename) -> + formData = new FormData() + formData.append "markdown_img", item, filename + $.ajax + url: project_image_path_upload + type: "POST" + data: formData + dataType: "json" + processData: false + contentType: false + headers: + "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content") + + beforeSend: -> + showSpinner() + closeAlertMessage() + + success: (e, textStatus, response) -> + insertToTextArea(filename, formatLink(response.responseJSON.link)) + + error: (response) -> + showError(response.responseJSON.message) + + complete: -> + closeSpinner() + + insertToTextArea = (filename, url) -> + $(child).val (index, val) -> + val.replace("{{" + filename + "}}", url + "\n") + + appendToTextArea = (url) -> + $(child).val (index, val) -> + val + url + "\n" + + showSpinner = (e) -> + form.find(".div-dropzone-spinner").css + "opacity": 0.7 + "display": "inherit" + + closeSpinner = -> + form.find(".div-dropzone-spinner").css + "opacity": 0 + "display": "none" + + showError = (message) -> + checkIfMsgExists = $(".error-alert").children().length + if checkIfMsgExists is 0 + $(".error-alert").append divAlert + $(".div-dropzone-alert").append btnAlert + message + + closeAlertMessage = -> + form.find(".div-dropzone-alert").alert "close" + + form.find(".markdown-selector").click (e) -> + e.preventDefault() + $(@).closest('.gfm-form').find('.div-dropzone').click() + return + + formatLink: (str) -> + "![" + str.alt + "](" + str.url + ")" diff --git a/app/assets/javascripts/markdown_area.js.coffee b/app/assets/javascripts/markdown_area.js.coffee deleted file mode 100644 index 0ca7070dc8b..00000000000 --- a/app/assets/javascripts/markdown_area.js.coffee +++ /dev/null @@ -1,241 +0,0 @@ -formatLink = (str) -> - "![" + str.alt + "](" + str.url + ")" - -$(document).ready -> - alertClass = "alert alert-danger alert-dismissable div-dropzone-alert" - alertAttr = "class=\"close\" data-dismiss=\"alert\"" + "aria-hidden=\"true\"" - divHover = "<div class=\"div-dropzone-hover\"></div>" - divSpinner = "<div class=\"div-dropzone-spinner\"></div>" - divAlert = "<div class=\"" + alertClass + "\"></div>" - iconPicture = "<i class=\"fa fa-picture-o div-dropzone-icon\"></i>" - iconSpinner = "<i class=\"fa fa-spinner fa-spin div-dropzone-icon\"></i>" - btnAlert = "<button type=\"button\"" + alertAttr + ">×</button>" - project_image_path_upload = window.project_image_path_upload or null - - $("textarea.markdown-area").wrap "<div class=\"div-dropzone\"></div>" - - $(".div-dropzone").parent().addClass "div-dropzone-wrapper" - - $(".div-dropzone").append divHover - $(".div-dropzone-hover").append iconPicture - $(".div-dropzone").append divSpinner - $(".div-dropzone-spinner").append iconSpinner - $(".div-dropzone-spinner").css - "opacity": 0 - "display": "none" - - # Preview button - $(document).off "click", ".js-md-preview-button" - $(document).on "click", ".js-md-preview-button", (e) -> - ### - Shows the Markdown preview. - - Lets the server render GFM into Html and displays it. - ### - e.preventDefault() - form = $(this).closest("form") - # toggle tabs - form.find(".js-md-write-button").parent().removeClass "active" - form.find(".js-md-preview-button").parent().addClass "active" - - # toggle content - form.find(".md-write-holder").hide() - form.find(".md-preview-holder").show() - - preview = form.find(".js-md-preview") - mdText = form.find(".markdown-area").val() - if mdText.trim().length is 0 - preview.text "Nothing to preview." - else - preview.text "Loading..." - $.get($(this).data("url"), - md_text: mdText - ).success (previewData) -> - preview.html previewData - - # Write button - $(document).off "click", ".js-md-write-button" - $(document).on "click", ".js-md-write-button", (e) -> - ### - Shows the Markdown textarea. - ### - e.preventDefault() - form = $(this).closest("form") - # toggle tabs - form.find(".js-md-write-button").parent().addClass "active" - form.find(".js-md-preview-button").parent().removeClass "active" - - # toggle content - form.find(".md-write-holder").show() - form.find(".md-preview-holder").hide() - - dropzone = $(".div-dropzone").dropzone( - url: project_image_path_upload - dictDefaultMessage: "" - clickable: true - paramName: "markdown_img" - maxFilesize: 10 - uploadMultiple: false - acceptedFiles: "image/jpg,image/jpeg,image/gif,image/png" - headers: - "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content") - - previewContainer: false - - processing: -> - $(".div-dropzone-alert").alert "close" - - dragover: -> - $(".div-dropzone > textarea").addClass "div-dropzone-focus" - $(".div-dropzone-hover").css "opacity", 0.7 - return - - dragleave: -> - $(".div-dropzone > textarea").removeClass "div-dropzone-focus" - $(".div-dropzone-hover").css "opacity", 0 - return - - drop: -> - $(".div-dropzone > textarea").removeClass "div-dropzone-focus" - $(".div-dropzone-hover").css "opacity", 0 - $(".div-dropzone > textarea").focus() - return - - success: (header, response) -> - child = $(dropzone[0]).children("textarea") - $(child).val $(child).val() + formatLink(response.link) + "\n" - return - - error: (temp, errorMessage) -> - checkIfMsgExists = $(".error-alert").children().length - if checkIfMsgExists is 0 - $(".error-alert").append divAlert - $(".div-dropzone-alert").append btnAlert + errorMessage - return - - sending: -> - $(".div-dropzone-spinner").css - "opacity": 0.7 - "display": "inherit" - return - - complete: -> - $(".dz-preview").remove() - $(".markdown-area").trigger "input" - $(".div-dropzone-spinner").css - "opacity": 0 - "display": "none" - return - ) - - child = $(dropzone[0]).children("textarea") - - formatLink = (str) -> - "![" + str.alt + "](" + str.url + ")" - - handlePaste = (e) -> - e.preventDefault() - my_event = e.originalEvent - - if my_event.clipboardData and my_event.clipboardData.items - processItem(my_event) - - processItem = (e) -> - image = isImage(e) - if image - filename = getFilename(e) or "image.png" - text = "{{" + filename + "}}" - pasteText(text) - uploadFile image.getAsFile(), filename - - else - text = e.clipboardData.getData("text/plain") - pasteText(text) - - isImage = (data) -> - i = 0 - while i < data.clipboardData.items.length - item = data.clipboardData.items[i] - if item.type.indexOf("image") isnt -1 - return item - i++ - return false - - pasteText = (text) -> - caretStart = $(child)[0].selectionStart - caretEnd = $(child)[0].selectionEnd - textEnd = $(child).val().length - - beforeSelection = $(child).val().substring 0, caretStart - afterSelection = $(child).val().substring caretEnd, textEnd - $(child).val beforeSelection + text + afterSelection - $(".markdown-area").trigger "input" - - getFilename = (e) -> - if window.clipboardData and window.clipboardData.getData - value = window.clipboardData.getData("Text") - else if e.clipboardData and e.clipboardData.getData - value = e.clipboardData.getData("text/plain") - - value = value.split("\r") - value.first() - - uploadFile = (item, filename) -> - formData = new FormData() - formData.append "markdown_img", item, filename - $.ajax - url: project_image_path_upload - type: "POST" - data: formData - dataType: "json" - processData: false - contentType: false - headers: - "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content") - - beforeSend: -> - showSpinner() - closeAlertMessage() - - success: (e, textStatus, response) -> - insertToTextArea(filename, formatLink(response.responseJSON.link)) - - error: (response) -> - showError(response.responseJSON.message) - - complete: -> - closeSpinner() - - insertToTextArea = (filename, url) -> - $(child).val (index, val) -> - val.replace("{{" + filename + "}}", url + "\n") - - appendToTextArea = (url) -> - $(child).val (index, val) -> - val + url + "\n" - - showSpinner = (e) -> - $(".div-dropzone-spinner").css - "opacity": 0.7 - "display": "inherit" - - closeSpinner = -> - $(".div-dropzone-spinner").css - "opacity": 0 - "display": "none" - - showError = (message) -> - checkIfMsgExists = $(".error-alert").children().length - if checkIfMsgExists is 0 - $(".error-alert").append divAlert - $(".div-dropzone-alert").append btnAlert + message - - closeAlertMessage = -> - $(".div-dropzone-alert").alert "close" - - $(".markdown-selector").click (e) -> - e.preventDefault() - $(@).closest('.gfm-form').find('.div-dropzone').click() - return - - return diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index 4d1c81d91d4..d1935d1d007 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -219,6 +219,7 @@ class @Notes setupNoteForm: (form) -> disableButtonIfEmptyField form.find(".js-note-text"), form.find(".js-comment-button") form.removeClass "js-new-note-form" + form.find('.div-dropzone').remove() # setup preview buttons form.find(".js-md-write-button, .js-md-preview-button").tooltip placement: "left" @@ -233,6 +234,7 @@ class @Notes # remove notify commit author checkbox for non-commit notes form.find(".js-notify-commit-author").remove() if form.find("#note_noteable_type").val() isnt "Commit" GitLab.GfmAutoComplete.setup() + new DropzoneInput(form) form.show() @@ -259,8 +261,10 @@ class @Notes Updates the current note field. ### updateNote: (xhr, note, status) => - note_li = $("#note_" + note.id) + note_li = $(".note-row-" + note.id) note_li.replaceWith(note.html) + note_li.find('.note-edit-form').hide() + note_li.find('.note-text').show() code = "#note_" + note.id + " .highlight pre code" $(code).each (i, e) -> hljs.highlightBlock(e) @@ -276,11 +280,19 @@ class @Notes e.preventDefault() note = $(this).closest(".note") note.find(".note-text").hide() + note.find(".note-header").hide() + base_form = note.find(".note-edit-form") + form = base_form.clone().insertAfter(base_form) + form.addClass('current-note-edit-form') + form.find('.div-dropzone').remove() # Show the attachment delete link note.find(".js-note-attachment-delete").show() + + # Setup markdown form GitLab.GfmAutoComplete.setup() - form = note.find(".note-edit-form") + new DropzoneInput(form) + form.show() textarea = form.find("textarea") textarea.focus() @@ -295,8 +307,8 @@ class @Notes e.preventDefault() note = $(this).closest(".note") note.find(".note-text").show() - note.find(".js-note-attachment-delete").hide() - note.find(".note-edit-form").hide() + note.find(".note-header").show() + note.find(".current-note-edit-form").remove() ### Called in response to deleting a note of any kind. diff --git a/app/assets/javascripts/zen_mode.js.coffee b/app/assets/javascripts/zen_mode.js.coffee index 0c9942a4014..0fb8f7ed75f 100644 --- a/app/assets/javascripts/zen_mode.js.coffee +++ b/app/assets/javascripts/zen_mode.js.coffee @@ -10,7 +10,15 @@ class @ZenMode if not @active_checkbox @scroll_position = window.pageYOffset - $('body').on 'change', '.zennable input[type=checkbox]', (e) => + $('body').on 'click', '.zen-enter-link', (e) => + e.preventDefault() + $(e.currentTarget).closest('.zennable').find('.zen-toggle-comment').prop('checked', true) + + $('body').on 'click', '.zen-leave-link', (e) => + e.preventDefault() + $(e.currentTarget).closest('.zennable').find('.zen-toggle-comment').prop('checked', false) + + $('body').on 'change', '.zen-toggle-comment', (e) => checkbox = e.currentTarget if checkbox.checked # Disable other keyboard shortcuts in ZEN mode @@ -32,8 +40,6 @@ class @ZenMode @active_zen_area = @active_checkbox.parent().find('textarea') @active_zen_area.focus() window.location.hash = ZenMode.fullscreen_prefix + @active_checkbox.prop('id') - # Disable dropzone in ZEN mode - Dropzone.forElement('.div-dropzone').disable() exitZenMode: => if @active_zen_area isnt null |