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

[erp5_web_renderjs_ui] Rewrite image field

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