Skip to content

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

[erp5_web_renderjs_ui] Reimplement radiofield 

Support calling render multiple times
parent c4d213a7
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 @ 6814177e
...@@ -11,11 +11,7 @@ ...@@ -11,11 +11,7 @@
<!-- custom script --> <!-- custom script -->
<script src="gadget_erp5_field_radio.js" type="text/javascript"></script> <script src="gadget_erp5_field_radio.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<fieldset class="ui-controlgroup ui-corner-all ui-controlgroup-vertical">
<div class="radiogroup">
</div>
</fieldset>
</body> </body>
</html> </html>
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_html.xml
View file @ 6814177e
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>943.62898.42115.10666</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,8 +252,8 @@ ...@@ -252,8 +252,8 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1435816933.09</float> <float>1477649679.02</float>
<string>GMT+2</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
</object> </object>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_js.js
View file @ 6814177e
...@@ -3,83 +3,154 @@ ...@@ -3,83 +3,154 @@
(function (window, rJS, RSVP) { (function (window, rJS, RSVP) {
"use strict"; "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) 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) { .declareMethod('render', function (options) {
var radio_group = this.props.element.querySelector(".radiogroup"), var field_json = options.field_json || {},
i, state_dict = {
input, value: field_json.value || field_json.default,
label, select_first_item: field_json.select_first_item,
div, editable: field_json.editable,
field_json = options.field_json, name: field_json.key,
value = field_json.default || "", title: field_json.title,
editable = field_json.editable, item_list: field_json.items
items = field_json.items; };
//the first item will always be selected if no initial default value is supplied. //the first item will always be selected if no initial default value is supplied.
if (value === "" && field_json.select_first_item) { if (state_dict.value === "" && state_dict.select_first_item) {
value = items[0][1]; state_dict.value = state_dict.items[0][1];
} }
this.props.field_json = field_json;
for (i = 0; i < items.length; i += 1) { return this.changeState(state_dict);
div = document.createElement("div"); })
div.setAttribute("class", "ui-field-contain");
input = document.createElement("input"); .onStateChange(function () {
input.setAttribute("class", "ui-btn"); var element = this.element,
input.setAttribute("type", "radio"); gadget = this,
input.setAttribute("name", field_json.key); value = this.state.value,
input.setAttribute("value", items[i][1]); item_list = this.state.item_list,
if (items[i][1] === value) { i,
input.setAttribute("checked", true); sub_gadget,
} queue;
if (editable === 0) {
input.setAttribute("class", "ui-btn ui-state-disabled"); // 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]); } else {
label.textContent = items[i][0]; queue = gadget.declareGadget('gadget_html5_element.html', {scope: 'sub'})
label.setAttribute('data-i18n', items[i][0]); .push(function (result) {
sub_gadget = result;
div.appendChild(label); var text_content = "";
div.appendChild(input);
radio_group.appendChild(div); 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); return queue;
})
.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;
});
}) })
.declareMethod('getContent', function () { .declareMethod('getContent', function () {
var inputs = this.props.element.querySelectorAll("input"), var i,
i, queue = new RSVP.Queue(),
result = {}; final_result = {},
for (i = 0; i < inputs.length; i += 1) { result_list = [],
if (inputs[i].checked === true) { gadget = this;
result[this.props.field_json.key] = inputs[i].value;
break; 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)); }(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 @ 6814177e
...@@ -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.6869.21158.19933</string> </value> <value> <string>954.58788.20793.64136</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>1435817661.94</float> <float>1477649548.1</float>
<string>GMT+2</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
</object> </object>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.js
View file @ 6814177e
...@@ -36,6 +36,9 @@ ...@@ -36,6 +36,9 @@
textarea.setAttribute('value', this.state.value); textarea.setAttribute('value', this.state.value);
textarea.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('name', this.state.name);
textarea.setAttribute('type', this.state.type); textarea.setAttribute('type', this.state.type);
if (this.state.title) { if (this.state.title) {
...@@ -90,6 +93,10 @@ ...@@ -90,6 +93,10 @@
} }
} else if (this.state.type === 'checkbox') { } else if (this.state.type === 'checkbox') {
result[input.getAttribute('name')] = (input.checked ? 1 : 0); result[input.getAttribute('name')] = (input.checked ? 1 : 0);
} else if (this.state.type === 'radio') {
if (input.checked) {
result[input.getAttribute('name')] = input.value;
}
} else { } else {
result[input.getAttribute('name')] = input.value; result[input.getAttribute('name')] = input.value;
} }
...@@ -98,10 +105,14 @@ ...@@ -98,10 +105,14 @@
}) })
.declareMethod('getTextContent', function () { .declareMethod('getTextContent', function () {
var result, var result = '',
input = this.element.querySelector('input'); input = this.element.querySelector('input');
if (this.state.type === 'checkbox') { if (this.state.type === 'checkbox') {
result = (input.checked ? '✓' : ''); result = (input.checked ? '✓' : '');
} else if (this.state.type === 'radio') {
if (input.checked) {
result = input.value;
}
} else { } else {
result = input.value; result = input.value;
} }
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml
View file @ 6814177e
...@@ -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.47167.27024.21401</string> </value> <value> <string>954.58784.35206.25787</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>1476952365.89</float> <float>1477649395.4</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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7