Optimize toolbox building (in memory)

54af62b4 · Thibaut Frain · Jérome Perrin · d494c6b4 · 54af62b4 · 54af62b4
Commit 54af62b4 authored Jun 18, 2014 by Thibaut Frain Committed by Jérome Perrin Aug 11, 2014
4 changed files
--- a/dream/platform/src2/dream/Input_viewProductionLine.js
+++ b/dream/platform/src2/dream/Input_viewProductionLine.js
@@ -31,6 +31,12 @@
        })
        .push(function (result_list) {
          return result_list[1].render(result_list[0]);
+        })
+        .push(function () {
+          return gadget.getDeclaredGadget("productionline_toolbox");
+        })
+        .push(function (toolbox_gadget) {
+          toolbox_gadget.render();
        });
    })


--- a/dream/platform/src2/toolbox/index.html
+++ b/dream/platform/src2/toolbox/index.html
@@ -9,12 +9,19 @@
    <script src="../<%= curl.jqueryuijs.relative_dest %>"></script>
    <script src="../<%= copy.rsvp.relative_dest %>"></script>
    <script src="../<%= copy.renderjs.relative_dest %>"></script>
+    <script src="../<%= copy.handlebars.relative_dest%>"></script>
+
+    <script id="tool-template" type="text/x-handlebars-template">
+      <div id="{{key}}"
+           class="tool {{key}}">
+        {{name}}
+        <ul/>
+      </div>
+    </script>
    
    <script src="toolbox.js"></script>
  </head>
  <body>
-    <div id="tools">
-      <div id="tools-container"></div>
-    </div>
+    <div class="tools"></div>
  </body>
 </html>
--- a/dream/platform/src2/toolbox/toolbox.css
+++ b/dream/platform/src2/toolbox/toolbox.css
-#tools {
+.tools {
  border: 1px solid #999;
  margin: 20px 0;
  border-radius: 10px;
  padding-bottom: 20px;
 }

-#tools-container {
+.tools-container {
  margin-bottom: 4px;
 }

-#tools .ui-button {
+.tools .ui-button {
  margin:4px 0;
 }


--- a/dream/platform/src2/toolbox/toolbox.js
+++ b/dream/platform/src2/toolbox/toolbox.js
-/*global window, RSVP, $, rJS*/
-(function (window, RSVP, $, rJS) {
+/*global window, document, RSVP, rJS, Handlebars*/
+(function (window, document, RSVP, rJS, Handlebars) {
  "use strict";
-  rJS(window)
+  /*jslint nomen: true*/
+  var gadget_klass = rJS(window),
+    tool_template_source = gadget_klass.__template_element
+      .getElementById('tool-template').innerHTML,
+    tool_template = Handlebars.compile(tool_template_source);
+
+
+  gadget_klass

    .declareAcquiredMethod("getConfigurationDict", "getConfigurationDict")

-    .declareMethod("startService", function () {
+    .declareMethod("render", function () {
      var g = this;
-      return RSVP.all([
-        g.getElement(),
-        g.getConfigurationDict()
-      ])
-        .then(function (result) {
-          var render_element = $(result[0]).find("#tools-container");
-          $.each(result[1], function (key, val) {
-            var name = val.name || key.split('-')[1];
+      return new RSVP.Queue()
+        .push(function () {
+          return g.getConfigurationDict();
+        })
+        .push(function (config) {
+          g.tools_container = document.createElement('div');
+          g.tools_container.className = 'tools-container';
+          Object.keys(config).forEach(function (key) {
+            var name = config[key].name || key.split('-')[1];
            if (key !== 'Dream-Configuration') {
-              render_element.append('<div id="' + key + '" class="tool ' +
-                                    key + '">' +
-                                    name + "<ul/></div>");
+              g.tools_container.innerHTML += tool_template({
+                key: key,
+                name: name
+              });
            }
          });
        });
+    })
+
+    .declareMethod('startService', function () {
+      var g = this;
+      return g.getElement().then(function (element) {
+        element.querySelector('.tools')
+          .appendChild(g.tools_container);
+      });
    });
-}(window, RSVP, $, rJS));
+
+}(window, document, RSVP, rJS, Handlebars));