[erp5_web_renderjs_ui] Editor panel: uses gadget state

Ensure a new subgadget is declared when the panel is opened

Editor panel can be closed from the sort/filter buttons

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_editor_panel_js.js

 /*jslint indent: 2, maxerr: 3, nomen: true, maxlen: 80 */
-/*global window, rJS */
-(function (window, rJS) {
+/*global window, rJS, RSVP */
+(function (window, rJS, RSVP) {
   "use strict";
   rJS(window)
 
@@ -8,44 +8,88 @@
     // acquired method
     //////////////////////////////////////////////
     .allowPublicAcquisition('trigger', function () {
-      this.element.classList.toggle('visible');
+      return this.toggle();
     })
 
-    .declareMethod('close', function () {
-      var element = this.element;
-      while (element.firstChild) {
-        element.removeChild(element.firstChild);
-      }
-      if (element.classList.contains('visible')) {
-        element.classList.remove('visible');
+    .declareMethod('toggle', function () {
+      if (this.state.visible) {
+        return this.close();
       }
+      return this.changeState({
+        visible: !this.state.visible
+      });
+    })
+
+    .declareMethod('close', function () {
+      return this.changeState({
+        visible: false,
+        url: undefined,
+        options: undefined
+      });
     })
 
     .declareMethod('render', function (url, options) {
-      this.element.classList.toggle('visible');
+      // XXX Hack to close the panel if the sort/filter button
+      // is clicked twice
+      if (url === this.state.url) {
+        return this.changeState({
+          visible: false,
+          url: undefined,
+          options: undefined
+        });
+      }
       return this.changeState({
+        visible: true,
         url: url,
-        options: JSON.stringify(options)
+        options: options
       });
     })
 
     .onStateChange(function (modification_dict) {
-      var gadget = this,
-        declared_gadget;
-      if (gadget.state.url && modification_dict.hasOwnProperty('options')) {
-        return gadget.declareGadget(gadget.state.url,
-                                    {scope: "declared_gadget"})
-          .push(function (result) {
-            declared_gadget = result;
-            return declared_gadget.render(JSON.parse(gadget.state.options));
-          })
-          .push(function () {
-            return gadget.close();
+      var queue,
+        gadget = this;
+      if (this.state.visible) {
+        if (!this.element.classList.contains('visible')) {
+          this.element.classList.toggle('visible');
+        }
+      } else {
+        if (this.element.classList.contains('visible')) {
+          this.element.classList.remove('visible');
+        }
+      }
+
+      if (modification_dict.hasOwnProperty('url')) {
+        if (this.state.url === undefined) {
+          while (this.element.firstChild) {
+            this.element.removeChild(this.element.firstChild);
+          }
+        } else {
+          queue = this.declareGadget(this.state.url,
+                                     {scope: "declared_gadget"});
+        }
+      } else {
+        if (this.state.url !== undefined) {
+          queue = this.getDeclaredGadget("declared_gadget");
+        }
+      }
+
+      if (queue !== undefined) {
+        return queue
+          .push(function (declared_gadget) {
+            return RSVP.all([
+              declared_gadget,
+              declared_gadget.render(gadget.state.options)
+            ]);
           })
-          .push(function () {
-            gadget.element.appendChild(declared_gadget.element);
-            gadget.element.classList.toggle('visible');
+          .push(function (result_list) {
+            if (modification_dict.hasOwnProperty('url')) {
+              while (gadget.element.firstChild) {
+                gadget.element.removeChild(gadget.element.firstChild);
+              }
+              gadget.element.appendChild(result_list[0].element);
+            }
           });
       }
     });
-}(window, rJS));
\ No newline at end of file
+
+}(window, rJS, RSVP));
\ No newline at end of file

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_editor_panel_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.35625.39214.6929</string> </value>
+                <value> <string>955.38199.61252.57992</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1476259803.78</float>
+                        <float>1480349448.29</float>
                         <string>UTC</string>
                       </tuple>
                     </state>