summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/blob_edit/edit_blob.js
diff options
context:
space:
mode:
authorBryce Johnson <bryce@gitlab.com>2017-03-07 19:04:20 -0500
committerBryce Johnson <bryce@gitlab.com>2017-03-22 20:10:54 -0400
commitfaf7865c269044ea49f64858f60a8bd33a715727 (patch)
tree8c9623712de828376729107538a66dd91d982f81 /app/assets/javascripts/blob_edit/edit_blob.js
parent1af9dfb8a8b163d70a8631a6cbb564709d5a3730 (diff)
downloadgitlab-ce-faf7865c269044ea49f64858f60a8bd33a715727.tar.gz
Lightly refactor js files related to file template selectors.
Diffstat (limited to 'app/assets/javascripts/blob_edit/edit_blob.js')
-rw-r--r--app/assets/javascripts/blob_edit/edit_blob.js177
1 files changed, 94 insertions, 83 deletions
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index a1127b9e30e..d3560d5df3b 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -1,88 +1,99 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, camelcase, no-param-reassign, quotes, prefer-template, no-new, comma-dangle, one-var, one-var-declaration-per-line, prefer-arrow-callback, no-else-return, no-unused-vars, max-len */
/* global ace */
-/* global BlobGitignoreSelectors */
-
-(function() {
- var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
- this.EditBlob = (function() {
- function EditBlob(assets_path, ace_mode) {
- if (ace_mode == null) {
- ace_mode = null;
- }
- this.editModeLinkClickHandler = bind(this.editModeLinkClickHandler, this);
- ace.config.set("modePath", assets_path + "/ace");
- ace.config.loadModule("ace/ext/searchbox");
- this.editor = ace.edit("editor");
- this.editor.focus();
- if (ace_mode) {
- this.editor.getSession().setMode("ace/mode/" + ace_mode);
- }
- $('form').submit((function(_this) {
- return function() {
- return $("#file-content").val(_this.editor.getValue());
- };
- // Before a form submission, move the content from the Ace editor into the
- // submitted textarea
- })(this));
- this.initModePanesAndLinks();
- this.initSoftWrap();
- new gl.BlobLicenseSelectors({
- editor: this.editor
- });
+
+import BlobLicenseSelectors from '../blob/template_selectors/blob_license_selectors';
+import BlobGitignoreSelectors from '../blob/template_selectors/blob_gitignore_selectors';
+import BlobCiYamlSelectors from '../blob/template_selectors/blob_ci_yaml_selectors';
+import BlobDockerfileSelectors from '../blob/template_selectors/blob_dockerfile_selectors';
+
+export default class EditBlob {
+ constructor(assetsPath, aceMode) {
+ this.configureAceEditor(aceMode, assetsPath);
+ this.prepFileContentForSubmit();
+ this.initModePanesAndLinks();
+ this.initSoftWrap();
+ this.initFileSelectors();
+ }
+
+ configureAceEditor(aceMode, assetsPath) {
+ ace.config.set('modePath', `${assetsPath}/ace`);
+ ace.config.loadModule('ace/ext/searchbox');
+
+ this.editor = ace.edit('editor');
+ this.editor.focus();
+
+ if (aceMode) {
+ this.editor.getSession().setMode(`ace/mode/${aceMode}`);
+ }
+ }
+
+ prepFileContentForSubmit() {
+ $('form').submit(() => {
+ $('#file-content').val(this.editor.getValue());
+ });
+ }
+
+ initFileSelectors() {
+ this.blobTemplateSelectors = [
+ new BlobLicenseSelectors({
+ editor: this.editor,
+ }),
new BlobGitignoreSelectors({
- editor: this.editor
- });
- new gl.BlobCiYamlSelectors({
- editor: this.editor
- });
- new gl.BlobDockerfileSelectors({
- editor: this.editor
+ editor: this.editor,
+ }),
+ new BlobCiYamlSelectors({
+ editor: this.editor,
+ }),
+ new BlobDockerfileSelectors({
+ editor: this.editor,
+ }),
+ ];
+ }
+
+ 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();
+ return $.post(currentLink.data('preview-url'), {
+ content: this.editor.getValue(),
+ }, (response) => {
+ currentPane.empty().append(response);
+ return currentPane.renderGFM();
});
}
- EditBlob.prototype.initModePanesAndLinks = function() {
- this.$editModePanes = $(".js-edit-mode-pane");
- this.$editModeLinks = $(".js-edit-mode a");
- return this.$editModeLinks.click(this.editModeLinkClickHandler);
- };
-
- EditBlob.prototype.editModeLinkClickHandler = function(event) {
- var currentLink, currentPane, paneId;
- event.preventDefault();
- currentLink = $(event.target);
- paneId = currentLink.attr("href");
- 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();
- return $.post(currentLink.data("preview-url"), {
- content: this.editor.getValue()
- }, function(response) {
- currentPane.empty().append(response);
- return currentPane.renderGFM();
- });
- } else {
- this.$toggleButton.show();
- return this.editor.focus();
- }
- };
-
- EditBlob.prototype.initSoftWrap = function() {
- this.isSoftWrapped = false;
- this.$toggleButton = $('.soft-wrap-toggle');
- this.$toggleButton.on('click', this.toggleSoftWrap.bind(this));
- };
-
- EditBlob.prototype.toggleSoftWrap = function(e) {
- this.isSoftWrapped = !this.isSoftWrapped;
- this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
- this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
- };
-
- return EditBlob;
- })();
-}).call(window);
+ 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);
+ }
+}