Decouple Markdown previews from DropzoneInput
This commit is contained in:
parent
dee28c50a9
commit
73eca2a95e
|
@ -1,3 +1,5 @@
|
|||
#= require markdown_preview
|
||||
|
||||
class @DropzoneInput
|
||||
constructor: (form) ->
|
||||
Dropzone.autoDiscover = false
|
||||
|
@ -11,17 +13,14 @@ class @DropzoneInput
|
|||
uploadProgress = $("<div class=\"div-dropzone-progress\"></div>")
|
||||
btnAlert = "<button type=\"button\"" + alertAttr + ">×</button>"
|
||||
project_uploads_path = window.project_uploads_path or null
|
||||
markdown_preview_path = window.markdown_preview_path or null
|
||||
max_file_size = gon.max_file_size or 10
|
||||
|
||||
form_textarea = $(form).find("textarea.markdown-area")
|
||||
form_textarea.wrap "<div class=\"div-dropzone\"></div>"
|
||||
form_textarea.on 'paste', (event) =>
|
||||
handlePaste(event)
|
||||
form_textarea.on "input", ->
|
||||
hideReferencedUsers()
|
||||
form_textarea.on "blur", ->
|
||||
renderMarkdown()
|
||||
|
||||
$(form).setupMarkdownPreview()
|
||||
|
||||
form_dropzone = $(form).find('.div-dropzone')
|
||||
form_dropzone.parent().addClass "div-dropzone-wrapper"
|
||||
|
@ -34,42 +33,6 @@ class @DropzoneInput
|
|||
"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()
|
||||
|
||||
renderMarkdown()
|
||||
|
||||
# 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_uploads_path
|
||||
dictDefaultMessage: ""
|
||||
|
@ -136,41 +99,6 @@ class @DropzoneInput
|
|||
|
||||
child = $(dropzone[0]).children("textarea")
|
||||
|
||||
hideReferencedUsers = ->
|
||||
referencedUsers = form.find(".referenced-users")
|
||||
referencedUsers.hide()
|
||||
|
||||
renderReferencedUsers = (users) ->
|
||||
referencedUsers = form.find(".referenced-users")
|
||||
|
||||
if referencedUsers.length
|
||||
if users.length >= 10
|
||||
referencedUsers.show()
|
||||
referencedUsers.find(".js-referenced-users-count").text users.length
|
||||
else
|
||||
referencedUsers.hide()
|
||||
|
||||
renderMarkdown = ->
|
||||
preview = form.find(".js-md-preview")
|
||||
mdText = form.find(".markdown-area").val()
|
||||
if mdText.trim().length is 0
|
||||
preview.text "Nothing to preview."
|
||||
hideReferencedUsers()
|
||||
else
|
||||
preview.text "Loading..."
|
||||
$.ajax(
|
||||
type: "POST",
|
||||
url: markdown_preview_path,
|
||||
data: {
|
||||
text: mdText
|
||||
},
|
||||
dataType: "json"
|
||||
).success (data) ->
|
||||
preview.html data.body
|
||||
preview.syntaxHighlight()
|
||||
|
||||
renderReferencedUsers data.references.users
|
||||
|
||||
formatLink = (link) ->
|
||||
text = "[#{link.alt}](#{link.url})"
|
||||
text = "!#{text}" if link.is_image
|
||||
|
|
|
@ -0,0 +1,87 @@
|
|||
# MarkdownPreview
|
||||
#
|
||||
# Handles toggling the "Write" and "Preview" tab clicks, rendering the preview,
|
||||
# and showing a warning when more than `x` users are referenced.
|
||||
#
|
||||
class @MarkdownPreview
|
||||
# Minimum number of users referenced before triggering a warning
|
||||
referenceThreshold: 10
|
||||
|
||||
showPreview: (form) ->
|
||||
preview = form.find('.js-md-preview')
|
||||
mdText = form.find('textarea.markdown-area').val()
|
||||
|
||||
if mdText.trim().length == 0
|
||||
preview.text('Nothing to preview.')
|
||||
@hideReferencedUsers(form)
|
||||
else
|
||||
preview.text('Loading...')
|
||||
@renderMarkdown mdText, (response) =>
|
||||
preview.html(response.body)
|
||||
preview.syntaxHighlight()
|
||||
@renderReferencedUsers(response.references.users, form)
|
||||
|
||||
renderMarkdown: (text, success) ->
|
||||
return unless window.markdown_preview_path
|
||||
|
||||
$.ajax
|
||||
type: 'POST'
|
||||
url: window.markdown_preview_path
|
||||
data: { text: text }
|
||||
dataType: 'json'
|
||||
success: success
|
||||
|
||||
hideReferencedUsers: (form) ->
|
||||
referencedUsers = form.find('.referenced-users')
|
||||
referencedUsers.hide()
|
||||
|
||||
renderReferencedUsers: (users, form) ->
|
||||
referencedUsers = form.find('.referenced-users')
|
||||
|
||||
if referencedUsers.length
|
||||
if users.length >= @referenceThreshold
|
||||
referencedUsers.show()
|
||||
referencedUsers.find('.js-referenced-users-count').text(users.length)
|
||||
else
|
||||
referencedUsers.hide()
|
||||
|
||||
markdownPreview = new MarkdownPreview()
|
||||
|
||||
previewButtonSelector = '.js-md-preview-button'
|
||||
writeButtonSelector = '.js-md-write-button'
|
||||
|
||||
$.fn.setupMarkdownPreview = ->
|
||||
$form = $(this)
|
||||
|
||||
form_textarea = $form.find('textarea.markdown-area')
|
||||
|
||||
form_textarea.on 'input', -> markdownPreview.hideReferencedUsers($form)
|
||||
form_textarea.on 'blur', -> markdownPreview.showPreview($form)
|
||||
|
||||
$(document).on 'click', previewButtonSelector, (e) ->
|
||||
e.preventDefault()
|
||||
|
||||
$form = $(this).closest('form')
|
||||
|
||||
# toggle tabs
|
||||
$form.find(writeButtonSelector).parent().removeClass('active')
|
||||
$form.find(previewButtonSelector).parent().addClass('active')
|
||||
|
||||
# toggle content
|
||||
$form.find('.md-write-holder').hide()
|
||||
$form.find('.md-preview-holder').show()
|
||||
|
||||
markdownPreview.showPreview($form)
|
||||
|
||||
$(document).on 'click', writeButtonSelector, (e) ->
|
||||
e.preventDefault()
|
||||
|
||||
$form = $(this).closest('form')
|
||||
|
||||
# toggle tabs
|
||||
$form.find(writeButtonSelector).parent().addClass('active')
|
||||
$form.find(previewButtonSelector).parent().removeClass('active')
|
||||
|
||||
# toggle content
|
||||
$form.find('.md-write-holder').show()
|
||||
$form.find('.md-preview-holder').hide()
|
|
@ -5,7 +5,7 @@
|
|||
%a.js-md-write-button(href="#md-write-holder" tabindex="-1")
|
||||
Write
|
||||
%li
|
||||
%a.js-md-preview-button(href="md-preview-holder" tabindex="-1")
|
||||
%a.js-md-preview-button(href="#md-preview-holder" tabindex="-1")
|
||||
Preview
|
||||
|
||||
- if defined?(referenced_users) && referenced_users
|
||||
|
|
Loading…
Reference in New Issue