fixes for image tidy up on upload
authorAlan Knowles <alan@roojs.com>
Wed, 10 Mar 2021 07:10:04 +0000 (15:10 +0800)
committerAlan Knowles <alan@roojs.com>
Wed, 10 Mar 2021 07:10:04 +0000 (15:10 +0800)
Roo/bootstrap/CardUploader.js
docs/src/Roo_bootstrap_Card.js.html
roojs-bootstrap-debug.js
roojs-bootstrap.js

index 8e64291..aaf4df7 100644 (file)
@@ -210,7 +210,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
             {
                 xns : Roo.bootstrap,
                 xtype : 'CardFooter',
-                items: [
+                 items: [
                     {
                         xns : Roo.bootstrap,
                         xtype : 'Element',
@@ -221,7 +221,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                                 xns : Roo.bootstrap,
                                 xtype : 'Button',
                                 html : String.format("<small>{0}</small>", data.title),
-                                cls : 'col-11 text-left',
+                                cls : 'col-10 text-left',
                                 size: 'sm',
                                 weight: 'link',
                                 fa : 'download',
@@ -235,10 +235,10 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                             {
                                 xns : Roo.bootstrap,
                                 xtype : 'Button',
-                                
+                                style: 'max-height: 28px; ',
                                 size : 'sm',
                                 weight: 'danger',
-                                cls : 'col-1',
+                                cls : 'col-2',
                                 fa : 'times',
                                 listeners : {
                                     click : function() {
@@ -275,6 +275,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                         this.imgEl.set({ 'pointer' : 'cursor' });
                                   
                     }
+                    this.getCardFooter().addClass('p-1');
                     
                   
                 }
index ce5a971..c376152 100644 (file)
     },
     </span><span class="jsdoc-var">setHeaderText</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">)
     {
-        </span><span class="jsdoc-var">this.headerContainerEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.header </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.headerContainerEl</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.headerContainerEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
+        }
     }
 
 
index f6d0dbb..419d952 100644 (file)
@@ -2679,7 +2679,10 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     },
     setHeaderText: function(html)
     {
-        this.headerContainerEl.dom.innerHTML = html;
+        this.header = html;
+        if (this.headerContainerEl) {
+            this.headerContainerEl.dom.innerHTML = html;
+        }
     }
 
     
@@ -12680,7 +12683,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
             {
                 xns : Roo.bootstrap,
                 xtype : 'CardFooter',
-                items: [
+                 items: [
                     {
                         xns : Roo.bootstrap,
                         xtype : 'Element',
@@ -12691,7 +12694,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                                 xns : Roo.bootstrap,
                                 xtype : 'Button',
                                 html : String.format("<small>{0}</small>", data.title),
-                                cls : 'col-11 text-left',
+                                cls : 'col-10 text-left',
                                 size: 'sm',
                                 weight: 'link',
                                 fa : 'download',
@@ -12705,10 +12708,10 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                             {
                                 xns : Roo.bootstrap,
                                 xtype : 'Button',
-                                
+                                style: 'max-height: 28px; ',
                                 size : 'sm',
                                 weight: 'danger',
-                                cls : 'col-1',
+                                cls : 'col-2',
                                 fa : 'times',
                                 listeners : {
                                     click : function() {
@@ -12745,6 +12748,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                         this.imgEl.set({ 'pointer' : 'cursor' });
                                   
                     }
+                    this.getCardFooter().addClass('p-1');
                     
                   
                 }
index 5fd0606..5d31843 100644 (file)
@@ -110,8 +110,8 @@ this.collapsableEl.addClass('show');this.collapsed=false;return;}this.el.select(
 this.el.removeClass('roo-card-rotated');this.el.removeClass('d-none');if(this.rotated){this.collapsableEl.addClass('show');this.rotated=false;this.fireEvent('rotate',this,this.rotated);return;}this.el.addClass('roo-card-rotated');this.footerEl.addClass('d-none');
 this.el.select('.roo-collapsable').removeClass('show');this.rotated=true;this.fireEvent('rotate',this,this.rotated);},dropPlaceHolder:function(A,B,C){if(this.dropEl===false){this.dropEl=Roo.DomHelper.append(this.containerEl,{cls:'d-none'},true);}this.dropEl.removeClass(['d-none','d-block']);
 if(A=='hide'){this.dropEl.addClass('d-none');return;}this.dropEl.dom.parentNode.removeChild(this.dropEl.dom);if(B.card!==true){var D=B.card.el.dom;if(B.position=='above'){D.parentNode.insertBefore(this.dropEl.dom,D);}else if(D.nextSibling){D.parentNode.insertBefore(this.dropEl.dom,D.nextSibling);
-}else{D.parentNode.append(this.dropEl.dom);}}else{this.containerEl.dom.append(this.dropEl.dom);}this.dropEl.addClass('d-block roo-card-dropzone');this.dropEl.setHeight(Roo.get(C.ddel).getHeight());},setHeaderText:function(A){this.headerContainerEl.dom.innerHTML=A;
-}});
+}else{D.parentNode.append(this.dropEl.dom);}}else{this.containerEl.dom.append(this.dropEl.dom);}this.dropEl.addClass('d-block roo-card-dropzone');this.dropEl.setHeight(Roo.get(C.ddel).getHeight());},setHeaderText:function(A){this.header=A;if(this.headerContainerEl){this.headerContainerEl.dom.innerHTML=A;
+}}});
 // Roo/bootstrap/CardHeader.js
 Roo.bootstrap.CardHeader=function(A){Roo.bootstrap.CardHeader.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.CardHeader,Roo.bootstrap.Element,{container_method:'getCardHeader'});
 // Roo/bootstrap/CardFooter.js
