WIP gadget for erp5 UI.

This is just a non working prototype currently.

src/erp5/erp5.less

+// @import "jquerymobile.nativedroid.less";
+// @import "jquerymobile.nativedroid.dark.less";
+// @import "jquerymobile.nativedroid.color.green.less";
+
+
+//      .odd {
+// 
+//       background-color : black;
+// 
+//       color : white;
+// 
+//       text-align : center;
+// 
+//       height : 30px;
+// 
+//       padding-top : 5px;
+// 
+//     }
+// 
+//     .even {
+// 
+//       background-color : gray;
+// 
+//       color : white;
+// 
+//       text-align : center;
+// 
+//       height : 30px;
+// 
+//       padding-top : 5px;
+// 
+//     }
+
+table {
+  border-top: 0.1em solid #3D6474;
+  border-bottom: 0.1em solid #3D6474;
+  border-left: 0.1em solid #3D6474;
+//   background: #C1DAEB;
+
+//   tbody {
+//     tr:nth-child(2n) {
+//       background: black;
+//       color : white;
+//       text-align : center;
+//     }
+//     tr:nth-child(2n+1) {
+//       background: #FFFFFF;
+//       background-color : gray;
+//       color : white;
+//       text-align : center;
+//     }
+//   }
+
+  th {
+    border-right: 0.1em solid #3D6474;
+  }
+}
+
+form .left, form .right, .center, .bottom {
+   display: inline-block;
+   vertical-align: top;
+}
+.left, .right {
+   width: 48%;
+}
+
+iframe {
+  width: 95%;
+  height: 500px;
+}

src/erp5/gadget_index_url.js

+/*global rJS, RSVP, jQuery, URI, console */
+/*jslint nomen: true */
+(function (rJS, $, RSVP, URI) {
+  "use strict";
+
+  /////////////////////////////////////////////////////////////////
+  // Custom Stop Error
+  /////////////////////////////////////////////////////////////////
+  function StopRenderingError(message) {
+    this.name = "StopRenderingError";
+    if ((message !== undefined) && (typeof message !== "string")) {
+      throw new TypeError('You must pass a string.');
+    }
+    this.message = message || "StopRendering failed";
+  }
+  StopRenderingError.prototype = new Error();
+  StopRenderingError.prototype.constructor =
+    StopRenderingError;
+
+  /////////////////////////////////////////////////////////////////
+  // Desactivate jQuery Mobile URL management
+  /////////////////////////////////////////////////////////////////
+  $.mobile.ajaxEnabled = false;
+  $.mobile.linkBindingEnabled = false;
+  $.mobile.hashListeningEnabled = false;
+  $.mobile.pushStateEnabled = false;
+
+  /////////////////////////////////////////////////////////////////
+  // Gadget behaviour
+  /////////////////////////////////////////////////////////////////
+
+  function getCachedGadgetOrLoad(gadget, url, scope, element) {
+    return gadget.getDeclaredGadget(scope)
+      .fail(function () {
+        return gadget.declareGadget(url, {
+          scope: scope,
+          element: element
+        });
+      });
+  }
+
+  var JIO_GADGET = "../jio_bridge/index.html",
+    FORM_GADGET = "../erp5_form/index.html";
+
+  rJS(window)
+    .ready(function (g) {
+      g.render();
+    })
+    .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
+
+    .declareMethod('render', function (options) {
+      var gadget = this;
+      gadget.state_parameter_dict = options;
+      return RSVP.Queue()
+        .push(function () {
+          return RSVP.all([
+            getCachedGadgetOrLoad(gadget, JIO_GADGET, "jio_gadget"),
+            getCachedGadgetOrLoad(gadget, FORM_GADGET, "form_gadget",
+                                  document.getElementById('mainarticle'))
+          ]);
+        })
+        .push(function (gadget_list) {
+          gadget.sub_gadget_dict = {
+            jio_gadget: gadget_list[0],
+            form_gadget: gadget_list[1]
+          };
+          if (options.jio_key === undefined) {
+            // 
+//           ///////////////////////////////////////////////
+//           // Default view
+//           ///////////////////////////////////////////////
+//           return gadget.sub_gadget_dict.jio_gadget.allDocs(
+//             {"query": '__root__'}
+//           );
+//         })
+//         .push(function (result) {
+//           console.log("tructruc");
+//           // return the default jio_key
+//           // return result.data.rows[0].id;
+//           // return "person_module";
+//           return "computer_module/20130611-5BFC";
+//         })
+//         .push(function (jio_key) {
+//
+//             jio_key_hash = "jio_key=" +
+// //               encodeURIComponent("computer_module/20130611-5BFC");
+//               encodeURIComponent("person_module");
+
+            // XXX TODO try no to wrap into anonymous function
+            return new RSVP.Queue()
+              .push(function () {
+                return gadget.aq_pleasePublishMyState(
+                  {jio_key: "person_module"}
+                );
+              })
+              .push(function (lala) {
+                return gadget.pleaseRedirectMyHash(lala);
+              })
+              .push(function () {
+                throw new StopRenderingError("No need to do more");
+              });
+          }
+        })
+        .push(function () {
+          var jio_key = options.jio_key,
+            view = options.view || "view";
+          ///////////////////////////////////////////////
+          // Display erp5 document view
+          ///////////////////////////////////////////////
+          return gadget.sub_gadget_dict.jio_gadget.get(
+            {"_id": jio_key},
+            {"_view": view}
+          );
+        })
+        .push(function (result) {
+          var uri = new URI(
+            result.data._embedded._view._links.form_definition.href
+          );
+//           if ((uri.scheme() === "urn") &&
+//               (uri.segment(0) === "jio") &&
+//               (uri.segment(1) === "get")) {
+//           }
+          return RSVP.all([
+            result,
+            // XXX
+            gadget.sub_gadget_dict.jio_gadget.get(
+              {"_id": uri.segment(2)},
+              {"_view": "view"}
+            )
+          ]);
+        })
+        .push(function (result) {
+          var sub_options = options.form_gadget || {};
+          sub_options.erp5_document = result[0].data;
+          sub_options.form_definition = result[1].data;
+
+          return gadget.sub_gadget_dict.form_gadget.render(sub_options);
+        })
+        .push(function () {
+          // XXX JQuery mobile
+          $(gadget.sub_gadget_dict.form_gadget.element).trigger('create');
+        })
+        .push(undefined, function (error) {
+          if (error instanceof StopRenderingError) {
+            return;
+          }
+          throw error;
+        });
+    })
+
+    .allowPublicAcquisition("pleaseAllDocsXXX", function (param_list) {
+      return this.sub_gadget_dict.jio_gadget.allDocs.apply(
+        this.sub_gadget_dict.jio_gadget,
+        param_list
+      );
+    })
+
+    .allowPublicAcquisition("whoWantToDisplayThis", function (param_list) {
+      // Hey, I want to display some URL
+      return this.aq_pleasePublishMyState({jio_key: param_list[0]});
+    });
+
+}(rJS, jQuery, RSVP, URI));

