366 lines
10 KiB
JavaScript
366 lines
10 KiB
JavaScript
|
var CoreView = require('backbone/core-view');
|
||
|
|
var _ = require('underscore');
|
||
|
|
var CodeMirror = require('codemirror');
|
||
|
|
var ColorPicker = require('./colorpicker.code-mirror');
|
||
|
|
var template = require('./code-mirror.tpl');
|
||
|
|
var bulletTemplate = require('./code-mirror-bullet.tpl');
|
||
|
|
var errorTemplate = require('./code-mirror-error.tpl');
|
||
|
|
var warningTemplate = require('./code-mirror-warning.tpl');
|
||
|
|
var DATA_SERVICES = require('./data-services');
|
||
|
|
|
||
|
|
require('./mode/sql')(CodeMirror);
|
||
|
|
require('./mode/mustache')(CodeMirror);
|
||
|
|
require('./cartocss.code-mirror')(CodeMirror);
|
||
|
|
require('./scroll.code-mirror')(CodeMirror);
|
||
|
|
require('./show-hint.code-mirror')(CodeMirror);
|
||
|
|
require('./hint/custom-list-hint')(CodeMirror);
|
||
|
|
require('./searchcursor.code-mirror')(CodeMirror);
|
||
|
|
require('./placeholder.code-mirror')(CodeMirror);
|
||
|
|
|
||
|
|
var ESCAPE_KEY_CODE = 27;
|
||
|
|
var RETURN_KEY_CODE = 13;
|
||
|
|
|
||
|
|
var NOHINT = [ESCAPE_KEY_CODE, RETURN_KEY_CODE];
|
||
|
|
|
||
|
|
var ADDONS = {
|
||
|
|
'color-picker': ColorPicker
|
||
|
|
};
|
||
|
|
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
module: 'components:code-mirror:code-mirror-view',
|
||
|
|
|
||
|
|
className: 'Editor-content',
|
||
|
|
|
||
|
|
options: {
|
||
|
|
readonly: false,
|
||
|
|
lineNumbers: true,
|
||
|
|
autocompleteChars: 3
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (opts) {
|
||
|
|
if (!opts) throw new Error('options for codemirror are required.');
|
||
|
|
if (!opts.model) throw new Error('Model for codemirror is required.');
|
||
|
|
if (opts.model.get('content') === void 0 &&
|
||
|
|
opts.placeholder === void 0) throw new Error('Content property or placeholder for codemirror is required.');
|
||
|
|
if (!opts.tips) throw new Error('tip messages are required');
|
||
|
|
|
||
|
|
this._autocompleteChars = opts.autocompleteChars || this.options.autocompleteChars;
|
||
|
|
this._mode = opts.mode || 'cartocss';
|
||
|
|
this._addons = opts.addons;
|
||
|
|
this._hints = opts.hints;
|
||
|
|
this._autocompletePrefix = opts.autocompletePrefix;
|
||
|
|
this._autocompleteTriggers = opts.autocompleteTriggers;
|
||
|
|
this._autocompleteSuffix = opts.autocompleteSuffix;
|
||
|
|
this._errorTemplate = opts.errorTemplate || errorTemplate;
|
||
|
|
this._warningTemplate = opts.warningTemplate || warningTemplate;
|
||
|
|
this._warnings = null;
|
||
|
|
this._tips = opts.tips;
|
||
|
|
this._lineWithErrors = [];
|
||
|
|
this._onInputRead = _.bind(this._onKeyUpEditor, this);
|
||
|
|
this._placeholder = opts.placeholder;
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
this.$el.html(
|
||
|
|
template({
|
||
|
|
content: this.model.get('content'),
|
||
|
|
tips: this._tips.join(' '),
|
||
|
|
warnings: this._warnings
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
this._initViews();
|
||
|
|
this._bindEvents();
|
||
|
|
this._showErrors();
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_initViews: function () {
|
||
|
|
var options = _.defaults(_.extend({}, this.model.toJSON()), this.options);
|
||
|
|
|
||
|
|
var isReadOnly = options.readonly;
|
||
|
|
var hasLineNumbers = options.lineNumbers;
|
||
|
|
|
||
|
|
var extraKeys = {
|
||
|
|
'Ctrl-S': this.triggerApplyEvent.bind(this),
|
||
|
|
'Cmd-S': this.triggerApplyEvent.bind(this),
|
||
|
|
'Ctrl-Space': this._completeIfAfterCtrlSpace.bind(this)
|
||
|
|
};
|
||
|
|
|
||
|
|
this.editor = CodeMirror.fromTextArea(this.$('.js-editor').get(0), {
|
||
|
|
lineNumbers: hasLineNumbers,
|
||
|
|
theme: 'material',
|
||
|
|
mode: this._mode,
|
||
|
|
scrollbarStyle: 'simple',
|
||
|
|
lineWrapping: true,
|
||
|
|
readOnly: isReadOnly,
|
||
|
|
extraKeys: extraKeys,
|
||
|
|
placeholder: this._placeholder
|
||
|
|
});
|
||
|
|
this.editor.on('change', _.debounce(this._onCodeMirrorChange.bind(this), 150), this);
|
||
|
|
|
||
|
|
if (!_.isEmpty(this._addons)) {
|
||
|
|
_.each(this._addons, function (addon) {
|
||
|
|
var Class = ADDONS[addon];
|
||
|
|
var addonView = new Class({
|
||
|
|
editor: this.editor
|
||
|
|
});
|
||
|
|
addonView.bind('codeSaved', this.triggerApplyEvent, this);
|
||
|
|
this.$el.append(addonView.el);
|
||
|
|
this.addView(addonView);
|
||
|
|
}, this);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this._hints) {
|
||
|
|
this.editor.on('keyup', this._onInputRead);
|
||
|
|
}
|
||
|
|
|
||
|
|
this._toggleReadOnly();
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
this.editor && this.editor.refresh();
|
||
|
|
}.bind(this), 0);
|
||
|
|
},
|
||
|
|
|
||
|
|
_completeIfAfterCtrlSpace: function (cm) {
|
||
|
|
var autocompletePrefix = this._autocompletePrefix;
|
||
|
|
var opts = {};
|
||
|
|
var cur = cm.getCursor();
|
||
|
|
|
||
|
|
if (autocompletePrefix &&
|
||
|
|
cm.getRange(CodeMirror.Pos(cur.line, cur.ch - autocompletePrefix.length), cur) !== autocompletePrefix) {
|
||
|
|
opts = { autocompletePrefix: autocompletePrefix };
|
||
|
|
}
|
||
|
|
|
||
|
|
return this._completeAfter(cm, opts);
|
||
|
|
},
|
||
|
|
|
||
|
|
updateHints: function (hints) {
|
||
|
|
this._hints = hints;
|
||
|
|
},
|
||
|
|
|
||
|
|
_onKeyUpEditor: function (cm, event) {
|
||
|
|
var code = event.keyCode;
|
||
|
|
var hints = this._hints;
|
||
|
|
var autocompleteChars = this._autocompleteChars - 1;
|
||
|
|
var autocompletePrefix = this._autocompletePrefix;
|
||
|
|
|
||
|
|
if (NOHINT.indexOf(code) === -1) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if (this._autocompleteTimeout) clearTimeout(this._autocompleteTimeout);
|
||
|
|
|
||
|
|
this._autocompleteTimeout = setTimeout(function () {
|
||
|
|
var opts = {};
|
||
|
|
var cur = cm.getCursor();
|
||
|
|
var str = cm.getTokenAt(cur).string;
|
||
|
|
str = str.toLowerCase();
|
||
|
|
|
||
|
|
if (autocompletePrefix &&
|
||
|
|
cm.getRange(CodeMirror.Pos(cur.line, cur.ch - autocompletePrefix.length), cur) !== autocompletePrefix) {
|
||
|
|
opts = { autocompletePrefix: autocompletePrefix };
|
||
|
|
}
|
||
|
|
|
||
|
|
return self._completeAfter(cm, opts, function () {
|
||
|
|
var autocompleteHandler = function (listItem) {
|
||
|
|
// every list can be an array of strings or an array of objects {text, type}
|
||
|
|
var hit = _.isObject(listItem) ? listItem.text : listItem;
|
||
|
|
hit = hit.toLowerCase();
|
||
|
|
return hit.indexOf(str) !== -1;
|
||
|
|
};
|
||
|
|
|
||
|
|
if (str.length > autocompleteChars) {
|
||
|
|
var listHints = _.filter(hints, autocompleteHandler);
|
||
|
|
|
||
|
|
return listHints.length > 0 || autocompletePrefix && autocompletePrefix === str;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, 150);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_onCodeMirrorChange: function () {
|
||
|
|
this.trigger('codeChanged');
|
||
|
|
},
|
||
|
|
|
||
|
|
_completeAfter: function (cm, opts, pred) {
|
||
|
|
if (!pred || pred()) {
|
||
|
|
if (!cm.state.completionActive) {
|
||
|
|
this._showAutocomplete(cm, _.extend({}, opts));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return CodeMirror.Pass;
|
||
|
|
},
|
||
|
|
|
||
|
|
_showAutocomplete: function (cm, opts) {
|
||
|
|
var autocompletePrefix = opts && opts.autocompletePrefix;
|
||
|
|
|
||
|
|
CodeMirror.showHint(cm, CodeMirror.hint['custom-list'], {
|
||
|
|
completeSingle: false,
|
||
|
|
list: this._hints,
|
||
|
|
autocompletePrefix: autocompletePrefix,
|
||
|
|
autocompleteSuffix: this._autocompleteSuffix
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_showWarning: function (warnings) {
|
||
|
|
var $warning = this._getWarning();
|
||
|
|
var hasNodes = $warning.children().length;
|
||
|
|
|
||
|
|
if (warnings && !hasNodes) {
|
||
|
|
$warning.append(this._warningTemplate(warnings));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_hideWarning: function () {
|
||
|
|
var $warning = this._getWarning();
|
||
|
|
var hasNodes = $warning.children().length;
|
||
|
|
|
||
|
|
if (hasNodes) {
|
||
|
|
$warning.children()[0].remove();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_bindEvents: function () {
|
||
|
|
var self = this;
|
||
|
|
this.editor.on('change', function (editor, changed) {
|
||
|
|
var content = self.getContent();
|
||
|
|
var dataService = self._containsDataService(content);
|
||
|
|
|
||
|
|
if (dataService) {
|
||
|
|
self._showWarning('Quota error ' + dataService);
|
||
|
|
} else {
|
||
|
|
self._hideWarning();
|
||
|
|
}
|
||
|
|
|
||
|
|
self.model.set('content', content, { silent: true });
|
||
|
|
});
|
||
|
|
|
||
|
|
this.model.on('change:content', function () {
|
||
|
|
this.setContent(this.model.get('content'));
|
||
|
|
}, this);
|
||
|
|
|
||
|
|
this.model.on('change:readonly', this._toggleReadOnly, this);
|
||
|
|
|
||
|
|
this.model.on('change:errors', function () {
|
||
|
|
this._showErrors();
|
||
|
|
}, this);
|
||
|
|
|
||
|
|
this.model.on('undo redo', function () {
|
||
|
|
this.setContent(this.model.get('content'));
|
||
|
|
}, this);
|
||
|
|
},
|
||
|
|
|
||
|
|
_toggleReadOnly: function () {
|
||
|
|
var isReadOnly = !!this.model.get('readonly');
|
||
|
|
this.editor.setOption('readOnly', isReadOnly);
|
||
|
|
if (isReadOnly) {
|
||
|
|
this.editor.setOption('theme', '');
|
||
|
|
this._getInfo().hide();
|
||
|
|
} else {
|
||
|
|
this.editor.setOption('theme', 'material');
|
||
|
|
this._getInfo().show();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
search: function (query, caseInsensitive) {
|
||
|
|
var cursor = this.editor.getSearchCursor(query, null, true);
|
||
|
|
cursor.find();
|
||
|
|
return cursor.pos;
|
||
|
|
},
|
||
|
|
|
||
|
|
markReadOnly: function (from, to) {
|
||
|
|
var options = {readOnly: true, inclusiveLeft: true};
|
||
|
|
this.editor.markText(from, to, options);
|
||
|
|
|
||
|
|
for (var i = from.line; i <= to.line; i++) {
|
||
|
|
this.editor.addLineClass(i, 'background', 'CodeMirror-readonlyLine');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setContent: function (value) {
|
||
|
|
this.editor.setValue(value);
|
||
|
|
},
|
||
|
|
|
||
|
|
getContent: function () {
|
||
|
|
return this.editor.getValue();
|
||
|
|
},
|
||
|
|
|
||
|
|
triggerApplyEvent: function () {
|
||
|
|
this.trigger('codeSaved', this.getContent(), this);
|
||
|
|
},
|
||
|
|
|
||
|
|
destroyEditor: function () {
|
||
|
|
this.editor.off('change');
|
||
|
|
var el = this.editor.getWrapperElement();
|
||
|
|
var parent = el.parentNode;
|
||
|
|
parent && parent.removeChild(el);
|
||
|
|
this.editor = null;
|
||
|
|
},
|
||
|
|
|
||
|
|
_getInfo: function () {
|
||
|
|
return this.$('.js-console');
|
||
|
|
},
|
||
|
|
|
||
|
|
_getConsole: function () {
|
||
|
|
return this.$('.js-console-error');
|
||
|
|
},
|
||
|
|
|
||
|
|
_getWarning: function () {
|
||
|
|
return this.$('.js-warning');
|
||
|
|
},
|
||
|
|
|
||
|
|
_getCode: function () {
|
||
|
|
return this.$('.CodeMirror-code');
|
||
|
|
},
|
||
|
|
|
||
|
|
_containsDataService: function (content) {
|
||
|
|
return _.find(DATA_SERVICES, function (dataService) {
|
||
|
|
return content.indexOf(dataService) !== -1;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_removeErrors: function () {
|
||
|
|
this._getConsole().empty();
|
||
|
|
_.each(this._lineWithErrors, function ($line) {
|
||
|
|
$line.find('.CodeMirror-bullet').remove();
|
||
|
|
$line.find('.CodeMirror-linenumber').removeClass('has-error');
|
||
|
|
});
|
||
|
|
|
||
|
|
this._lineWithErrors = [];
|
||
|
|
},
|
||
|
|
|
||
|
|
_showErrors: function () {
|
||
|
|
var errors = this.model.get('errors');
|
||
|
|
this._removeErrors();
|
||
|
|
|
||
|
|
if (errors && errors.length > 0) {
|
||
|
|
_.each(errors, function (err) {
|
||
|
|
this._renderError(err);
|
||
|
|
this._renderBullet(err);
|
||
|
|
}, this);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_renderBullet: function (error) {
|
||
|
|
var line = error.line;
|
||
|
|
var $line;
|
||
|
|
if (line) {
|
||
|
|
$line = this._getCode().children().eq(+line - 1);
|
||
|
|
$line.append(bulletTemplate);
|
||
|
|
$line.find('.CodeMirror-linenumber').addClass('has-error');
|
||
|
|
this._lineWithErrors.push($line);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_renderError: function (error) {
|
||
|
|
this._getConsole().append(this._errorTemplate(error));
|
||
|
|
},
|
||
|
|
|
||
|
|
clean: function () {
|
||
|
|
this.destroyEditor();
|
||
|
|
CoreView.prototype.clean.apply(this);
|
||
|
|
}
|
||
|
|
});
|