draft

gadget_json_generated_form.js

@@ -14,6 +14,28 @@
     return _str.replace(/~/g,'~0').replace(/\//g,'~1');
   }
 
+  function getDocumentType(doc) {
+    if (doc instanceof Array) {
+      return "array";
+    }
+    return typeof doc;
+  }
+
+  function getDocumentSchema(doc) {
+    var type = getDocumentType(doc),
+      schema = {
+        type: type
+      };
+    if (type === "array") {
+      schema.maxItems = 0;
+    } else if (type === "object") {
+      schema.additionalProperties = false;
+    } else {
+      schema.readOnly = true;
+    }
+    return schema;
+  }
+
   function render_selection(json_field, default_value) {
     var input = document.createElement("select"),
       option = document.createElement("option"),
@@ -58,9 +80,8 @@
       div_input,
       input,
       item_schema,
-      i;
-    if (json_field.items.type) {
-      item_schema = json_field.items;
+      i,
+      maxItems = json_field.maxItems;
     div = document.createElement("div");
     div.setAttribute("class", "subfield");
     div.title = json_field.description;
@@ -68,6 +89,15 @@
     div_input = document.createElement("div");
     div_input.setAttribute("class", "input");
 
+    function element_append(child) {
+      if (child) {
+        div_input.appendChild(child);
+      }
+    }
+
+    if (maxItems === undefined || default_array.length < maxItems) {
+      item_schema = json_field.items;
+
       input = document.createElement("button");
       input.setAttribute("class",
         "ui-shadow-inset ui-btn ui-btn-inline ui-corner-all" +
@@ -75,35 +105,48 @@
       input.type = "button";
       input.name = path;
       gadget.props.add_buttons.push({
+        element: input,
+        event: function () {
+          return addSubForm({
+              gadget: gadget,
               parent_type: 'array',
               element: input,
               schema_part: item_schema
+            })
+            .push(element_append);
+        }
       });
-      div_input.appendChild(input);
+    } else {
+      input = document.createElement("div");
+      input.setAttribute("class", "input");
+    }
 
+    div_input.appendChild(input);
     div.appendChild(div_input);
+
     if (default_array) {
       for (i = 0; i < default_array.length; i++) {
         queue
           .push(
-              addSubForm.bind(gadget, gadget, {
+            addSubForm.bind(gadget, {
+              gadget: gadget,
               parent_type: 'array',
               path: path,
               element: input,
               schema_part: item_schema,
               default_dict: default_array[i]
             })
-            );
+          )
+          .push(element_append);
       }
     }
     root.appendChild(div);
-    }
     // todo add failback rendering if default_array not array
     // input = render_textarea(json_field, default_value, "array");
     return queue;
   }
 
-  function render_field(gadget, key, path, json_field, default_value, root) {
+  function render_field(gadget, key, path, json_field, default_value, root, editable_label) {
     var div,
       label,
       div_input,
@@ -119,10 +162,18 @@
       first_path = "";
     }
 
+    if (json_field === undefined) {
+      json_field = getDocumentSchema(default_value);
+    } else if (json_field.type === undefined) {
+      json_field.type = getDocumentType(default_value);
+    }
+
     div = document.createElement("div");
     div.setAttribute("class", "subfield");
     div.title = json_field.description;
-    if (key && !first_path) {
+    // if (key && !first_path) {
+    if (false) {
+      // XXX;
       label = document.createElement("input");
       label.value = key;
       gadget.props.property_name_edit = label;
@@ -134,23 +185,25 @@
     div_input = document.createElement("div");
     div_input.setAttribute("class", "input");
 
-    if (json_field['enum'] !== undefined) {
+    if (json_field.enum !== undefined) {
       input = render_selection(json_field, default_value);
     }
 
     if (json_field.type === "boolean") {
-      json_field['enum'] = [true, false];
       if (default_value === "true") {
         default_value = true;
       }
       if (default_value === "false") {
         default_value = false;
       }
-      input = render_selection(json_field, default_value);
+      input = render_selection({
+        type: "boolean",
+        enum: [true, false]
+      }, default_value);
     }
 
-    if (["string", "integer", "number"].indexOf(json_field.type) >= 0) {
-      if (json_field.textarea === true) {
+    if (!input && ["string", "integer", "number"].indexOf(json_field.type) >= 0) {
+      if (json_field.contentMediaType === "text/plain") {
         input = render_textarea(json_field, default_value, "string");
       } else {
         input = document.createElement("input");
@@ -217,10 +270,19 @@
   }
 
   function render_object(g, json_field, default_dict, root, path) {
-    var key,
+    var additionalProperties,
+      key,
+      required = json_field.required || [],
       used_properties = {},
+      unused_properties = [],
       queue = RSVP.Queue();
 
+    g.props.objects[path] = used_properties;
+
+    function root_append(child) {
+      root.appendChild(child);
+    }
+
     function addAdditional(schema) {
       var div,
         div_input,
@@ -233,6 +295,12 @@
       div_input = document.createElement("div");
       div_input.setAttribute("class", "input");
 
+      function element_append(child) {
+        if (child) {
+          div_input.appendChild(child);
+        }
+      }
+
       input = document.createElement("input");
       input.type = "text";
       div_input.appendChild(input);
@@ -244,8 +312,15 @@
       input.type = "button";
       input.name = path;
       g.props.add_buttons.push({
+        element: input,
+        event: function () {
+          return addSubForm({
+            gadget: g,
             element: input,
             schema_part: schema
+          })
+            .push(element_append);
+        }
       });
       div_input.appendChild(input);
       div.appendChild(div_input);
@@ -256,14 +331,16 @@
           used_properties[key] = "";
           queue
             .push(
-              addSubForm.bind(g, g, {
+              addSubForm.bind(g, {
+                gadget: g,
                 property_name: key,
                 path: path,
                 element: input,
                 schema_part: schema,
                 default_dict: default_dict[key]
               })
-            );
+            )
+            .push(element_append);
         }
       }
       queue.push(function () {
@@ -275,8 +352,21 @@
       default_dict = {};
     }
 
+    function generate_property_selection(properties) {
+      var input;
+      if (properties.length > 0) {
+        input = render_selection({
+          enum: properties
+        });
+      }
+      if (input) {
+        root_append(input);
+      }
+    }
+
     for (key in json_field.properties) {
       if (json_field.properties.hasOwnProperty(key)) {
+        if (required.indexOf(key) >= 0) {
           used_properties[key] = false;
           if (json_field.properties[key].default !== undefined) {
             json_field.properties[key].info = '(default = ' + json_field.properties[key].default + ')';
@@ -285,29 +375,46 @@
             .push(render_field.bind(g, g, key, path,
               json_field.properties[key], default_dict[key], root)
             );
+        } else if (default_dict.hasOwnProperty(key)) {
+          used_properties[key] = "";
+          queue
+            .push(
+              addSubForm.bind(g, {
+                gadget: g,
+                property_name: key,
+                path: path,
+                schema_part: json_field.properties[key],
+                default_dict: default_dict[key]
+              })
+            )
+            .push(root_append);
+        } else {
+          unused_properties.push(key);
+        }
       }
     }
+    generate_property_selection(unused_properties);
+
     if (json_field.patternProperties !== undefined) {
       if (json_field.patternProperties['.*'] !== undefined) {
         addAdditional(json_field.patternProperties['.*']);
       }
-      g.props.objects[path] = used_properties;
     }
 
-    if (json_field.additionalProperties !== undefined && json_field.additionalProperties.type) {
-      addAdditional(json_field.additionalProperties);
-      g.props.objects[path] = used_properties;
+    if (json_field.additionalProperties === undefined) {
+      additionalProperties = true;
+    } else {
+      additionalProperties = json_field.additionalProperties;
+    }
+    if (additionalProperties.type) {
+      addAdditional(additionalProperties);
     }
 
     for (key in default_dict) {
       if (default_dict.hasOwnProperty(key)) {
         if (!used_properties.hasOwnProperty(key)) {
           queue
-            .push(render_field.bind(g, g, key, path, {
-                "type": "string",
-                "info": "(Not part of the schema)"
-              }, default_dict[key], root)
-            );
+            .push(render_field.bind(g, g, key, path, undefined, default_dict[key], root));
         }
       }
     }
@@ -437,8 +544,9 @@
       });
   }
 
-  function addSubForm(g, options) {
+  function addSubForm(options) {
     var element = options.element,
+      g = options.gadget,
       property_name,
       parent_path = options.path || element.name,
       scope,
@@ -454,12 +562,12 @@
       if (!property_name) {
         // TODO notify user
         // you can't create property without property_name
-        return false;
+        return RSVP.Queue();
       }
       if (g.props.objects[parent_path].hasOwnProperty(property_name) && g.props.objects[parent_path][property_name] !== "") {
         // TODO notify user
         // you can't create property with existed property_name
-        return false;
+        return RSVP.Queue();
       }
       if (input_element) {
         input_element.value = "";
@@ -476,7 +584,7 @@
           form_gadget.element.setAttribute("data-json-property-name", property_name);
         }
         // add to end of list
-        element.parentNode.appendChild(form_gadget.element);
+        // element.parentNode.appendChild(form_gadget.element);
         return form_gadget.renderForm({
           schema: options.schema_part,
           document: options.default_dict,
@@ -651,9 +759,6 @@
       if (!property_name || !options.display_label) {
         property_name = "";
       }
-      if (schema.type === undefined) {
-        schema.type = "object";
-      }
       root = g.element.querySelector('[data-json-path="/"]');
       if (!root) {
         root = g.element;
@@ -749,7 +854,7 @@
           button_list[i].element,
           'click',
           false,
-          addSubForm.bind(g, g, button_list[i])
+          button_list[i].event
         ));
       }