src/erp5/index.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</title>
+
+    <link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
+    <link rel="stylesheet" href="erp5.css">
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+
+    <script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
+
+    <script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= curl.jquerymobilejs.relative_dest %>" type="text/javascript"></script>
+
+    <!-- custom script -->
+    <script src="gadget_index_url.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+
+  <div data-role="panel" id="leftpanel" data-display="overlay"></div>
+  <!--div data-role="panel" id="rightpanel" data-display="overlay"
+      data-position="right"></div-->
+
+  <header data-role="header">
+    <a href="#leftpanel">Open panel</a>
+    <h1>ERP5</h1>
+    <!--form><input type="text" name="couscous"
+        value="couscous"></input><button type="submit">Search</button></form-->
+    <a href="#">Home</a>
+    <!--a href="#rightpanel">Open panel</a-->
+  </header>
+
+  <article id="mainarticle">
+  </article>
+
+  </body>
+</html>

src/erp5_button_field/index.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>Buttonfield</title>
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="buttonfield.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+    <!--label></label-->
+    <button type='submit'>Submit</button>
+  </body>
+</html>

src/erp5_form/index.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 Form</title>
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="erp5form.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+    <!-- XXX action, method, fieldset -->
+    <form></form>
+  </body>
+</html>

src/erp5_list_field/index.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>Listfield</title>
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="listfield.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+    <select />
+  </body>
+</html>

src/erp5_list_field/listfield.js

+/*global window, rJS, console, RSVP */
+(function (rJS, window) {
+  "use strict";
+
+  rJS(window)
+    .ready(function (g) {
+      return new RSVP.Queue()
+        .push(function () {
+          return g.getElement();
+        })
+        .push(function (element) {
+          g.element = element;
+        });
+    })
+    .declareMethod('render', function (options) {
+      var select = this.element.getElementsByTagName('select')[0],
+        i,
+        field_json = options.field_json,
+        tmp = '';
+      select.setAttribute('name', field_json.key);
+      // XXX Escape the properties
+      for (i = 0; i < field_json.items.length; i += 1) {
+
+        if (field_json.items[i][1] === field_json.default[0]) {
+          tmp += "<option selected='selected' value='" +
+                   field_json.items[i][1] + "'>"
+                   + field_json.items[i][0] + "</option>";
+        } else {
+          tmp += "<option value='" + field_json.items[i][1] + "'>"
+            + field_json.items[i][0] + "</option>";
+        }
+      }
+      select.innerHTML += tmp;
+    });
+
+}(rJS, window));

