[erp5_web_renderjs_ui] Use onStateChange method

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.js

@@ -93,7 +93,7 @@
       });
     })
 
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var i,
         erp5_document = this.state.erp5_document,
         form_definition = this.state.form_definition,

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.27320.12986.51029</string> </value>
+                <value> <string>954.27330.54941.29149</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475762090.29</float>
+                        <float>1476193992.94</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js

@@ -32,7 +32,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var gadget = this;
       if (modification_dict.hasOwnProperty('label_text')) {
         this.state.label_text_element.textContent = this.state.label_text;

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.25940.33315.42837</string> </value>
+                <value> <string>954.25941.22930.26914</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475678720.94</float>
+                        <float>1476194017.94</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js

@@ -446,7 +446,7 @@
     .allowPublicAcquisition("renderApplication", function (param_list) {
       return this.render.apply(this, param_list);
     })
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var gadget = this,
         route_result = gadget.state;
       if (modification_dict.hasOwnProperty('url')) {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.23080.38606.35464</string> </value>
+                <value> <string>954.34539.19221.9523</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475507095.45</float>
+                        <float>1476198512.38</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.js

@@ -42,7 +42,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var form_gadget = this,
         icon,
         selector = form_gadget.element.querySelector("h3"),

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.5593.38130.32665</string> </value>
+                <value> <string>954.5594.14865.13670</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1474544293.54</float>
+                        <float>1476194100.02</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.js

@@ -33,7 +33,7 @@
         });
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var form_gadget = this;
 
       // render the erp5 form

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.5675.50023.58965</string> </value>
+                <value> <string>954.34605.28227.45721</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1474549231.17</float>
+                        <float>1476198578.1</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.js

@@ -43,7 +43,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var form_gadget = this;
 
       // render the erp5 form

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.25820.35404.6229</string> </value>
+                <value> <string>954.25821.46431.41233</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475671542.46</float>
+                        <float>1476194167.31</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_js.js

@@ -25,7 +25,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var gadget = this;
 
       // render the erp5 form

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_js.xml

@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1474546509.43</float>
+                        <float>1476194151.17</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_formpage_js.js

@@ -88,7 +88,7 @@
             });
         });
     })
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var queue,
         gadget = this,
         options = this.state.options,

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_formpage_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.15904.46164.40277</string> </value>
+                <value> <string>954.23027.11225.50944</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475503870.23</float>
+                        <float>1476194208.6</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_report_view_js.js

@@ -69,7 +69,7 @@
         form_gadget_url: form_gadget_url
       });
     })
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var gadget = this,
         form_gadget,
         section_container_element = document.createElement('div'),

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_report_view_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.25917.62680.11605</string> </value>
+                <value> <string>954.25919.63902.23893</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475677438.49</float>
+                        <float>1476194238.38</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.js

