Skip to content

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

[erp5_web_renderjs_ui] Reimplement list field 

Try to reduce number of DOM modifications.
Display value even if not present in the item list.
parent 9f7f8762
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 899 additions and 143 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_appcache.xml
View file @ c27b1d1b
......@@ -220,6 +220,8 @@ gadget_html5_input.html\n
gadget_html5_input.js\n
gadget_html5_textarea.html\n
gadget_html5_textarea.js\n
gadget_html5_select.html\n
gadget_html5_select.js\n
gadget_erp5_global.js\n
gadget_jio.html\n
gadget_jio.js\n
......@@ -363,7 +365,7 @@ NETWORK:\n
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>954.27350.45081.38075</string> </value>
<value> <string>954.38476.56174.42734</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -381,7 +383,7 @@ NETWORK:\n
</tuple>
<state>
<tuple>
<float>1475763290.3</float>
<float>1476437355.22</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listfield_html.html
View file @ c27b1d1b
......@@ -8,20 +8,10 @@
<!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<!-- custom script -->
<script src="gadget_erp5_field_list.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>
<body>
<select />
</body>
</html>
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listfield_html.xml
View file @ c27b1d1b
......@@ -220,7 +220,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>super_sven</string> </value>
<value> <string>zope</string> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>939.43978.9403.31744</string> </value>
<value> <string>954.37505.27238.51626</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,8 +252,8 @@
</tuple>
<state>
<tuple>
<float>1419418540.22</float>
<string>GMT</string>
<float>1476431000.28</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listfield_js.js
View file @ c27b1d1b
/*global window, rJS, Handlebars, document, RSVP, loopEventListener*/
/*jslint nomen: true, indent: 2, maxerr: 3 */
(function (window, rJS, Handlebars, document, RSVP) {
/*global window, rJS, loopEventListener*/
/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80 */
(function (window, rJS) {
"use strict";
/////////////////////////////////////////////////////////////////
// Handlebars
/////////////////////////////////////////////////////////////////
// Precompile the templates while loading the first gadget instance
var gadget_klass = rJS(window),
option_source = gadget_klass.__template_element
.getElementById("option-template")
.innerHTML,
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) {
return g.getElement()
.push(function (element) {
g.element = element;
});
rJS(window)
.setState({
tag: 'p'
})
//////////////////////////////////////////////
// acquired method
//////////////////////////////////////////////
.declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("notifyValid", "notifyValid")
.declareAcquiredMethod("notifyInvalid", "notifyInvalid")
.declareAcquiredMethod("notifyChange", "notifyChange")
.declareMethod('getTextContent', function () {
var select = this.element.querySelector('select');
return select.options[select.selectedIndex || 0].text;
})
.declareMethod('render', function (options) {
var i,
template,
gadget = this,
select = this.element.querySelector('select'),
field_json = options.field_json,
tmp = "",
wrap = document.createElement("select");
var field_json = options.field_json || {},
state_dict = {
value: field_json.value || field_json.default || "",
item_list: JSON.stringify(field_json.items),
editable: field_json.editable,
required: field_json.required,
name: field_json.key,
title: field_json.title
};
return this.changeState(state_dict);
})
select.setAttribute('name', field_json.key);
for (i = 0; i < field_json.items.length; i += 1) {
if (field_json.items[i][1] === field_json.default) {
template = selected_option_template;
} else {
template = option_template;
.onStateChange(function (modification_dict) {
var element = this.element,
url,
result,
i,
text_content,
item_list,
state = {};
for (i in this.state) {
if (this.state.hasOwnProperty(i)) {
state[i] = this.state[i];
}
tmp += template({
value: field_json.items[i][1],
text: field_json.items[i][0]
});
}
state.item_list = JSON.parse(this.state.item_list);
// need a <select> for transport
wrap.innerHTML = tmp;
return new RSVP.Queue()
.push(function () {
return gadget.translateHtml(wrap.outerHTML);
})
.push(function (my_translated_html) {
// XXX: no fan...
var select_div,
div = document.createElement("div");
div.innerHTML = my_translated_html;
select_div = div.querySelector("select");
select.innerHTML = select_div.innerHTML;
if (modification_dict.hasOwnProperty('editable')) {
if (this.state.editable) {
url = 'gadget_html5_select.html';
} else {
url = 'gadget_html5_element.html';
if (field_json.required === 1) {
select.setAttribute('required', 'required');
item_list = state.item_list;
for (i = 0; i < item_list.length; i += 1) {
if (item_list[i][1] === this.state.value) {
text_content = item_list[i][0];
}
}
if (field_json.editable !== 1) {
select.setAttribute('readonly', 'readonly');
select.setAttribute('data-wrapper-class', 'ui-state-readonly');
// select.setAttribute('disabled', 'disabled');
if (text_content === undefined) {
text_content = '??? (' + this.state.value + ')';
}
});
})
.declareMethod('checkValidity', function () {
var result;
result = this.element.querySelector('select').checkValidity();
if (result) {
return this.notifyValid()
.push(function () {
return result;
state.text_content = text_content;
}
result = this.declareGadget(url, {scope: 'sub'})
.push(function (input) {
// Clear first to DOM, append after to reduce flickering/manip
while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.appendChild(input.element);
return input;
});
} else {
result = this.getDeclaredGadget('sub');
}
return result;
})
.declareMethod('getContent', function () {
var input = this.element.querySelector('select'),
result = {};
result[input.getAttribute('name')] = input.options[input.selectedIndex].value;
return result;
return result
.push(function (input) {
return input.render(state);
});
})
.declareService(function () {
////////////////////////////////////
// Check field validity when the value changes
////////////////////////////////////
var field_gadget = this;
function notifyChange() {
return RSVP.all([
field_gadget.checkValidity(),
field_gadget.notifyChange()
]);
.declareMethod('getContent', function () {
if (this.state.editable) {
return this.getDeclaredGadget('sub')
.push(function (gadget) {
return gadget.getContent();
});
}
// Listen to input change
return loopEventListener(
field_gadget.element.querySelector('select'),
'change',
false,
notifyChange
);
return {};
})
.declareService(function () {
////////////////////////////////////
// Inform when the field input is invalid
////////////////////////////////////
var field_gadget = this;
.declareMethod('getTextContent', function () {
return this.getDeclaredGadget('sub')
.push(function (gadget) {
return gadget.getTextContent();
});
})
function notifyInvalid(evt) {
return field_gadget.notifyInvalid(evt.target.validationMessage);
.declareMethod('checkValidity', function () {
if (this.state.editable) {
return this.getDeclaredGadget('sub')
.push(function (gadget) {
return gadget.checkValidity();
});
}
// Listen to input change
return loopEventListener(
field_gadget.element.querySelector('select'),
'invalid',
false,
notifyInvalid
);
return true;
});
}(window, rJS, Handlebars, document, RSVP));
\ No newline at end of file
}(window, rJS));
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listfield_js.xml
View file @ c27b1d1b
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>952.64761.25287.18397</string> </value>
<value> <string>954.38571.58992.44731</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1470231990.11</float>
<float>1476437096.88</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_select_html.html 0 → 100644
View file @ c27b1d1b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>HTML5 Select</title>
<!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<!-- custom 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>
<script src="gadget_html5_select.js" type="text/javascript"></script>
</head>
<body><select /></body>
</html>
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_select_js.js 0 → 100644
View file @ c27b1d1b
/*global window, rJS, RSVP, Handlebars */
/*jslint indent: 2, maxerr: 3, maxlen: 80, nomen: true */
(function (window, rJS, RSVP, Handlebars) {
"use strict";
// How to change html selected option using JavaScript?
// http://stackoverflow.com/a/20662180
/////////////////////////////////////////////////////////////////
// Handlebars
/////////////////////////////////////////////////////////////////
// Precompile the templates while loading the first gadget instance
var gadget_klass = rJS(window),
option_source = gadget_klass.__template_element
.getElementById("option-template")
.innerHTML,
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
.setState({
editable: false,
value: undefined,
checked: undefined,
title: '',
item_list: [],
required: false
})
.declareMethod('render', function (options) {
var state_dict = {
value: options.value || "",
item_list: JSON.stringify(options.item_list),
editable: options.editable,
required: options.required,
name: options.name,
title: options.title
};
return this.changeState(state_dict);
})
.onStateChange(function (modification_dict) {
var i,
found = false,
template,
select = this.element.querySelector('select'),
item_list = JSON.parse(this.state.item_list),
tmp = "";
select.setAttribute('name', this.state.name);
if (this.state.title) {
select.setAttribute('title', this.state.title);
}
if (this.state.required) {
select.required = true;
} else {
select.required = false;
}
if (this.state.editable) {
select.readonly = true;
} else {
select.readonly = false;
}
if (modification_dict.hasOwnProperty('value') ||
modification_dict.hasOwnProperty('item_list')) {
for (i = 0; i < item_list.length; i += 1) {
if (item_list[i][1] === this.state.value) {
template = selected_option_template;
found = true;
} else {
template = option_template;
}
tmp += template({
value: item_list[i][1],
text: item_list[i][0]
});
}
if (!found) {
tmp += selected_option_template({
value: this.state.value,
text: '??? (' + this.state.value + ')'
});
}
select.innerHTML = tmp;
}
})
.declareMethod('getContent', function () {
var result = {},
select = this.element.querySelector('select');
if (this.state.editable) {
result[select.getAttribute('name')] =
select.options[select.selectedIndex].value;
}
return result;
})
.declareMethod('getTextContent', function () {
var select = this.element.querySelector('select');
return select.options[select.selectedIndex].text;
})
.declareAcquiredMethod("notifyValid", "notifyValid")
.declareMethod('checkValidity', function () {
var result = this.element.querySelector('select').checkValidity();
if (result) {
return this.notifyValid()
.push(function () {
return result;
});
}
return result;
})
.declareAcquiredMethod("notifyChange", "notifyChange")
.onEvent('change', function () {
return RSVP.all([
this.checkValidity(),
this.notifyChange()
]);
}, false, false)
.onEvent('input', function () {
return RSVP.all([
this.checkValidity(),
this.notifyChange()
]);
}, false, false)
.declareAcquiredMethod("notifyInvalid", "notifyInvalid")
.onEvent('invalid', function (evt) {
// invalid event does not bubble
return this.notifyInvalid(evt.target.validationMessage);
}, true, false);
}(window, rJS, RSVP, Handlebars));
\ 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