BigW Consortium Gitlab

gl_form.js 3.1 KB
Newer Older
1 2 3 4 5
/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-new, max-len */
/* global GitLab */
/* global DropzoneInput */
/* global autosize */

6 7
import GfmAutoComplete from './gfm_auto_complete';

8
window.gl = window.gl || {};
9

10
function GLForm(form, enableGFM = false) {
11 12
  this.form = form;
  this.textarea = this.form.find('textarea.js-gfm-input');
13
  this.enableGFM = enableGFM;
14 15 16 17 18 19
  // Before we start, we should clean up any previous data for this form
  this.destroy();
  // Setup the form
  this.setupForm();
  this.form.data('gl-form', this);
}
20

21 22 23
GLForm.prototype.destroy = function() {
  // Clean form listeners
  this.clearEventListeners();
24 25 26
  if (this.autoComplete) {
    this.autoComplete.destroy();
  }
27 28
  return this.form.data('gl-form', null);
};
29

30 31 32 33 34 35 36 37
GLForm.prototype.setupForm = function() {
  var isNewForm;
  isNewForm = this.form.is(':not(.gfm-form)');
  this.form.removeClass('js-new-note-form');
  if (isNewForm) {
    this.form.find('.div-dropzone').remove();
    this.form.addClass('gfm-form');
    // remove notify commit author checkbox for non-commit notes
38
    gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion'));
39 40
    this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
    this.autoComplete.setup(this.form.find('.js-gfm-input'), {
41 42 43 44 45 46 47
      emojis: true,
      members: this.enableGFM,
      issues: this.enableGFM,
      milestones: this.enableGFM,
      mergeRequests: this.enableGFM,
      labels: this.enableGFM,
    });
48 49 50
    new DropzoneInput(this.form);
    autosize(this.textarea);
  }
51 52
  // form and textarea event listeners
  this.addEventListeners();
53 54 55 56 57 58
  gl.text.init(this.form);
  // hide discard button
  this.form.find('.js-note-discard').hide();
  this.form.show();
  if (this.isAutosizeable) this.setupAutosize();
};
59

60 61 62
GLForm.prototype.setupAutosize = function () {
  this.textarea.off('autosize:resized')
    .on('autosize:resized', this.setHeightData.bind(this));
63

64 65
  this.textarea.off('mouseup.autosize')
    .on('mouseup.autosize', this.destroyAutosize.bind(this));
66

67 68 69 70 71
  setTimeout(() => {
    autosize(this.textarea);
    this.textarea.css('resize', 'vertical');
  }, 0);
};
72

73 74 75
GLForm.prototype.setHeightData = function () {
  this.textarea.data('height', this.textarea.outerHeight());
};
76

77 78
GLForm.prototype.destroyAutosize = function () {
  const outerHeight = this.textarea.outerHeight();
79

80
  if (this.textarea.data('height') === outerHeight) return;
81

82
  autosize.destroy(this.textarea);
83

84 85 86 87
  this.textarea.data('height', outerHeight);
  this.textarea.outerHeight(outerHeight);
  this.textarea.css('max-height', window.outerHeight);
};
88

89 90 91 92 93
GLForm.prototype.clearEventListeners = function() {
  this.textarea.off('focus');
  this.textarea.off('blur');
  return gl.text.removeListeners(this.form);
};
94

95 96 97 98 99 100 101 102
GLForm.prototype.addEventListeners = function() {
  this.textarea.on('focus', function() {
    return $(this).closest('.md-area').addClass('is-focused');
  });
  return this.textarea.on('blur', function() {
    return $(this).closest('.md-area').removeClass('is-focused');
  });
};
103

104
window.gl.GLForm = GLForm;