app: added generic mapped element generation for listview/carousel

js/erp5_loader.js

@@ -2490,6 +2490,160 @@
     return breadcrumb;
   };
 
+  /**
+   * central method to generate custom-type elements
+   * @method generateCustomElement
+   * @param {string} type Type of custom element
+   * @param {object} spec Configuration object
+   * @param {object} config Parent element configuration properties
+   * @return {array} [element, parent_class]
+   **/
+  // TODO: in case other elements also need parent_class, map here
+  // TODO: spec.value contains record values, so make sure they are here
+  factory.util.generateCustomElement = function (type, spec, config) {
+    var id, is_type, is_main, no_icon, input_dict, container;
+
+    switch (type) {
+
+      // ribbon?
+      // TODO: what makes a ribbon? How does it look on diff screen sizes?
+      case "ribbon":
+        container = factory.element({
+          "type": "span",
+          "direct": {"className": "ribbon-wrapper"}
+        });
+        container.appendChild(factory.element({
+          "type": "span",
+          "direct": {"className": "ribbon"}
+        }));
+        return [container, ""];
+
+      case "caption":
+        container = factory.element({
+          "type": "p",
+          "direct": {
+            "className": "ui-carousel-captions-content" +
+              " ui-bar-" + (config.theme || "inherit") +
+                " ui-carousel-captions-" + (config.captionpos || "bottom")
+          }
+        });
+        container.appendChild(factory.element({
+          "type": "h1",
+          "direct": {"className": "ui-carousel-captions-heading"},
+          "logic": {
+            "text": spec.text || ""
+          }
+        }));
+        return [container, ""];
+
+      // image
+      case "image":
+        return [factory.element({
+          "type": "img",
+          "direct": {"src": (spec.src || spec.value), "alt": (spec.alt || "")}
+        }), " ui-li-has-thumb"];
+
+      // custom icon > left
+      case "icon":
+        return [factory.element({
+          "type": "span",
+          "direct": {
+            "className": "ui-li-icon ui-li-icon-custom ui-icon-" +
+              spec.icon + " ui-icon"
+          },
+          "logic": {"text": "\u00A0"}
+        }), "ui-li-has-icon"];
+ 
+      // main link, split button
+      // TODO: make icon generic!
+      case "link":
+        is_main = !!spec.is_main;
+        no_icon = config.icon === null;
+        return [factory.element({
+          "type": "a",
+          "direct": {
+            "href": spec.href || "#",
+            "className": "ui-btn " + " ui-btn-" +
+              (config.split_theme || config.theme || "inherit") +
+                (no_icon ? " " : (is_main ? " ui-btn-icon-right ":
+                  " ui-btn-icon-" + (spec.iconpos || "notext")) +
+                    "ui-icon-" + (config.icon || spec.icon || "carat-r"))
+          },
+          "attributes": {
+            "title": spec.title || "",
+            "data-i18n": "[title]" + (spec.title_i18n || "")
+          },
+          "logic":{
+            "rel": spec.external ? "external" : null,
+            "data-ajax": spec.external ? "false" : null,
+            "text": spec.text || null
+          }
+        }), "ui-li-has-alt"];
+
+      // checkbox/radio
+      // TODO: fiddle in refrence here
+      case "check":
+      case "radio":
+        // need to do this out here to account for action
+        id = util.uuid();
+        is_type = type === "check";
+
+        input_dict = {
+          "type": is_type ? "checkbox" : "radio",
+          "data-i18n": "[value]",
+          "data-enhanced": true,
+          "value": "Select item",
+          "data-iconpos": "notext"
+        };
+        if (spec.action) {
+          input_dict["data-action"] = spec.action;
+          input_dict["data-reference"] = config.reference;
+        }
+        return [factory.widget.formElement({
+          "type": "input",
+          "direct": {
+            "id": "select_" + (spec.id || id),
+            "name": "select_" +
+                (is_type ? (spec.id || id) : config.id),
+            "className": spec.action ? "action" : ""
+          },
+          "attributes": input_dict,
+          "logic": {"wrap": false, "add_label": true}
+        }), "ui-li-has-alt"];
+
+      // case count bubble
+      case "count":
+        return [factory.element({
+          "type": "span",
+          "direct": {
+            "className": "ui-li-count ui-body-" +
+                (config.count_theme || config.theme)
+            },
+            "attributes": {},
+            "logic": {"text": spec.count}
+          }), "ui-li-has-count"];
+
+      // normal elements - either full config or mapped
+      default:
+        if (spec.direct) {
+          return [factory.element(spec), ""];
+        }
+        return [factory.element({
+          "type": spec.type,
+          "direct": {
+            "className": (spec.aside ? "ui-li-aside " : " ") +
+              (spec.text_i18n ? "translate " : " ") +
+                (spec.class_list || "")
+          },
+          "logic": {
+            "text": (spec.value || spec.text),
+            "data-i18n": spec.text_i18n || null
+          }
+        }), ""];
+
+    }
+  };
+
   /**
    * return a placeholder config in case no items were found
    * @method noItems