@@ -15,7 +15,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var gadget = this;
       return gadget.getDeclaredGadget('input')
         .push(function (input_gadget) {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.17331.42805.29064</string> </value>
+                <value> <string>954.17336.1268.55074</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475248801.1</float>
+                        <float>1476194269.08</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_stringfield_js.js

-/*global window, rJS, RSVP, loopEventListener, document */
+/*global window, rJS */
 /*jslint indent: 2, maxerr: 3 */
-(function (window, rJS, RSVP, loopEventListener, document) {
+(function (window, rJS) {
   "use strict";
 
   rJS(window)
-    .ready(function (gadget) {
-      return gadget.getElement()
-        .push(function (element) {
-          gadget.props = {};
-          gadget.element = element;
-        });
-    })
-
-    .declareAcquiredMethod("notifyValid", "notifyValid")
-    .declareAcquiredMethod("notifyInvalid", "notifyInvalid")
-    .declareAcquiredMethod("notifyChange", "notifyChange")
-    .declareMethod('getTextContent', function () {
-      return this.props.value;
+    .setState({
+      tag: 'p'
     })
     .declareMethod('render', function (options) {
-      var element,
-        field_json = options.field_json || {},
-        created = false;
-      this.props.value = field_json.value || field_json.default || "";
-      this.props.editable = field_json.editable;
-      if (field_json.editable) {
-        element = this.element.querySelector('input');
-        if (element === null) {
-          element = document.createElement('input');
-          element.setAttribute("type", "text");
-          created = true;
-        }
-        element.setAttribute('value', this.props.value);
-        element.setAttribute('name', field_json.key);
-        element.setAttribute('title', field_json.title);
-        if (field_json.required === 1) {
-          element.setAttribute('required', 'required');
-        } else {
-          element.removeAttribute('required');
-        }
-        if (field_json.disabled) {
-          element.setAttribute("disabled", "disabled");
+      var field_json = options.field_json || {},
+        state_dict = {
+          value: field_json.value || field_json.default || "",
+          editable: field_json.editable,
+          required: field_json.required,
+          name: field_json.key,
+          title: field_json.title
+        };
+      state_dict.text_content = 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_input.html';
         } else {
-          element.removeAttribute('disabled');
+          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 {
-        element = this.element.querySelector('p');
-        if (element === null) {
-          element = document.createElement("p");
-          element.setAttribute("class", "ui-content-non-editable");
-          created = true;
-        }
-        element.textContent = this.props.value;
-      }
-      if (created) {
-        this.element.innerHTML = '';
-        this.element.appendChild(element);
+        result = this.getDeclaredGadget('sub');
       }
+      return result
+        .push(function (input) {
+          return input.render(gadget.state);
+        });
+
     })
 
     .declareMethod('getContent', function () {
-      var input,
-        result = {};
-      if (this.props.editable) {
-        input = this.element.querySelector('input');
-        result[input.getAttribute('name')] = input.value;
+      if (this.state.editable) {
+        return this.getDeclaredGadget('sub')
+          .push(function (gadget) {
+            return gadget.getContent();
+          });
       }
-      return result;
+      return {};
     })
 
     .declareMethod('checkValidity', function () {
-      var result;
-      if (!this.props.editable) {
-        return true;
-      }
-      result = this.element.querySelector('input').checkValidity();
-      if (result) {
-        return this.notifyValid()
-          .push(function () {
-            return result;
+      if (this.state.editable) {
+        return this.getDeclaredGadget('sub')
+          .push(function (gadget) {
+            return gadget.checkValidity();
           });
       }
-      return result;
-    })
-
-    .declareService(function () {
-      ////////////////////////////////////
-      // Check field validity when the value changes
-      ////////////////////////////////////
-      var field_gadget = this;
-      if (!field_gadget.props.editable) {
-        return;
-      }
-
-      function notifyChange() {
-        return RSVP.all([
-          field_gadget.checkValidity(),
-          field_gadget.notifyChange()
-        ]);
-      }
-
-      // Listen to input change
-      return loopEventListener(
-        field_gadget.element.querySelector('input'),
-        'change',
-        false,
-        notifyChange
-      );
-    })
-
-    .declareService(function () {
-      ////////////////////////////////////
-      // Inform when the field input is invalid
-      ////////////////////////////////////
-      var field_gadget = this;
-      if (!field_gadget.props.editable) {
-        return;
-      }
-      function notifyInvalid(evt) {
-        return field_gadget.notifyInvalid(evt.target.validationMessage);
-      }
-
-      // Listen to input change
-      return loopEventListener(
-        field_gadget.element.querySelector('input'),
-        'invalid',
-        false,
-        notifyInvalid
-      );
+      return true;
     });
 
-}(window, rJS, RSVP, loopEventListener, document));
+}(window, rJS));
\ No newline at end of file

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_stringfield_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>953.643.50676.9335</string> </value>
+                <value> <string>954.34570.5720.55227</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1470315124.05</float>
+                        <float>1476197972.06</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.js

@@ -19,7 +19,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var element = this.element,
         gadget = this,
         url,

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.xml

@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.15897.25014.42086</string> </value>
+                <value> <string>954.34595.10317.3037</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475764759.74</float>
+                        <float>1476198249.72</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.js

@@ -17,7 +17,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var element = this.element,
         new_element = document.createElement(this.state.tag);
       new_element.textContent = this.state.text_content;

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.22958.17507.4778</string> </value>
+                <value> <string>954.22958.59420.56644</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475499774.36</float>
+                        <float>1476194334.9</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.js

@@ -25,7 +25,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var textarea = this.element.querySelector('input');
       textarea.setAttribute('value', this.state.value);
       textarea.value = this.state.value;
@@ -99,6 +99,6 @@
     .onEvent('invalid', function (evt) {
       // invalid event does not bubble
       return this.notifyInvalid(evt.target.validationMessage);
-    }, true, true);
+    }, true, false);
 
 }(window, rJS, RSVP));
\ No newline at end of file

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.22957.21991.6673</string> </value>
+                <value> <string>954.34535.18115.52548</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475511138.87</float>
+                        <float>1476198804.5</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.js

@@ -31,7 +31,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var textarea = this.element.querySelector('textarea');
       // textarea.setAttribute('value', this.state.value);
       textarea.value = this.state.value;

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.27370.32393.51592</string> </value>
+                <value> <string>954.27455.2029.68</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475769541.61</float>
+                        <float>1476194310.55</float>
                         <string>UTC</string>
                       </tuple>
                     </state>