src/erp5_listbox/index.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" />
+    <!-- XXX hardcoded -->
+    <title>Listbox</title>
+
+    <script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="listbox.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+    <!-- XXX action, method, fieldset -->
+    <table>
+      <thead>
+      </thead>
+      <tbody>
+      </tbody>
+    </table>
+  </body>
+</html>

src/erp5_listbox/listbox.js

+/*global window, rJS, document, RSVP, URI, console */
+/*jslint maxlen:120, nomen: true */
+(function (rJS, document, RSVP, window, URI) {
+  "use strict";
+
+  rJS(window)
+    .ready(function (g) {
+      return new RSVP.Queue()
+        .push(function () {
+          return g.getElement();
+        })
+        .push(function (element) {
+          g.element = element;
+        });
+    })
+    .declareAcquiredMethod("pleaseAllDocsXXX", "pleaseAllDocsXXX")
+    .declareAcquiredMethod("whoWantToDisplayThis", "whoWantToDisplayThis")
+    //////////////////////////////////////////////
+    // initialize the gadget content
+    //////////////////////////////////////////////
+    .declareMethod('render', function (options) {
+      var gadget = this,
+        table = gadget.element.getElementsByTagName('table')[0],
+        field_json = options.field_json,
+        i,
+        url_param = {},
+        begin_from = parseInt(options.begin_from, 10) || 0,
+        tmp_element_1,
+        tmp_element_2,
+        tmp_element_3,
+        select_list = [];
+      console.log("LISTBOX");
+      console.log(options);
+      for (i = 0; i < field_json.column_list.length; i += 1) {
+        select_list.push(field_json.column_list[i][0]);
+      }
+
+      gadget.field_json = field_json;
+
+      // Drop the table content
+      while (table.firstChild) {
+        table.removeChild(table.firstChild);
+      }
+      tmp_element_1 = document.createElement("thead");
+      table.appendChild(tmp_element_1);
+      tmp_element_2 = document.createElement("tr");
+      tmp_element_1.appendChild(tmp_element_2);
+
+      for (i = 0; i < field_json.column_list.length; i += 1) {
+        tmp_element_3 = document.createElement("th");
+        tmp_element_3.textContent = field_json.column_list[i][1];
+        tmp_element_2.appendChild(tmp_element_3);
+      }
+
+      tmp_element_1 = document.createElement("tbody");
+      table.appendChild(tmp_element_1);
+      return gadget.pleaseAllDocsXXX({
+        "query": new URI(field_json.query).query(true).query,
+        "limit": [begin_from, begin_from + field_json.lines + 1],
+        "select_list": select_list
+      }).then(function (result) {
+        var promise_list = [result];
+
+        for (i = 0; i < (result.data.rows.length - 1); i += 1) {
+          promise_list.push(
+            gadget.whoWantToDisplayThis(result.data.rows[i].id)
+          );
+        }
+        return RSVP.all(promise_list);
+
+      }).then(function (result_list) {
+//         console.log(result);
+        var j,
+          tmp,
+          result = result_list[0],
+          tmp_url;
+
+        tmp_element_1 = gadget.element.getElementsByTagName("tbody")[0];
+
+        for (i = 0; i < (result.data.rows.length - 1); i += 1) {
+          tmp_element_2 = document.createElement("tr");
+          tmp_element_1.appendChild(tmp_element_2);
+// tmp_url = "#/f/" + encodeURIComponent(result.data.rows[i].id) + "/view";
+          tmp_url = result_list[i + 1];
+
+          tmp = "";
+          for (j = 0; j < gadget.field_json.column_list.length; j += 1) {
+            tmp += "<th><a href='" + tmp_url + "'>" +
+              (result.data.rows[i].value[gadget.field_json.column_list[j][0]] || "") +
+              "</a></th> ";
+          }
+          tmp_element_2.innerHTML = tmp;
+        }
+
+        if (result.data.rows.length > field_json.lines) {
+          url_param.begin_from = begin_from + field_json.lines;
+        }
+//         return gadget.acquire("generateMyUrlXXX", url_param);
+        console.log(url_param);
+        return RSVP.all([
+          gadget.aq_pleasePublishMyState({}),
+          gadget.aq_pleasePublishMyState(url_param)
+        ]);
+//         return gadget.acquire("generateMyUrlXXX", url_param);
+//                               [{jio_key: param_list[0]}]);
+      }).then(function (lala) {
+        console.log(lala);
+        if (begin_from !== 0) {
+          tmp_element_1.innerHTML += "<a href='" + lala[0] +
+                                     "'>Start</a> ";
+        }
+        tmp_element_1.innerHTML += "<a href='" + lala[1] +
+                                   "'>Next page!</a>";
+// if (result.data.rows.length > field_json.lines) {
+//   tmp_element_1.innerHTML += "<a href='#begin_from=56'>Next page!</a>";
+//         window.location = "http://www.free.fr";
+// }
+      });
+    });
+
+
+}(rJS, document, RSVP, window, URI));

