Skip to content

E
erp5_rtl_support
Commit ddbcf9ce authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

[erp5_web_renderjs_ui] Reimplement radiofield 

Support calling render multiple times
parent 44a914b2
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 82 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_html.html
View file @ ddbcf9ce
......@@ -11,11 +11,7 @@
<!-- custom script -->
<script src="gadget_erp5_field_radio.js" type="text/javascript"></script>
</head>
<body>
<fieldset class="ui-controlgroup ui-corner-all ui-controlgroup-vertical">
<div class="radiogroup">
</div>
</fieldset>
</body>
</html>
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_html.xml
View file @ ddbcf9ce
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>943.62898.42115.10666</string> </value>
<value> <string>954.45675.44850.53452</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,8 +252,8 @@
</tuple>
<state>
<tuple>
<float>1435816933.09</float>
<string>GMT+2</string>
<float>1477649679.02</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_js.js
View file @ ddbcf9ce
......@@ -3,83 +3,154 @@
(function (window, rJS, RSVP) {
"use strict";
function appendCheckboxField(gadget, item) {
var input_gadget,
label_gadget;
return new RSVP.Queue()
.push(function () {
return gadget.declareGadget('gadget_html5_input.html', {scope: item[1]});
})
.push(function (result) {
input_gadget = result;
var state_dict = {
type: 'radio',
name: gadget.state.name,
value: item[1],
editable: true
};
if (item[1] === gadget.state.value) {
state_dict.checked = 1;
}
return result.render(state_dict);
})
.push(function () {
return gadget.declareGadget('gadget_html5_element.html');
})
.push(function (result) {
label_gadget = result;
var state_dict = {
tag: 'label',
text_content: item[0]
};
return result.render(state_dict);
})
.push(function () {
var div = document.createElement("div");
div.setAttribute("class", "ui-field-contain");
div.appendChild(label_gadget.element);
div.appendChild(input_gadget.element);
gadget.element.appendChild(div);
});
}
rJS(window)
.ready(function (gadget) {
return gadget.getElement()
.push(function (element) {
gadget.props = {};
gadget.props.element = element;
});
})
.declareAcquiredMethod("notifyInvalid", "notifyInvalid")
.declareAcquiredMethod("notifyValid", "notifyValid")
.declareMethod('render', function (options) {
var radio_group = this.props.element.querySelector(".radiogroup"),
i,
input,
label,
div,
field_json = options.field_json,
value = field_json.default || "",
editable = field_json.editable,
items = field_json.items;
var field_json = options.field_json || {},
state_dict = {
value: field_json.value || field_json.default,
select_first_item: field_json.select_first_item,
editable: field_json.editable,
name: field_json.key,
title: field_json.title,
item_list: field_json.items
};
//the first item will always be selected if no initial default value is supplied.
if (value === "" && field_json.select_first_item) {
value = items[0][1];
if (state_dict.value === "" && state_dict.select_first_item) {
state_dict.value = state_dict.items[0][1];
}
this.props.field_json = field_json;
for (i = 0; i < items.length; i += 1) {
div = document.createElement("div");
div.setAttribute("class", "ui-field-contain");
input = document.createElement("input");
input.setAttribute("class", "ui-btn");
input.setAttribute("type", "radio");
input.setAttribute("name", field_json.key);
input.setAttribute("value", items[i][1]);
if (items[i][1] === value) {
input.setAttribute("checked", true);
}
if (editable === 0) {
input.setAttribute("class", "ui-btn ui-state-disabled");
return this.changeState(state_dict);
})
.onStateChange(function () {
var element = this.element,
gadget = this,
value = this.state.value,
item_list = this.state.item_list,
i,
sub_gadget,
queue;
// Clear first to DOM, append after to reduce flickering/manip
while (element.firstChild) {
element.removeChild(element.firstChild);
}
function enQueue() {
var argument_list = arguments;
queue
.push(function () {
return appendCheckboxField.apply(this, argument_list);
});
}
if (gadget.state.editable) {
queue = new RSVP.Queue();
for (i = 0; i < item_list.length; i += 1) {
enQueue(gadget, item_list[i]);
}
label = document.createElement("label");
label.setAttribute('for', items[i][0]);
label.textContent = items[i][0];
label.setAttribute('data-i18n', items[i][0]);
div.appendChild(label);
div.appendChild(input);
radio_group.appendChild(div);
} else {
queue = gadget.declareGadget('gadget_html5_element.html', {scope: 'sub'})
.push(function (result) {
sub_gadget = result;
var text_content = "";
for (i = 0; i < item_list.length; i += 1) {
if (item_list[i][1] === value) {
text_content = item_list[i][0];
}
}
return sub_gadget.render({
text_content: text_content,
tag: 'p'
});
})
.push(function () {
element.appendChild(sub_gadget.element);
});
}
radio_group.setAttribute("data-type", field_json.orientation);
})
.declareMethod('checkValidity', function () {
var gadget = this,
json_field = gadget.props.field_json;
return new RSVP.Queue()
.push(function () {
return gadget.notifyValid();
})
.push(function () {
return gadget.getContent();
})
.push(function (result) {
if (json_field.required && !result.hasOwnProperty(json_field.key)) {
return gadget.notifyInvalid("This field is required");
}
return true;
});
return queue;
})
.declareMethod('getContent', function () {
var inputs = this.props.element.querySelectorAll("input"),
i,
result = {};
for (i = 0; i < inputs.length; i += 1) {
if (inputs[i].checked === true) {
result[this.props.field_json.key] = inputs[i].value;
break;
var i,
queue = new RSVP.Queue(),
final_result = {},
result_list = [],
gadget = this;
function calculateSubContent(scope) {
queue
.push(function () {
return gadget.getDeclaredGadget(scope)
.push(function (result) {
return result.getContent();
})
.push(function (result) {
result_list.push(result);
});
});
}
if (this.state.editable) {
for (i = 0; i < gadget.state.item_list.length; i += 1) {
calculateSubContent(gadget.state.item_list[i][1]);
}
return queue
.push(function () {
var j;
for (j = 0; j < result_list.length; j += 1) {
if (result_list[j].hasOwnProperty(gadget.state.name)) {
return result_list[j];
}
}
});
}
return result;
return final_result;
});
}(window, rJS, RSVP));
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_js.xml
View file @ ddbcf9ce
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>944.6869.21158.19933</string> </value>
<value> <string>954.58788.20793.64136</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,8 +248,8 @@
</tuple>
<state>
<tuple>
<float>1435817661.94</float>
<string>GMT+2</string>
<float>1477649548.1</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.js
View file @ ddbcf9ce
......@@ -36,6 +36,9 @@
textarea.setAttribute('value', this.state.value);
textarea.value = this.state.value;
}
if (this.state.type === 'radio') {
textarea.checked = this.state.checked;
}
textarea.setAttribute('name', this.state.name);
textarea.setAttribute('type', this.state.type);
if (this.state.title) {
......@@ -90,6 +93,10 @@
}
} else if (this.state.type === 'checkbox') {
result[input.getAttribute('name')] = (input.checked ? 1 : 0);
} else if (this.state.type === 'radio') {
if (input.checked) {
result[input.getAttribute('name')] = input.value;
}
} else {
result[input.getAttribute('name')] = input.value;
}
......@@ -98,10 +105,14 @@
})
.declareMethod('getTextContent', function () {
var result,
var result = '',
input = this.element.querySelector('input');
if (this.state.type === 'checkbox') {
result = (input.checked ? '✓' : '');
} else if (this.state.type === 'radio') {
if (input.checked) {
result = input.value;
}
} else {
result = input.value;
}
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml
View file @ ddbcf9ce
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>954.47167.27024.21401</string> </value>
<value> <string>954.58784.35206.25787</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1476952365.89</float>
<float>1477649395.4</float>
<string>UTC</string>
</tuple>
</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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7