Merge branch 'move-markdown-preview' into 'master'
Remove preview_markdown from the global obj See merge request gitlab-org/gitlab-ce!16025
This commit is contained in:
commit
d2d634a990
3 changed files with 167 additions and 169 deletions
|
@ -7,6 +7,7 @@ import installGlEmojiElement from './gl_emoji';
|
||||||
import './quick_submit';
|
import './quick_submit';
|
||||||
import './requires_input';
|
import './requires_input';
|
||||||
import './toggler_behavior';
|
import './toggler_behavior';
|
||||||
|
import '../preview_markdown';
|
||||||
|
|
||||||
installGlEmojiElement();
|
installGlEmojiElement();
|
||||||
initCopyAsGFM();
|
initCopyAsGFM();
|
||||||
|
|
|
@ -46,7 +46,6 @@ import LazyLoader from './lazy_loader';
|
||||||
import './line_highlighter';
|
import './line_highlighter';
|
||||||
import initLogoAnimation from './logo';
|
import initLogoAnimation from './logo';
|
||||||
import './milestone_select';
|
import './milestone_select';
|
||||||
import './preview_markdown';
|
|
||||||
import './projects_dropdown';
|
import './projects_dropdown';
|
||||||
import './render_gfm';
|
import './render_gfm';
|
||||||
import initBreadcrumbs from './breadcrumb';
|
import initBreadcrumbs from './breadcrumb';
|
||||||
|
|
|
@ -6,195 +6,193 @@
|
||||||
// (including the explanation of quick actions), and showing a warning when
|
// (including the explanation of quick actions), and showing a warning when
|
||||||
// more than `x` users are referenced.
|
// more than `x` users are referenced.
|
||||||
//
|
//
|
||||||
(function () {
|
|
||||||
var lastTextareaPreviewed;
|
|
||||||
var lastTextareaHeight = null;
|
|
||||||
var markdownPreview;
|
|
||||||
var previewButtonSelector;
|
|
||||||
var writeButtonSelector;
|
|
||||||
|
|
||||||
window.MarkdownPreview = (function () {
|
var lastTextareaPreviewed;
|
||||||
function MarkdownPreview() {}
|
var lastTextareaHeight = null;
|
||||||
|
var markdownPreview;
|
||||||
|
var previewButtonSelector;
|
||||||
|
var writeButtonSelector;
|
||||||
|
|
||||||
// Minimum number of users referenced before triggering a warning
|
function MarkdownPreview() {}
|
||||||
MarkdownPreview.prototype.referenceThreshold = 10;
|
|
||||||
MarkdownPreview.prototype.emptyMessage = 'Nothing to preview.';
|
|
||||||
|
|
||||||
MarkdownPreview.prototype.ajaxCache = {};
|
// Minimum number of users referenced before triggering a warning
|
||||||
|
MarkdownPreview.prototype.referenceThreshold = 10;
|
||||||
|
MarkdownPreview.prototype.emptyMessage = 'Nothing to preview.';
|
||||||
|
|
||||||
MarkdownPreview.prototype.showPreview = function ($form) {
|
MarkdownPreview.prototype.ajaxCache = {};
|
||||||
var mdText;
|
|
||||||
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();
|
|
||||||
|
|
||||||
if (mdText.trim().length === 0) {
|
MarkdownPreview.prototype.showPreview = function ($form) {
|
||||||
preview.text(this.emptyMessage);
|
var mdText;
|
||||||
this.hideReferencedUsers($form);
|
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();
|
||||||
|
|
||||||
|
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 {
|
} else {
|
||||||
preview.addClass('md-preview-loading').text('Loading...');
|
body = this.emptyMessage;
|
||||||
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));
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) {
|
preview.removeClass('md-preview-loading').html(body);
|
||||||
if (!url) {
|
preview.renderGFM();
|
||||||
return;
|
this.renderReferencedUsers(response.references.users, $form);
|
||||||
|
|
||||||
|
if (response.references.commands) {
|
||||||
|
this.renderReferencedCommands(response.references.commands, $form);
|
||||||
}
|
}
|
||||||
if (text === this.ajaxCache.text) {
|
}).bind(this));
|
||||||
success(this.ajaxCache.response);
|
}
|
||||||
return;
|
};
|
||||||
}
|
|
||||||
$.ajax({
|
|
||||||
type: 'POST',
|
|
||||||
url: url,
|
|
||||||
data: {
|
|
||||||
text: text
|
|
||||||
},
|
|
||||||
dataType: 'json',
|
|
||||||
success: (function (response) {
|
|
||||||
this.ajaxCache = {
|
|
||||||
text: text,
|
|
||||||
response: response
|
|
||||||
};
|
|
||||||
success(response);
|
|
||||||
}).bind(this)
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
MarkdownPreview.prototype.hideReferencedUsers = function ($form) {
|
MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) {
|
||||||
$form.find('.referenced-users').hide();
|
if (!url) {
|
||||||
};
|
return;
|
||||||
|
}
|
||||||
|
if (text === this.ajaxCache.text) {
|
||||||
|
success(this.ajaxCache.response);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$.ajax({
|
||||||
|
type: 'POST',
|
||||||
|
url: url,
|
||||||
|
data: {
|
||||||
|
text: text
|
||||||
|
},
|
||||||
|
dataType: 'json',
|
||||||
|
success: (function (response) {
|
||||||
|
this.ajaxCache = {
|
||||||
|
text: text,
|
||||||
|
response: response
|
||||||
|
};
|
||||||
|
success(response);
|
||||||
|
}).bind(this)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) {
|
MarkdownPreview.prototype.hideReferencedUsers = function ($form) {
|
||||||
var referencedUsers;
|
$form.find('.referenced-users').hide();
|
||||||
referencedUsers = $form.find('.referenced-users');
|
};
|
||||||
if (referencedUsers.length) {
|
|
||||||
if (users.length >= this.referenceThreshold) {
|
|
||||||
referencedUsers.show();
|
|
||||||
referencedUsers.find('.js-referenced-users-count').text(users.length);
|
|
||||||
} else {
|
|
||||||
referencedUsers.hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
MarkdownPreview.prototype.hideReferencedCommands = function ($form) {
|
MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) {
|
||||||
$form.find('.referenced-commands').hide();
|
var referencedUsers;
|
||||||
};
|
referencedUsers = $form.find('.referenced-users');
|
||||||
|
if (referencedUsers.length) {
|
||||||
|
if (users.length >= this.referenceThreshold) {
|
||||||
|
referencedUsers.show();
|
||||||
|
referencedUsers.find('.js-referenced-users-count').text(users.length);
|
||||||
|
} else {
|
||||||
|
referencedUsers.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
MarkdownPreview.prototype.renderReferencedCommands = function (commands, $form) {
|
MarkdownPreview.prototype.hideReferencedCommands = function ($form) {
|
||||||
var referencedCommands;
|
$form.find('.referenced-commands').hide();
|
||||||
referencedCommands = $form.find('.referenced-commands');
|
};
|
||||||
if (commands.length > 0) {
|
|
||||||
referencedCommands.html(commands);
|
|
||||||
referencedCommands.show();
|
|
||||||
} else {
|
|
||||||
referencedCommands.html('');
|
|
||||||
referencedCommands.hide();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return MarkdownPreview;
|
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();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
markdownPreview = new window.MarkdownPreview();
|
markdownPreview = new MarkdownPreview();
|
||||||
previewButtonSelector = '.js-md-preview-button';
|
|
||||||
writeButtonSelector = '.js-md-write-button';
|
previewButtonSelector = '.js-md-preview-button';
|
||||||
|
writeButtonSelector = '.js-md-write-button';
|
||||||
|
lastTextareaPreviewed = null;
|
||||||
|
const markdownToolbar = $('.md-header-toolbar');
|
||||||
|
|
||||||
|
$.fn.setupMarkdownPreview = function () {
|
||||||
|
var $form = $(this);
|
||||||
|
$form.find('textarea.markdown-area').on('input', function () {
|
||||||
|
markdownPreview.hideReferencedUsers($form);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$(document).on('markdown-preview:show', function (e, $form) {
|
||||||
|
if (!$form) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastTextareaPreviewed = $form.find('textarea.markdown-area');
|
||||||
|
lastTextareaHeight = lastTextareaPreviewed.height();
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
markdownToolbar.removeClass('active');
|
||||||
|
markdownPreview.showPreview($form);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('markdown-preview:hide', function (e, $form) {
|
||||||
|
if (!$form) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
lastTextareaPreviewed = null;
|
lastTextareaPreviewed = null;
|
||||||
const markdownToolbar = $('.md-header-toolbar');
|
|
||||||
|
|
||||||
$.fn.setupMarkdownPreview = function () {
|
if (lastTextareaHeight) {
|
||||||
var $form = $(this);
|
$form.find('textarea.markdown-area').height(lastTextareaHeight);
|
||||||
$form.find('textarea.markdown-area').on('input', function () {
|
}
|
||||||
markdownPreview.hideReferencedUsers($form);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
$(document).on('markdown-preview:show', function (e, $form) {
|
// toggle tabs
|
||||||
if (!$form) {
|
$form.find(writeButtonSelector).parent().addClass('active');
|
||||||
return;
|
$form.find(previewButtonSelector).parent().removeClass('active');
|
||||||
}
|
|
||||||
|
|
||||||
lastTextareaPreviewed = $form.find('textarea.markdown-area');
|
// toggle content
|
||||||
lastTextareaHeight = lastTextareaPreviewed.height();
|
$form.find('.md-write-holder').show();
|
||||||
|
$form.find('textarea.markdown-area').focus();
|
||||||
|
$form.find('.md-preview-holder').hide();
|
||||||
|
markdownToolbar.addClass('active');
|
||||||
|
|
||||||
// toggle tabs
|
markdownPreview.hideReferencedCommands($form);
|
||||||
$form.find(writeButtonSelector).parent().removeClass('active');
|
});
|
||||||
$form.find(previewButtonSelector).parent().addClass('active');
|
|
||||||
|
|
||||||
// toggle content
|
$(document).on('markdown-preview:toggle', function (e, keyboardEvent) {
|
||||||
$form.find('.md-write-holder').hide();
|
var $target;
|
||||||
$form.find('.md-preview-holder').show();
|
$target = $(keyboardEvent.target);
|
||||||
markdownToolbar.removeClass('active');
|
if ($target.is('textarea.markdown-area')) {
|
||||||
markdownPreview.showPreview($form);
|
$(document).triggerHandler('markdown-preview:show', [$target.closest('form')]);
|
||||||
});
|
keyboardEvent.preventDefault();
|
||||||
|
} else if (lastTextareaPreviewed) {
|
||||||
|
$target = lastTextareaPreviewed;
|
||||||
|
$(document).triggerHandler('markdown-preview:hide', [$target.closest('form')]);
|
||||||
|
keyboardEvent.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$(document).on('markdown-preview:hide', function (e, $form) {
|
$(document).on('click', previewButtonSelector, function (e) {
|
||||||
if (!$form) {
|
var $form;
|
||||||
return;
|
e.preventDefault();
|
||||||
}
|
$form = $(this).closest('form');
|
||||||
lastTextareaPreviewed = null;
|
$(document).triggerHandler('markdown-preview:show', [$form]);
|
||||||
|
});
|
||||||
|
|
||||||
if (lastTextareaHeight) {
|
$(document).on('click', writeButtonSelector, function (e) {
|
||||||
$form.find('textarea.markdown-area').height(lastTextareaHeight);
|
var $form;
|
||||||
}
|
e.preventDefault();
|
||||||
|
$form = $(this).closest('form');
|
||||||
|
$(document).triggerHandler('markdown-preview:hide', [$form]);
|
||||||
|
});
|
||||||
|
|
||||||
// toggle tabs
|
export default MarkdownPreview;
|
||||||
$form.find(writeButtonSelector).parent().addClass('active');
|
|
||||||
$form.find(previewButtonSelector).parent().removeClass('active');
|
|
||||||
|
|
||||||
// toggle content
|
|
||||||
$form.find('.md-write-holder').show();
|
|
||||||
$form.find('textarea.markdown-area').focus();
|
|
||||||
$form.find('.md-preview-holder').hide();
|
|
||||||
markdownToolbar.addClass('active');
|
|
||||||
|
|
||||||
markdownPreview.hideReferencedCommands($form);
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).on('markdown-preview:toggle', function (e, keyboardEvent) {
|
|
||||||
var $target;
|
|
||||||
$target = $(keyboardEvent.target);
|
|
||||||
if ($target.is('textarea.markdown-area')) {
|
|
||||||
$(document).triggerHandler('markdown-preview:show', [$target.closest('form')]);
|
|
||||||
keyboardEvent.preventDefault();
|
|
||||||
} else if (lastTextareaPreviewed) {
|
|
||||||
$target = lastTextareaPreviewed;
|
|
||||||
$(document).triggerHandler('markdown-preview:hide', [$target.closest('form')]);
|
|
||||||
keyboardEvent.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).on('click', previewButtonSelector, function (e) {
|
|
||||||
var $form;
|
|
||||||
e.preventDefault();
|
|
||||||
$form = $(this).closest('form');
|
|
||||||
$(document).triggerHandler('markdown-preview:show', [$form]);
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).on('click', writeButtonSelector, function (e) {
|
|
||||||
var $form;
|
|
||||||
e.preventDefault();
|
|
||||||
$form = $(this).closest('form');
|
|
||||||
$(document).triggerHandler('markdown-preview:hide', [$form]);
|
|
||||||
});
|
|
||||||
}());
|
|
||||||
|
|
Loading…
Reference in a new issue