From e7ffd96f8a357f3e2ce151eb61023c5be1ea3197 Mon Sep 17 00:00:00 2001
From: Romain Courteaud <romain@nexedi.com>
Date: Mon, 17 Oct 2016 08:07:33 +0000
Subject: [PATCH] [erp5_web_renderjs_ui] Rewrite image field

---
 .../rjs_gadget_erp5_imagefield_html.html      |  6 ++---
 .../rjs_gadget_erp5_imagefield_html.xml       |  6 ++---
 .../rjs_gadget_erp5_imagefield_js.js          | 27 ++++++++++++-------
 .../rjs_gadget_erp5_imagefield_js.xml         |  6 ++---
 .../rjs_gadget_html5_element_js.js            | 10 ++++++-
 .../rjs_gadget_html5_element_js.xml           |  4 +--
 6 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_html.html b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_html.html
index c83e7eb1a6..ef612e56ce 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_html.html
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_html.html
@@ -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>
@@ -11,8 +11,8 @@
     <!-- custom script -->
     <script src="gadget_erp5_field_image.js" type="text/javascript"></script>
   </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
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_html.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_html.xml
index 93388eed7d..939b0a9d54 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_html.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_html.xml
@@ -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>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_js.js
index ad77e76e71..945f2c6710 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_js.js
@@ -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
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_js.xml
index 088d9482d2..820c9e3bb7 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_imagefield_js.xml
@@ -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>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.js
index c25c4eb1b8..89e77df0e9 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.js
@@ -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);
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.xml
index 420ba01d86..6a9d2d79c5 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.xml
@@ -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>
-- 
2.30.9