BigW Consortium Gitlab

template_selector.js 2.42 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
/* eslint-disable class-methods-use-this, no-unused-vars */

export default class TemplateSelector {
  constructor({ dropdown, data, pattern, wrapper, editor, $input } = {}) {
    this.pattern = pattern;
    this.editor = editor;
    this.dropdown = dropdown;
    this.$dropdownContainer = wrapper;
    this.$filenameInput = $input || $('#file_name');
    this.$dropdownIcon = $('.fa-chevron-down', dropdown);

    this.initDropdown(dropdown, data);
    this.listenForFilenameInput();
    this.renderMatchedDropdown();
    this.initAutosizeUpdateEvent();
  }

  initDropdown(dropdown, data) {
    return $(dropdown).glDropdown({
      data,
      filterable: true,
      selectable: true,
      toggleLabel: item => item.name,
      search: {
        fields: ['name'],
      },
27
      clicked: options => this.fetchFileTemplate(options),
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
      text: item => item.name,
    });
  }

  initAutosizeUpdateEvent() {
    this.autosizeUpdateEvent = document.createEvent('Event');
    this.autosizeUpdateEvent.initEvent('autosize:update', true, false);
  }

  listenForFilenameInput() {
    return this.$filenameInput.on('keyup blur', e => this.renderMatchedDropdown(e));
  }

  renderMatchedDropdown() {
    if (!this.$filenameInput.length) {
      return null;
    }

    const filenameMatches = this.pattern.test(this.$filenameInput.val().trim());

    if (!filenameMatches) {
      return this.$dropdownContainer.addClass('hidden');
    }
    return this.$dropdownContainer.removeClass('hidden');
  }

54 55 56 57
  fetchFileTemplate(options) {
    const { e } = options;
    const item = options.selectedObj;

58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
    e.preventDefault();
    return this.requestFile(item);
  }

  requestFile(item) {
    // This `requestFile` method is an abstract method that should
    // be added by all subclasses.
  }

  // To be implemented on the extending class
  // e.g. Api.gitlabCiYml(query.name, file => this.setEditorContent(file));

  setEditorContent(file, { skipFocus } = {}) {
    if (!file) return;

    const newValue = file.content;

    this.editor.setValue(newValue, 1);

    if (!skipFocus) this.editor.focus();

    if (this.editor instanceof jQuery) {
      this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
    }
  }

  startLoadingSpinner() {
    this.$dropdownIcon
      .addClass('fa-spinner fa-spin')
      .removeClass('fa-chevron-down');
  }

  stopLoadingSpinner() {
    this.$dropdownIcon
      .addClass('fa-chevron-down')
      .removeClass('fa-spinner fa-spin');
  }
}