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 source diff could not be displayed because it is too large. You can view the blob instead.
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