[erp5_web_renderjs_ui] Add a search input in the panel

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_appcache.xml

@@ -108,7 +108,7 @@
             <value> <string encoding="cdata"><![CDATA[
 
 CACHE MANIFEST\n
-# generated on Thu, 07 Feb 2017 15:00:00 GMT\n
+# generated on Wed, 01 Mar 2017 15:00:00 GMT\n
 # XXX + fonts\n
 # images/ajax-loader.gif\n
 CACHE:\n
@@ -369,7 +369,7 @@ NETWORK:\n
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>957.20616.7427.7406</string> </value>
+                <value> <string>957.46857.4036.21879</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -387,7 +387,7 @@ NETWORK:\n
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1487069372.52</float>
+                        <float>1488385456.73</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -484,6 +484,16 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
     display: none;
   }
 }
+div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] {
+  padding: 3pt 12pt;
+}
+div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] button {
+  color: #FFFFFF;
+}
+div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] input[type="search"] {
+  color: #FFFFFF !important;
+  background-color: #777777 !important;
+}
 div[data-gadget-scope='panel'] img {
   text-align: left;
   height: 100%;

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml

@@ -242,7 +242,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>957.40793.17925.62225</string> </value>
+                <value> <string>957.46743.737.30583</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1488280785.24</float>
+                        <float>1488377833.8</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_html.html

@@ -26,6 +26,15 @@
 
     <script id="panel-template-body" type="text/x-handlebars-template">
       <div class="ui-content">
+
+        <form class="dialog_form">
+          <button type="submit" class="ui-btn ui-btn-b ui-btn-inline
+                                       ui-icon-action ui-btn-icon-right ui-screen-hidden">Submit</button>
+          <div data-gadget-url="gadget_erp5_searchfield.html"
+               data-gadget-scope="erp5_searchfield"
+               data-gadget-sandbox="public"></div>
+        </form>
+
         <ul data-role="listview" class="ui-listview" data-enhanced="true">
           <li class="ui-first-child"><a href="#" class="ui-btn ui-btn-icon-left ui-icon-home" data-i18n="Home">Home</a></li>
           <li><a href="{{module_href}}" class="ui-btn ui-btn-icon-left ui-icon-puzzle-piece" data-i18n="Modules" accesskey="m">Modules</a></li>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_html.xml

@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>957.39718.21180.26828</string> </value>
+                <value> <string>957.46848.56526.7116</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1488215553.05</float>
+                        <float>1488384141.54</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_js.js

@@ -29,6 +29,7 @@
     //////////////////////////////////////////////
     .declareAcquiredMethod("getUrlFor", "getUrlFor")
     .declareAcquiredMethod("translateHtml", "translateHtml")
+    .declareAcquiredMethod("redirect", "redirect")
 
     /////////////////////////////////////////////////////////////////
     // declared methods
@@ -73,7 +74,8 @@
     .onStateChange(function (modification_dict) {
       var context = this,
         gadget = this,
-        queue = new RSVP.Queue();
+        queue = new RSVP.Queue(),
+        tmp_element;
 
       if (modification_dict.hasOwnProperty("visible")) {
         if (this.state.visible) {
@@ -114,7 +116,20 @@
             );
           })
           .push(function (my_translated_or_plain_html) {
-            context.element.querySelector("div").innerHTML = my_translated_or_plain_html;
+            tmp_element = document.createElement('div');
+            tmp_element.innerHTML = my_translated_or_plain_html;
+            return context.declareGadget('gadget_erp5_searchfield.html', {
+              scope: "erp5_searchfield",
+              element: tmp_element.querySelector('[data-gadget-scope="erp5_searchfield"]')
+            });
+          })
+          .push(function (search_gadget) {
+            return search_gadget.render({
+              focus: false
+            });
+          })
+          .push(function () {
+            context.element.querySelector("div").appendChild(tmp_element);
             return context.listenResize();
           });
       }
@@ -223,6 +238,40 @@
       event.initEvent('resize', true, true);
       window.dispatchEvent(event);
       return result;
-    });
+    })
+
+    .allowPublicAcquisition('notifyChange', function () {
+      // Typing a search query should not modify the header status
+      return;
+    })
+    .onEvent('submit', function () {
+      var gadget = this;
+
+      return gadget.getDeclaredGadget("erp5_searchfield")
+        .push(function (search_gadget) {
+          return search_gadget.getContent();
+        })
+        .push(function (data) {
+          var options = {
+            page: "search"
+          };
+          if (data.search) {
+            options.extended_search = data.search;
+          }
+          // Remove focus from the search field
+          document.activeElement.blur();
+          return gadget.redirect({command: 'display', options: options});
+        });
+
+    }, false, true)
+
+    .onEvent('blur', function (evt) {
+      // XXX Horrible hack to clear the search when focus is lost
+      // This does not follow renderJS design, as a gadget should not touch
+      // another gadget content
+      if (evt.target.type === 'search') {
+        evt.target.value = "";
+      }
+    }, true, false);
 
 }(window, document, rJS, Handlebars, RSVP, Node, loopEventListener));

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>957.41111.56434.58897</string> </value>
+                <value> <string>957.46809.34243.17971</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1488299408.27</float>
+                        <float>1488381715.57</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.js

@@ -9,7 +9,8 @@
     /////////////////////////////////////////////////////////////////
     .declareMethod('render', function (options) {
       var state_dict = {
-        extended_search: options.extended_search || ""
+        extended_search: options.extended_search || "",
+        focus: options.focus
       };
 
       return this.changeState(state_dict);
@@ -20,8 +21,13 @@
       return gadget.getDeclaredGadget('input')
         .push(function (input_gadget) {
           var focus = false;
-          if (!gadget.state.extended_search) {
-            focus = true;
+          var focus;
+          if (gadget.state.focus === undefined) {
+            if (gadget.state.extended_search) {
+              focus = false;
+            } else {
+              focus = true;
+            }
           }
           return input_gadget.render({
             type: "search",

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.17336.1268.55074</string> </value>
+                <value> <string>956.58742.58866.48708</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1476194269.08</float>
+                        <float>1488381059.63</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -576,6 +576,17 @@ div[data-gadget-scope='panel'] {
     }
   }
 
+  div[data-gadget-scope='erp5_searchfield'] {
+    padding: @half-margin-size @double-margin-size;
+    button {
+      color: @white;
+    }
+    input[type="search"] {
+      color: @white !important;
+      background-color: @grey !important;
+    }
+  }
+
   img {
     text-align: left;
     height: 100%;