Roo.bootstrap.DocumentManager = function(config){
Roo.bootstrap.DocumentManager.superclass.constructor.call(this, config);
this.files = [];
this.delegates = [];
this.addEvents({
"initial" : true,
"inspect" : true,
"exception" : true,
"afterupload" : true,
"prepare" : true,
"remove" : true,
"refresh" : true,
"click" : true,
"edit" : true,
"beforeselectfile" : true,
"process" : true,
"previewrendered" : true,
"previewResize" : true
});
};
Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, {
boxes : 0,
inputName : '',
thumbSize : 300,
multiple : true,
files : false,
method : 'POST',
url : '',
paramName : 'imageUpload',
toolTipName : 'filename',
fieldLabel : '',
labelWidth : 4,
labelAlign : 'left',
editable : true,
delegates : false,
xhr : false,
labellg : 0,
labelmd : 0,
labelsm : 0,
labelxs : 0,
getAutoCreate : function()
{
var managerWidget = {
tag : 'div',
cls : 'roo-document-manager',
cn : [
{
tag : 'input',
cls : 'roo-document-manager-selector',
type : 'file'
},
{
tag : 'div',
cls : 'roo-document-manager-uploader',
cn : [
{
tag : 'div',
cls : 'roo-document-manager-upload-btn',
html : '<i class="fa fa-plus"></i>'
}
]
}
]
};
var content = [
{
tag : 'div',
cls : 'column col-md-12',
cn : managerWidget
}
];
if(this.fieldLabel.length){
content = [
{
tag : 'div',
cls : 'column col-md-12',
html : this.fieldLabel
},
{
tag : 'div',
cls : 'column col-md-12',
cn : managerWidget
}
];
if(this.labelAlign == 'left'){
content = [
{
tag : 'div',
cls : 'column',
html : this.fieldLabel
},
{
tag : 'div',
cls : 'column',
cn : managerWidget
}
];
if(this.labelWidth > 12){
content[0].style = "width: " + this.labelWidth + 'px';
}
if(this.labelWidth < 13 && this.labelmd == 0){
this.labelmd = this.labelWidth;
}
if(this.labellg > 0){
content[0].cls += ' col-lg-' + this.labellg;
content[1].cls += ' col-lg-' + (12 - this.labellg);
}
if(this.labelmd > 0){
content[0].cls += ' col-md-' + this.labelmd;
content[1].cls += ' col-md-' + (12 - this.labelmd);
}
if(this.labelsm > 0){
content[0].cls += ' col-sm-' + this.labelsm;
content[1].cls += ' col-sm-' + (12 - this.labelsm);
}
if(this.labelxs > 0){
content[0].cls += ' col-xs-' + this.labelxs;
content[1].cls += ' col-xs-' + (12 - this.labelxs);
}
}
}
var cfg = {
tag : 'div',
cls : 'row clearfix',
cn : content
};
return cfg;
},
initEvents : function()
{
this.managerEl = this.el.select('.roo-document-manager', true).first();
this.managerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.selectorEl = this.el.select('.roo-document-manager-selector', true).first();
this.selectorEl.hide();
if(this.multiple){
this.selectorEl.attr('multiple', 'multiple');
}
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.onUploaderClick, this);
this.renderProgressDialog();
var _this = this;
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,
animate : 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();
if(this.fireEvent('beforeselectfile', this) != false){
this.selectorEl.dom.click();
}
},
onFileSelected : function(e)
{
e.preventDefault();
if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
return;
}
Roo.each(this.selectorEl.dom.files, function(file){
if(this.fireEvent('inspect', this, file) != false){
this.files.push(file);
}
}, this);
this.queue();
},
queue : function()
{
this.selectorEl.dom.value = '';
if(!this.files || !this.files.length){
return;
}
if(this.boxes > 0 && this.files.length > this.boxes){
this.files = this.files.slice(0, this.boxes);
}
this.uploader.show();
if(this.boxes > 0 && this.files.length > this.boxes - 1){
this.uploader.hide();
}
var _this = this;
var files = [];
var docs = [];
Roo.each(this.files, function(file){
if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
var f = this.renderPreview(file);
files.push(f);
return;
}
if(file.type.indexOf('image') != -1){
this.delegates.push(
(function(){
_this.process(file);
}).createDelegate(this)
);
return;
}
docs.push(
(function(){
_this.process(file);
}).createDelegate(this)
);
}, this);
this.files = files;
this.delegates = this.delegates.concat(docs);
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;
}
var delegate = this.delegates.shift();
this.progressDialog.show();
this.progressDialog.setTitle((this.progressBar.aria_valuemax - this.delegates.length) + ' / ' + this.progressBar.aria_valuemax);
this.progressBar.update(this.progressBar.aria_valuemax - this.delegates.length);
delegate();
},
refresh : function()
{
this.uploader.show();
if(this.boxes > 0 && this.files.length > this.boxes - 1){
this.uploader.hide();
}
Roo.isTouch ? this.closable(false) : this.closable(true);
this.fireEvent('refresh', this);
},
onRemove : function(e, el, o)
{
e.preventDefault();
this.fireEvent('remove', this, o);
},
remove : function(o)
{
var files = [];
Roo.each(this.files, function(file){
if(typeof(file.id) == 'undefined' || file.id * 1 < 1 || file.id != o.id){
files.push(file);
return;
}
o.target.remove();
}, this);
this.files = files;
this.refresh();
},
clear : function()
{
Roo.each(this.files, function(file){
if(!file.target){
return;
}
file.target.remove();
}, this);
this.files = [];
this.refresh();
},
onClick : function(e, el, o)
{
e.preventDefault();
this.fireEvent('click', this, o);
},
closable : function(closable)
{
Roo.each(this.managerEl.select('.roo-document-manager-preview > button.close', true).elements, function(el){
el.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
if(closable){
el.show();
return;
}
el.hide();
}, this);
},
xhrOnLoad : function(xhr)
{
Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
el.remove();
}, this);
if (xhr.readyState !== 4) {
this.arrange();
this.fireEvent('exception', this, xhr);
return;
}
var response = Roo.decode(xhr.responseText);
if(!response.success){
this.arrange();
this.fireEvent('exception', this, xhr);
return;
}
var file = this.renderPreview(response.data);
this.files.push(file);
this.arrange();
this.fireEvent('afterupload', this, xhr);
},
xhrOnError : function(xhr)
{
Roo.log('xhr on error');
var response = Roo.decode(xhr.responseText);
Roo.log(response);
this.arrange();
},
process : function(file)
{
if(this.fireEvent('process', this, file) !== false){
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);
var options = {
file : file,
manually : false
};
if(this.fireEvent('prepare', this, formData, options) != false){
if(options.manually){
return;
}
this.xhr.send(formData);
return;
};
this.uploadCancel();
},
uploadCancel : function()
{
if (this.xhr) {
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 img_src = encodeURI(baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename);
var previewEl = this.managerEl.createChild({
tag : 'div',
cls : 'roo-document-manager-preview',
cn : [
{
tag : 'div',
tooltip : file[this.toolTipName],
cls : 'roo-document-manager-thumb',
html : '<img tooltip="' + file[this.toolTipName] + '" src="' + img_src + '">'
},
{
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);
this.fireEvent('previewrendered', 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(!this.previewResize) {
return;
}
if(width > height){
file.target.addClass('wide');
return;
}
file.target.addClass('tall');
return;
},
uploadFromSource : function(file, crop)
{
this.xhr = new XMLHttpRequest();
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');
formData.append('crop', crop);
if(typeof(file.filename) != 'undefined'){
formData.append('filename', file.filename);
}
if(typeof(file.mimetype) != 'undefined'){
formData.append('mimetype', file.mimetype);
}
Roo.log(formData);
if(this.fireEvent('prepare', this, formData) != false){
this.xhr.send(formData);
};
}
});