Commit ecf1b643 authored by Boris Kocherov's avatar Boris Kocherov

use notifyChange and simplify demo

parent a24e207b
...@@ -4,12 +4,11 @@ ...@@ -4,12 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>OfficeJS jIO DAV Configurator Page</title> <title>Demo UI for JSON Scheme form generator</title>
<link rel="stylesheet" href="gadget_erp5_nojqm.css"> <link rel="stylesheet" href="gadget_erp5_nojqm.css">
<script src="rsvp.js"></script> <script src="rsvp.js"></script>
<script src="renderjs.js"></script> <script src="renderjs.js"></script>
<script src="gadget_global.js"></script>
<script src="gadget_demo_json_schema_form.js"></script> <script src="gadget_demo_json_schema_form.js"></script>
</head> </head>
...@@ -22,20 +21,11 @@ ...@@ -22,20 +21,11 @@
</h3> </h3>
</section> </section>
<br> <br>
<button type="submit" class="ui-btn ui-btn-b ui-btn-inline <div class="ui-body-c">
ui-icon-edit ui-btn-icon-right ui-screen-hidden"></button> </div>
<div class="field_container"> <div class="field_container">
<div class="left"> <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">
<form class="save_form ui-body-c" novalidate> <form class="save_form ui-body-c" novalidate>
<button type="submit" class="ui-btn ui-icon-edit
ui-btn-icon-right">Send Form
</button>
<div class="ui-field-contain"> <div class="ui-field-contain">
<div data-gadget-url="gadget_json_generated_form.html" <div data-gadget-url="gadget_json_generated_form.html"
data-gadget-scope="form_view" data-gadget-scope="form_view"
...@@ -46,6 +36,8 @@ ...@@ -46,6 +36,8 @@
/slapos/software/erp5/instance-erp5-input-schema.json /slapos/software/erp5/instance-erp5-input-schema.json
</script> </script>
<!--/slapos/software/erp5/instance-erp5-input-schema.json-->
<!--schema4.json-->
<!--schema7.json--> <!--schema7.json-->
<!--test/instance-erp5-input-schema.json--> <!--test/instance-erp5-input-schema.json-->
<!--https://github.com/SlapOS/slapos/blob/master/software/erp5/instance-erp5-output-schema.json--> <!--https://github.com/SlapOS/slapos/blob/master/software/erp5/instance-erp5-output-schema.json-->
...@@ -53,11 +45,14 @@ ...@@ -53,11 +45,14 @@
<!--sample_schema.json--> <!--sample_schema.json-->
</div> </div>
</div> </div>
<button type="submit" class="ui-btn ui-icon-edit
ui-btn-icon-right">Send Form
</button>
</form> </form>
</div> </div>
<div class="right">
<div class="ui-field-contain">
<label for="json_document_content">Json Document</label>
<textarea name="json_document_content" id="json_document_content" title="Json Document"></textarea>
</div>
</div>
</div> </div>
</div> </div>
......
/*jslint nomen: true, maxlen: 200, indent: 2*/ /*jslint nomen: true, maxlen: 200, indent: 2*/
/*global rJS, console, window, document, RSVP, loopEventListener*/ /*global rJS, console, window, document, RSVP*/
(function (window, document, rJS, loopEventListener) { (function (window, document, rJS) {
"use strict"; "use strict";
rJS(window) rJS(window)
...@@ -64,53 +64,25 @@ ...@@ -64,53 +64,25 @@
.allowPublicAcquisition("notifyInvalid", function () { .allowPublicAcquisition("notifyInvalid", function () {
return; return;
}) })
.allowPublicAcquisition("notifyChange", function (arr, scope) {
if (scope === "form_view") {
return this.getDeclaredGadget("form_view")
.push(function (g) {
return g.getContent();
})
.push(function (ret) {
document.getElementById("json_document_content").textContent =
JSON.stringify(ret);
});
}
return;
})
.onEvent("submit", function () { .onEvent("submit", function () {
var g = this; var g = this;
return g.props.form_view.getContent() return g.props.form_view.getContent()
.push(function (data) { .push(function (data) {
console.log(data); console.log(data);
}); });
})
.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)); }(window, document, rJS));
\ No newline at end of file \ No newline at end of file
...@@ -365,6 +365,13 @@ ...@@ -365,6 +365,13 @@
}); });
} }
function checkValidityAndNotifyChange(g) {
return RSVP.all([
g.checkValidity(),
g.notifyChange()
]);
}
function render_schema_selector(gadget, title, schema_arr, event, rerender) { function render_schema_selector(gadget, title, schema_arr, event, rerender) {
return RSVP.Queue() return RSVP.Queue()
.push(function () { .push(function () {
...@@ -470,7 +477,7 @@ ...@@ -470,7 +477,7 @@
return event(schema_alternatives[value[scope]].value); return event(schema_alternatives[value[scope]].value);
}) })
.push(function () { .push(function () {
return gadget.checkValidity(); return checkValidityAndNotifyChange(gadget);
}) })
.push(function () { .push(function () {
if (rerender) { if (rerender) {
...@@ -516,7 +523,7 @@ ...@@ -516,7 +523,7 @@
event: function () { event: function () {
return event(schema_alternatives[0].value) return event(schema_alternatives[0].value)
.push(function () { .push(function () {
return gadget.checkValidity(); return checkValidityAndNotifyChange(gadget);
}); });
} }
}); });
...@@ -1085,6 +1092,7 @@ ...@@ -1085,6 +1092,7 @@
g.props = {}; g.props = {};
g.options = {}; g.options = {};
}) })
.declareAcquiredMethod("notifyChange", "notifyChange")
.declareAcquiredMethod("renameChildrenParent", "renameChildren") .declareAcquiredMethod("renameChildrenParent", "renameChildren")
.allowPublicAcquisition("renameChildren", function (opt_arr, scope) { .allowPublicAcquisition("renameChildren", function (opt_arr, scope) {
var property_name, var property_name,
...@@ -1143,7 +1151,7 @@ ...@@ -1143,7 +1151,7 @@
tasks.push(g.props.add_custom_data[key].rerender()); tasks.push(g.props.add_custom_data[key].rerender());
} }
} }
tasks.push(g.checkValidity()); tasks.push(checkValidityAndNotifyChange(g));
return RSVP.Queue() return RSVP.Queue()
.push(function () { .push(function () {
return RSVP.all(tasks); return RSVP.all(tasks);
...@@ -1304,9 +1312,10 @@ ...@@ -1304,9 +1312,10 @@
opt = arr[0], opt = arr[0],
event_object; event_object;
event_object = g.props.add_custom_data[sub_scope]; event_object = g.props.add_custom_data[sub_scope];
if (opt.type === "change" && event_object) { if (event_object && opt.type === "change") {
return event_object.event(); return event_object.event();
} }
return g.notifyChange();
}) })
.declareMethod('renderForm', function (options) { .declareMethod('renderForm', function (options) {
var g = this, var g = this,
...@@ -1464,7 +1473,7 @@ ...@@ -1464,7 +1473,7 @@
i; i;
for (i = 0; i < field_list.length; i = i + 1) { for (i = 0; i < field_list.length; i = i + 1) {
if (evt.target === field_list[i]) { if (evt.target === field_list[i]) {
return this.checkValidity(); return checkValidityAndNotifyChange(this);
} }
} }
}) })
......
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