js: added carousel enhancer

js/erp5_loader.js

@@ -1545,6 +1545,189 @@
     };
   };
 
+  /* ********************************************************************** */
+  /*                                JQM Carousel                            */
+  /* ********************************************************************** */
+  /**
+   * Generate a JQM carousel
+   * Full spec (property_dict) example (with defaults):
+   * {
+   *   "generate": "widget",
+   *   "type": "carousel",
+   *   "property_dict" : {
+   *    "id": null,
+   *    "class_list": null,
+   *    "handles": null,
+   *    "bullets": true,
+   *    "bulletspos": "bottom" 
+   *    "inset": null,
+   *    "shadow": null,
+   *    "corners": null,
+   *    "transition": slide,
+   *    "captions": null,
+   *    "captionpos": null,
+   *    "captiontheme": null,
+   *    "thumbnail": null,
+   *    "controller_id": null
+   *    },
+   *   "children": [
+   *      {
+   *        "href": null,
+   *        "caption": {"text": null, "text_i18n": null},
+   *        "content": [
+   *          {"type": "img", "direct": {"src": "foo.html", "alt":""}...}
+   *        ]
+   *      }
+   *    ]
+   * }
+   * @method carousel
+   * @param {object} spec JSON configuration
+   * @return {object} object including fragment, child-selector, placeholder
+   **/
+  factory.widget.carousel = function (spec) {
+    var fragment, generator, empty_string, has_handles, make_handle, is_thumb,
+      controller, control, i, id, radio_id;
+
+    // makes carousel elements
+    generator = function (element, wrapper, i) {
+      var item, config, target, has_link, caption_wrapper, j, len, block,
+        is_img, section, arr, len, k;
+
+      config = wrapper.property_dict;
+      has_link = element.href;
+      len = element.content.length;
+      item = factory.element({
+        "type": "li",
+        "direct": {"className": (i === 0 ? "ui-carousel-active" : "")}
+      });
+
+      if (has_link) {
+        target = factory.element({
+          "type": "a",
+          "direct": {"className": "ui-link ui-carousel-selector"}
+        });
+      } else {
+        target = item;
+      }
+
+      // loop over all sections = array (left|center|right...?)
+      for (section in element) {
+        if (element.hasOwnProperty(section)) {
+          arr = element[section];
+          if (typeof arr === "object" && arr !== null) {
+            len = arr.length;
+            for (k = 0; k < len; k += 1) {
+              block = arr[k];
+              target.appendChild(
+                factory.util.generateCustomElement(block.type, block, element)[0]
+              );
+            }
+          }
+        }
+      }
+
+      if (has_link) {
+        item.appendChild(target);
+      }
+
+      return {
+        "type": "item",
+        "content": item
+      };
+    };
+
+    // make handle
+    make_handle = function (direction) {
+      return factory.element({
+        "type": "a",
+        "direct": {
+          "href": "#",
+          "className": "ui-carousel-handle ui-carousel-handle-" + direction +
+            " ui-btn ui-btn-icon-notext ui-corner-all ui-icon-carat-" +
+              direction.slice(0,1) + " ui-shadow translate"
+        },
+        "attributes": {"data-i18n": "global_dict." + direction},
+        "logic": {"text": direction}
+      });
+    }
+
+    fragment = document.createDocumentFragment();
+    empty_string = "";
+    has_handles = spec.handles;
+    is_thumb = spec.thumbnails;
+
+    // list container - we spare declaring data-attributes
+    fragment.appendChild(factory.element({
+      "type": "ul",
+      "direct": {
+        "role": "carousel",
+        "className": (spec.class_list || empty_string) + " ui-carousel " +
+          (is_thumb ? " ui-carousel-thumbnails " : " ui-carousel-bullets" +
+            ((has_handles ? " ui-carousel-handles" : empty_string) +
+              (spec.shadow ? " ui-shadow" : empty_string) +
+                (spec.captions ? " ui-carousel-captions" : empty_string) +
+                  (spec.inset ? " ui-carousel-inset" : empty_string) +
+                    (spec.corners ? " ui-corner-all" : empty_string)))
+      },
+      "attributes": {
+        "data-enhanced": true,
+        "data-role": "carousel",
+        "tabindex": -1
+      },
+      "logic": {
+        "id": spec.id || null
+      }
+    }));
+
+    // handles
+    if (has_handles) {
+      fragment.appendChild(make_handle("right"));
+      fragment.appendChild(make_handle("left"));
+    }
+
+    // bullets
+    if (!is_thumb) {
+      id = spec.controller_id || spec.id || util.uuid();
+      controller = factory.element({
+        "type": "div",
+        "direct": {
+          "id": "ui-carousel-barrel-" + id,
+          "className": "ui-carousel-controls " +
+            "ui-carousel-controls-" + (spec.bulletspos || "bottom")
+        },
+        "attributes": {},
+        "logic": {}
+      });
+
+      for (i = 0; i < spec.length; i += 1) {
+        radio_id = "radio-" + id;
+        controller.appendChild(factory.widget.formElement({
+          "type": "input",
+          "label": true,
+          "direct": {
+            "id": (radio_id + "-" + i),
+            "name": radio_id,
+            "checked": (i === 0 ? "checked" : "")
+          },
+          "attributes": {
+            "type": "radio",
+            "data-iconpos": "notext"
+          },
+          "logic": {"value": i}
+        }));
+      }
+      fragment.appendChild(controller);
+    }
+
+    return {
+      "fragment": fragment,
+      "child_selector": fragment.querySelector("ul"),
+      "child_constructor": generator,
+      "child_mapper": spec.map_children,
+      "base": "li"
+    };
+  };
+
   /* ********************************************************************** */
   /*                                JQM Listview                            */
   /* ********************************************************************** */