Commit 5d205bd4 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Add support for read only editor field

HTML is directly injected in the DOM.
CSP should prevent to execute JS/CSS.
parent aa7d0e85
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
<value> <string encoding="cdata"><![CDATA[ <value> <string encoding="cdata"><![CDATA[
CACHE MANIFEST\n CACHE MANIFEST\n
# generated on Wed, 02 Nov 2016 07:00:00 GMT\n # generated on Wed, 03 Nov 2016 16:00:00 GMT\n
# XXX + fonts\n # XXX + fonts\n
# images/ajax-loader.gif\n # images/ajax-loader.gif\n
CACHE:\n CACHE:\n
...@@ -126,6 +126,8 @@ gadget_erp5_field_checkbox.html\n ...@@ -126,6 +126,8 @@ gadget_erp5_field_checkbox.html\n
gadget_erp5_field_checkbox.js\n gadget_erp5_field_checkbox.js\n
gadget_erp5_field_datetime.html\n gadget_erp5_field_datetime.html\n
gadget_erp5_field_datetime.js\n gadget_erp5_field_datetime.js\n
gadget_erp5_field_editor.html\n
gadget_erp5_field_editor.js\n
gadget_erp5_field_email.html\n gadget_erp5_field_email.html\n
gadget_erp5_field_email.js\n gadget_erp5_field_email.js\n
gadget_erp5_field_file.html\n gadget_erp5_field_file.html\n
...@@ -364,7 +366,7 @@ NETWORK:\n ...@@ -364,7 +366,7 @@ NETWORK:\n
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.58961.51801.14387</string> </value> <value> <string>955.2249.38182.56985</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -382,7 +384,7 @@ NETWORK:\n ...@@ -382,7 +384,7 @@ NETWORK:\n
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1478076265.83</float> <float>1478191304.27</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>ERP5 EditorField</title>
<!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<!-- custom script -->
<script src="gadget_erp5_field_editor.js" type="text/javascript"></script>
</head>
<body></body>
</html>
\ No newline at end of file
/*global window, rJS */
/*jslint indent: 2, maxerr: 3 */
(function (window, rJS) {
"use strict";
rJS(window)
.setState({
tag: 'div'
})
.declareMethod('render', function (options) {
var field_json = options.field_json || {},
state_dict = {
value: field_json.value || field_json.default || "",
editable: field_json.editable,
name: field_json.key,
title: field_json.title
};
state_dict.inner_html = state_dict.value;
return this.changeState(state_dict);
})
.onStateChange(function (modification_dict) {
var element = this.element,
gadget = this,
url,
result;
if (modification_dict.hasOwnProperty('editable')) {
if (gadget.state.editable) {
url = 'gadget_html5_textarea.html';
} else {
url = 'gadget_html5_element.html';
}
result = this.declareGadget(url, {scope: 'sub'})
.push(function (input) {
// Clear first to DOM, append after to reduce flickering/manip
while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.appendChild(input.element);
return input;
});
} else {
result = this.getDeclaredGadget('sub');
}
return result
.push(function (input) {
return input.render(gadget.state);
});
})
.declareMethod('getContent', function () {
if (this.state.editable) {
return this.getDeclaredGadget('sub')
.push(function (gadget) {
return gadget.getContent();
});
}
return {};
});
}(window, rJS));
\ No newline at end of file
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
} else if (type === 'ListBox') { } else if (type === 'ListBox') {
field_url = 'gadget_erp5_field_listbox.html'; field_url = 'gadget_erp5_field_listbox.html';
} else if (type === 'EditorField') { } else if (type === 'EditorField') {
field_url = 'gadget_erp5_field_textarea.html'; field_url = 'gadget_erp5_field_editor.html';
// field_url = 'gadget_codemirror.html'; // field_url = 'gadget_codemirror.html';
// sandbox = 'iframe'; // sandbox = 'iframe';
} else if (type === 'GadgetField') { } else if (type === 'GadgetField') {
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.27330.54941.29149</string> </value> <value> <string>954.45675.44850.53452</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1476193992.94</float> <float>1478189239.8</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
.declareMethod('render', function (options) { .declareMethod('render', function (options) {
var state_dict = { var state_dict = {
text_content: options.text_content || "", text_content: options.text_content || "",
inner_html: options.inner_html || "",
tag: options.tag || 'div', tag: options.tag || 'div',
src: options.src, src: options.src,
alt: options.alt alt: options.alt
...@@ -22,7 +23,11 @@ ...@@ -22,7 +23,11 @@
.onStateChange(function () { .onStateChange(function () {
var element = this.element, var element = this.element,
new_element = document.createElement(this.state.tag); new_element = document.createElement(this.state.tag);
if (this.state.text_content) {
new_element.textContent = this.state.text_content; new_element.textContent = this.state.text_content;
} else if (this.state.inner_html) {
new_element.innerHTML = this.state.inner_html;
}
if (this.state.src) { if (this.state.src) {
new_element.setAttribute('src', this.state.src); new_element.setAttribute('src', this.state.src);
} }
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.35866.57616.4915</string> </value> <value> <string>955.2251.20190.28416</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1476691574.42</float> <float>1478189649.02</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
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