src/erp5_string_field/index.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>Stringfield</title>
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="stringfield.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+    <input type='text' data-mini="true" />
+  </body>
+</html>

src/erp5_string_field/stringfield.js

+/*global window, rJS, console, RSVP */
+(function (rJS) {
+  "use strict";
+
+  rJS(window)
+    .ready(function (gadget) {
+      return new RSVP.Queue()
+        .push(function () {
+          return gadget.getElement();
+        })
+        .push(function (element) {
+          gadget.element = element;
+        });
+    })
+    .declareMethod('render', function (options) {
+      var input = this.element.getElementsByTagName('input')[0],
+        field_json = options.field_json || {};
+      input.value = field_json.default || "";
+      input.setAttribute('name', field_json.key);
+//       input.setAttribute('id', field_json.key);
+    })
+
+    .declareMethod('getContent', function () {
+      var input = this.element.getElementsByTagName('input')[0],
+        result = {};
+      result[input.getAttribute('name')] = input.value;
+      return result;
+    });
+
+}(rJS));

src/jio_bridge/index.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>Jio Gadget</title>
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="jiogadget.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+  </body>
+</html>

src/jio_bridge/jiogadget.js

+/*global rJS, jIO, console */
+(function (rJS, jIO) {
+  "use strict";
+
+  rJS(window)
+
+    .ready(function (gadget) {
+      // Initialize the gadget local parameters
+      gadget.state_parameter_dict = {};
+      gadget.state_parameter_dict.jio_storage = jIO.createJIO({
+        "type": "localstorage"
+      });
+//     })
+// 
+//     .declareMethod('render', function () {
+//       var gadget = this;
+//       // Create the Jio storage only the first time
+//       if (!gadget.state_parameter_dict.hasOwnProperty("jio_storage")) {
+//       }
+    })
+    .declareMethod('allDocs', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      console.log("allDocs");
+      return storage.allDocs.apply(storage, arguments);
+    })
+    .declareMethod('get', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      console.log("get");
+      return storage.get.apply(storage, arguments);
+    });
+
+//     return jio_storage.allDocs({"query": '__root__'})
+//         // XXX How to get root information?
+//         return jio_storage.get({"_id": undefined});
+//                 return jio_storage.get(
+//                   {"_id": options.jio_key},
+//                   {"_view": options.action_view}
+//                 );
+//                   jio_storage.get(
+//                     {"_id": uri.segment(2)},
+//                     {"_view": options.action_view}
+//                   )
+// 
+//       window.jio_storage = jio_storage;
+
+}(rJS, jIO));

src/twin_erp5/index.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>Dual erp5</title>
+    <link rel="stylesheet" href="superindex.css">
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+
+    <script src="superindex.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+  </body>
+</html>

src/twin_erp5/superindex.js

+/*global rJS, RSVP */
+(function (rJS, RSVP) {
+  "use strict";
+
+  var ERP5_GADGET = "../erp5/index.html";
+
+  function keepReferenceToTheGadgetElement(gadget) {
+    // Keep reference to the gadget element
+    return new RSVP.Queue()
+      .push(function () {
+        return gadget.getElement();
+      })
+      .push(function (element) {
+        gadget.element = element;
+      });
+  }
+
+  function getCachedGadgetOrLoad(gadget, scope) {
+    return gadget.getDeclaredGadget(scope)
+      .fail(function () {
+        return gadget.declareGadget(ERP5_GADGET, {
+          scope: scope,
+          element: gadget.element,
+          sandbox: "iframe"
+        });
+      });
+  }
+
+  rJS(window)
+    .ready(keepReferenceToTheGadgetElement)
+    .ready(function (g) {
+      g.render();
+    })
+
+    .declareMethod('render', function (options) {
+      // Display 2 erp5 gadget side by side
+      var gadget = this;
+      return RSVP.Queue()
+        .push(function () {
+          return RSVP.all([
+            getCachedGadgetOrLoad(gadget, "erp5_1"),
+            getCachedGadgetOrLoad(gadget, "erp5_2")
+//             getCachedGadgetOrLoad(gadget, "erp5_3")
+          ]);
+        })
+        .push(function (gadget_list) {
+          gadget.state_parameter_dict = options;
+          return RSVP.all([
+            gadget_list[0].render(options.erp5_1 || {}),
+            gadget_list[1].render(options.erp5_2 || {})
+//             gadget_list[2].render(options.erp5_3 || {})
+          ]);
+        });
+    });
+}(rJS, RSVP));

src/twin_erp5/superindex.less

+iframe {
+  width: 800px;
+  height: 900px;
+//   width: 450px;
+//   height: 600px;
+  float: left;
+}