gitlab-org--gitlab-foss/app/assets/javascripts/preview_markdown.js

201 lines
5.9 KiB
JavaScript
Raw Normal View History

2016-12-11 22:57:36 -05:00
/* eslint-disable func-names, no-var, object-shorthand, comma-dangle, prefer-arrow-callback */
// MarkdownPreview
//
// Handles toggling the "Write" and "Preview" tab clicks, rendering the preview
// (including the explanation of quick actions), and showing a warning when
// more than `x` users are referenced.
//
2016-12-11 22:55:17 -05:00
(function () {
2016-12-11 22:57:36 -05:00
var lastTextareaPreviewed;
2017-01-17 00:35:33 -05:00
var lastTextareaHeight = null;
2016-12-11 22:57:36 -05:00
var markdownPreview;
var previewButtonSelector;
var writeButtonSelector;
2016-07-24 16:45:11 -04:00
2016-12-11 22:55:17 -05:00
window.MarkdownPreview = (function () {
2016-07-24 16:45:11 -04:00
function MarkdownPreview() {}
// Minimum number of users referenced before triggering a warning
2016-07-24 16:45:11 -04:00
MarkdownPreview.prototype.referenceThreshold = 10;
MarkdownPreview.prototype.emptyMessage = 'Nothing to preview.';
2016-07-24 16:45:11 -04:00
MarkdownPreview.prototype.ajaxCache = {};
2016-12-11 22:55:17 -05:00
MarkdownPreview.prototype.showPreview = function ($form) {
var mdText;
2016-12-11 22:57:36 -05:00
var preview = $form.find('.js-md-preview');
var url = preview.data('url');
if (preview.hasClass('md-preview-loading')) {
return;
}
mdText = $form.find('textarea.markdown-area').val();
2016-07-24 16:45:11 -04:00
if (mdText.trim().length === 0) {
preview.text(this.emptyMessage);
this.hideReferencedUsers($form);
} else {
preview.addClass('md-preview-loading').text('Loading...');
this.fetchMarkdownPreview(mdText, url, (function (response) {
var body;
if (response.body.length > 0) {
body = response.body;
} else {
body = this.emptyMessage;
}
preview.removeClass('md-preview-loading').html(body);
preview.renderGFM();
this.renderReferencedUsers(response.references.users, $form);
if (response.references.commands) {
this.renderReferencedCommands(response.references.commands, $form);
}
}).bind(this));
2016-07-24 16:45:11 -04:00
}
};
MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) {
if (!url) {
2016-07-24 16:45:11 -04:00
return;
}
if (text === this.ajaxCache.text) {
success(this.ajaxCache.response);
return;
2016-07-24 16:45:11 -04:00
}
$.ajax({
2016-07-24 16:45:11 -04:00
type: 'POST',
url: url,
2016-07-24 16:45:11 -04:00
data: {
text: text
},
dataType: 'json',
2016-12-11 22:55:17 -05:00
success: (function (response) {
this.ajaxCache = {
text: text,
response: response
2016-07-24 16:45:11 -04:00
};
success(response);
}).bind(this)
2016-07-24 16:45:11 -04:00
});
};
2016-12-11 22:55:17 -05:00
MarkdownPreview.prototype.hideReferencedUsers = function ($form) {
$form.find('.referenced-users').hide();
2016-07-24 16:45:11 -04:00
};
2016-12-11 22:55:17 -05:00
MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) {
2016-07-24 16:45:11 -04:00
var referencedUsers;
referencedUsers = $form.find('.referenced-users');
2016-07-24 16:45:11 -04:00
if (referencedUsers.length) {
if (users.length >= this.referenceThreshold) {
referencedUsers.show();
referencedUsers.find('.js-referenced-users-count').text(users.length);
2016-07-24 16:45:11 -04:00
} else {
referencedUsers.hide();
2016-07-24 16:45:11 -04:00
}
}
};
MarkdownPreview.prototype.hideReferencedCommands = function ($form) {
$form.find('.referenced-commands').hide();
};
MarkdownPreview.prototype.renderReferencedCommands = function (commands, $form) {
var referencedCommands;
referencedCommands = $form.find('.referenced-commands');
if (commands.length > 0) {
referencedCommands.html(commands);
referencedCommands.show();
} else {
referencedCommands.html('');
referencedCommands.hide();
}
};
2016-07-24 16:45:11 -04:00
return MarkdownPreview;
2016-12-11 22:55:17 -05:00
}());
2016-07-24 16:45:11 -04:00
markdownPreview = new window.MarkdownPreview();
2016-07-24 16:45:11 -04:00
previewButtonSelector = '.js-md-preview-button';
writeButtonSelector = '.js-md-write-button';
lastTextareaPreviewed = null;
2016-12-11 22:55:17 -05:00
$.fn.setupMarkdownPreview = function () {
var $form = $(this);
$form.find('textarea.markdown-area').on('input', function () {
markdownPreview.hideReferencedUsers($form);
});
2016-07-24 16:45:11 -04:00
};
2016-12-11 22:55:17 -05:00
$(document).on('markdown-preview:show', function (e, $form) {
2016-07-24 16:45:11 -04:00
if (!$form) {
return;
}
2017-01-17 00:35:33 -05:00
2016-07-24 16:45:11 -04:00
lastTextareaPreviewed = $form.find('textarea.markdown-area');
2017-01-17 00:35:33 -05:00
lastTextareaHeight = lastTextareaPreviewed.height();
// toggle tabs
2016-07-24 16:45:11 -04:00
$form.find(writeButtonSelector).parent().removeClass('active');
$form.find(previewButtonSelector).parent().addClass('active');
2017-01-17 00:35:33 -05:00
// toggle content
2016-07-24 16:45:11 -04:00
$form.find('.md-write-holder').hide();
$form.find('.md-preview-holder').show();
markdownPreview.showPreview($form);
2016-07-24 16:45:11 -04:00
});
2016-12-11 22:55:17 -05:00
$(document).on('markdown-preview:hide', function (e, $form) {
2016-07-24 16:45:11 -04:00
if (!$form) {
return;
}
lastTextareaPreviewed = null;
2017-01-17 00:35:33 -05:00
if (lastTextareaHeight) {
$form.find('textarea.markdown-area').height(lastTextareaHeight);
}
// toggle tabs
2016-07-24 16:45:11 -04:00
$form.find(writeButtonSelector).parent().addClass('active');
$form.find(previewButtonSelector).parent().removeClass('active');
2017-01-17 00:35:33 -05:00
// toggle content
2016-07-24 16:45:11 -04:00
$form.find('.md-write-holder').show();
$form.find('textarea.markdown-area').focus();
$form.find('.md-preview-holder').hide();
markdownPreview.hideReferencedCommands($form);
2016-07-24 16:45:11 -04:00
});
2016-12-11 22:55:17 -05:00
$(document).on('markdown-preview:toggle', function (e, keyboardEvent) {
2016-07-24 16:45:11 -04:00
var $target;
$target = $(keyboardEvent.target);
if ($target.is('textarea.markdown-area')) {
$(document).triggerHandler('markdown-preview:show', [$target.closest('form')]);
keyboardEvent.preventDefault();
2016-07-24 16:45:11 -04:00
} else if (lastTextareaPreviewed) {
$target = lastTextareaPreviewed;
$(document).triggerHandler('markdown-preview:hide', [$target.closest('form')]);
keyboardEvent.preventDefault();
2016-07-24 16:45:11 -04:00
}
});
2016-12-11 22:55:17 -05:00
$(document).on('click', previewButtonSelector, function (e) {
2016-07-24 16:45:11 -04:00
var $form;
e.preventDefault();
$form = $(this).closest('form');
$(document).triggerHandler('markdown-preview:show', [$form]);
2016-07-24 16:45:11 -04:00
});
2016-12-11 22:55:17 -05:00
$(document).on('click', writeButtonSelector, function (e) {
2016-07-24 16:45:11 -04:00
var $form;
e.preventDefault();
$form = $(this).closest('form');
$(document).triggerHandler('markdown-preview:hide', [$form]);
2016-07-24 16:45:11 -04:00
});
2016-12-11 22:57:36 -05:00
}());