Skip to content

R
rjs_json_form
Commit afdbbce8 authored by Boris Kocherov's avatar Boris Kocherov
Browse files
Options

demo/with_monaco: use url input field for online download and change schema

parent b285566d
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 59 deletions
demo/with_monaco/index.css
View file @ afdbbce8
...@@ -8,12 +8,17 @@ ...@@ -8,12 +8,17 @@
display: grid; display: grid;
grid-gap: 5px; grid-gap: 5px;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: 50% 50%; grid-template-rows: 24pt 50% 50%;
grid-template-areas: grid-template-areas:
"u f"
"s f" "s f"
"d f"; "d f";
} }
#monaco-schema-url {
grid-area: u;
}
#monaco-schema { #monaco-schema {
grid-area: s; grid-area: s;
} }
......
demo/with_monaco/index.html
View file @ afdbbce8
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<body> <body>
<div class="container"> <div class="container">
<input id="monaco-schema-url" type="text">
<div id="monaco-schema"></div> <div id="monaco-schema"></div>
<div id="monaco-editor"></div> <div id="monaco-editor"></div>
<div id="rjs_json_form"> <div id="rjs_json_form">
......
demo/with_monaco/index.js
View file @ afdbbce8
...@@ -6,8 +6,7 @@ ...@@ -6,8 +6,7 @@
"use strict"; "use strict";
let repo = "nexedi/slapos"; let repo = "nexedi/slapos";
let branch = "master"; let branch = "master";
const baseUrl = `https://lab.nexedi.com/${repo}/raw/${branch}/software/erp5/`; const defaultSchema = `https://lab.nexedi.com/${repo}/raw/${branch}/software/kvm/instance-kvm-input-schema.json`;
const mainSchema = "instance-erp5-input-schema.json";
let monacoSchemaEditor; let monacoSchemaEditor;
let monacoEditor; let monacoEditor;
...@@ -36,6 +35,19 @@ importScripts('https://unpkg.com/monaco-editor@0.15.5/min/vs/base/worker/workerM ...@@ -36,6 +35,19 @@ importScripts('https://unpkg.com/monaco-editor@0.15.5/min/vs/base/worker/workerM
window.MonacoEnvironment = {getWorkerUrl: () => proxy}; window.MonacoEnvironment = {getWorkerUrl: () => proxy};
const getSchema = (schemaUrl, mappedUrl)=> {
return fetch(schemaUrl)
.then(resp => {
return resp.json();
})
.then(s => {
return {
uri: mappedUrl || schemaUrl,
schema: s
};
});
};
rJS(window) rJS(window)
.allowPublicAcquisition("notifyValid", function (arr, scope) { .allowPublicAcquisition("notifyValid", function (arr, scope) {
}) })
...@@ -53,102 +65,109 @@ importScripts('https://unpkg.com/monaco-editor@0.15.5/min/vs/base/worker/workerM ...@@ -53,102 +65,109 @@ importScripts('https://unpkg.com/monaco-editor@0.15.5/min/vs/base/worker/workerM
}); });
}) })
.ready(function () { .ready(function () {
let gadget = this; let g = this;
g.props = {};
document.getElementById("monaco-schema-url").value = defaultSchema;
require(["vs/editor/editor.main"], function (monaco) { require(["vs/editor/editor.main"], function (monaco) {
let modelUri = monaco.Uri.parse("tmp://xxx.json"); // a made up unique URI for our model g.props.monaco = monaco;
let model = monaco.editor.createModel("{\n}", "json", modelUri); g.props.modelUri = monaco.Uri.parse("tmp://xxx.json"); // a made up unique URI for our model
let model = monaco.editor.createModel("{\n}", "json", g.props.modelUri);
const getSchema = (schemaUrl, mappedUrl)=> {
return fetch(schemaUrl)
.then(resp => {
return resp.json();
})
.then(s => {
return {
uri: mappedUrl || schemaUrl,
schema: s
};
});
};
Promise.all([ Promise.all([
getSchema(baseUrl + mainSchema).then(s => {
s.fileMatch = [modelUri.toString()]; // this is the main schema associated to the model
return s;
}),
getSchema("../../json-schema/schema7.json", "http://json-schema.org/draft-07/schema") getSchema("../../json-schema/schema7.json", "http://json-schema.org/draft-07/schema")
]).then(schemas => { ]).then(schemas => {
gadget.getDeclaredGadget("rjs_json_form").then(g => { g.props.baseSchemas = schemas;
return g.render({
key: "rjs_json_form",
schema: schemas[0].schema,
schema_url: schemas[0].uri,
value: {}
});
});
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ monacoEditor = monaco.editor.create(
validate: true, document.getElementById("monaco-editor"),
enableSchemaRequest: true,
schemas: schemas
});
monacoSchemaEditor = monaco.editor.create(
document.getElementById("monaco-schema"),
{ {
model: monaco.editor.createModel(JSON.stringify(schemas[0].schema, null, 2), "json", schemas[0].uri) model: model
} }
); );
monacoSchemaEditor.onDidChangeModelContent(e => { monacoEditor.onDidChangeModelContent(e => {
if (!monacoIgnoreEvent) { if (!monacoIgnoreEvent) {
console.log("schema changed", monacoEditor.getValue()); console.log("monaco changed", monacoEditor.getValue());
let parsed; let parsed;
try { try {
parsed = JSON.parse(monacoSchemaEditor.getValue()); parsed = JSON.parse(monacoEditor.getValue());
} catch (error) { } catch (error) {
console.error("parse error, ignoring changes from monaco", error); console.error("parse error, ignoring changes from monaco", error);
return; return;
} }
gadget.getDeclaredGadget("rjs_json_form").then(g => { g.getDeclaredGadget("rjs_json_form").then(g => {
return g.render({ return g.render({
key: "rjs_json_form", value: parsed
schema: parsed,
schema_url: schemas[0].uri,
}); });
}); });
} }
}); });
monacoEditor = monaco.editor.create( g.changeState({url: defaultSchema});
document.getElementById("monaco-editor"), });
});
})
.onStateChange(function () {
let g = this;
return getSchema(g.state.url).then(s => {
s.fileMatch = [g.props.modelUri.toString()]; // this is the main schema associated to the model
return s;
}).then(schema => {
g.props.monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
enableSchemaRequest: true,
schemas: [schema].concat(g.props.baseSchemas)
});
monacoIgnoreEvent = true;
if (monacoSchemaEditor) {
monacoSchemaEditor
.getModel()
.setValue(JSON.stringify(schema.schema, null, 4));
} else {
monacoSchemaEditor = g.props.monaco.editor.create(
document.getElementById("monaco-schema"),
{ {
model: model model: g.props.monaco.editor.createModel(JSON.stringify(schema.schema, null, 4), "json", schema.uri)
} }
); );
monacoEditor.onDidChangeModelContent(e => { monacoSchemaEditor.onDidChangeModelContent(e => {
if (!monacoIgnoreEvent) { if (!monacoIgnoreEvent) {
console.log("monaco changed", monacoEditor.getValue()); console.log("schema changed", monacoEditor.getValue());
let parsed; let parsed;
try { try {
parsed = JSON.parse(monacoEditor.getValue()); parsed = JSON.parse(monacoSchemaEditor.getValue());
} catch (error) { } catch (error) {
console.error("parse error, ignoring changes from monaco", error); console.error("parse error, ignoring changes from monaco", error);
return; return;
} }
gadget.getDeclaredGadget("rjs_json_form").then(g => { g.getDeclaredGadget("rjs_json_form").then(g => {
return g.render({ return g.render({
key: "rjs_json_form", schema: parsed
schema: schemas[0].schema,
schema_url: schemas[0].uri,
value: parsed
}); });
}); });
} }
}); });
}
monacoIgnoreEvent = false;
return g.getDeclaredGadget("rjs_json_form").then(gadget => {
return gadget.render({
key: "rjs_json_form",
schema: schema.schema,
schema_url: g.state.url
});
}); });
}); })
.catch(e => {
});
})
.onEvent('input', function (evt) {
if (evt.target.id === "monaco-schema-url") {
return this.changeState({
url: evt.target.value
});
}
}); });
}(window, document, rJS)); }(window, document, rJS));
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7