Commit 3abd9c03 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Reimplement gadget field

Use new renderJS job to simplify the code
parent caee5344
...@@ -14,6 +14,5 @@ ...@@ -14,6 +14,5 @@
</head> </head>
<body> <body>
<div></div>
</body> </body>
</html> </html>
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>946.44927.40202.16725</string> </value> <value> <string>954.45675.44850.53452</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -252,7 +252,7 @@ ...@@ -252,7 +252,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1453306099.89</float> <float>1477661832.89</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
/*global window, rJS, RSVP*/ /*global window, rJS, document*/
/*jslint nomen: true, indent: 2, maxerr: 3 */ /*jslint nomen: true, indent: 2, maxerr: 3 */
(function (window, rJS, RSVP) { (function (window, rJS, document) {
"use strict"; "use strict";
function enqueueRender(gadget, options) {
var loop_deferred = gadget.props.loop_defer,
new_loop_deferred = RSVP.defer();
gadget.props.loop_defer = new_loop_deferred;
gadget.props.render_queue
.push(function () {
return gadget.props.service_deferred.promise;
})
.push(function (field_gadget) {
return field_gadget.render(options);
})
.push(function () {
return new_loop_deferred.promise;
});
loop_deferred.resolve();
}
rJS(window) rJS(window)
.ready(function (g) {
var loop_defer = RSVP.defer();
g.props = {
service_deferred: RSVP.defer(),
first_render_deferred: RSVP.defer(),
render_queue: new RSVP.Queue(),
loop_defer: loop_defer
};
g.props.render_queue
.push(function () {
return loop_defer.promise;
});
})
// Assign the element to a variable
.ready(function (g) {
return g.getElement()
.push(function (element) {
g.props.element = element;
});
})
/////////////////////////////////////////////////////////////////
// declared methods
/////////////////////////////////////////////////////////////////
.declareMethod("render", function (options) {
var gadget = this;
enqueueRender(gadget, { .declareMethod("render", function (options) {
return this.changeState({
key: options.field_json.key, key: options.field_json.key,
value: options.field_json.default, value: options.field_json.default,
editable: options.field_json.editable editable: options.field_json.editable,
url: options.field_json.url,
sandbox: options.field_json.sandbox || undefined
}); });
gadget.props.first_render_deferred.resolve(options.field_json);
}) })
.declareMethod("getContent", function () { .onStateChange(function (modification_dict) {
return this.props.field_gadget.getContent(); // Check if a sub gadget has to be regenerated
if ((modification_dict.hasOwnProperty('url')) ||
(modification_dict.hasOwnProperty('sandbox')) ||
(modification_dict.hasOwnProperty('key'))) {
return this.deferDeclareGadget();
}
return this.deferRenderGadget();
}) })
.declareService(function () { .declareJob('deferDeclareGadget', function () {
// Add the field in the DOM after the first render method has been called var div = document.createElement('div'),
var gadget = this, element = this.element,
gadget_element = gadget.props.element.querySelector('div'), gadget = this;
field_json; /*
return new RSVP.Queue()
.push(function () {
return gadget.props.first_render_deferred.promise;
})
.push(function (result) {
field_json = result;
return gadget.declareGadget(field_json.url, {
scope: field_json.key,
sandbox: field_json.sandbox || undefined,
element: gadget_element
});
})
.push(function (field_gadget) {
var iframe;
if (field_json.css_class) { if (field_json.css_class) {
gadget_element.setAttribute("class", field_json.css_class); gadget_element.setAttribute("class", field_json.css_class);
} }
// Trigger render methods */
gadget.props.field_gadget = field_gadget; // Clear first to DOM, append after to reduce flickering/manip
gadget.props.service_deferred.resolve(field_gadget); while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.appendChild(div);
return gadget.declareGadget(gadget.state.url, {
scope: gadget.state.key,
sandbox: gadget.state.sandbox,
element: div
})
.push(function () {
return gadget.deferRenderGadget();
}); });
}) })
.declareJob('deferRenderGadget', function () {
var gadget = this;
return gadget.getDeclaredGadget(gadget.state.key)
.push(function (result) {
return result.render({
key: gadget.state.key,
value: gadget.state.value,
editable: gadget.state.editable
});
});
})
.declareService(function () { .declareMethod("getContent", function () {
// Defer render execution and check errors var gadget = this;
return this.props.render_queue; if (!gadget.state.editable) {
return {};
}
return gadget.getDeclaredGadget(gadget.state.key)
.push(function (result) {
return result.getContent();
});
}); });
}(window, rJS, RSVP));
}(window, rJS, document));
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.58962.6524.44134</string> </value> <value> <string>954.59037.54566.52462</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1477660162.48</float> <float>1477664543.13</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
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