Commit 6f64afd1 authored by Mukul's avatar Mukul

[erp5_officejs][erp5_web_renderjs_ui] Adds multi upload and accept feature in HTML5 input field.

parent ae86aa6f
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>ERP5 Media Player Panel</title>
<!--
data-i18n=Editable
-->
<!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<script src="gadget_global.js" type="text/javascript"></script>
<script id="panel-template-header" type="text/x-handlebars-template">
<div data-role="header" class="ui-bar-inherit">
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-left">
<div class="ui-controlgroup-controls">
<button data-i18n="Close" class="ui-btn ui-btn-icon-notext ui-icon-delete">Close</button>
</div>
</div>
</div>
</script>
<script id="panel-template-body" type="text/x-handlebars-template">
<div class="ui-content">
<form class="dialog_form">
<button type="submit" class="ui-btn ui-btn-b ui-btn-inline
ui-icon-action ui-btn-icon-right ui-screen-hidden">Submit</button>
<div data-gadget-url="gadget_erp5_searchfield.html"
data-gadget-scope="erp5_searchfield"
data-gadget-sandbox="public"></div>
</form>
<ul data-role="listview" class="ui-listview" data-enhanced="true"></ul>
<dl></dl>
</div>
</script>
<script id="panel-template-body-list" type="text/x-handlebars-template">
<li class="ui-first-child"><a href="{{document_list_href}}" class="ui-btn ui-btn-icon-left ui-icon-search" data-i18n="Document" accesskey="s">Document</a></li>
<li><a href="{{sync_href}}" class="ui-btn ui-btn-icon-left ui-icon-refresh" data-i18n="Synchronize">Synchronize</a></li>
<li class="ui-last-child"><a href="{{storage_href}}" class="ui-btn ui-btn-icon-left ui-icon-dropbox" data-i18n="Storages">Storages</a></li>
<li class="ui-last-child"><a href="{{multi_upload_href}}" class="ui-btn ui-btn-icon-left ui-icon-upload" data-i18n="Upload">Upload</a></li>
</script>
<script id="panel-template-body-desktop" type="text/x-handlebars-template">
<dt class="ui-content-title ui-body-c ui-btn ui-btn-icon-left ui-icon-eye" data-i18n="Views">Views</dt>
{{#each view_list}}
<dd data-role="listview" data-theme="c" data-inset="true" class="document-listview">
<a data-i18n="{{title}}" class="ui-body-inherit" href="{{href}}">{{title}}</a>
</dd>
{{/each}}
<dt class="ui-content-title ui-body-c ui-btn ui-btn-icon-left ui-icon-cogs" data-i18n="Decisions">Decisions</dt>
{{#each workflow_list}}
<dd data-role="listview" data-theme="c" data-inset="true" class="document-listview">
<a data-i18n="{{title}}" class="ui-body-inherit" href="{{href}}">{{title}}</a>
</dd>
{{/each}}
</script>
<!-- custom script -->
<script src="gadget_erp5_ojs_media_player_panel.js" type="text/javascript"></script>
</head>
<body>
<div class="jqm-navmenu-panel"></div>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OfficeJS Jio Multi Upload View</title>
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="gadget_erp5_page_ojs_multi_upload.js"></script>
</head>
<body>
<div data-gadget-url="gadget_erp5_form.html"
data-gadget-scope="form_view"
data-gadget-sandbox="public">
</div>
</body>
</html>
/*global window, rJS, RSVP, loopEventListener,
jIO, document */
/*jslint nomen: true, indent: 2, maxerr: 3 */
(function (window, rJS, jIO, RSVP) {
"use strict";
var content_type = {
Spreadsheet: 'application/x-asc-spreadsheet',
Presentation: 'application/x-asc-presentation',
Text: 'application/x-asc-text'
};
rJS(window)
/////////////////////////////////////////////////////////////////
// Acquired methods
/////////////////////////////////////////////////////////////////
.declareAcquiredMethod("updateHeader", "updateHeader")
.declareAcquiredMethod("getUrlFor", "getUrlFor")
.declareAcquiredMethod("getSetting", "getSetting")
.declareAcquiredMethod("notifySubmitting", "notifySubmitting")
.declareAcquiredMethod("notifySubmitted", "notifySubmitted")
.declareAcquiredMethod("jio_putAttachment", "jio_putAttachment")
.declareAcquiredMethod("redirect", "redirect")
.declareAcquiredMethod("jio_post", "jio_post")
.declareAcquiredMethod("jio_put", "jio_put")
.declareAcquiredMethod("jio_putAttachment", "jio_putAttachment")
/////////////////////////////////////////////////////////////////
// declared methods
/////////////////////////////////////////////////////////////////
.declareMethod("render", function () {
var gadget = this;
return gadget.changeState({
title: 'Untitled Document'
});
})
.declareMethod('putIntoDB', function (data, portal_type, parent_relative_url) {
var gadget = this,
blob = jIO.util.dataURItoBlob(data.url),
post_variables = {
title: "Untitled Document",
portal_type: portal_type,
parent_relative_url: parent_relative_url,
content_type: content_type[portal_type] || undefined
};
post_variables.title = data.file_name || post_variables.title;
return gadget.jio_post(post_variables)
.push(function (id) {
return gadget.jio_putAttachment(id, 'data', blob);
})
.push(undefined, function (error) {
if (error.target && error.target.error.name === 'NotReadableError') {
return gadget.notifySubmitted({message: error.target.error.message, status: 'fail'});
}
throw error;
});
})
.declareMethod('triggerSubmit', function () {
var gadget = this;
return gadget.notifySubmitting()
.push(function () {
return gadget.getDeclaredGadget('form_view');
})
.push(function (form_gadget) {
return form_gadget.getContent();
})
.push(function (content) {
return new RSVP.Queue()
.push(function () {
return RSVP.all([
gadget.getSetting('portal_type'),
gadget.getSetting('parent_relative_url')
]);
})
.push(function (result) {
var promiseArray = [],
data_array = content.data,
i,
portal_type = result[0],
parent_relative_url = result[1];
for (i = 0; i < data_array.length; i += 1) {
promiseArray.push(gadget.putIntoDB(data_array[i], portal_type, parent_relative_url));
}
return RSVP.all(promiseArray);
});
})
.push(function () {
return RSVP.all([
gadget.notifySubmitted({message: 'Data Updated', status: 'success'}),
gadget.redirect({
command: 'display',
options: {
page: 'ojs_media_player_document_list',
editable: 'true'
}
})
]);
});
})
.onStateChange(function () {
var gadget = this;
return gadget.getDeclaredGadget('form_view')
.push(function (form_gadget) {
return form_gadget.render({
erp5_document: {
"_embedded": {
"_view": {
"my_file": {
"description": "",
"title": "Upload",
"default": "",
"css_class": "",
"required": 1,
"editable": 1,
"key": "data",
"hidden": 0,
"multiple": "true",
"accept": "audio/*",
"type": "FileField"
}
}
},
"_links": {
"type": {
// form_list display portal_type in header
name: ""
}
}
},
form_definition: {
group_list: [[
"left",
[["my_file"]]
]]
}
});
})
.push(function () {
return gadget.getUrlFor({command: "change", options: {"page": "ojs_media_player_document_list"}});
})
.push(function (result) {
return gadget.updateHeader({
page_title: 'Document(s)',
selection_url: result,
save_action: true
});
});
});
}(window, rJS, jIO, RSVP));
...@@ -102,6 +102,7 @@ ...@@ -102,6 +102,7 @@
"editable": 1, "editable": 1,
"key": "data", "key": "data",
"hidden": 0, "hidden": 0,
"accept": "audio/*",
"type": "FileField" "type": "FileField"
}, },
"my_content": { "my_content": {
......
...@@ -238,7 +238,7 @@ ...@@ -238,7 +238,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>966.42637.61915.33826</string> </value> <value> <string>965.42272.6476.33348</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -256,7 +256,7 @@ ...@@ -256,7 +256,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1522941173.9</float> <float>1519294814.86</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -19,7 +19,9 @@ ...@@ -19,7 +19,9 @@
hidden: field_json.hidden, hidden: field_json.hidden,
// Force calling subfield render // Force calling subfield render
// as user may have modified the input value // as user may have modified the input value
render_timestamp: new Date().getTime() render_timestamp: new Date().getTime(),
multiple: field_json.multiple,
accept: field_json.accept
}; };
return this.changeState(state_dict); return this.changeState(state_dict);
}) })
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>965.241.13759.3805</string> </value> <value> <string>965.52413.25948.8260</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>1517321650.56</float> <float>1519831600.83</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -3,6 +3,19 @@ ...@@ -3,6 +3,19 @@
(function (window, document, rJS, RSVP, jIO, getFirstNonEmpty) { (function (window, document, rJS, RSVP, jIO, getFirstNonEmpty) {
"use strict"; "use strict";
function saveAsDataURL(file) {
return new RSVP.Queue()
.push(function () {
return jIO.util.readBlobAsDataURL(file);
})
.push(function (evt) {
return {
url: evt.target.result,
file_name: file.name
};
});
}
rJS(window) rJS(window)
.declareMethod('render', function (options) { .declareMethod('render', function (options) {
...@@ -19,6 +32,8 @@ ...@@ -19,6 +32,8 @@
step: options.step, step: options.step,
hidden: options.hidden, hidden: options.hidden,
trim: options.trim || false, trim: options.trim || false,
multiple: options.multiple,
accept: options.accept,
append: options.append, // text to apend after the field append: options.append, // text to apend after the field
prepend: options.prepend // text to prepend infront the field prepend: options.prepend // text to prepend infront the field
}); });
...@@ -47,6 +62,13 @@ ...@@ -47,6 +62,13 @@
if (this.state.step) { if (this.state.step) {
textarea.setAttribute('step', this.state.step); textarea.setAttribute('step', this.state.step);
} }
if (this.state.accept) {
textarea.setAttribute('accept', this.state.accept);
}
if (this.state.multiple) {
textarea.multiple = true;
}
if (this.state.required) { if (this.state.required) {
textarea.required = true; textarea.required = true;
...@@ -100,21 +122,29 @@ ...@@ -100,21 +122,29 @@
}) })
.declareMethod('getContent', function () { .declareMethod('getContent', function () {
var result = {}, var gadget = this,
result = {},
input; input;
if (this.state.editable) { if (this.state.editable) {
input = this.element.querySelector('input'); input = this.element.querySelector('input');
if (this.state.type === 'file') { if (this.state.type === 'file') {
if (input.files[0] !== undefined) { if (input.files[0] !== undefined) {
return new RSVP.Queue() return new RSVP.Queue()
.push(function () { .push(function () {
return jIO.util.readBlobAsDataURL(input.files[0]); var i,
promise_array = [];
if (gadget.state.multiple) {
for (i = 0; i < input.files.length; i += 1) {
promise_array.push(saveAsDataURL(input.files[i]));
}
return RSVP.all(promise_array);
}
return saveAsDataURL(input.files[0]);
}) })
.push(function (evt) { .push(function (result_dict) {
result[input.getAttribute('name')] = { result[input.getAttribute('name')] = result_dict;
url: evt.target.result,
file_name: input.files[0].name
};
return result; return result;
}); });
} }
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>965.20728.48723.60859</string> </value> <value> <string>966.34378.6978.54135</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>1517936015.16</float> <float>1522420619.52</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