debian-mirror-gitlab/app/assets/javascripts/blob/template_selector.js

107 lines
2.9 KiB
JavaScript
Raw Normal View History

2019-12-04 20:38:33 +05:30
/* eslint-disable class-methods-use-this */
2017-08-17 22:00:37 +05:30
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2020-11-24 15:15:51 +05:30
import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
2018-05-09 12:01:36 +05:30
2017-08-17 22:00:37 +05:30
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');
2021-02-22 17:27:13 +05:30
this.$dropdownIcon = $('.dropdown-menu-toggle-icon', dropdown);
this.$loadingIcon = $(
'<div class="gl-spinner gl-spinner-orange gl-spinner-sm gl-absolute gl-top-3 gl-right-3 gl-display-none"></div>',
).insertAfter(this.$dropdownIcon);
2017-08-17 22:00:37 +05:30
this.initDropdown(dropdown, data);
this.listenForFilenameInput();
this.renderMatchedDropdown();
this.initAutosizeUpdateEvent();
}
initDropdown(dropdown, data) {
2020-11-24 15:15:51 +05:30
return initDeprecatedJQueryDropdown($(dropdown), {
2017-08-17 22:00:37 +05:30
data,
filterable: true,
selectable: true,
2021-03-08 18:12:59 +05:30
toggleLabel: (item) => item.name,
2017-08-17 22:00:37 +05:30
search: {
fields: ['name'],
},
2021-03-08 18:12:59 +05:30
clicked: (options) => this.onDropdownClicked(options),
text: (item) => item.name,
2017-08-17 22:00:37 +05:30
});
}
2019-12-21 20:55:43 +05:30
// Subclasses can override this method to conditionally prevent fetching file templates
onDropdownClicked(options) {
this.fetchFileTemplate(options);
}
2017-08-17 22:00:37 +05:30
initAutosizeUpdateEvent() {
this.autosizeUpdateEvent = document.createEvent('Event');
this.autosizeUpdateEvent.initEvent('autosize:update', true, false);
}
listenForFilenameInput() {
2021-03-08 18:12:59 +05:30
return this.$filenameInput.on('keyup blur', (e) => this.renderMatchedDropdown(e));
2017-08-17 22:00:37 +05:30
}
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');
}
fetchFileTemplate(options) {
const { e } = options;
const item = options.selectedObj;
e.preventDefault();
return this.requestFile(item);
}
2019-12-04 20:38:33 +05:30
requestFile() {
2017-08-17 22:00:37 +05:30
// This `requestFile` method is an abstract method that should
// be added by all subclasses.
}
setEditorContent(file, { skipFocus } = {}) {
if (!file) return;
const newValue = file.content;
this.editor.setValue(newValue, 1);
if (!skipFocus) this.editor.focus();
2018-05-09 12:01:36 +05:30
if (this.editor instanceof $) {
2017-08-17 22:00:37 +05:30
this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
2019-12-21 20:55:43 +05:30
this.editor.trigger('input');
2017-08-17 22:00:37 +05:30
}
}
2019-12-21 20:55:43 +05:30
getEditorContent() {
return this.editor.getValue();
}
2017-08-17 22:00:37 +05:30
startLoadingSpinner() {
2021-02-22 17:27:13 +05:30
this.$loadingIcon.removeClass('gl-display-none');
this.$dropdownIcon.addClass('gl-display-none');
2017-08-17 22:00:37 +05:30
}
stopLoadingSpinner() {
2021-02-22 17:27:13 +05:30
this.$loadingIcon.addClass('gl-display-none');
this.$dropdownIcon.removeClass('gl-display-none');
2017-08-17 22:00:37 +05:30
}
}