Commit 0ca621e9 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Reimplemented FileField

parent c6253d8c
...@@ -14,6 +14,5 @@ ...@@ -14,6 +14,5 @@
</head> </head>
<body> <body>
<input type="file">
</body> </body>
</html> </html>
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>948.40112.47919.55415</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,7 +252,7 @@ ...@@ -252,7 +252,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1453368107.2</float> <float>1476949800.7</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
/*global window, rJS, RSVP, jIO*/ /*global window, rJS */
/*jslint nomen: true, indent: 2, maxerr: 3 */ /*jslint indent: 2, maxerr: 3 */
(function (window, rJS, RSVP, jIO) { (function (window, rJS) {
"use strict"; "use strict";
rJS(window) rJS(window)
.ready(function (gadget) { .setState({
return gadget.getElement() tag: 'p',
.push(function (element) { type: 'file'
gadget.element = element;
});
}) })
.declareAcquiredMethod("notifyValid", "notifyValid")
.declareAcquiredMethod("notifyInvalid", "notifyInvalid")
.declareAcquiredMethod("notifyChange", "notifyChange")
.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 = {
editable: field_json.editable,
required: field_json.required,
name: field_json.key,
title: field_json.title
};
return this.changeState(state_dict);
})
input.setAttribute('name', field_json.key); .onStateChange(function (modification_dict) {
input.setAttribute('title', field_json.title); var element = this.element,
if (field_json.required === 1) { gadget = this,
input.setAttribute('required', 'required'); url,
result;
if (modification_dict.hasOwnProperty('editable')) {
if (gadget.state.editable) {
url = 'gadget_html5_input.html';
} else {
url = 'gadget_html5_element.html';
}
result = this.declareGadget(url, {scope: 'sub'})
.push(function (input) {
// Clear first to DOM, append after to reduce flickering/manip
while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.appendChild(input.element);
return input;
});
} else {
result = this.getDeclaredGadget('sub');
} }
if (field_json.editable !== 1) { return result
input.setAttribute('readonly', 'readonly'); .push(function (input) {
input.setAttribute('data-wrapper-class', 'ui-state-readonly'); return input.render(gadget.state);
// input.setAttribute('disabled', 'disabled'); });
})
.declareMethod('getContent', function () {
if (this.state.editable) {
return this.getDeclaredGadget('sub')
.push(function (gadget) {
return gadget.getContent();
});
} }
return {};
}) })
.declareMethod('getContent', function () { .declareMethod('getTextContent', function () {
var gadget = this, return "";
input = gadget.element.querySelector('input'), })
file = input.files[0];
if (file === undefined) { .declareMethod('checkValidity', function () {
return {}; if (this.state.editable) {
return this.getDeclaredGadget('sub')
.push(function (gadget) {
return gadget.checkValidity();
});
} }
return new RSVP.Queue() return true;
.push(function () {
return jIO.util.readBlobAsDataURL(file);
})
.push(function (evt) {
var result = {};
result[input.getAttribute('name')] = {
url: evt.target.result,
file_name: file.name
};
return result;
});
}); });
}(window, rJS, RSVP, jIO)); }(window, rJS));
\ No newline at end of file
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>948.41920.59644.21196</string> </value> <value> <string>954.47126.41874.54613</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>1453476561.59</float> <float>1476950143.07</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<!-- 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="jiodev.js" type="text/javascript"></script>
<!-- custom script --> <!-- custom script -->
<script src="gadget_html5_input.js" type="text/javascript"></script> <script src="gadget_html5_input.js" type="text/javascript"></script>
</head> </head>
......
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.2976.31424.22323</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,7 +252,7 @@ ...@@ -252,7 +252,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1475499560.34</float> <float>1476952312.41</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
/*global window, rJS, RSVP */ /*global window, rJS, RSVP, jIO */
/*jslint indent: 2, maxerr: 3, maxlen: 80 */ /*jslint indent: 2, maxerr: 3, maxlen: 80 */
(function (window, rJS, RSVP) { (function (window, rJS, RSVP, jIO) {
"use strict"; "use strict";
rJS(window) rJS(window)
...@@ -74,7 +74,21 @@ ...@@ -74,7 +74,21 @@
input; input;
if (this.state.editable) { if (this.state.editable) {
input = this.element.querySelector('input'); input = this.element.querySelector('input');
if (this.state.type === 'checkbox') { if (this.state.type === 'file') {
if (input.files[0] !== undefined) {
return new RSVP.Queue()
.push(function () {
return jIO.util.readBlobAsDataURL(input.files[0]);
})
.push(function (evt) {
result[input.getAttribute('name')] = {
url: evt.target.result,
file_name: input.files[0].name
};
return result;
});
}
} else if (this.state.type === 'checkbox') {
result[input.getAttribute('name')] = (input.checked ? 1 : 0); result[input.getAttribute('name')] = (input.checked ? 1 : 0);
} else { } else {
result[input.getAttribute('name')] = input.value; result[input.getAttribute('name')] = input.value;
...@@ -145,4 +159,4 @@ ...@@ -145,4 +159,4 @@
return this.notifyInvalid(evt.target.validationMessage); return this.notifyInvalid(evt.target.validationMessage);
}, true, false); }, true, false);
}(window, rJS, RSVP)); }(window, rJS, RSVP, jIO));
\ No newline at end of file \ No newline at end of file
...@@ -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.45675.44850.53452</string> </value> <value> <string>954.47167.27024.21401</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>1476869880.85</float> <float>1476952365.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