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

252 lines
6.8 KiB
JavaScript
Raw Normal View History

2020-01-01 13:55:28 +05:30
import $ from 'jquery';
2018-12-05 23:21:45 +05:30
import Api from '~/api';
2018-05-09 12:01:36 +05:30
2018-03-17 18:26:18 +05:30
import Flash from '../flash';
2017-08-17 22:00:37 +05:30
import FileTemplateTypeSelector from './template_selectors/type_selector';
import BlobCiYamlSelector from './template_selectors/ci_yaml_selector';
import DockerfileSelector from './template_selectors/dockerfile_selector';
import GitignoreSelector from './template_selectors/gitignore_selector';
import LicenseSelector from './template_selectors/license_selector';
2019-12-21 20:55:43 +05:30
import toast from '~/vue_shared/plugins/global_toast';
import { __ } from '~/locale';
2020-04-08 14:13:33 +05:30
import initPopover from '~/blob/suggest_gitlab_ci_yml';
2017-08-17 22:00:37 +05:30
export default class FileTemplateMediator {
2018-12-05 23:21:45 +05:30
constructor({ editor, currentAction, projectId }) {
2017-08-17 22:00:37 +05:30
this.editor = editor;
this.currentAction = currentAction;
2018-12-05 23:21:45 +05:30
this.projectId = projectId;
2017-08-17 22:00:37 +05:30
this.initTemplateSelectors();
this.initTemplateTypeSelector();
this.initDomElements();
this.initDropdowns();
this.initPageEvents();
2019-12-21 20:55:43 +05:30
this.cacheFileContents();
2017-08-17 22:00:37 +05:30
}
initTemplateSelectors() {
// Order dictates template type dropdown item order
this.templateSelectors = [
GitignoreSelector,
BlobCiYamlSelector,
DockerfileSelector,
LicenseSelector,
].map(TemplateSelectorClass => new TemplateSelectorClass({ mediator: this }));
}
initTemplateTypeSelector() {
this.typeSelector = new FileTemplateTypeSelector({
mediator: this,
2018-12-05 23:21:45 +05:30
dropdownData: this.templateSelectors.map(templateSelector => {
const cfg = templateSelector.config;
return {
name: cfg.name,
key: cfg.key,
2019-12-21 20:55:43 +05:30
id: cfg.key,
2018-12-05 23:21:45 +05:30
};
}),
2017-08-17 22:00:37 +05:30
});
}
initDomElements() {
const $templatesMenu = $('.template-selectors-menu');
const $undoMenu = $templatesMenu.find('.template-selectors-undo-menu');
const $fileEditor = $('.file-editor');
this.$templatesMenu = $templatesMenu;
this.$undoMenu = $undoMenu;
this.$undoBtn = $undoMenu.find('button');
this.$templateSelectors = $templatesMenu.find('.template-selector-dropdowns-wrap');
this.$filenameInput = $fileEditor.find('.js-file-path-name-input');
this.$fileContent = $fileEditor.find('#file-content');
this.$commitForm = $fileEditor.find('form');
this.$navLinks = $fileEditor.find('.nav-links');
2019-12-21 20:55:43 +05:30
this.$templateTypes = this.$templateSelectors.find('.template-type-selector');
2017-08-17 22:00:37 +05:30
}
initDropdowns() {
if (this.currentAction === 'create') {
this.typeSelector.show();
} else {
this.hideTemplateSelectorMenu();
}
this.displayMatchedTemplateSelector();
}
initPageEvents() {
this.listenForFilenameInput();
this.prepFileContentForSubmit();
this.listenForPreviewMode();
}
listenForFilenameInput() {
this.$filenameInput.on('keyup blur', () => {
this.displayMatchedTemplateSelector();
});
}
prepFileContentForSubmit() {
this.$commitForm.submit(() => {
this.$fileContent.val(this.editor.getValue());
});
}
listenForPreviewMode() {
2018-12-05 23:21:45 +05:30
this.$navLinks.on('click', 'a', e => {
2017-08-17 22:00:37 +05:30
const urlPieces = e.target.href.split('#');
const hash = urlPieces[1];
if (hash === 'preview') {
this.hideTemplateSelectorMenu();
2018-10-15 14:42:47 +05:30
} else if (hash === 'editor' && !this.typeSelector.isHidden()) {
2017-08-17 22:00:37 +05:30
this.showTemplateSelectorMenu();
}
});
}
selectTemplateType(item, e) {
if (e) {
e.preventDefault();
}
2018-12-05 23:21:45 +05:30
this.templateSelectors.forEach(selector => {
2017-08-17 22:00:37 +05:30
if (selector.config.key === item.key) {
selector.show();
} else {
selector.hide();
}
});
2020-03-13 15:44:24 +05:30
this.setTypeSelectorToggleText(item.name);
2017-08-17 22:00:37 +05:30
this.cacheToggleText();
}
selectTemplateTypeOptions(options) {
this.selectTemplateType(options.selectedObj, options.e);
}
selectTemplateFile(selector, query, data) {
2019-12-21 20:55:43 +05:30
const self = this;
2019-12-26 22:10:19 +05:30
const { name } = selector.config;
2020-04-08 14:13:33 +05:30
const suggestCommitChanges = document.querySelector('.js-suggest-gitlab-ci-yml-commit-changes');
2019-12-21 20:55:43 +05:30
2017-08-17 22:00:37 +05:30
selector.renderLoading();
2019-12-21 20:55:43 +05:30
2018-12-05 23:21:45 +05:30
this.fetchFileTemplate(selector.config.type, query, data)
.then(file => {
2017-08-17 22:00:37 +05:30
this.setEditorContent(file);
2019-12-26 22:10:19 +05:30
this.setFilename(name);
2017-08-17 22:00:37 +05:30
selector.renderLoaded();
2019-12-26 22:10:19 +05:30
this.typeSelector.setToggleText(name);
2019-12-21 20:55:43 +05:30
toast(__(`${query} template applied`), {
action: {
text: __('Undo'),
onClick: (e, toastObj) => {
self.restoreFromCache();
toastObj.goAway(0);
},
},
});
2020-04-08 14:13:33 +05:30
if (suggestCommitChanges) {
initPopover(suggestCommitChanges);
}
2017-08-17 22:00:37 +05:30
})
.catch(err => new Flash(`An error occurred while fetching the template: ${err}`));
}
displayMatchedTemplateSelector() {
const currentInput = this.getFilename();
2018-12-05 23:21:45 +05:30
this.templateSelectors.forEach(selector => {
2017-08-17 22:00:37 +05:30
const match = selector.config.pattern.test(currentInput);
if (match) {
this.typeSelector.show();
this.selectTemplateType(selector.config);
this.showTemplateSelectorMenu();
}
});
}
2018-12-05 23:21:45 +05:30
fetchFileTemplate(type, query, data = {}) {
return new Promise(resolve => {
2017-08-17 22:00:37 +05:30
const resolveFile = file => resolve(file);
2018-12-05 23:21:45 +05:30
Api.projectTemplate(this.projectId, type, query, data, resolveFile);
2017-08-17 22:00:37 +05:30
});
}
setEditorContent(file) {
if (!file && file !== '') return;
const newValue = file.content || file;
this.editor.setValue(newValue, 1);
this.editor.focus();
this.editor.navigateFileStart();
}
findTemplateSelectorByKey(key) {
return this.templateSelectors.find(selector => selector.config.key === key);
}
hideTemplateSelectorMenu() {
this.$templatesMenu.hide();
}
showTemplateSelectorMenu() {
this.$templatesMenu.show();
}
cacheToggleText() {
this.cachedToggleText = this.getTemplateSelectorToggleText();
}
cacheFileContents() {
this.cachedContent = this.editor.getValue();
this.cachedFilename = this.getFilename();
}
restoreFromCache() {
this.setEditorContent(this.cachedContent);
this.setFilename(this.cachedFilename);
this.setTemplateSelectorToggleText();
2019-12-21 20:55:43 +05:30
this.setTypeSelectorToggleText(__('Select a template type'));
2017-08-17 22:00:37 +05:30
}
getTemplateSelectorToggleText() {
return this.$templateSelectors
.find('.js-template-selector-wrap:visible .dropdown-toggle-text')
.text();
}
setTemplateSelectorToggleText() {
return this.$templateSelectors
.find('.js-template-selector-wrap:visible .dropdown-toggle-text')
.text(this.cachedToggleText);
}
getTypeSelectorToggleText() {
return this.typeSelector.getToggleText();
}
2019-12-21 20:55:43 +05:30
setTypeSelectorToggleText(text) {
this.typeSelector.setToggleText(text);
}
2017-08-17 22:00:37 +05:30
getFilename() {
return this.$filenameInput.val();
}
setFilename(name) {
2018-03-17 18:26:18 +05:30
this.$filenameInput.val(name).trigger('change');
2017-08-17 22:00:37 +05:30
}
getSelected() {
return this.templateSelectors.find(selector => selector.selected);
}
}