this.renderProgressDialog();
-// var _this = this;
+ var _this = this;
-// window.addEventListener("resize", function() { _this.refresh(); } );
+ window.addEventListener("resize", function() { _this.refresh(); } );
this.fireEvent('initial', this);
},
renderProgressDialog : function()
{
+ var _this = this;
+
this.progressDialog = new Roo.bootstrap.Modal({
cls : 'roo-document-manager-progress-dialog',
allow_close : false,
title : '',
- buttons : Roo.bootstrap.Modal.OK,
+ buttons : [
+ {
+ name :'cancel',
+ weight : 'danger',
+ html : 'Cancel'
+ }
+ ],
listeners : {
- btnclick : function() {
- this.hide();
+ btnclick : function() {
+ _this.uploadCancel();
+ this.hide();
}
}
});
this.progress = new Roo.bootstrap.Progress({
cls : 'roo-document-manager-progress',
active : true,
- striped : true,
+ striped : true
});
this.progress.render(this.progressDialog.getChildContainer());
this.progressBar.render(this.progress.getChildContainer());
},
- updateProgressDialog : function()
- {
-
- },
-
onUploaderClick : function(e)
{
e.preventDefault();
Roo.each(this.files, function(file){
if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
- files.push(file);
+ var f = this.renderPreview(file);
+ files.push(f);
return;
}
this.files = files;
+ if(!this.delegates.length){
+ this.refresh();
+ return;
+ }
+
+ this.progressBar.aria_valuemax = this.delegates.length;
+
this.arrange();
return;
arrange : function()
{
if(!this.delegates.length){
+ this.progressDialog.hide();
this.refresh();
return;
}
- Roo.log('arrange...');
+ var delegate = this.delegates.shift();
- Roo.log(this.delegates.length);
+ this.progressDialog.show();
-// this.progressBar.aria_valuemax = this.delegates.length;
+ this.progressDialog.setTitle((this.progressBar.aria_valuemax - this.delegates.length) + ' / ' + this.progressBar.aria_valuemax);
- var delegate = this.delegates.shift();
+ this.progressBar.update(this.progressBar.aria_valuemax - this.delegates.length);
delegate();
},
return;
}
- var previewEl = this.managerEl.createChild({
- tag : 'div',
- cls : 'roo-document-manager-preview',
- cn : [
- {
- tag : 'div',
- tooltip : response.data.filename,
- cls : 'roo-document-manager-thumb',
- html : '<img src="' + baseURL +'/Images/Thumb/' + this.thumbSize + '/' + response.data.id + '/' + response.data.filename + '">'
- },
- {
- tag : 'button',
- cls : 'close',
- html : 'x'
- }
- ]
- });
-
- var close = previewEl.select('button.close', true).first();
-
- close.on('click', this.onRemove, this, response.data);
-
- response.data.target = previewEl;
-
- var image = previewEl.select('img', true).first();
-
- image.on('click', this.onClick, this, response.data);
+ var file = this.renderPreview(response.data);
- this.files.push(response.data);
+ this.files.push(file);
this.arrange();
process : function(file)
{
- Roo.log('process...');
- Roo.log(file);
-
if(this.editable && file.type.indexOf('image') != -1){
this.fireEvent('edit', this, file);
return;
}
-
+ this.uploadStart(file, false);
return;
},
uploadStart : function(file, crop)
{
- window.open(crop);
-
- return;
-
- var xhr = new XMLHttpRequest();
+ this.xhr = new XMLHttpRequest();
if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
this.arrange();
return;
}
- file.xhr = xhr;
+ file.xhr = this.xhr;
this.managerEl.createChild({
tag : 'div',
tag : 'div',
tooltip : file.name,
cls : 'roo-document-manager-thumb',
- html : '<i class="fa fa-spinner fa-pulse"></i>'
+ html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
}
]
});
- xhr.open(this.method, this.url, true);
+ this.xhr.open(this.method, this.url, true);
var headers = {
"Accept": "application/json",
for (var headerName in headers) {
var headerValue = headers[headerName];
if (headerValue) {
- xhr.setRequestHeader(headerName, headerValue);
+ this.xhr.setRequestHeader(headerName, headerValue);
}
}
var _this = this;
- xhr.onload = function()
+ this.xhr.onload = function()
{
- _this.xhrOnLoad(xhr);
+ _this.xhrOnLoad(_this.xhr);
}
- xhr.onerror = function()
+ this.xhr.onerror = function()
{
- _this.xhrOnError(xhr);
+ _this.xhrOnError(_this.xhr);
}
var formData = new FormData();
formData.append(this.paramName, file, file.name);
if(this.fireEvent('prepare', this, formData) != false){
- xhr.send(formData);
+ this.xhr.send(formData);
};
- }
+ },
+
+ uploadCancel : function()
+ {
+ this.xhr.abort();
+
+ this.delegates = [];
+
+ Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
+ el.remove();
+ }, this);
+
+ this.arrange();
+ },
+ renderPreview : function(file)
+ {
+ if(typeof(file.target) != 'undefined' && file.target){
+ return file;
+ }
+
+ 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 : '<i class="fa fa-times-circle"></i>'
+ }
+ ]
+ });
+
+ 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();
+
+ var _this = this;
+
+ image.dom.addEventListener("load", function(){ _this.onPreviewLoad(file, image); });
+
+ image.on('click', this.onClick, this, file);
+
+ return file;
+
+ },
+
+ onPreviewLoad : function(file, image)
+ {
+ if(typeof(file.target) == 'undefined' || !file.target){
+ return;
+ }
+
+ var width = image.dom.naturalWidth || image.dom.width;
+ var height = image.dom.naturalHeight || image.dom.height;
+
+ if(width > height){
+ file.target.addClass('wide');
+ return;
+ }
+
+ file.target.addClass('tall');
+ return;
+
+ }
});
projects / roojs1 / blobdiff