[renderjs_ui] LinesField implementation

c026778f · Tomáš Peterka · Tomáš Peterka · 7bb9396b · c026778f · c026778f
Commit c026778f authored Aug 29, 2017 by Tomáš Peterka Committed by Tomáš Peterka Sep 01, 2017
6 changed files
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_linesfield_html.html
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_linesfield_html.html
+<!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 Linesfield</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_lines.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+  </body>
+</html>
\ No newline at end of file
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_linesfield_html.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_linesfield_html.xml
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_linesfield_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_linesfield_js.js
+/*global window, rJS */
+/*jslint indent: 2, maxerr: 3 */
+(function (window, rJS) {
+  "use strict";
+
+  function listToNewlines(list) {
+    if (list.constructor === Array) {return list.join("\n"); }
+    return list;
+  }
+
+  function listToBR(list) {
+    if (list.constructor === Array) {return list.join("<br/>\n"); }
+    return list;
+  }
+
+  rJS(window)
+
+    .declareMethod('render', function (options) {
+      return this.changeState(options.field_json);
+    })
+
+    .onStateChange(function (modification_dict) {
+      var gadget = this,
+        url,
+        value;
+
+      if (modification_dict.hasOwnProperty('editable')) {
+        if (gadget.state.editable) {
+          url = 'gadget_html5_textarea.html';
+          value = listToNewlines(gadget.state.value || gadget.state.default || []);
+        } else {
+          url = 'gadget_html5_element.html';
+          value = listToBR(gadget.state.value || gadget.state.default || []);
+        }
+        return this.declareGadget(url, {scope: 'sub'})
+          .push(function (sub_gadget) {
+            // Clear first to DOM, append after to reduce flickering/manip
+            while (gadget.element.firstChild) {
+              gadget.element.removeChild(gadget.element.firstChild);
+            }
+            gadget.element.appendChild(sub_gadget.element);
+            // Use full-blown render when the widget is new
+            return sub_gadget.render({
+              value: value,
+              name: gadget.state.key,
+              editable: gadget.state.editable,
+              required: gadget.state.required,
+              title: gadget.state.title,
+              hidden: gadget.state.hidden
+            });
+          });
+      }
+      
+      return gadget.getDeclaredGadget('sub')
+        .push(function (input) {
+          if (modification_dict.hasOwnProperty("value")) {
+            if (gadget.state.editable) {
+              modification_dict.value = listToNewlines(modification_dict.value);
+            } else {
+              modification_dict.value = listToBR(modification_dict.value);
+            }
+          }
+          // when we only receive changes we can simply pass (minimaly modified) modification dictionary
+          input.render(modification_dict); 
+        });
+    })
+
+    .declareMethod('getContent', function () {
+      var gadget = this;
+      return gadget.getDeclaredGadget('sub')
+        .push(function (sub_gadget) {
+          return sub_gadget.getContent();
+        });
+    })
+
+    .declareMethod('checkValidity', function () {
+      if (this.state.editable) {
+        return this.getDeclaredGadget('sub')
+          .push(function (gadget) {
+            return gadget.checkValidity();
+          });
+      }
+      return true;
+    });
+
+}(window, rJS));
\ No newline at end of file
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_linesfield_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_linesfield_js.xml
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.js
@@ -21,24 +21,24 @@
    })

    .declareMethod('render', function (options) {
-      var state_dict = {
-          value: options.value,
-          editable: options.editable,
-          name: options.name,
-          title: options.title,
-          hidden: options.hidden
-        };
-      return this.changeState(state_dict);
+      return this.changeState(options);
    })

-    .onStateChange(function () {
+    .onStateChange(function (modification_dict) {
      var textarea = this.element.querySelector('textarea');
-      // textarea.setAttribute('value', this.state.value);
-      textarea.value = this.state.value;
-      textarea.setAttribute('name', this.state.name);
-      textarea.setAttribute('id', this.state.name);

-      textarea.setAttribute('title', this.state.title);
+      if (modification_dict.hasOwnProperty("value")) {
+        textarea.value = modification_dict.value;
+      }
+
+      if (modification_dict.hasOwnProperty("name")) {
+        textarea.setAttribute('name', modification_dict.name);
+        textarea.setAttribute('id', modification_dict.name);
+      }
+
+      if (modification_dict.hasOwnProperty("title")) {
+        textarea.setAttribute('title', modification_dict.title);
+      }

      if (this.state.required) {
        textarea.setAttribute('required', 'required');

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.xml
+++ b/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>956.58742.58866.48708</string> </value>
+                <value> <string>961.46307.16912.53794</string> </value>
            </item>
            <item>
                <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                    </tuple>
                    <state>
                      <tuple>
-                        <float>1490622800.75</float>
+                        <float>1503932678.28</float>
                        <string>UTC</string>
                      </tuple>
                    </state>