erp5_web_renderjs_ui: converted search field into handlebars template

c3f8cad0 · Sven Franck · Romain Courteaud · c22c543a · c3f8cad0 · c3f8cad0
Commit c3f8cad0 authored Oct 21, 2014 by Sven Franck Committed by Romain Courteaud Nov 17, 2014
2 changed files
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_html.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_html.xml
@@ -115,29 +115,30 @@
    <!-- renderjs -->\n
    <script src="RSVP.js"></script>\n
    <script src="renderjs.js"></script>\n
-    <!-- <script src="handlebars.js"></script> -->\n
+    <script src="handlebars.js"></script>\n
 \n
    <!-- custom script -->\n
    <script src="gadget_erp5_searchfield.js"></script>\n
 \n
-  </head>\n
-  <body>\n
-\n
+    <!-- XXX widget-status is bad! -->\n
+    <script id="panel-template" type="text/x-handlebars-template">\n
      <form class="save_form document_form">\n
        <div class="center">\n
          <div class="ui-field-contain">\n
-        <!-- XXX needs a theme set for now -->\n
-        <div class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset ui-input-has-clear">\n
-          <input type="text" data-enhanced="true" value="" name="search" />\n
+            <div class="ui-input-text ui-body-{{widget_theme}} ui-corner-all ui-shadow-inset ui-input-has-clear {{widget_status_class}}">\n
+              <input type="text" data-enhanced="true" value="{{widget_value}}" name="search" {{widget_status_attribute}} />\n
              <div class="ui-btn ui-input-clear ui-input-btn ui-corner-all ui-icon-search ui-btn-icon-notext">\n
-            Submit<input data-enhanced="true" type="submit" value="Submit">\n
+                Submit<input data-enhanced="true" type="submit" value="Submit" {{widget_status_attribute}} />\n
              </div>\n
            </div>\n
-        <!-- XXX needs a theme set for now -->\n
-        <a href="#" class="ui-btn ui-btn-c ui-btn-icon-notext ui-icon-filter ui-override-theme">Filters</a>\n
+            <a href="#" class="ui-btn ui-btn-{{widget_theme}} ui-btn-icon-notext ui-icon-filter ui-override-theme ui-disabled">Filters</a>\n
          </div>\n
        </div>\n
      </form>\n
+    </script>\n
+    \n
+  </head>\n
+  <body>\n
  </body>\n
 </html>

@@ -276,7 +277,7 @@
            </item>
            <item>
                <key> <string>serial</string> </key>
-                <value> <string>938.24471.49375.27665</string> </value>
+                <value> <string>938.25792.30699.44322</string> </value>
            </item>
            <item>
                <key> <string>state</string> </key>
@@ -294,7 +295,7 @@
                    </tuple>
                    <state>
                      <tuple>
-                        <float>1413799940.71</float>
+                        <float>1413879096.17</float>
                        <string>GMT</string>
                      </tuple>
                    </state>

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.xml
@@ -104,7 +104,17 @@
 (function (window, rJS, RSVP, loopEventListener) {\n
  "use strict";\n
 \n
-  rJS(window)\n
+  /////////////////////////////////////////////////////////////////\n
+  // Handlebars\n
+  /////////////////////////////////////////////////////////////////\n
+  // Precompile the templates while loading the first gadget instance\n
+  var gadget_klass = rJS(window),\n
+    source = gadget_klass.__template_element\n
+                         .getElementById("panel-template")\n
+                         .innerHTML,\n
+    panel_template = Handlebars.compile(source);\n
+\n
+  gadget_klass\n
    /////////////////////////////////////////////////////////////////\n
    // ready\n
    /////////////////////////////////////////////////////////////////\n
@@ -126,8 +136,24 @@
    /////////////////////////////////////////////////////////////////\n
    // declared methods\n
    /////////////////////////////////////////////////////////////////\n
-    .declareMethod(\'render\', function (options) {\n
-      this.props.element.querySelector("input").value = options.extended_search || "";\n
+    .declareMethod(\'render\', function (option_dict) {\n
+      var append_class,\n
+        append_attribute,\n
+        placeholder = "",\n
+        is_disabled = option_dict.disabled,\n
+        search_gadget = this;\n
+\n
+      if (is_disabled) {\n
+        append_class = " ui-disabled";\n
+        append_attribute = \' disabled="disabled\';\n
+      }\n
+\n
+      search_gadget.props.element.innerHTML = panel_template({\n
+        widget_value: option_dict.extended_search || placeholder,\n
+        widget_theme: option_dict.theme || "c",\n
+        widget_status_attribute: append_attribute || placeholder,\n
+        widget_status_class: append_class || placeholder\n
+      });\n
    })\n
 \n
    .declareMethod(\'getContent\', function () {\n
@@ -286,7 +312,7 @@
            </item>
            <item>
                <key> <string>actor</string> </key>
-                <value> <string>romain</string> </value>
+                <value> <string>sven</string> </value>
            </item>
            <item>
                <key> <string>comment</string> </key>
@@ -300,7 +326,7 @@
            </item>
            <item>
                <key> <string>serial</string> </key>
-                <value> <string>937.42848.57946.4044</string> </value>
+                <value> <string>938.24816.20339.61866</string> </value>
            </item>
            <item>
                <key> <string>state</string> </key>
@@ -318,7 +344,7 @@
                    </tuple>
                    <state>
                      <tuple>
-                        <float>1411056079.35</float>
+                        <float>1413819887.51</float>
                        <string>GMT</string>
                      </tuple>
                    </state>