From: Alan Knowles Date: Wed, 10 Mar 2021 07:10:04 +0000 (+0800) Subject: fixes for image tidy up on upload X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=38784544faa14985ca1db3e11ff8acae4f8c1dcc fixes for image tidy up on upload --- diff --git a/Roo/bootstrap/CardUploader.js b/Roo/bootstrap/CardUploader.js index 8e64291395..aaf4df7a8c 100644 --- a/Roo/bootstrap/CardUploader.js +++ b/Roo/bootstrap/CardUploader.js @@ -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("{0}", 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'); } diff --git a/docs/src/Roo_bootstrap_Card.js.html b/docs/src/Roo_bootstrap_Card.js.html index ce5a9718ac..c37615276f 100644 --- a/docs/src/Roo_bootstrap_Card.js.html +++ b/docs/src/Roo_bootstrap_Card.js.html @@ -744,7 +744,10 @@ }, setHeaderText: function(html) { - this.headerContainerEl.dom.innerHTML = html; + this.header = html; + if (this.headerContainerEl) { + this.headerContainerEl.dom.innerHTML = html; + } } diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index f6d0dbb663..419d952e01 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -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("{0}", 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'); } diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index 5fd0606c14..5d31843531 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -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("{0}",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("{0}",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();