debian-mirror-gitlab/app/assets/javascripts/blob_edit/edit_blob.js

104 lines
2.8 KiB
JavaScript
Raw Normal View History

2017-08-17 22:00:37 +05:30
/* global ace */
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2018-03-17 18:26:18 +05:30
import axios from '~/lib/utils/axios_utils';
import createFlash from '~/flash';
import { __ } from '~/locale';
2017-08-17 22:00:37 +05:30
import TemplateSelectorMediator from '../blob/file_template_mediator';
2018-12-13 13:39:08 +05:30
import getModeByFileExtension from '~/lib/utils/ace_utils';
2019-02-15 15:39:39 +05:30
import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
2017-08-17 22:00:37 +05:30
export default class EditBlob {
2019-02-15 15:39:39 +05:30
// The options object has:
// assetsPath, filePath, currentAction, projectId, isMarkdown
constructor(options) {
this.options = options;
this.configureAceEditor();
2017-08-17 22:00:37 +05:30
this.initModePanesAndLinks();
this.initSoftWrap();
2019-02-15 15:39:39 +05:30
this.initFileSelectors();
2017-08-17 22:00:37 +05:30
}
2019-02-15 15:39:39 +05:30
configureAceEditor() {
const { filePath, assetsPath, isMarkdown } = this.options;
2017-08-17 22:00:37 +05:30
ace.config.set('modePath', `${assetsPath}/ace`);
ace.config.loadModule('ace/ext/searchbox');
2018-12-13 13:39:08 +05:30
ace.config.loadModule('ace/ext/modelist');
2017-08-17 22:00:37 +05:30
this.editor = ace.edit('editor');
2019-02-15 15:39:39 +05:30
if (isMarkdown) {
addEditorMarkdownListeners(this.editor);
}
2017-08-17 22:00:37 +05:30
// This prevents warnings re: automatic scrolling being logged
this.editor.$blockScrolling = Infinity;
this.editor.focus();
2018-12-13 13:39:08 +05:30
if (filePath) {
this.editor.getSession().setMode(getModeByFileExtension(filePath));
2017-08-17 22:00:37 +05:30
}
}
2019-02-15 15:39:39 +05:30
initFileSelectors() {
const { currentAction, projectId } = this.options;
2017-08-17 22:00:37 +05:30
this.fileTemplateMediator = new TemplateSelectorMediator({
currentAction,
editor: this.editor,
2018-12-05 23:21:45 +05:30
projectId,
2017-08-17 22:00:37 +05:30
});
}
initModePanesAndLinks() {
this.$editModePanes = $('.js-edit-mode-pane');
this.$editModeLinks = $('.js-edit-mode a');
this.$editModeLinks.on('click', e => this.editModeLinkClickHandler(e));
}
editModeLinkClickHandler(e) {
e.preventDefault();
const currentLink = $(e.target);
const paneId = currentLink.attr('href');
const currentPane = this.$editModePanes.filter(paneId);
this.$editModeLinks.parent().removeClass('active hover');
currentLink.parent().addClass('active hover');
this.$editModePanes.hide();
currentPane.fadeIn(200);
if (paneId === '#preview') {
this.$toggleButton.hide();
2018-12-05 23:21:45 +05:30
axios
.post(currentLink.data('previewUrl'), {
content: this.editor.getValue(),
})
.then(({ data }) => {
currentPane.empty().append(data);
currentPane.renderGFM();
})
.catch(() => createFlash(__('An error occurred previewing the blob')));
2016-09-13 17:45:13 +05:30
}
2017-08-17 22:00:37 +05:30
this.$toggleButton.show();
return this.editor.focus();
}
initSoftWrap() {
this.isSoftWrapped = false;
this.$toggleButton = $('.soft-wrap-toggle');
this.$toggleButton.on('click', () => this.toggleSoftWrap());
}
toggleSoftWrap() {
this.isSoftWrapped = !this.isSoftWrapped;
this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
}
}