add @jerome work to demo

d7d515b2 · Boris Kocherov · e9d56210 · d7d515b2 · d7d515b2 · d7d515b2
Commit d7d515b2 authored Nov 19, 2018 by Boris Kocherov
Showing with 188 additions and 0 deletions

demo/with_monaco/index.css demo/with_monaco/index.css +22 -0

demo/with_monaco/index.html demo/with_monaco/index.html +32 -0

demo/with_monaco/index.js demo/with_monaco/index.js +134 -0

No files found.
--- a/demo/with_monaco/index.css
+++ b/demo/with_monaco/index.css
+.row, html, body {
+  height: 100%;
+  margin: 0;
+}
+
+.row {
+  display: flex;
+}
+
+.column {
+  flex: 50%;
+}
+
+#rjs_json_form {
+  background-color: grey;
+}
+
+.rjs_json_form_gadget > iframe {
+  width: 100%;
+  height: 100%;
+  min-height: 1000px;
+}
\ No newline at end of file
--- a/demo/with_monaco/index.html
+++ b/demo/with_monaco/index.html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Demo UI JSON Schema form generator</title>
+    <link rel="stylesheet" href="index.css">
+
+    <!--<script src="https://d1.erp5.ru/nexedi/rjs_json_form/rsvp.js"></script>-->
+    <!--<script src="https://d1.erp5.ru/nexedi/rjs_json_form/renderjs.js"></script>-->
+    <script src="../../rsvp.js"></script>
+    <script src="../../renderjs.js"></script>
+    <script src="https://unpkg.com/monaco-editor@0.14.3/min/vs/loader.js"></script>
+    <!--<script src="http://127.0.0.1/nexedi/rjs_json_form/jio.js"></script>-->
+    <script src="index.js"></script>
+  </head>
+
+  <body>
+    <div class="row">
+      <div id="monaco-editor" class="column"></div>
+      <div id="rjs_json_form" class="column">
+        <div class="rjs_json_form_gadget" data-gadget-url="../../jsonform.gadget.html"
+             data-gadget-scope="rjs_json_form"
+             data-gadget-sandbox="iframe">
+        </div>
+      </div>
+    </div>
+  </body>
+
+</html>
+
--- a/demo/with_monaco/index.js
+++ b/demo/with_monaco/index.js
+/*jslint esversion: 6, nomen: true, maxlen: 200, indent: 2, maxerr: 100*/
+/*global window, document, require, URL, rJS*/
+
+(function (window, document, rJS) {
+  "use strict";
+  let repo = "jerome/slapos";
+  let branch = "feat/erp5-fix-schema";
+  /*
+  const baseUrl = `https://lab.nexedi.com/${repo}/raw/${branch}/software/erp5/`;
+  const mainSchema = "instance-erp5-input-schema.json";
+  */
+
+/// XXX use jstestnode
+// const baseUrl = `https://lab.nexedi.com/bk/slapos/raw/wip/feat/json-test-failure/software/jstestnode/`;
+  const baseUrl = `http://localhost/nexedi/slapos/software/jstestnode/`;
+  const mainSchema = "instance-jstestnode-input-schema.json";
+
+
+  let monacoEditor;
+// monaco should ignore edit event when it's caused by rjs_json_form
+  let monacoIgnoreEvent = false;
+  /*
+   based on https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-json-defaults
+   and https://codepen.io/maxvrko/full/XVxVyY
+  */
+
+  require.config({
+    paths: {vs: "https://unpkg.com/monaco-editor@0.14.3/min/vs"}
+  });
+  let proxy = URL.createObjectURL(
+    new Blob(
+      [
+        `
+self.MonacoEnvironment = {
+  baseUrl: 'https://unpkg.com/monaco-editor@0.14.3/min/'
+};
+importScripts('https://unpkg.com/monaco-editor@0.14.3/min/vs/base/worker/workerMain.js');
+`
+      ],
+      {type: "text/javascript"}
+    )
+  );
+
+  window.MonacoEnvironment = {getWorkerUrl: () => proxy};
+
+  rJS(window)
+    .allowPublicAcquisition("notifyValid", function (arr, scope) {
+    })
+    .allowPublicAcquisition("notifyInvalid", function (arr, scope) {
+    })
+    .allowPublicAcquisition("notifyChange", function (arr, scope) {
+      return this.getDeclaredGadget("rjs_json_form").then(function (g) {
+        return g.getContent().then(function (content) {
+          monacoIgnoreEvent = true;
+          monacoEditor
+            .getModel()
+            .setValue(JSON.stringify(JSON.parse(content.rjs_json_form), null, 4));
+          monacoIgnoreEvent = false;
+        });
+      });
+    })
+    .ready(function () {
+      let gadget = this;
+
+      require(["vs/editor/editor.main"], function (monaco) {
+        var modelUri = monaco.Uri.parse("tmp://xxx.json"); // a made up unique URI for our model
+        var model = monaco.editor.createModel("{\n}", "json", modelUri);
+
+        const getSchema = relativeUrl => {
+          const schemaUrl = new URL(relativeUrl, baseUrl);
+          return fetch(schemaUrl)
+            .then(resp => {
+              return resp.json();
+            })
+            .then(s => {
+              return {
+                uri: relativeUrl,
+                schema: s,
+                schema_url: schemaUrl.toString()
+              };
+            });
+        };
+
+        Promise.all([
+          getSchema(mainSchema).then(s => {
+            s.fileMatch = [modelUri.toString()]; // this is the main schema associated to the model
+            return s;
+          }),
+        ]).then(schemas => {
+          gadget.getDeclaredGadget("rjs_json_form").then(g => {
+            return g.render({
+              key: "rjs_json_form",
+              schema: schemas[0].schema,
+              schema_url: schemas[0].schema_url,
+              value: {}
+            });
+          });
+
+          monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+            validate: true,
+            schemas: schemas
+          });
+
+          monacoEditor = monaco.editor.create(
+            document.getElementById("monaco-editor"),
+            {
+              model: model
+            }
+          );
+
+          monacoEditor.onDidChangeModelContent(e => {
+            if (!monacoIgnoreEvent) {
+              console.log("monaco changed", monacoEditor.getValue());
+              let parsed;
+              try {
+                parsed = JSON.parse(monacoEditor.getValue());
+              } catch (error) {
+                console.error("parse error, ignoring changes from monaco", error);
+                return;
+              }
+              gadget.getDeclaredGadget("rjs_json_form").then(g => {
+                return g.render({
+                  key: "rjs_json_form",
+                  schema: schemas[0].schema,
+                  schema_url: schemas[0].schema_url,
+                  value: parsed
+                });
+              });
+            }
+          });
+        });
+      });
+    });
+}(window, document, rJS));
\ No newline at end of file