Skip to content

erp5
erp5
Commit f0fd3841 authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

[erp5_web_renderjs_ui] Reimplement multilistfield 

Reuse listfield gadget for the rendering.

Dynamically add/remove listfield to improve usage.
parent c27b1d1b
Show whitespace changes
Inline Side-by-side
Showing with 177 additions and 113 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multilistfield_html.html
View file @ f0fd3841
...@@ -8,21 +8,10 @@ ...@@ -8,21 +8,10 @@
<!-- renderjs --> <!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script> <script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script> <script src="renderjs.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<!-- custom script --> <!-- custom script -->
<script src="gadget_erp5_field_multilist.js" type="text/javascript"></script> <script src="gadget_erp5_field_multilist.js" type="text/javascript"></script>
<script id="option-template" type="text/x-handlebars-template">
<option value="{{value}}" data-i18n="{{text}}">{{text}}</option>
</script>
<script id="selected-option-template" type="text/x-handlebars-template">
<option selected="selected" data-i18n="{{text}}" value="{{value}}">{{text}}</option>
</script>
</head> </head>
<body> <body>
<fieldset class="ui-controlgroup ui-corner-all ui-controlgroup-vertical">
<div class="ui-controlgroup-controls">
</div>
</fieldset>
</body> </body>
</html> </html>
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multilistfield_html.xml
View file @ f0fd3841
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>940.61935.4199.24456</string> </value> <value> <string>954.38753.57848.4522</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -252,8 +252,8 @@ ...@@ -252,8 +252,8 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1424105340.28</float> <float>1476452909.56</float>
<string>GMT</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
</object> </object>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multilistfield_js.js
View file @ f0fd3841
/*global window, rJS, Handlebars, document, RSVP, loopEventListener*/ /*global window, rJS, document, RSVP*/
/*jslint nomen: true, indent: 2, maxerr: 3 */ /*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80, unparam: true */
(function (window, rJS, Handlebars, document, RSVP) { (function (window, rJS, document, RSVP) {
'use strict'; 'use strict';
/////////////////////////////////////////////////////////////////
// Handlebars function appendListField(gadget, value, item_list) {
///////////////////////////////////////////////////////////////// var div = document.createElement('div');
// Precompile the templates while loading the first gadget instance gadget.element.appendChild(div);
var gadget_klass = rJS(window), return new RSVP.Queue()
option_source = gadget_klass.__template_element .push(function () {
.getElementById("option-template") return gadget.declareGadget('gadget_erp5_field_list.html',
.innerHTML, {element: div});
option_template = Handlebars.compile(option_source),
selected_option_source = gadget_klass.__template_element
.getElementById("selected-option-template")
.innerHTML,
selected_option_template = Handlebars.compile(selected_option_source);
gadget_klass
.ready(function (g) {
g.props = {};
}) })
// Assign the element to a variable .push(function (result) {
.ready(function (g) { var state = {
return g.getElement() value: value,
.push(function (element) { items: item_list,
g.props.element = element; editable: gadget.state.editable,
// Single listfield is never mandatory.
// Check requirement globally instead
required: 0,
key: 'sub',
title: gadget.state.title
};
return result.render({field_json: state});
}); });
}) }
.declareAcquiredMethod("translateHtml", "translateHtml")
rJS(window)
.declareMethod('render', function (options) { .declareMethod('render', function (options) {
var gadget = this, var field_json = options.field_json || {},
selects = [], state_dict = {
tmp, value_list: JSON.stringify(field_json.value ||
template, field_json.default || []),
container, item_list: JSON.stringify(field_json.items),
field_json = options.field_json, editable: field_json.editable,
i, required: field_json.required,
j; name: field_json.key,
gadget.props.field_json = field_json; title: field_json.title,
container = gadget.props.element.querySelector(".ui-controlgroup-controls"); sub_select_key: field_json.sub_select_key,
field_json.default[field_json.default.length] = ""; sub_input_key: field_json.sub_input_key
for (i = 0; i < field_json.default.length; i += 1) { };
tmp = ""; return this.changeState(state_dict);
selects[i] = document.createElement("select"); })
container.appendChild(selects[i]);
for (j = 0; j < field_json.items.length; j += 1) { .onStateChange(function () {
if (field_json.items[j][1] === field_json.default[i]) { var i,
template = selected_option_template; value_list = JSON.parse(this.state.value_list),
} else { item_list = JSON.parse(this.state.item_list),
template = option_template; queue = new RSVP.Queue(),
element = this.element,
gadget = this;
// Always display an empty value at the end
value_list.push("");
// Clear first to DOM, append after to reduce flickering/manip
while (element.firstChild) {
element.removeChild(element.firstChild);
} }
tmp += template({
value: field_json.items[j][1], function enQueue() {
text: field_json.items[j][0] var argument_list = arguments;
queue
.push(function () {
return appendListField.apply(this, argument_list);
}); });
} }
selects[i].innerHTML = tmp;
for (i = 0; i < value_list.length; i += 1) {
enQueue(gadget, value_list[i], item_list);
} }
return new RSVP.Queue() return queue;
})
.declareMethod('getContent', function () {
var i,
element = this.element,
queue = new RSVP.Queue(),
final_result = {},
result_list = [],
gadget = this;
function calculateSubContent(node) {
queue
.push(function () { .push(function () {
var list = []; var scope = node.getAttribute('data-gadget-scope');
for (i = 0; i < selects.length; i += 1) { if (scope !== null) {
list.push(gadget.translateHtml(selects[i].outerHTML)); return gadget.getDeclaredGadget(
} node.getAttribute('data-gadget-scope')
return RSVP.all(list); )
.push(function (result) {
return result.getContent();
}) })
.push(function (translated_htmls) { .push(function (result) {
var select_div, result_list.push(result.sub);
wrapper_class_string, });
div = document.createElement("div"); }
for (i = 0; i < translated_htmls.length; i += 1) { });
div.innerHTML = translated_htmls[i]; }
select_div = div.querySelector("select");
selects[i].innerHTML = select_div.innerHTML; if (this.state.editable) {
if (field_json.editable !== 1) { for (i = 0; i < element.childNodes.length; i += 1) {
selects[i].setAttribute('readonly', 'readonly'); calculateSubContent(element.childNodes[i]);
wrapper_class_string = wrapper_class_string || "";
wrapper_class_string += 'ui-state-readonly ';
} }
// XXX add first + last class, needs to be improved return queue
if (i === 0) { .push(function () {
wrapper_class_string = wrapper_class_string || ""; final_result[gadget.state.sub_select_key] = result_list;
wrapper_class_string += 'ui-first-child'; final_result[gadget.state.sub_input_key] = 0;
return final_result;
});
} }
if (i === translated_htmls.length - 1) { return final_result;
wrapper_class_string = wrapper_class_string || ""; })
wrapper_class_string += 'ui-last-child';
/*
.declareMethod('getTextContent', function () {
// I don't know if a multilistfield was ever used in a listbox
// Skip for now
throw new Error('not implemented');
})
*/
.allowPublicAcquisition('notifyValid', function () {
return;
})
.declareAcquiredMethod("notifyValid", "notifyValid")
.declareAcquiredMethod("notifyInvalid", "notifyInvalid")
.declareAcquiredMethod("notifyChange", "notifyChange")
.allowPublicAcquisition('notifyChange', function (argument_list, scope) {
// An empty listfield should be created when the last one is modified
// An empty listfield should be removed
var gadget = this,
sub_gadget;
return gadget.getDeclaredGadget(scope)
.push(function (result) {
sub_gadget = result;
return sub_gadget.getContent();
})
.push(function (result) {
var value = result.sub;
if (sub_gadget.element === gadget.element.lastChild) {
if (value) {
return appendListField(gadget, "",
JSON.parse(gadget.state.item_list));
} }
if (wrapper_class_string) { } else {
selects[i].setAttribute('data-wrapper-class', wrapper_class_string); if (!value) {
wrapper_class_string = undefined; gadget.element.removeChild(sub_gadget.element);
} }
} }
})
.push(function () {
return gadget.notifyChange();
}); });
}) })
.declareMethod('getContent', function () {
.declareMethod('checkValidity', function () {
var gadget = this, var gadget = this,
result = {}, empty = true;
tmp = [], if (this.state.editable && this.state.required) {
selects = this.props.element.querySelectorAll('select'), return this.getContent()
.push(function (result) {
var value_list = result[gadget.state.sub_select_key],
i; i;
for (i = 0; i < value_list.length; i += 1) {
for (i = 0; i < selects.length; i += 1) { if (value_list[i]) {
tmp.push(selects[i].options[selects[i].selectedIndex].value); empty = false;
}
} }
result[gadget.props.field_json.sub_select_key] = tmp; if (empty) {
result[gadget.props.field_json.sub_input_key] = 0; return gadget.notifyInvalid("Please fill out this field.");
return result; }
return gadget.notifyValid();
})
.push(function () {
return !empty;
}); });
}(window, rJS, Handlebars, document, RSVP)); }
\ No newline at end of file return true;
});
}(window, rJS, document, RSVP));
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multilistfield_js.xml
View file @ f0fd3841
...@@ -216,7 +216,7 @@ ...@@ -216,7 +216,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>xiaowu</string> </value> <value> <string>zope</string> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>944.12751.13272.54476</string> </value> <value> <string>954.38943.62606.2730</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,8 +248,8 @@ ...@@ -248,8 +248,8 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1436170826.41</float> <float>1476458904.36</float>
<string>GMT+2</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
</object> </object>
......
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