X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=docs%2Fsymbols%2Fsrc%2FRoo_bootstrap_DocumentManager.js.html;h=400627676955d846ef08eeec432b19279abc57ef;hb=b1d19ca25e05783a1bf10a2662408a4c8ac2dde4;hp=d6a0628f752592684a46079fa4397a25e1a9a2ab;hpb=e13cc0e884c0a0c67934a5da91833f82cd02c90b;p=roojs1
diff --git a/docs/symbols/src/Roo_bootstrap_DocumentManager.js.html b/docs/symbols/src/Roo_bootstrap_DocumentManager.js.html
index d6a0628f75..4006276769 100644
--- a/docs/symbols/src/Roo_bootstrap_DocumentManager.js.html
+++ b/docs/symbols/src/Roo_bootstrap_DocumentManager.js.html
@@ -18,6 +18,7 @@
* @cfg {String} fieldLabel
* @cfg {Number} labelWidth default 4
* @cfg {String} labelAlign (left|top) default left
+ * @cfg {Boolean} editable (true|false) allow edit when upload a image default true
*
* @constructor
* Create a new DocumentManager
@@ -74,7 +75,14 @@
* @param {Roo.bootstrap.DocumentManager} this
* @param {Object} file
*/
- "click" : true
+ "click" : true,
+ "edit" : true
});
};
@@ -94,6 +102,8 @@
fieldLabel : '',
labelWidth : 4,
labelAlign : 'left',
+ editable : true,
+ delegates : [],
getAutoCreate : function()
{
@@ -184,12 +194,14 @@
this.selectorEl.attr('multiple', 'multiple');
}
- this.selectorEl.on('change', this.onSelect, this);
+ this.selectorEl.on('change', this.onFileSelected, this);
this.uploader = this.el.select('.roo-document-manager-uploader', true).first();
this.uploader.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- this.uploader.on('click', this.onUpload, this);
+ this.uploader.on('click', this.onUploaderClick, this);
+
+ this.renderProgressDialog();
var _this = this;
@@ -198,15 +210,57 @@
this.fireEvent('initial', this);
},
- onUpload : function(e)
+ renderProgressDialog : function()
{
- e.preventDefault();
+ var _this = this;
+ this.progressDialog = new Roo.bootstrap.Modal({
+ cls : 'roo-document-manager-progress-dialog',
+ allow_close : false,
+ title : '',
+ buttons : [
+ {
+ name :'cancel',
+ weight : 'danger',
+ html : 'Cancel'
+ }
+ ],
+ listeners : {
+ btnclick : function() {
+ _this.uploadCancel();
+ this.hide();
+ }
+ }
+ });
+
+ this.progressDialog.render(Roo.get(document.body));
+
+ this.progress = new Roo.bootstrap.Progress({
+ cls : 'roo-document-manager-progress',
+ active : true,
+ striped : true
+ });
+
+ this.progress.render(this.progressDialog.getChildContainer());
+
+ this.progressBar = new Roo.bootstrap.ProgressBar({
+ cls : 'roo-document-manager-progress-bar',
+ aria_valuenow : 0,
+ aria_valuemin : 0,
+ aria_valuemax : 12,
+ panel : 'success'
+ });
+
+ this.progressBar.render(this.progress.getChildContainer());
+ },
+
+ onUploaderClick : function(e)
+ {
+ e.preventDefault();
this.selectorEl.dom.click();
-
},
- onSelect : function(e)
+ onFileSelected : function(e)
{
e.preventDefault();
@@ -220,11 +274,11 @@
}
}, this);
- this.process();
+ this.queue();
},
- process : function()
+ queue : function()
{
this.selectorEl.dom.value = '';
@@ -236,147 +290,67 @@
this.files = this.files.slice(0, this.boxes);
}
- var xhr = new XMLHttpRequest();
-
- Roo.each(this.files, function(file, index){
- if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
- return;
- }
-
- file.xhr = xhr;
-
- this.managerEl.createChild({
- tag : 'div',
- cls : 'roo-document-manager-loading',
- cn : [
- {
- tag : 'div',
- tooltip : file.name,
- cls : 'roo-document-manager-thumb',
- html : '<i class="fa fa-spinner fa-pulse"></i>'
- }
- ]
-
- });
-
- }, this);
+ this.uploader.show();
- if(this.files.length > this.boxes - 1 ){
+ if(this.files.length > this.boxes - 1){
this.uploader.hide();
}
- var headers = {
- "Accept": "application/json",
- "Cache-Control": "no-cache",
- "X-Requested-With": "XMLHttpRequest"
- };
-
- xhr.open(this.method, this.url, true);
-
- for (var headerName in headers) {
- var headerValue = headers[headerName];
- if (headerValue) {
- xhr.setRequestHeader(headerName, headerValue);
- }
- }
-
var _this = this;
- xhr.onload = function()
- {
- _this.xhrOnLoad(xhr);
- }
-
- xhr.onerror = function()
- {
- _this.xhrOnError(xhr);
- }
-
- var formData = new FormData();
-
- formData.append('returnHTML', 'NO');
+ var files = [];
- Roo.each(this.files, function(file, index){
+ Roo.each(this.files, function(file){
if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
+ var f = this.renderPreview(file);
+ files.push(f);
return;
}
- formData.append(this.getParamName(index), file, file.name);
+ this.delegates.push(
+ (function(){
+ _this.process(file);
+ }).createDelegate(this)
+ );
}, this);
- if(this.fireEvent('prepare', this, formData) != false){
- xhr.send(formData);
- };
+ this.files = files;
- },
-
- getParamName : function(i)
- {
- if(!this.multiple){
- return this.paramName;
+ if(!this.delegates.length){
+ this.refresh();
+ return;
}
- return this.paramName + "_" + i;
+ this.progressBar.aria_valuemax = this.delegates.length;
+
+ this.arrange();
+
+ return;
},
- refresh : function()
+ arrange : function()
{
- Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
- el.remove();
- }, this);
+ if(!this.delegates.length){
+ this.progressDialog.hide();
+ this.refresh();
+ return;
+ }
+ var delegate = this.delegates.shift();
- var files = [];
+ this.progressDialog.show();
- Roo.each(this.files, function(file){
-
- if(typeof(file.id) == 'undefined' || file.id * 1 < 1){
- return;
- }
-
- if(file.target){
- files.push(file);
- return;
- }
-
- var previewEl = this.managerEl.createChild({
- tag : 'div',
- cls : 'roo-document-manager-preview',
- cn : [
- {
- tag : 'div',
- tooltip : file.filename,
- cls : 'roo-document-manager-thumb',
- html : '<img src="' + baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename + '">'
- },
- {
- tag : 'button',
- cls : 'close',
- html : 'x'
- }
- ]
- });
-
- var close = previewEl.select('button.close', true).first();
-
- close.on('click', this.onRemove, this, file);
-
- file.target = previewEl;
-
- var image = previewEl.select('img', true).first();
-
- image.on('click', this.onClick, this, file);
-
- files.push(file);
-
- return;
-
- }, this);
+ this.progressDialog.setTitle((this.progressBar.aria_valuemax - this.delegates.length) + ' / ' + this.progressBar.aria_valuemax);
- this.files = files;
+ this.progressBar.update(this.progressBar.aria_valuemax - this.delegates.length);
+ delegate();
+ },
+
+ refresh : function()
+ {
this.uploader.show();
if(this.files.length > this.boxes - 1){
@@ -441,8 +415,12 @@
xhrOnLoad : function(xhr)
{
+ Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
+ el.remove();
+ }, this);
+
if (xhr.readyState !== 4) {
- this.refresh();
+ this.arrange();
this.fireEvent('exception', this, xhr);
return;
}
@@ -450,27 +428,16 @@
var response = Roo.decode(xhr.responseText);
if(!response.success){
- this.refresh();
+ this.arrange();
this.fireEvent('exception', this, xhr);
return;
}
- var i = 0;
+ var file = this.renderPreview(response.data);
- Roo.each(this.files, function(file, index){
-
- if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
- return;
- }
-
- this.files[index] = response.data[i];
- i++;
-
- return;
-
- }, this);
+ this.files.push(file);
- this.refresh();
+ this.arrange();
},
@@ -481,8 +448,161 @@
var response = Roo.decode(xhr.responseText);
Roo.log(response);
- }
+
+ this.arrange();
+ },
+ process : function(file)
+ {
+ if(this.editable && file.type.indexOf('image') != -1){
+ this.fireEvent('edit', this, file);
+ return;
+ }
+
+ this.uploadStart(file, false);
+
+ return;
+ },
+ uploadStart : function(file, crop)
+ {
+ this.xhr = new XMLHttpRequest();
+
+ if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
+ this.arrange();
+ return;
+ }
+
+ file.xhr = this.xhr;
+
+ this.managerEl.createChild({
+ tag : 'div',
+ cls : 'roo-document-manager-loading',
+ cn : [
+ {
+ tag : 'div',
+ tooltip : file.name,
+ cls : 'roo-document-manager-thumb',
+ html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
+ }
+ ]
+
+ });
+
+ this.xhr.open(this.method, this.url, true);
+
+ var headers = {
+ "Accept": "application/json",
+ "Cache-Control": "no-cache",
+ "X-Requested-With": "XMLHttpRequest"
+ };
+
+ for (var headerName in headers) {
+ var headerValue = headers[headerName];
+ if (headerValue) {
+ this.xhr.setRequestHeader(headerName, headerValue);
+ }
+ }
+
+ var _this = this;
+
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
+ }
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ if(crop){
+ formData.append('crop', crop);
+ }
+
+ formData.append(this.paramName, file, file.name);
+
+ if(this.fireEvent('prepare', this, formData) != false){
+ this.xhr.send(formData);
+ };
+ },
-});