==============================================================================
                                Draft API
==============================================================================


------------------------------------------------------------------------------
sections:
------------------------------------------------------------------------------
> Info:
  > A section defines a section of content

> Syntax:
  =============================================================
  type        Type of element (fieldlist, tabs, listbox, ...)
  span        "Columns" to span - 1/2/more
  gadget      Id of gadget to load
  =============================================================

> Notes:
  > Types must have a construct[Type] method to build the type of element
  > The gadget configuration defines the "instance" of the type
  > To add own types add construct[Type] method

> Example JSON:
  [
    {"type": "fieldlist", "span": 2, "gadget": "bar"},
    {"type": "fieldlist", "span": 1, "gadget": "baz"},
    {"type": "fieldlist", "span": 1, "gadget": "bam"},
    {"type": "tabs", "span": 2, "gadget": "foo"},
    {"type": "listbox": "span": 2, "gadget": "zzz"}
  ]

> Example HTML:

<div class="span_2">
  <div class="gadget" data-gadget-type="fieldlist" data-gadget-id="bar"></div>
</div>
<div class="span_1">
  <div class="gadget" data-gadget-type="fieldlist" data-gadget-id="baz"></div>
</div>
<div class="span_1">
  <div class="gadget" data-gadget-type="fieldlist" data-gadget-id="bam"></div>
</div>
<div class="span_2">
  <div class="gadget" data-gadget-type="tabs" data-gadget-id="foo"></div>
</div>
<div class="span_2">
  <div class="gadget" data-gadget-type="listbox" data-gadget-id="zzz"></div>
</div>

------------------------------------------------------------------------------
Pages:
------------------------------------------------------------------------------
> Info:
  > A module can have one ore more layouts corresponding to pages
  > Every hierarchy level needs a layout (one for Persons, on for Person, etc)
  > A page must have at least one "default" section
  > 

> Syntax:
  =============================================================
  [page_name]     link parameter(s) to determine page (?container=a&palette=x)
  title           Page title to set
  title_i18n      Client-side translation lookup value
  theme           Page theme (handles all JQM CSS)
  fixed           Fix header/footer for this page (default to true)
  sections        See "sections"
  =============================================================
  
> Example JSON (container > palette > box > items > item = 5 hierarchies)
  {
    "default": {
      "title": "Container",
      "theme": "erp5_blue",
      "fixed": true,
      "title_i18n": null,
      "sections": [{"type": "listbox", "span": 2, "gadget": "container_a"}]
    },
    "palettes": {
      "title": "Palette",
      "title_i18n": null,
      "sections": [{"type": "listbox", "span": 2, "gadget": "palette_content_x"}]
    },
    "boxes": {
      "title": "Box",
      "title_i18n": null,
      "sections": [{"type": "listbox", "span": 2, "gadget": "box_content_x"}]
    },
    "items": {
      "title": "Items",
      "title_i18n": null,
      "sections": [{"type": "listbox", "span": 2, "gadget": "box_items_x"}]
    },
    "item": {
      "title": "Item",
      "title_i18n": null,
      "sections": [
        {"type": "fieldlist", "span": 1, "gadget": "item_foo"},
        {"type": "fieldlist", "span": 1, "gadget": "item_foo_seller"},
        {"type": "listbox", "span": 2, "gadget": "item_ingredients"}
      ]
    }
  }


LIST:
"generate": "gadget",
"type": "listview",
"class_list": "",
"theme": "slapos-black",
"property_dict": {
  "inset": true,
  "filter": true,
  "reveal": true,
  "input": "#bar",
  "divider-theme": "slapos-white",
  "autodividers": true,
  "count-theme": "slapos-white",
},
"id": null,
"children": [
  // sample item with all options
  {
    "type": "item",
    "external": true,
    "href": "index.html",
    "left": {
      "icon": "foo",
      "img": "http://www.xyz.com/img/foo.png"
    },
    "center": {
      "count": 3689,
      "aside": [
        {"type":"p", "text":"foo", "text_i18n":null}
      ],
      "text": [
        {"type":"h1", "text":"Persons to Validate", "text_i18n":""}
      ]
    },
    "right": {
      "icon": "foo/false",
      "radio": true,
      "checkbox": true,
      "action": "foo",
      "href": "http://www.foo.com",
      "external": true
    }
]

POPUP:
{
  "generate": "widget",
  "type":"Popup",
  "class_list": "",
  "theme": "",
  "id": null,
  "property_dict": {
    "overlay-theme": null,
    "transition": "fade",
    "position-to": "window",
    "tolerance": "30,30,30,30",
    "shadow": true
  },
  "element": null,
  "children": []
}

HEADER:
{
  "generate": "widget",
  "type": "Header",
  "class_list": "",
  "theme": "",
  "id": null,
  "property_dict": {
    "title": "",
    "title_i18n":"",
    "fixed": true
  },
  "children": [
    <<examples>>
    {
      "type":"img",
      "direct": {
        "src": "http://www.foo.com/bar.jpg",
        "alt": "foo",
        "alt_i18n": "bar"
      }
    }, {
      "generate": "widget",
      "type": "controlgroup",
      "class_list": null,
      "id": null,
      "form": null,
      "theme": null,
      "children": [
        {"type": "a", "direct": {}, "attributes": {}, "logic": {}}
      ]
    }
  ]
}

CONTROLGROUP:
{
  "generate": "controlgroup",
  "id": null,
  "class_list": null,
  "theme": null,
  "property_dict": {
    "direction": "horizontal"
  },
  "children": [
    {"type":a, "direct": {}, "attributes": {}, "logic": {}}
  ]
}

FOOTER:
{
  "generate":"widget",
  "type": "footer",
  "class_list": null,
  "id": "null",
  "theme": "slapos-white",
  "property_dict": {
    "fixed": true
  },
  "children": []
}

NAVBAR:
{
  "generate": "widget",
  "type": "navbar",
  "class_list": null,
  "id": null,
  "theme": "slapos-white",
  "property_dict": {},
  "children":[]
}

PANEL:
{
"generate": "widget",
  "type": "panel",
  "class_list": "",
  "id": "global_panel",
  "theme": "slapos-black",
  "property_dict": {
    "close": true
  },
  "children": []
}
