Commit e4dabb65 by Alexander Zobnin

code-editor: initial directive for rich code editor (ace)

parent 649fe7e4
...@@ -63,6 +63,7 @@ ...@@ -63,6 +63,7 @@
}, },
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"ace-builds": "^1.2.8",
"eventemitter3": "^2.0.2", "eventemitter3": "^2.0.2",
"gaze": "^1.1.2", "gaze": "^1.1.2",
"grunt-jscs": "3.0.1", "grunt-jscs": "3.0.1",
......
///<reference path="../../../headers/common.d.ts" />
// import angular from 'angular';
import coreModule from 'app/core/core_module';
import ace from 'ace';
// Trick for loading additional modules
ace.config.setModuleUrl("ace/theme/solarized_dark", "public/vendor/npm/ace-builds/src-noconflict/theme-solarized_dark.js");
let editorTemplate = `
<div class="gf-code-editor"></div>
`;
function link(scope, elem, attrs) {
let aceElem = elem.get(0);
let codeEditor = ace.edit(aceElem);
let editorSession = codeEditor.getSession();
codeEditor.setTheme("ace/theme/solarized_dark");
codeEditor.setHighlightActiveLine(false);
codeEditor.setShowPrintMargin(false);
codeEditor.setValue(scope.content);
codeEditor.clearSelection();
elem.addClass("gf-code-editor");
let textarea = elem.find("textarea");
textarea.addClass('gf-form-input width-25');
textarea.attr("rows", "4");
editorSession.on('change', e => {
scope.$apply(() => {
let newValue = codeEditor.getValue();
scope.content = newValue;
});
});
}
export function codeEditorDirective() {
return {
restrict: 'E',
template: editorTemplate,
scope: {
content: "="
},
link: link
};
}
coreModule.directive('codeEditor', codeEditorDirective);
...@@ -19,6 +19,7 @@ import "./directives/diff-view"; ...@@ -19,6 +19,7 @@ import "./directives/diff-view";
import './jquery_extended'; import './jquery_extended';
import './partials'; import './partials';
import './components/jsontree/jsontree'; import './components/jsontree/jsontree';
import './components/code_editor/code_editor';
import {grafanaAppDirective} from './components/grafana_app'; import {grafanaAppDirective} from './components/grafana_app';
import {sideMenuDirective} from './components/sidemenu/sidemenu'; import {sideMenuDirective} from './components/sidemenu/sidemenu';
......
...@@ -72,3 +72,8 @@ declare module 'd3' { ...@@ -72,3 +72,8 @@ declare module 'd3' {
var d3: any; var d3: any;
export default d3; export default d3;
} }
declare module 'ace' {
var ace: any;
export default ace;
}
...@@ -33,6 +33,7 @@ System.config({ ...@@ -33,6 +33,7 @@ System.config({
"jquery.flot.gauge": "vendor/flot/jquery.flot.gauge", "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
"d3": "vendor/d3/d3.js", "d3": "vendor/d3/d3.js",
"jquery.flot.dashes": "vendor/flot/jquery.flot.dashes", "jquery.flot.dashes": "vendor/flot/jquery.flot.dashes",
"ace": "vendor/npm/ace-builds/src-noconflict/ace"
}, },
packages: { packages: {
...@@ -73,5 +74,9 @@ System.config({ ...@@ -73,5 +74,9 @@ System.config({
format: 'global', format: 'global',
exports: 'Mousetrap' exports: 'Mousetrap'
}, },
'vendor/npm/ace-builds/src-noconflict/ace.js': {
format: 'global',
exports: 'ace'
}
} }
}); });
...@@ -77,6 +77,7 @@ ...@@ -77,6 +77,7 @@
@import "components/row.scss"; @import "components/row.scss";
@import "components/json_explorer.scss"; @import "components/json_explorer.scss";
@import "components/collapse_box.scss"; @import "components/collapse_box.scss";
@import "components/code_editor.scss";
// PAGES // PAGES
@import "pages/login"; @import "pages/login";
......
.gf-code-editor {
min-height: 2.60rem;
min-width: 20rem;
flex-grow: 1;
margin-right: 0.25rem;
border: 1px solid #333333;
&.ace_editor {
min-height: 6rem;
font-family: monospace;
font-size: 1rem;
}
}
...@@ -19,6 +19,7 @@ module.exports = function(config) { ...@@ -19,6 +19,7 @@ module.exports = function(config) {
cwd: './node_modules', cwd: './node_modules',
expand: true, expand: true,
src: [ src: [
'ace-builds/src-noconflict/**/*',
'eventemitter3/*.js', 'eventemitter3/*.js',
'systemjs/dist/*.js', 'systemjs/dist/*.js',
'es6-promise/**/*', 'es6-promise/**/*',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment