Skip to content

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

[erp5_web_renderjs_ui] Reimplement multicheckbox field

parent ddbcf9ce
Show whitespace changes
Inline Side-by-side
Showing with 147 additions and 98 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_html.html
View file @ 3e075f4f
...@@ -8,29 +8,10 @@ ...@@ -8,29 +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="gadget_global.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<!-- custom script --> <!-- custom script -->
<script src="gadget_erp5_field_multicheckbox.js" type="text/javascript"></script> <script src="gadget_erp5_field_multicheckbox.js" type="text/javascript"></script>
<script id="unchecked-template" type="text/x-handlebars-template">
<div class="ui-field-contain">
<label for="{{text}}" data-i18n="{{text}}">{{text}}</label>
<input type="checkbox" value= "{{value}}" name="{{text}}" class ="ui-btn" data-i18n="{{text}}">
</div>
</script>
<script id="checked-template" type="text/x-handlebars-template">
<diV class="ui-field-contain">
<label for="{{text}}" data-i18n="{{text}}">{{text}}</label>
<input type="checkbox" value= "{{value}}" checked=true data-i18n="{{text}}" class ="ui-btn" name="{{text}}">
</div>
</script>
</head> </head>
<body> <body>
<fieldset class="ui-controlgroup ui-corner-all ui-controlgroup-vertical">
<div class="checkbox_container">
</div>
</fieldset>
</body> </body>
</html> </html>
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_html.xml
View file @ 3e075f4f
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>944.6874.36886.54937</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>1435817983.35</float> <float>1477656021.33</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_multicheckboxfield_js.js
View file @ 3e075f4f
/*global window, rJS, Handlebars, document, RSVP, loopEventListener*/ /*global window, rJS, RSVP, document*/
/*jslint nomen: true, indent: 2, maxerr: 3 */ /*jslint nomen: true, indent: 2, maxerr: 3 */
(function (window, rJS, Handlebars, RSVP) { (function (window, rJS, RSVP, document) {
'use strict'; 'use strict';
/////////////////////////////////////////////////////////////////
// Handlebars function appendCheckboxField(gadget, item, checked) {
///////////////////////////////////////////////////////////////// var input_gadget,
// Precompile the templates while loading the first gadget instance label_gadget;
var gadget_klass = rJS(window),
unchecked_source = gadget_klass.__template_element if (!gadget.state.editable) {
.getElementById("unchecked-template") if (checked) {
.innerHTML, return gadget.declareGadget('gadget_html5_element.html')
unchecked_template = Handlebars.compile(unchecked_source), .push(function (result) {
checked_source = gadget_klass.__template_element label_gadget = result;
.getElementById("checked-template") return result.render({
.innerHTML, tag: 'p',
checked_template = Handlebars.compile(checked_source); text_content: item[0]
gadget_klass
.ready(function (g) {
g.props = {};
})
// Assign the element to a variable
.ready(function (g) {
return g.getElement()
.push(function (element) {
g.props.element = element;
}); });
}) })
.declareAcquiredMethod("translateHtml", "translateHtml") .push(function () {
.declareMethod('render', function (options) { gadget.element.appendChild(label_gadget.element);
var gadget = this,
tmp,
template,
container,
field_json = options.field_json,
i;
gadget.props.field_json = field_json;
container = gadget.props.element.querySelector(".checkbox_container");
tmp = "";
for (i = 0; i < field_json.items.length; i += 1) {
if (field_json.default.indexOf(field_json.items[i][1]) > -1) {
template = checked_template;
} else {
template = unchecked_template;
}
tmp += template({
value: field_json.items[i][1],
text: field_json.items[i][0]
}); });
} }
container.innerHTML = tmp; return;
return new RSVP.Queue() }
return gadget.declareGadget('gadget_html5_input.html', {scope: item[1]})
.push(function (result) {
input_gadget = result;
var state_dict = {
type: 'checkbox',
name: gadget.state.name,
value: item[1],
checked: checked,
editable: true
};
return result.render(state_dict);
})
.push(function () { .push(function () {
return gadget.translateHtml(container.innerHTML); 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)
.declareMethod('render', function (options) {
var field_json = options.field_json || {},
state_dict = {
editable: field_json.editable,
name: field_json.key,
item_list: field_json.items,
value_list: field_json.value || field_json.default
};
return this.changeState(state_dict);
}) })
.push(function (translated_htmls) {
var checkbox_list; .onStateChange(function () {
container.innerHTML = translated_htmls; var element = this.element,
if (field_json.editable !== 1) { gadget = this,
checkbox_list = container.querySelectorAll('input[type="checkbox"]'); value_list = this.state.value_list,
for (i = 0; i < checkbox_list.length; i += 1) { value_dict = {},
checkbox_list[i].setAttribute("class", "ui-btn ui-shadow ui-state-readonly"); item_list = this.state.item_list,
i,
queue;
// Clear first to DOM, append after to reduce flickering/manip
while (element.firstChild) {
element.removeChild(element.firstChild);
} }
for (i = 0; i < value_list.length; i += 1) {
value_dict[value_list[i]] = null;
} }
function enQueue() {
var argument_list = arguments;
queue
.push(function () {
return appendCheckboxField.apply(this, argument_list);
}); });
}
queue = new RSVP.Queue();
for (i = 0; i < item_list.length; i += 1) {
enQueue(gadget, item_list[i], value_dict.hasOwnProperty(item_list[i][1]));
}
return queue;
}) })
.declareMethod('getContent', function () { .declareMethod('getContent', function () {
var gadget = this, var i,
result = {}, queue = new RSVP.Queue(),
tmp = [], final_result = {},
checkbox_list = this.props.element.querySelectorAll('input[type="checkbox"]'), result_list = [],
i; gadget = this;
for (i = 0; i < checkbox_list.length; i += 1) {
if (checkbox_list[i].checked) { function calculateSubContent(scope) {
tmp.push(checkbox_list[i].value); 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,
value_list = [];
for (j = 0; j < result_list.length; j += 1) {
if (result_list[j][gadget.state.name]) {
value_list.push(gadget.state.item_list[j][1]);
}
} }
final_result[gadget.state.name] = value_list;
final_result["default_" + gadget.state.name + ":int"] = 0;
return final_result;
});
} }
result[gadget.props.field_json.key] = tmp; return final_result;
result["default_" + gadget.props.field_json.key + ":int"] = 0;
return result;
}); });
}(window, rJS, Handlebars, RSVP)); }(window, rJS, RSVP, document));
\ No newline at end of file \ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_js.xml
View file @ 3e075f4f
...@@ -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.6786.16715.57156</string> </value> <value> <string>954.58934.61981.16162</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>1435813427.52</float> <float>1477658355.17</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