lib/assets/javascripts/builder/components/code-mirror/code-mirror-view.js
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);
}
});