app: added dynamic content to panels (same as popup)

js/erp5_loader.js

@@ -2623,25 +2623,25 @@
 
   // TODO: remove, should be handled by content.set
   /**
-   * Load content into a global or local popup
+   * Load content into a dynamic element
    * @method generatePopupContents
    * @param {obj} object Action object (popupbeforeposition)
    */
-  factory.util.generatePopupContents = function (obj) {
-    var i, j, promises, fragment, popup, reference, state;
+  factory.util.generateDynamicContents = function (obj) {
+    var i, j, promises, fragment, element, reference, state, $el;
 
-    popup = obj.gadget;
-    reference = popup.getAttribute("data-reference");
-    state = popup.getAttribute("data-state");
+    element = obj.gadget;
+    reference = element.getAttribute("data-reference");
+    state = element.getAttribute("data-state");
 
-    // don't reload if same popup is opened
+    // don't reload if same element is opened
     if (state !== reference) {
       if (reference === null) {
-        app.util.error("Global Bindings: No popup handler");
-        fragment = factory.element("p", {}, {}, {"text": "No popup handler"});
+        app.util.error("Global Bindings: No element handler");
+        fragment = factory.element("p", {}, {}, {"text": "No element handler"});
       } else {
-        popup.setAttribute("data-state", reference);
-        popup.setAttribute("data-reference", reference);
+        element.setAttribute("data-state", reference);
+        element.setAttribute("data-reference", reference);
         promises = [];
 
         // fetch content
@@ -2652,7 +2652,7 @@
           "pass": undefined
         })
           .then(function (reply) {
-            popup.setAttribute("data-reference", reference);
+            element.setAttribute("data-reference", reference);
             if (reply.children) {
               for (i = 0; i < reply.children.length; i += 1) {
                 promises[i] = app.content.set(reply.children[i], {});
@@ -2672,13 +2672,19 @@
             }
             // empty gadget and reload
             // TODO: how to replace in javaScript?
-            popup.innerHTML = "";
+            element.innerHTML = "";
             // append
-            popup.appendChild(fragment);
+            element.appendChild(fragment);
           })
           .then(function () {
-            // TODO: how to reposition popup right after appending?
-            $(popup).popup("reposition", {"positionto": "window"});
+            $el = $(element);
+
+            // TODO: un-jQuery eventually...
+            switch ($el.data("role")) {
+              case "popup":
+                $el.popup("reposition", {"positionto": "window"});
+              break;
+            }
           })
           .fail(app.util.error);
       }
@@ -2687,16 +2693,15 @@
 
   // Remove, should be handled elsewhere!
   /**
-   * Identify popup that will open and set content to be loaded
-   * @method setPopupPointer
+   * Set pointer on which content to fetch
+   * @method setDynamicPointer
    * @param {obj} obj Action Object
    * @param {string} pointer Pointer to set to
    */
-  factory.util.setPopupPointer = function (obj, pointer) {
-
+  factory.util.setDynamicPointer = function (obj, pointer) {
     // don't do nothing if the popup is already set with this content
     if (obj.gadget.getAttribute("data-reference") === pointer) {
-      return;
+      return false;
     }
     obj.gadget.setAttribute("data-reference", pointer);
   };
@@ -2720,8 +2725,23 @@
    * Add connection to application standard actions or add own actions here
    * @object map.actions
    **/
+  // TODO: this whole thing should be loaded optionally
+  // TODO: best would be that a widget loads it's actions
   map.actions = {
 
+    "set_search": function (obj) {
+      factory.util.setDynamicPointer(obj, "ui_panel_detail_search");
+    },
+
+    "set_filter": function (obj) {
+      factory.util.setDynamicPointer(obj, "ui_panel_categories");
+    },
+
+    "set_sorting": function (obj) {
+      factory.util.setDynamicPointer(obj, "ui_panel_sort");
+    },
+
+    // =================================================
     /**
      * POST an object
      * @method new
@@ -3093,7 +3113,7 @@
      * @param {object} obj Action Object
      **/
     "browse": function (obj) {
-      factory.util.setPopupPointer(obj, "browse");
+      factory.util.setDynamicPointer(obj, "browse");
     },
 
     /**
@@ -3102,7 +3122,7 @@
      * @param {object} obj Action Object
      **/
     "tasks": function (obj) {
-      factory.util.setPopupPointer(obj, "tasks");
+      factory.util.setDynamicPointer(obj, "tasks");
     },
 
     /**
@@ -3111,7 +3131,7 @@
      * @param {object} obj Action Object
      **/
     "login": function (obj) {
-      factory.util.setPopupPointer(obj, "login");
+      factory.util.setDynamicPointer(obj, "login");
     },
 
     /**
@@ -3120,7 +3140,7 @@
      * @param {object} obj Action Object
      **/
     "export": function (obj) {
-      factory.util.setPopupPointer(obj, "export");
+      factory.util.setDynamicPointer(obj, "export");
     },
 
     /**
@@ -5041,17 +5061,17 @@
    * @return {object} action object
    **/
   app.parseAction = function (e) {
-    var element, id, gadget, response;
+    var element, id, current, response;
 
-    if (e.type === "popupbeforeposition") {
+    if (e.type === "popupbeforeposition" || e.type === "panelopen") {
       return {
         "id": e.target.id,
         "gadget": e.target
       };
     }
     // NOTE: currentTarget needed for bubbling (eg tree)
-    element = (e.currentTarget === document ? undefined : e.currentTarget)
-        || e.target || e;
+    current = e.currentTarget;
+    element = (current === document ? undefined : current) || e.target || e;
 
     // NOTE: used to be if no popup/panel, use data-ref or data-url else if
     // no href use data-url else href. Should work if element (button) does
@@ -5059,7 +5079,6 @@
     id = element.getAttribute("data-reference") ||
         (element.href || "").split("#")[1] ||
             util.getPage().getAttribute("data-url");
-    gadget = document.getElementById(id);
 
     response = {
       "element": element,
@@ -5067,8 +5086,7 @@
       "gadget": document.getElementById(id)
     };
 
-    return util.mergeObject(
-      {
+    return util.mergeObject({
         "form": response.gadget.getElementsByTagName("form")[0],
         "state": (response.gadget || {}).state
       },
@@ -5294,10 +5312,9 @@
 
       // global actions
       .on("click change keyup input", ".action", function (e) {
-        var val,
-          last,
-          element = e.target,
-          type = element.type;
+        var val, last, element, type;
+        element = e.target;
+        type = element.type;
 
         // delay all input field actions allowing user to type/select
         if (element.tagName === "INPUT") {
@@ -5329,9 +5346,9 @@
       })
 
       // popup content loading
-      .find("#global-popup")
-        .on("popupbeforeposition", function (e) {
-        factory.util.generatePopupContents(app.parseAction(e));
+      .find(".ui-popup, .ui-panel")
+        .on("popupbeforeposition panelopen", function (e) {
+          factory.util.generateDynamicContents(app.parseAction(e));
       });
 
       // remove focus from active elements on key-tab switches