Commit 333a5642 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Rewrite image field

parent aedf7824
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" /> <meta name="viewport" content="width=device-width, user-scalable=no" />
<title>ERP5 Radiofield</title> <title>ERP5 Imagefield</title>
<!-- renderjs --> <!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script> <script src="rsvp.js" type="text/javascript"></script>
...@@ -13,6 +13,6 @@ ...@@ -13,6 +13,6 @@
</head> </head>
<body> <body>
<img class="image"/> <div data-gadget-url="gadget_html5_element.html" data-gadget-scope="image"></div>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>xiaowu</string> </value> <value> <string>zope</string> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>943.42165.22547.51319</string> </value> <value> <string>954.34618.13218.7202</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -252,7 +252,7 @@ ...@@ -252,7 +252,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1434089608.82</float> <float>1476690889.46</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -4,16 +4,25 @@ ...@@ -4,16 +4,25 @@
"use strict"; "use strict";
rJS(window) rJS(window)
.ready(function (gadget) { .setState({
return gadget.getElement() tag: 'img'
.push(function (element) {
gadget.props = {};
gadget.props.element = element;
});
}) })
.declareMethod('render', function (options) { .declareMethod('render', function (options) {
var image = this.props.element.querySelector(".image"); var field_json = options.field_json || {},
image.src = options.field_json.default; state_dict = {
image.alt = options.field_json.description || options.field_json.title; src: field_json.default,
alt: field_json.description || field_json.title
};
return this.changeState(state_dict);
})
.onStateChange(function (modification_dict) {
var gadget = this;
return this.getDeclaredGadget('image')
.push(function (input) {
return input.render(gadget.state);
});
}); });
}(window, rJS)); }(window, rJS));
\ No newline at end of file
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>944.8309.29615.33689</string> </value> <value> <string>954.42813.65502.45670</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,8 +248,8 @@ ...@@ -248,8 +248,8 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1435904292.92</float> <float>1476691101.85</float>
<string>GMT+2</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
</object> </object>
......
...@@ -12,7 +12,9 @@ ...@@ -12,7 +12,9 @@
.declareMethod('render', function (options) { .declareMethod('render', function (options) {
var state_dict = { var state_dict = {
text_content: options.text_content || "", text_content: options.text_content || "",
tag: options.tag || 'div' tag: options.tag || 'div',
src: options.src,
alt: options.alt
}; };
return this.changeState(state_dict); return this.changeState(state_dict);
}) })
...@@ -21,6 +23,12 @@ ...@@ -21,6 +23,12 @@
var element = this.element, var element = this.element,
new_element = document.createElement(this.state.tag); new_element = document.createElement(this.state.tag);
new_element.textContent = this.state.text_content; new_element.textContent = this.state.text_content;
if (this.state.src) {
new_element.setAttribute('src', this.state.src);
}
if (this.state.alt) {
new_element.setAttribute('alt', this.state.alt);
}
// Clear first to DOM, append after to reduce flickering/manip // Clear first to DOM, append after to reduce flickering/manip
while (element.firstChild) { while (element.firstChild) {
element.removeChild(element.firstChild); element.removeChild(element.firstChild);
......
...@@ -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.34618.13218.7202</string> </value> <value> <string>954.35866.57616.4915</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>1476274252.73</float> <float>1476691574.42</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