Add default autocomplete config

This commit is contained in:
Kushal Pandya 2018-06-21 17:22:43 +05:30
parent 2bac2918b2
commit db9fb8a30e
5 changed files with 39 additions and 28 deletions

View File

@ -7,6 +7,16 @@ function sanitize(str) {
return str.replace(/<(?:.|\n)*?>/gm, ''); return str.replace(/<(?:.|\n)*?>/gm, '');
} }
export const defaultAutocompleteConfig = {
emojis: true,
members: true,
issues: true,
mergeRequests: true,
epics: false,
milestones: true,
labels: true,
};
class GfmAutoComplete { class GfmAutoComplete {
constructor(dataSources) { constructor(dataSources) {
this.dataSources = dataSources || {}; this.dataSources = dataSources || {};
@ -14,14 +24,7 @@ class GfmAutoComplete {
this.isLoadingData = {}; this.isLoadingData = {};
} }
setup(input, enableMap = { setup(input, enableMap = defaultAutocompleteConfig) {
emojis: true,
members: true,
issues: true,
milestones: true,
mergeRequests: true,
labels: true,
}) {
// Add GFM auto-completion to all input fields, that accept GFM input. // Add GFM auto-completion to all input fields, that accept GFM input.
this.input = input || $('.js-gfm-input'); this.input = input || $('.js-gfm-input');
this.enableMap = enableMap; this.enableMap = enableMap;

View File

@ -1,14 +1,14 @@
import $ from 'jquery'; import $ from 'jquery';
import autosize from 'autosize'; import autosize from 'autosize';
import GfmAutoComplete from './gfm_auto_complete'; import GfmAutoComplete, * as GFMConfig from './gfm_auto_complete';
import dropzoneInput from './dropzone_input'; import dropzoneInput from './dropzone_input';
import { addMarkdownListeners, removeMarkdownListeners } from './lib/utils/text_markdown'; import { addMarkdownListeners, removeMarkdownListeners } from './lib/utils/text_markdown';
export default class GLForm { export default class GLForm {
constructor(form, enableGFM = false) { constructor(form, enableGFM = {}) {
this.form = form; this.form = form;
this.textarea = this.form.find('textarea.js-gfm-input'); this.textarea = this.form.find('textarea.js-gfm-input');
this.enableGFM = enableGFM; this.enableGFM = Object.assign({}, GFMConfig.defaultAutocompleteConfig, enableGFM);
// Before we start, we should clean up any previous data for this form // Before we start, we should clean up any previous data for this form
this.destroy(); this.destroy();
// Setup the form // Setup the form
@ -34,14 +34,7 @@ export default class GLForm {
// remove notify commit author checkbox for non-commit notes // remove notify commit author checkbox for non-commit notes
gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion')); gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion'));
this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources); this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
this.autoComplete.setup(this.form.find('.js-gfm-input'), { this.autoComplete.setup(this.form.find('.js-gfm-input'), this.enableGFM);
emojis: true,
members: this.enableGFM,
issues: this.enableGFM,
milestones: this.enableGFM,
mergeRequests: this.enableGFM,
labels: this.enableGFM,
});
dropzoneInput(this.form); dropzoneInput(this.form);
autosize(this.textarea); autosize(this.textarea);
} }

View File

@ -20,6 +20,7 @@ import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_c
import axios from './lib/utils/axios_utils'; import axios from './lib/utils/axios_utils';
import { getLocationHash } from './lib/utils/url_utility'; import { getLocationHash } from './lib/utils/url_utility';
import Flash from './flash'; import Flash from './flash';
import { defaultAutocompleteConfig } from './gfm_auto_complete';
import CommentTypeToggle from './comment_type_toggle'; import CommentTypeToggle from './comment_type_toggle';
import GLForm from './gl_form'; import GLForm from './gl_form';
import loadAwardsHandler from './awards_handler'; import loadAwardsHandler from './awards_handler';
@ -45,7 +46,7 @@ const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm; const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
export default class Notes { export default class Notes {
static initialize(notes_url, note_ids, last_fetched_at, view, enableGFM = true) { static initialize(notes_url, note_ids, last_fetched_at, view, enableGFM) {
if (!this.instance) { if (!this.instance) {
this.instance = new Notes(notes_url, note_ids, last_fetched_at, view, enableGFM); this.instance = new Notes(notes_url, note_ids, last_fetched_at, view, enableGFM);
} }
@ -55,7 +56,7 @@ export default class Notes {
return this.instance; return this.instance;
} }
constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = true) { constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = defaultAutocompleteConfig) {
this.updateTargetButtons = this.updateTargetButtons.bind(this); this.updateTargetButtons = this.updateTargetButtons.bind(this);
this.updateComment = this.updateComment.bind(this); this.updateComment = this.updateComment.bind(this);
this.visibilityChange = this.visibilityChange.bind(this); this.visibilityChange = this.visibilityChange.bind(this);
@ -94,7 +95,7 @@ export default class Notes {
this.cleanBinding(); this.cleanBinding();
this.addBinding(); this.addBinding();
this.setPollingInterval(); this.setPollingInterval();
this.setupMainTargetNoteForm(); this.setupMainTargetNoteForm(enableGFM);
this.taskList = new TaskList({ this.taskList = new TaskList({
dataType: 'note', dataType: 'note',
fieldName: 'note', fieldName: 'note',
@ -598,14 +599,14 @@ export default class Notes {
* *
* Sets some hidden fields in the form. * Sets some hidden fields in the form.
*/ */
setupMainTargetNoteForm() { setupMainTargetNoteForm(enableGFM) {
var form; var form;
// find the form // find the form
form = $('.js-new-note-form'); form = $('.js-new-note-form');
// Set a global clone of the form for later cloning // Set a global clone of the form for later cloning
this.formClone = form.clone(); this.formClone = form.clone();
// show the form // show the form
this.setupNoteForm(form); this.setupNoteForm(form, enableGFM);
// fix classes // fix classes
form.removeClass('js-new-note-form'); form.removeClass('js-new-note-form');
form.addClass('js-main-target-form'); form.addClass('js-main-target-form');
@ -633,9 +634,9 @@ export default class Notes {
* setup GFM auto complete * setup GFM auto complete
* show the form * show the form
*/ */
setupNoteForm(form) { setupNoteForm(form, enableGFM = defaultAutocompleteConfig) {
var textarea, key; var textarea, key;
this.glForm = new GLForm(form, this.enableGFM); this.glForm = new GLForm(form, enableGFM);
textarea = form.find('.js-note-text'); textarea = form.find('.js-note-text');
key = [ key = [
'Note', 'Note',

View File

@ -62,7 +62,14 @@
/* /*
GLForm class handles all the toolbar buttons GLForm class handles all the toolbar buttons
*/ */
return new GLForm($(this.$refs['gl-form']), this.enableAutocomplete); return new GLForm($(this.$refs['gl-form']), {
emojis: this.enableAutocomplete,
members: this.enableAutocomplete,
issues: this.enableAutocomplete,
mergeRequests: this.enableAutocomplete,
milestones: this.enableAutocomplete,
labels: this.enableAutocomplete,
});
}, },
beforeDestroy() { beforeDestroy() {
const glForm = $(this.$refs['gl-form']).data('glForm'); const glForm = $(this.$refs['gl-form']).data('glForm');

View File

@ -143,7 +143,14 @@ module NotesHelper
notesIds: @notes.map(&:id), notesIds: @notes.map(&:id),
now: Time.now.to_i, now: Time.now.to_i,
diffView: diff_view, diffView: diff_view,
autocomplete: autocomplete enableGFM: {
emojis: true,
members: autocomplete,
issues: autocomplete,
mergeRequests: autocomplete,
milestones: autocomplete,
labels: autocomplete
}
} }
end end