Commit 7b1c5363 authored by Cédric Le Ninivin's avatar Cédric Le Ninivin

Update Code Mirror Gadget from ERP5 version

parent 5af3c84b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Codemirror</title>
<script src="../lib/rsvp.js"></script>
<script src="../lib/renderjs.js"></script>
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css" />
<!--script src="../lib/codemirror/mode/&dtml-mode;/&dtml-mode;.js"></script-->
<script src="../lib/codemirror/addon/edit/matchbrackets.js"></script>
<!-- Trailing spaces -->
<script src="../lib/codemirror/addon/edit/trailingspace.js"></script>
<style type="text/css">
.cm-trailingspace {
background-color: gray;
}
body {
padding: 0;
margin: 0;
}
</style>
<!-- Rulers -->
<script src="../lib/codemirror/addon/display/rulers.js"></script>
<!-- Search addons -->
<link rel="stylesheet" href="../lib/codemirror/addon/dialog/dialog.css">
<script src="../lib/codemirror/addon/dialog/dialog.js"></script>
<script src="../lib/codemirror/addon/search/searchcursor.js"></script>
<script src="../lib/codemirror/addon/search/search.js"></script>
<script src="../lib/codemirror/addon/search/jump-to-line.js"></script>
<script src="../lib/codemirror/addon/selection/active-line.js"></script>
<!-- Python autocomplete (Ctrl-Space, see below)
TODO-arnau: Add ERP5 autocompletion?
-->
<link rel="stylesheet" href="../lib/codemirror/addon/hint/show-hint.css" />
<script src="../lib/codemirror/addon/hint/show-hint.js"></script>
<script src="../lib/codemirror/addon/hint/anyword-hint.js"></script>
<!-- Code folding -->
<link rel="stylesheet" href="../lib/codemirror/addon/fold/foldgutter.css" />
<script src="../lib/codemirror/addon/fold/foldcode.js"></script>
<script src="../lib/codemirror/addon/fold/foldgutter.js"></script>
<script src="../lib/codemirror/addon/fold/indent-fold.js"></script>
<script src="../lib/codemirror/addon/fold/comment-fold.js"></script>
<script src="../lib/codemirror/addon/fold/xml-fold.js"></script>
<script src="../lib/codemirror/addon/edit/matchtags.js"></script>
<!-- Merge -->
<link rel="stylesheet" href="../lib/codemirror/addon/merge/merge.css" />
<!-- script src="diff_match_patch/javascript/diff_match_patch_uncompressed.js"></script -->
<script src="../lib/codemirror/addon/merge/merge.js"></script>
<!-- Linter -->
<link rel="stylesheet" href="../lib/codemirror/addon/lint/lint.css" />
<script src="../lib/codemirror/addon/lint/lint.js"></script>
<script type="text/javascript" src="../lib/jshint.js"></script>
<script type="text/javascript" src="../lib/codemirror/addon/lint/javascript-lint.js"></script>
<script type="text/javascript" src="../lib/csslint.js"></script>
<script type="text/javascript" src="../lib/codemirror/addon/lint/css-lint.js"></script>
<script type="text/javascript" src="../lib/codemirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="../lib/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="../lib/codemirror/mode/python/python.js"></script>
<script type="text/javascript" src="../lib/codemirror/mode/css/css.js"></script>
<script type="text/javascript" src="../lib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<link rel="stylesheet" href="../lib/codemirror/addon/display/fullscreen.css" />
<script src="../lib/codemirror/addon/display/fullscreen.js"></script>
<script src="codemirror.gadget.js"></script>
</head>
<body>
<div class="codemirror_gadget"><textarea name="code"></textarea></div>
</body>
</html>
/*jslint nomen: true, indent: 2 */
/*global window, rJS, CodeMirror*/
(function (window, rJS, CodeMirror) {
"use strict";
rJS(window)
.declareAcquiredMethod("notifySubmit", "notifySubmit")
.declareJob("deferNotifySubmit", function () {
// Ensure error will be correctly handled
return this.notifySubmit();
})
.declareAcquiredMethod("notifyChange", "notifyChange")
.declareJob("deferNotifyChange", function () {
// Ensure error will be correctly handled
return this.notifyChange();
})
.ready(function () {
var context = this;
//context.deferNotifyChangeBinded = context.deferNotifyChange.bind(context);
this.editor = CodeMirror.fromTextArea(
this.element.querySelector('textarea'),
{
// mode: mode,
// fullScreen: true,
lineNumbers: true,
styleActiveLine: true,
showTrailingSpace: true,
tabSize: 2,
indentWithTabs: false,
matchBrackets: true,
matchTags: {bothTags: true},
//rulers: [{
// column: 80,
// color: "#bbb",
// lineStyle: "dashed"
//}],
extraKeys: {
"Ctrl-Space": "autocomplete",
"Alt-Space": "autocomplete",
"Ctrl-Q": function (cm) {
cm.foldCode(cm.getCursor());
},
"Tab": function (cm) {
// We want to insert spaces, not tab, and we also want to keep the behaviour of indenting selection.
if (cm.getSelection()) {
return cm.execCommand("defaultTab");
}
var spaces = new Array(cm.getOption("indentUnit") + 1).join(" ");
cm.replaceSelection(spaces);
},
"Ctrl-I": "indentAuto",
"Shift-Tab": "indentLess",
"Ctrl-S": context.deferNotifySubmit.bind(context),
"Ctrl-R": function () {
// Disable page refresh to prevent data lose
return;
}
},
foldGutter: false,
lineWrapping: true,
gutters: ["CodeMirror-lint-markers",
"CodeMirror-linenumbers",
"CodeMirror-foldgutter"],
lint: true
}
);
//this.editor.on('changes', this.deferNotifyChangeBinded);
})
.declareMethod('render', function (options) {
var mode = 'text',
state_dict = {
key: options.key,
editable: options.editable === undefined ? true : options.editable
};
if (options.portal_type === 'Web Page') {
mode = 'htmlmixed';
} else if (options.portal_type === 'Web Script') {
mode = 'javascript';
} else if (options.portal_type === 'Web Style') {
mode = 'css';
} else if ((options.portal_type === 'Python Script') ||
(options.portal_type === 'Test Component') ||
(options.portal_type === 'Extension Component')) {
mode = 'python';
}
state_dict.mode = options.mode || "htmlmixed";
state_dict.value = options.value || "";
this.element.querySelector('.CodeMirror').setAttribute('style', 'height: calc(100vh - 270px);');
this.editor.refresh();
return this.changeState(state_dict);
})
.onStateChange(function (modification_dict) {
if (modification_dict.hasOwnProperty('value')) {
// Do not notify the UI when value is set
this.editor.off('changes', this.deferNotifyChangeBinded);
this.editor.setValue(this.state.value);
this.editor.on('changes', this.deferNotifyChangeBinded);
}
if (modification_dict.hasOwnProperty('mode')) {
this.editor.setOption("mode", this.state.mode);
}
this.editor.refresh();
})
.declareService(function () {
this.editor.refresh();
this.editor.focus();
})
.declareMethod('getContent', function () {
var form_data = {};
if (this.state.editable) {
form_data[this.state.key] = this.editor.getValue();
// Change the value state in place
// This will prevent the gadget to be changed if
// its parent call render with the same value
// (as ERP5 does in case of formulator error)
this.state.value = form_data[this.state.key];
}
return form_data;
});
}(window, rJS, CodeMirror));
\ No newline at end of file
......@@ -49,7 +49,7 @@
</div>
</div>
<div class="container-fluid">
<div data-gadget-url="./gadget_codemirror.html"
<div data-gadget-url="./codemirror.gadget.html"
data-gadget-scope="codeeditor"
data-gadget-sandbox="public"></div>
</div>
......
......@@ -60,9 +60,12 @@
g.props.start_deferred = RSVP.defer();
});
})
.allowPublicAcquisition("editor_saveContent", function () {
.allowPublicAcquisition("notifySubmit", function () {
return saveTextContent(this, undefined);
})
.allowPublicAcquisition("notifyChange", function () {
return ;
})
.declareAcquiredMethod("crib_sw_get", "crib_sw_get")
.declareAcquiredMethod("crib_sw_put", "crib_sw_put")
.declareAcquiredMethod("setSetting", "setSetting")
......
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
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