add simple demo for json schema form generation

46c17273 · Boris Kocherov · 3be1d0db · 46c17273 · 46c17273
Commit 46c17273 authored Feb 23, 2018 by Boris Kocherov
Hide whitespace changes
Inline Side-by-side

Showing with 145 additions and 0 deletions

gadget_demo_json_schema_form.html gadget_demo_json_schema_form.html +55 -0

gadget_demo_json_schema_form.js gadget_demo_json_schema_form.js +90 -0

No files found.
--- a/gadget_demo_json_schema_form.html
+++ b/gadget_demo_json_schema_form.html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>OfficeJS jIO DAV Configurator Page</title>
+    <link rel="stylesheet" href="gadget_erp5_nojqm.css">
+    <script src="rsvp.js"></script>
+    <script src="renderjs.js"></script>
+    <script src="gadget_global.js"></script>
+    <script src="gadget_demo_json_schema_form.js"></script>
+  </head>
+  <body>
+    <div data-role="page">
+      <div role="main" class="ui-content gadget-content">
+        <section class="ui-content-header-plain">
+          <h3 class="ui-content-title ui-body-c">
+            <!--<span class="ui-icon ui-icon-custom ui-icon-database">&nbsp;</span>-->
+            Demo UI for JSON Scheme form generator
+          </h3>
+        </section>
+        <br>
+        <form class="save_form ui-body-c" novalidate>
+          <button type="submit" class="ui-btn ui-btn-b ui-btn-inline
+        ui-icon-edit ui-btn-icon-right ui-screen-hidden"></button>
+          <div class="field_container">
+            <div class="left">
+              <div class="ui-field-contain">
+                <label for="json_schema">Json Schema</label>
+                <textarea name="field_" id="json_schema" title="Json Schema"></textarea>
+              </div>
+            </div>
+            <div class="right">
+              <div class="ui-field-contain">
+                <div data-gadget-url="gadget_json_generated_form.html"
+                     data-gadget-scope="form_view"
+                     data-gadget-sandbox="public">
+                  <script data-renderjs-configuration="schema_url" type="text/x-renderjs-configuration">sample_schema.json</script>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+        <br>
+        <div data-gadget-url="gadget_ojs_configurator_access.html" data-gadget-scope="access"></div>
+        <div class="global_setting_gadget" style="display: none;"></div>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
--- a/gadget_demo_json_schema_form.js
+++ b/gadget_demo_json_schema_form.js
+/*jslint nomen: true, maxlen: 200, indent: 2*/
+/*global rJS, console, window, document, RSVP, btoa, atob, $, XMLSerializer, jQuery, URI, vkbeautify */
+(function (window, document, rJS, loopEventListener) {
+  "use strict";
+  rJS(window)
+    .ready(function (g) {
+      var
+        element_list = g.element.querySelectorAll("[data-renderjs-configuration]"),
+        len = element_list.length,
+        key,
+        value,
+        i;
+        // queue = new RSVP.Queue();
+      // function setSetting(key, value) {
+      //   queue.push(function () {
+      //     return gadget.setSetting(key, value);
+      //   });
+      // }
+      g.props = {
+        json_schema_element: document.getElementById('json_schema'),
+        json_schema_element_active: false
+      };
+      g.options = {
+        schema_url: ""
+      };
+      for (i = 0; i < len; i += 1) {
+        key = element_list[i].getAttribute('data-renderjs-configuration');
+        value = element_list[i].textContent;
+        g.options[key] = value;
+        // setSetting(key, value);
+      }
+      return g.getDeclaredGadget("form_view")
+        .push(function (form_view) {
+          g.props.form_view = form_view;
+          form_view.render(g.options);
+        })
+        .push(undefined, function (error) {
+          console.error(error);
+          throw error;
+        });
+    })
+    .declareService(function () {
+      var g = this;
+      return loopEventListener(
+        g.props.json_schema_element,
+        'focusin',
+        false,
+        function (evt) {
+          g.props.json_schema_element_active = true;
+        }
+      );
+    })
+    .declareService(function () {
+      var g = this;
+      return loopEventListener(
+        g.props.json_schema_element,
+        'focusout',
+        false,
+        function (evt) {
+          g.props.json_schema_element_active = false;
+        }
+      );
+    })
+    .declareService(function () {
+      var g = this;
+      return loopEventListener(
+        window,
+        'keyup',
+        false,
+        function (evt) {
+          if (g.props.json_schema_element_active) {
+            var e = g.props.json_schema_element;
+            try {
+              g.options.schema = e.value && JSON.parse(e.value);
+            } catch (e) {
+              console.error(e);
+            }
+            return g.props.form_view.render(g.options);
+          }
+        }
+      );
+    });
+}(window, document, rJS, loopEventListener));
\ No newline at end of file