Skip to content

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

[erp5_web_renderjs_ui] Rewrite checkbox field 

Use an html5 input subgadget to handle the DOM events
parent 6f9869b1
Show whitespace changes
Inline Side-by-side
Showing with 61 additions and 34 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_checkboxfield_html.html
View file @ b9282d5d
...@@ -11,10 +11,8 @@ ...@@ -11,10 +11,8 @@
<!-- custom script --> <!-- custom script -->
<script src="gadget_erp5_field_checkbox.js" type="text/javascript"></script> <script src="gadget_erp5_field_checkbox.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<input type="checkbox" class="ui-btn"/> <div data-gadget-url="gadget_html5_input.html" data-gadget-scope="sub"></div>
</body> </body>
</html> </html>
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_checkboxfield_html.xml
View file @ b9282d5d
...@@ -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.6819.59898.35293</string> </value> <value> <string>954.35638.15944.23620</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>1435814886.24</float> <float>1476260804.53</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_checkboxfield_js.js
View file @ b9282d5d
/*global window, rJS, RSVP */ /*global window, rJS */
/*jslint indent: 2, maxerr: 3 */ /*jslint indent: 2, maxerr: 3, maxlen: 80 */
(function (window, rJS) { (function (window, rJS) {
"use strict"; "use strict";
rJS(window) rJS(window)
.ready(function (gadget) { .setState({
return gadget.getElement() type: 'checkbox'
.push(function (element) {
gadget.element = element;
});
}) })
.declareMethod('render', function (options) { .declareMethod('render', function (options) {
var input = this.element.querySelector('input'), var field_json = options.field_json || {},
field_json = options.field_json || {}; state_dict = {
input.checked = field_json.value || field_json.default; checked: field_json.value || field_json.default,
input.setAttribute('name', field_json.key); editable: field_json.editable,
input.setAttribute('title', field_json.title); name: field_json.key,
if (field_json.editable === 0) { title: field_json.title
input.setAttribute("class", "ui-btn ui-state-readonly"); };
} return this.changeState(state_dict);
})
.onStateChange(function () {
var gadget = this;
return this.getDeclaredGadget('sub')
.push(function (input) {
return input.render(gadget.state);
});
}) })
.declareMethod('getContent', function () { .declareMethod('getContent', function () {
var input = this.element.querySelector('input'), if (this.state.editable) {
result = {}; return this.getDeclaredGadget('sub')
result[input.getAttribute('name')] = (input.checked ? 1 : 0); .push(function (gadget) {
return result; return gadget.getContent();
});
}
return {};
})
.declareMethod('checkValidity', function () {
if (this.state.editable) {
return this.getDeclaredGadget('sub')
.push(function (gadget) {
return gadget.checkValidity();
});
}
return true;
}); });
}(window, rJS)); }(window, rJS));
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_checkboxfield_js.xml
View file @ b9282d5d
...@@ -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.6824.36715.55227</string> </value> <value> <string>954.35656.703.56354</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>1435815104.42</float> <float>1476262104.61</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 @ b9282d5d
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
rJS(window) rJS(window)
.setState({ .setState({
editable: false, editable: false,
value: '', value: undefined,
checked: undefined,
title: '', title: '',
type: 'text', type: 'text',
required: false required: false
...@@ -15,6 +16,7 @@ ...@@ -15,6 +16,7 @@
.declareMethod('render', function (options) { .declareMethod('render', function (options) {
var state_dict = { var state_dict = {
value: options.value || "", value: options.value || "",
checked: options.checked,
editable: options.editable, editable: options.editable,
required: options.required, required: options.required,
name: options.name, name: options.name,
...@@ -27,8 +29,13 @@ ...@@ -27,8 +29,13 @@
.onStateChange(function () { .onStateChange(function () {
var textarea = this.element.querySelector('input'); var textarea = this.element.querySelector('input');
if (this.state.value !== undefined) {
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.checked !== undefined) {
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) {
...@@ -64,7 +71,11 @@ ...@@ -64,7 +71,11 @@
input; input;
if (this.state.editable) { if (this.state.editable) {
input = this.element.querySelector('input'); input = this.element.querySelector('input');
if (input.value !== undefined) {
result[input.getAttribute('name')] = input.value; result[input.getAttribute('name')] = input.value;
} else if (input.checked !== undefined) {
result[input.getAttribute('name')] = (input.checked ? 1 : 0);
}
} }
return result; return result;
}) })
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml
View file @ b9282d5d
...@@ -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.34535.18115.52548</string> </value> <value> <string>954.35661.46722.46711</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>1476198804.5</float> <float>1476262019.89</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