Commit b9282d5d authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Rewrite checkbox field

Use an html5 input subgadget to handle the DOM events
parent 6f9869b1
No related merge requests found
......@@ -11,10 +11,8 @@
<!-- custom script -->
<script src="gadget_erp5_field_checkbox.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" class="ui-btn"/>
<div data-gadget-url="gadget_html5_input.html" data-gadget-scope="sub"></div>
</body>
</html>
\ No newline at end of file
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>944.6819.59898.35293</string> </value>
<value> <string>954.35638.15944.23620</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,8 +252,8 @@
</tuple>
<state>
<tuple>
<float>1435814886.24</float>
<string>GMT+2</string>
<float>1476260804.53</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
/*global window, rJS, RSVP */
/*jslint indent: 2, maxerr: 3 */
/*global window, rJS */
/*jslint indent: 2, maxerr: 3, maxlen: 80 */
(function (window, rJS) {
"use strict";
rJS(window)
.ready(function (gadget) {
return gadget.getElement()
.push(function (element) {
gadget.element = element;
});
.setState({
type: 'checkbox'
})
.declareMethod('render', function (options) {
var input = this.element.querySelector('input'),
field_json = options.field_json || {};
input.checked = field_json.value || field_json.default;
input.setAttribute('name', field_json.key);
input.setAttribute('title', field_json.title);
if (field_json.editable === 0) {
input.setAttribute("class", "ui-btn ui-state-readonly");
}
var field_json = options.field_json || {},
state_dict = {
checked: field_json.value || field_json.default,
editable: field_json.editable,
name: field_json.key,
title: field_json.title
};
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 () {
var input = this.element.querySelector('input'),
result = {};
result[input.getAttribute('name')] = (input.checked ? 1 : 0);
return result;
if (this.state.editable) {
return this.getDeclaredGadget('sub')
.push(function (gadget) {
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));
\ No newline at end of file
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>944.6824.36715.55227</string> </value>
<value> <string>954.35656.703.56354</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,8 +248,8 @@
</tuple>
<state>
<tuple>
<float>1435815104.42</float>
<string>GMT+2</string>
<float>1476262104.61</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
......@@ -6,7 +6,8 @@
rJS(window)
.setState({
editable: false,
value: '',
value: undefined,
checked: undefined,
title: '',
type: 'text',
required: false
......@@ -15,6 +16,7 @@
.declareMethod('render', function (options) {
var state_dict = {
value: options.value || "",
checked: options.checked,
editable: options.editable,
required: options.required,
name: options.name,
......@@ -27,8 +29,13 @@
.onStateChange(function () {
var textarea = this.element.querySelector('input');
textarea.setAttribute('value', this.state.value);
textarea.value = this.state.value;
if (this.state.value !== undefined) {
textarea.setAttribute('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('type', this.state.type);
if (this.state.title) {
......@@ -64,7 +71,11 @@
input;
if (this.state.editable) {
input = this.element.querySelector('input');
result[input.getAttribute('name')] = input.value;
if (input.value !== undefined) {
result[input.getAttribute('name')] = input.value;
} else if (input.checked !== undefined) {
result[input.getAttribute('name')] = (input.checked ? 1 : 0);
}
}
return result;
})
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>954.34535.18115.52548</string> </value>
<value> <string>954.35661.46722.46711</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1476198804.5</float>
<float>1476262019.89</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