Roo/bootstrap/DocumentManager.js

[roojs1] / Roo / bootstrap / DocumentManager.js

diff --git a/Roo/bootstrap/DocumentManager.js b/Roo/bootstrap/DocumentManager.js
index f8db03a..dce4442 100644 (file)
--- a/Roo/bootstrap/DocumentManager.js
+++ b/Roo/bootstrap/DocumentManager.js
@@ -8,6 +8,7 @@
  * @extends Roo.bootstrap.Component
  * Bootstrap DocumentManager class
  * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} toolTipName default 'filename'
  * @cfg {String} method default POST
  * @cfg {String} url action url
  * @cfg {Number} boxes number of boxes, 0 is no limit.. default 0
@@ -17,6 +18,10 @@
  * @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
+* @cfg {Number} labellg set the width of label (1-12)
+ * @cfg {Number} labelmd set the width of label (1-12)
+ * @cfg {Number} labelsm set the width of label (1-12)
+ * @cfg {Number} labelxs set the width of label (1-12)
  * 
  * @constructor
  * Create a new DocumentManager
@@ -26,6 +31,9 @@
 Roo.bootstrap.DocumentManager = function(config){
     Roo.bootstrap.DocumentManager.superclass.constructor.call(this, config);
     
+    this.files = [];
+    this.delegates = [];
+    
     this.addEvents({
         /**
          * @event initial
@@ -47,6 +55,13 @@ Roo.bootstrap.DocumentManager = function(config){
          * @param {XMLHttpRequest} xhr
          */
         "exception" : true,
+        /**
+         * @event afterupload
+         * Fire when xhr load exception
+         * @param {Roo.bootstrap.DocumentManager} this
+         * @param {XMLHttpRequest} xhr
+         */
+        "afterupload" : true,
         /**
          * @event prepare
          * prepare the form data
@@ -93,7 +108,17 @@ Roo.bootstrap.DocumentManager = function(config){
          * @param {Roo.bootstrap.DocumentManager} this
          * @param {Object} file
          */
-        "process" : true
+        "process" : true,
+        /**
+         * @event previewrendered
+         * Fire when preview rendered
+         * @param {Roo.bootstrap.DocumentManager} this
+         * @param {Object} file
+         */
+        "previewrendered" : true,
+        /**
+         */
+        "previewResize" : true
         
     });
 };
@@ -104,15 +129,22 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
     inputName : '',
     thumbSize : 300,
     multiple : true,
-    files : [],
+    files : false,
     method : 'POST',
     url : '',
     paramName : 'imageUpload',
+    toolTipName : 'filename',
     fieldLabel : '',
     labelWidth : 4,
     labelAlign : 'left',
     editable : true,
-    delegates : [],
+    delegates : false,
+    xhr : false, 
+    
+    labellg : 0,
+    labelmd : 0,
+    labelsm : 0,
+    labelxs : 0,
     
     getAutoCreate : function()
     {   
@@ -167,16 +199,44 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
                 content = [
                     {
                         tag : 'div',
-                        cls : 'column col-md-' + this.labelWidth,
+                        cls : 'column',
                         html : this.fieldLabel
                     },
                     {
                         tag : 'div',
-                        cls : 'column col-md-' + (12 - this.labelWidth),
+                        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);
+                }
+                
             }
         }
         
@@ -225,6 +285,7 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         this.progressDialog = new Roo.bootstrap.Modal({
             cls : 'roo-document-manager-progress-dialog',
             allow_close : false,
+            animate : false,
             title : '',
             buttons : [
                 {
@@ -294,7 +355,7 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
     {
         this.selectorEl.dom.value = '';
         
-        if(!this.files.length){
+        if(!this.files || !this.files.length){
             return;
         }
         
@@ -481,9 +542,11 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         
         this.arrange();
         
+        this.fireEvent('afterupload', this, xhr);
+        
     },
     
-    xhrOnError : function()
+    xhrOnError : function(xhr)
     {
         Roo.log('xhr on error');
         
@@ -571,14 +634,29 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         
         formData.append(this.paramName, file, file.name);
         
-        if(this.fireEvent('prepare', this, formData) != false){
+        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()
     {
-        this.xhr.abort();
+        if (this.xhr) {
+            this.xhr.abort();
+        }
         
         this.delegates = [];
         
@@ -595,15 +673,17 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
             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.filename,
+                    tooltip : file[this.toolTipName],
                     cls : 'roo-document-manager-thumb',
-                    html : '<img src="' + baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename + '">'
+                    html : '<img tooltip="' + file[this.toolTipName] + '" src="' + img_src + '">'
                 },
                 {
                     tag : 'button',
@@ -627,6 +707,8 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         
         image.on('click', this.onClick, this, file);
         
+        this.fireEvent('previewrendered', this, file);
+        
         return file;
         
     },
@@ -640,6 +722,10 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         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;
@@ -709,6 +795,8 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
             formData.append('mimetype', file.mimetype);
         }
         
+        Roo.log(formData);
+        
         if(this.fireEvent('prepare', this, formData) != false){
             this.xhr.send(formData);
         };