4bc9020956
* Create #preview endpoint for CommentController * Create comment preview button WIP * Implement preview feature for reply comment W * Style preview button CSS WIP * Style preview button CSS WIP * Tweak markdown toggle logic and add styling * Update comment feature spec * Add error handling for comment preview & fix lint * Extract handleCommentPreview into it's own file * Adjust functionality for comment preview [WIP] * Modify comment preview functionality and CSS * Adjust code style based on linter
50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
function initializeCommentPreview() {
|
|
if (document.getElementById('preview-button')) {
|
|
document.getElementById('preview-button').onclick = handleCommentPreview;
|
|
}
|
|
}
|
|
|
|
function handleCommentPreview(e) {
|
|
e.preventDefault();
|
|
var form = e.target.parentElement.parentElement;
|
|
var textArea = form.querySelector('textarea');
|
|
if (textArea.value !== '') {
|
|
var previewDiv = form.querySelector('.comment-preview-div');
|
|
var previewButton = form.querySelector('.comment-action-preview');
|
|
if (previewButton.innerHTML.indexOf('PREVIEW') > -1) {
|
|
textArea.classList.toggle('preview-loading');
|
|
getAndShowPreview(previewDiv, textArea);
|
|
previewButton.innerHTML = 'MARKDOWN';
|
|
} else {
|
|
previewDiv.classList.toggle('preview-toggle');
|
|
textArea.classList.toggle('preview-toggle');
|
|
previewButton.innerHTML = 'PREVIEW';
|
|
}
|
|
}
|
|
}
|
|
|
|
function getAndShowPreview(previewDiv, textArea) {
|
|
var commentMarkdown = textArea.value;
|
|
var payload = JSON.stringify({
|
|
comment: {
|
|
body_markdown: commentMarkdown,
|
|
},
|
|
});
|
|
getCsrfToken()
|
|
.then(sendFetch('comment-preview', payload))
|
|
.then(function(response) {
|
|
return response.json();
|
|
})
|
|
.then(successCb)
|
|
.catch(function(err) {
|
|
console.log('error!');
|
|
console.log(err);
|
|
});
|
|
|
|
function successCb(body) {
|
|
previewDiv.classList.toggle('preview-toggle');
|
|
textArea.classList.toggle('preview-loading');
|
|
textArea.classList.toggle('preview-toggle');
|
|
previewDiv.innerHTML = body.processed_html;
|
|
}
|
|
}
|