@@ -526,11 +526,11 @@ this.addxtype({xns:Roo.bootstrap,xtype:'Button',container_method:'getButtonConta
 this.selectorEl=this.el.select('.roo-card-upload-selector',true).first();this.selectorEl.on('change',this.onFileSelected,this);if(this.images){var t=this;this.images.forEach(function(A){t.addCard(A)});this.images=false;}this.containerEl=this.el.select('.roo-card-uploader-container',true).first();
 },onClick:function(e){e.preventDefault();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(A){this.addFile(A);
 },this);},addFile:function(A){if(typeof(A)==='string'){throw "Add file by name?";return;}if(!A||!this.urlAPI){return;}var B=this;var C=B.urlAPI.createObjectURL(A);this.addCard({id:Roo.bootstrap.CardUploader.ID--,is_uploaded:false,src:C,srcfile:A,title:A.name,mimetype:A.type,preview:false,is_deleted:0}
-);},addCard:function(A){var t=this;var B=[{xns:Roo.bootstrap,xtype:'CardFooter',items:[{xns:Roo.bootstrap,xtype:'Element',cls:'d-flex',items:[{xns:Roo.bootstrap,xtype:'Button',html:String.format("<small>{0}</small>",A.title),cls:'col-11 text-left',size:'sm',weight:'link',fa:'download',listeners:{click:function(){this.downloadCard(A.id)}
-}},{xns:Roo.bootstrap,xtype:'Button',size:'sm',weight:'danger',cls:'col-1',fa:'times',listeners:{click:function(){t.removeCard(A.id)}}}]}]}];var cn=this.addxtype({xns:Roo.bootstrap,xtype:'Card',closeable:true,header:!A.mimetype.match(/image/)&&!A.preview?"Document":false,header_image:A.mimetype.match(/image/)?A.src:A.preview,header_image_fit_square:true,data:A,html:false,items:B,initEvents:function(){Roo.bootstrap.Card.prototype.initEvents.call(this);
-this.imgEl=this.el.select('.card-img-top').first();if(this.imgEl){this.imgEl.on('click',function(){t.previewCard(A.id);},this);this.imgEl.set({'pointer':'cursor'});}}});this.fileCollection.add(cn);if(!A.srcfile){this.updateInput();return;}var _t=this;var C=new FileReader();
-C.addEventListener("load",function(){A.srcdata=C.result;_t.updateInput();});C.readAsDataURL(A.srcfile);},removeCard:function(id){var A=this.fileCollection.get(id);A.data.is_deleted=1;A.data.src='';A.el.dom.parentNode.removeChild(A.el.dom);this.updateInput();
-},reset:function(){this.fileCollection.each(function(A){if(A.el.dom&&A.el.dom.parentNode){A.el.dom.parentNode.removeChild(A.el.dom);}});this.fileCollection.clear();this.updateInput();},updateInput:function(){var A=[];this.fileCollection.each(function(e){A.push(e.data);
+);},addCard:function(A){var t=this;var B=[{xns:Roo.bootstrap,xtype:'CardFooter',items:[{xns:Roo.bootstrap,xtype:'Element',cls:'d-flex',items:[{xns:Roo.bootstrap,xtype:'Button',html:String.format("<small>{0}</small>",A.title),cls:'col-10 text-left',size:'sm',weight:'link',fa:'download',listeners:{click:function(){this.downloadCard(A.id)}
+}},{xns:Roo.bootstrap,xtype:'Button',style:'max-height: 28px; ',size:'sm',weight:'danger',cls:'col-2',fa:'times',listeners:{click:function(){t.removeCard(A.id)}}}]}]}];var cn=this.addxtype({xns:Roo.bootstrap,xtype:'Card',closeable:true,header:!A.mimetype.match(/image/)&&!A.preview?"Document":false,header_image:A.mimetype.match(/image/)?A.src:A.preview,header_image_fit_square:true,data:A,html:false,items:B,initEvents:function(){Roo.bootstrap.Card.prototype.initEvents.call(this);
+this.imgEl=this.el.select('.card-img-top').first();if(this.imgEl){this.imgEl.on('click',function(){t.previewCard(A.id);},this);this.imgEl.set({'pointer':'cursor'});}this.getCardFooter().addClass('p-1');}});this.fileCollection.add(cn);if(!A.srcfile){this.updateInput();
+return;}var _t=this;var C=new FileReader();C.addEventListener("load",function(){A.srcdata=C.result;_t.updateInput();});C.readAsDataURL(A.srcfile);},removeCard:function(id){var A=this.fileCollection.get(id);A.data.is_deleted=1;A.data.src='';A.el.dom.parentNode.removeChild(A.el.dom);
+this.updateInput();},reset:function(){this.fileCollection.each(function(A){if(A.el.dom&&A.el.dom.parentNode){A.el.dom.parentNode.removeChild(A.el.dom);}});this.fileCollection.clear();this.updateInput();},updateInput:function(){var A=[];this.fileCollection.each(function(e){A.push(e.data);
 });this.inputEl().dom.value=JSON.stringify(A);}});Roo.bootstrap.CardUploader.ID=-1;
 // Roo/data/SortTypes.js
 Roo.data.SortTypes={none:function(s){return s;},stripTagsRE:/<\/?[^>]+>/gi,asText:function(s){return String(s).replace(this.stripTagsRE,"");},asUCText:function(s){return String(s).toUpperCase().replace(this.stripTagsRE,"");},asUCString:function(s){return String(s).toUpperCase();