From 35c055f871017bc9b90cb2534e76606d8b9092a1 Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Wed, 31 Mar 2021 18:05:35 +0800 Subject: [PATCH] Fix #6662 - support header image in square --- Roo/bootstrap/Card.js | 26 ++++++++++++++++++++++- Roo/grid/GridView.js | 2 +- docs/src/Roo_bootstrap_Card.js.html | 26 ++++++++++++++++++++++- docs/src/Roo_grid_GridView.js.html | 2 +- roojs-bootstrap-debug.js | 26 ++++++++++++++++++++++- roojs-bootstrap.js | 33 +++++++++++++++-------------- roojs-debug.js | 2 +- roojs-ui-debug.js | 2 +- 8 files changed, 96 insertions(+), 23 deletions(-) diff --git a/Roo/bootstrap/Card.js b/Roo/bootstrap/Card.js index 47c575abbb..60eaa034dc 100644 --- a/Roo/bootstrap/Card.js +++ b/Roo/bootstrap/Card.js @@ -140,6 +140,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { bodyEl: false, // card-body headerContainerEl : false, // headerEl : false, + header_imageEl : false, layoutCls : function() { @@ -350,7 +351,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { }, getCardImageTop : function() { - var ret = this.el.select('.card-img-top',true).first(); + var ret = this.header_imageEl; if (ret.hasClass('d-none')) { ret.removeClass('d-none'); } @@ -407,6 +408,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { this.el.addClass('roo-card-rotated'); this.fireEvent('rotate', this, true); } + this.header_imageEl = this.el.select('.card-img-top',true).first(); + this.header_imageEl.on('load', this.onHeaderImageLoad, this ); }, getDragData : function(e) @@ -748,6 +751,27 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { if (this.headerContainerEl) { this.headerContainerEl.dom.innerHTML = html; } + }, + onHeaderImageLoad : function(ev, he) + { + if (!this.header_image_fit_square) { + return; + } + + var hw = he.naturalHeight / he.naturalWidth; + // wide image = < 0 + // tall image = > 1 + //var w = he.dom.naturalWidth; + var ww = he.width; + he.style.left = 0; + he.style.position = 'relative'; + if (hw > 1) { + var nw = (ww * (1/hw)); + Roo.get(he).setSize( ww * (1/hw), ww); + he.style.left = ((ww - nw)/ 2) + 'px'; + he.style.position = 'relative'; + } + } diff --git a/Roo/grid/GridView.js b/Roo/grid/GridView.js index 28586850d9..20e4d3adb3 100644 --- a/Roo/grid/GridView.js +++ b/Roo/grid/GridView.js @@ -598,7 +598,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, { ); */ if(ctop < stop){ - c.scrollTop = ctop; + c.scrollTop = ctop; //Roo.log("set scrolltop to ctop DISABLE?"); }else if(cbot > sbot){ //Roo.log("set scrolltop to cbot-ch"); diff --git a/docs/src/Roo_bootstrap_Card.js.html b/docs/src/Roo_bootstrap_Card.js.html index c37615276f..2aa75bad5b 100644 --- a/docs/src/Roo_bootstrap_Card.js.html +++ b/docs/src/Roo_bootstrap_Card.js.html @@ -140,6 +140,7 @@ bodyEl: false, // card-body headerContainerEl : false, // headerEl : false, + header_imageEl : false, layoutCls : function() { @@ -350,7 +351,7 @@ }, getCardImageTop : function() { - var ret = this.el.select('.card-img-top',true).first(); + var ret = this.header_imageEl; if (ret.hasClass('d-none')) { ret.removeClass('d-none'); } @@ -407,6 +408,8 @@ this.el.addClass('roo-card-rotated'); this.fireEvent('rotate', this, true); } + this.header_imageEl = this.el.select('.card-img-top',true).first(); + this.header_imageEl.on('load', this.onHeaderImageLoad, this ); }, getDragData : function(e) @@ -748,6 +751,27 @@ if (this.headerContainerEl) { this.headerContainerEl.dom.innerHTML = html; } + }, + onHeaderImageLoad : function(ev, he) + { + if (!this.header_image_fit_square) { + return; + } + + var hw = he.naturalHeight / he.naturalWidth; + // wide image = < 0 + // tall image = > 1 + //var w = he.dom.naturalWidth; + var ww = he.width; + he.style.left = 0; + he.style.position = 'relative'; + if (hw > 1) { + var nw = (ww * (1/hw)); + Roo.get(he).setSize( ww * (1/hw), ww); + he.style.left = ((ww - nw)/ 2) + 'px'; + he.style.position = 'relative'; + } + } diff --git a/docs/src/Roo_grid_GridView.js.html b/docs/src/Roo_grid_GridView.js.html index 87b5c7197a..dbc0949af6 100644 --- a/docs/src/Roo_grid_GridView.js.html +++ b/docs/src/Roo_grid_GridView.js.html @@ -598,7 +598,7 @@ ); */ if(ctop < stop){ - c.scrollTop = ctop; + c.scrollTop = ctop; //Roo.log("set scrolltop to ctop DISABLE?"); }else if(cbot > sbot){ //Roo.log("set scrolltop to cbot-ch"); diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 7d035af4ca..11fff8495e 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -2075,6 +2075,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { bodyEl: false, // card-body headerContainerEl : false, // headerEl : false, + header_imageEl : false, layoutCls : function() { @@ -2285,7 +2286,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { }, getCardImageTop : function() { - var ret = this.el.select('.card-img-top',true).first(); + var ret = this.header_imageEl; if (ret.hasClass('d-none')) { ret.removeClass('d-none'); } @@ -2342,6 +2343,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { this.el.addClass('roo-card-rotated'); this.fireEvent('rotate', this, true); } + this.header_imageEl = this.el.select('.card-img-top',true).first(); + this.header_imageEl.on('load', this.onHeaderImageLoad, this ); }, getDragData : function(e) @@ -2683,6 +2686,27 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { if (this.headerContainerEl) { this.headerContainerEl.dom.innerHTML = html; } + }, + onHeaderImageLoad : function(ev, he) + { + if (!this.header_image_fit_square) { + return; + } + + var hw = he.naturalHeight / he.naturalWidth; + // wide image = < 0 + // tall image = > 1 + //var w = he.dom.naturalWidth; + var ww = he.width; + he.style.left = 0; + he.style.position = 'relative'; + if (hw > 1) { + var nw = (ww * (1/hw)); + Roo.get(he).setSize( ww * (1/hw), ww); + he.style.left = ((ww - nw)/ 2) + 'px'; + he.style.position = 'relative'; + } + } diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index 09be79f156..9830d0743d 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -80,7 +80,7 @@ return this.el.select('.panel-body',true).first()},titleEl:function(){if(!this.e },getTitle:function(){var A=this.titleEl();if(!A){return '';}return A.dom.innerHTML;},setRightTitle:function(v){var t=this.el.select('.panel-header-right',true).first();if(!t){return;}t.dom.innerHTML=v;},onClick:function(e){e.preventDefault();this.fireEvent('click',this,e); }}); // Roo/bootstrap/Card.js -Roo.bootstrap.Card=function(A){Roo.bootstrap.Card.superclass.constructor.call(this,A);this.addEvents({'drop':true,'rotate':true});};Roo.extend(Roo.bootstrap.Card,Roo.bootstrap.Component,{weight:'',margin:'',margin_top:'',margin_bottom:'',margin_left:'',margin_right:'',margin_x:'',margin_y:'',padding:'',padding_top:'',padding_bottom:'',padding_left:'',padding_right:'',padding_x:'',padding_y:'',display:'',display_xs:'',display_sm:'',display_lg:'',display_xl:'',header_image:'',header:'',header_size:0,title:'',subtitle:'',html:'',footer:'',collapsable:false,collapsed:false,rotateable:false,rotated:false,dragable:false,drag_group:false,dropable:false,drop_group:false,childContainer:false,dropEl:false,containerEl:false,bodyEl:false,headerContainerEl:false,headerEl:false,layoutCls:function(){var A=''; +Roo.bootstrap.Card=function(A){Roo.bootstrap.Card.superclass.constructor.call(this,A);this.addEvents({'drop':true,'rotate':true});};Roo.extend(Roo.bootstrap.Card,Roo.bootstrap.Component,{weight:'',margin:'',margin_top:'',margin_bottom:'',margin_left:'',margin_right:'',margin_x:'',margin_y:'',padding:'',padding_top:'',padding_bottom:'',padding_left:'',padding_right:'',padding_x:'',padding_y:'',display:'',display_xs:'',display_sm:'',display_lg:'',display_xl:'',header_image:'',header:'',header_size:0,title:'',subtitle:'',html:'',footer:'',collapsable:false,collapsed:false,rotateable:false,rotated:false,dragable:false,drag_group:false,dropable:false,drop_group:false,childContainer:false,dropEl:false,containerEl:false,bodyEl:false,headerContainerEl:false,headerEl:false,header_imageEl:false,layoutCls:function(){var A=''; var t=this;Roo.log(this.margin_bottom.length);['','top','bottom','left','right','x','y'].forEach(function(v){if((''+t['margin'+(v.length?'_':'')+v]).length){A+=' m'+(v.length?v[0]:'')+'-'+t['margin'+(v.length?'_':'')+v];}if((''+t['padding'+(v.length?'_':'')+v]).length){A+=' p'+(v.length?v[0]:'')+'-'+t['padding'+(v.length?'_':'')+v]; }});['','xs','sm','lg','xl'].forEach(function(v){if((''+t['display'+(v.length?'_':'')+v]).length){A+=' d'+(v.length?'-':'')+v+'-'+t['display'+(v.length?'_':'')+v]}});if(this.hidden){A+=' d-none';}return A;},getAutoCreate:function(){var A={tag:'div',cls:'card',cn:[]} ;if(this.weight.length&&this.weight!='light'){A.cls+=' text-white';}else{A.cls+=' text-dark';}if(this.weight.length){A.cls+=' bg-'+this.weight;}A.cls+=' '+this.layoutCls();var B=false;var C=false;if(this.header.length){B={tag:this.header_size>0?'h'+this.header_size:'div',cls:'card-header '+(this.header_weight?'bg-'+this.header_weight:''),cn:[]} @@ -89,29 +89,30 @@ var t=this;Roo.log(this.margin_bottom.length);['','top','bottom','left','right', );}var D={tag:'div',cls:'card-body'+(this.html===false?' d-none':''),cn:[]};var E=D;if(this.collapsable||this.rotateable){E={tag:'div',cls:'roo-collapsable collapse '+(this.collapsed||this.rotated?'':'show'),cn:[D]};}A.cn.push(E);if(this.title.length){D.cn.push({tag:'div',cls:'card-title',src:this.title} );}if(this.subtitle.length){D.cn.push({tag:'div',cls:'card-title',src:this.subtitle});}D.cn.push({tag:'div',cls:'roo-card-body-ctr'});if(this.html.length){D.cn.push({tag:'div',html:this.html});}if(this.footer.length){A.cn.push({cls:'card-footer '+(this.rotated?'d-none':''),html:this.footer} );}else{A.cn.push({cls:'card-footer d-none'});}return A;},getCardHeader:function(){var A=this.el.select('.card-header',true).first();if(A.hasClass('d-none')){A.removeClass('d-none');}return A;},getCardFooter:function(){var A=this.el.select('.card-footer',true).first(); -if(A.hasClass('d-none')){A.removeClass('d-none');}return A;},getCardImageTop:function(){var A=this.el.select('.card-img-top',true).first();if(A.hasClass('d-none')){A.removeClass('d-none');}return A;},getChildContainer:function(){if(!this.el){return false; -}return this.el.select('.roo-card-body-ctr',true).first();},initEvents:function(){this.bodyEl=this.el.select('.card-body',true).first();this.containerEl=this.getChildContainer();if(this.dragable){this.dragZone=new Roo.dd.DragZone(this.getEl(),{containerScroll:true,ddGroup:this.drag_group||'default_card_drag_group'} +if(A.hasClass('d-none')){A.removeClass('d-none');}return A;},getCardImageTop:function(){var A=this.header_imageEl;if(A.hasClass('d-none')){A.removeClass('d-none');}return A;},getChildContainer:function(){if(!this.el){return false;}return this.el.select('.roo-card-body-ctr',true).first(); +},initEvents:function(){this.bodyEl=this.el.select('.card-body',true).first();this.containerEl=this.getChildContainer();if(this.dragable){this.dragZone=new Roo.dd.DragZone(this.getEl(),{containerScroll:true,ddGroup:this.drag_group||'default_card_drag_group'} );this.dragZone.getDragData=this.getDragData.createDelegate(this);}if(this.dropable){this.dropZone=new Roo.dd.DropZone(this.el.select('.card-body',true).first(),{containerScroll:true,ddGroup:this.drop_group||'default_card_drag_group'});this.dropZone.getTargetFromEvent=this.getTargetFromEvent.createDelegate(this); this.dropZone.onNodeEnter=this.onNodeEnter.createDelegate(this);this.dropZone.onNodeOver=this.onNodeOver.createDelegate(this);this.dropZone.onNodeOut=this.onNodeOut.createDelegate(this);this.dropZone.onNodeDrop=this.onNodeDrop.createDelegate(this);}if(this.collapsable){this.el.select('.card-header',true).on('click',this.onToggleCollapse,this); }if(this.rotateable){this.el.select('.card-header',true).on('click',this.onToggleRotate,this);}this.collapsableEl=this.el.select('.roo-collapsable').first();this.footerEl=this.el.select('.card-footer').first();this.collapsableToggleEl=this.el.select('.roo-collapse-toggle'); -this.headerContainerEl=this.el.select('.roo-card-header-ctr').first();this.headerEl=this.el.select('.card-header',true).first();if(this.rotated){this.el.addClass('roo-card-rotated');this.fireEvent('rotate',this,true);}},getDragData:function(e){var A=this.getEl(); -if(A){var B={source:this,copy:false,nodes:this.getEl(),records:[]};B.ddel=A.dom;Roo.log(A.getWidth());B.ddel.style.width=A.getWidth()+'px';return B;}return false;},getTargetFromEvent:function(e,A){var B=e.getTarget();while((B!==null)&&(B.parentNode!=this.containerEl.dom)){B=B.parentNode; -}var C={position:'',cards:[],card_n:-1,items_n:-1,card:false};var D=false;var E=0;var F=0;for(var i=0;i0?'below':D;C.items_n=i>0?i-1:0;C.card_n=F>0?F-1:0;C.card=C.cards[C.card_n];}}if(!C.cards.length){C.card=true;C.position='below';C.items_n;return C;}if(C.card_n<0){C.card_n=E;C.card=C.cards[E];C.items_n=this.items.indexOf(C.cards[E]); -C.position='below';}if(this.items[C.items_n].el==A){return false;}if(C.position=='below'){var G=C.card_n+1==C.cards.length?false:C.cards[C.card_n+1];if(G&&G.el==A){return false;}return C;}var H=C.card_n>0?C.cards[C.card_n-1]:false;if(H&&H.el==A){return false; -}return C;},onNodeEnter:function(n,dd,e,A){return false;},onNodeOver:function(n,dd,e,A){var B=this.getTargetFromEvent(e,A.source.el);if(B===false){this.dropPlaceHolder('hide');return false;}Roo.log(['getTargetFromEvent',B]);this.dropPlaceHolder('show',B,A); -return false;},onNodeOut:function(n,dd,e,A){this.dropPlaceHolder('hide');},onNodeDrop:function(n,dd,e,A){var B=this.getTargetFromEvent(e,A.source.el);if(B===false){return false;}this.dropPlaceHolder('hide');this.acceptCard(A.source,B.position,B.card,B.items_n); -return true;},firstChildCard:function(){for(var i=0;i0?'below':D;C.items_n=i>0?i-1:0;C.card_n=F>0?F-1:0;C.card=C.cards[C.card_n];}}if(!C.cards.length){C.card=true;C.position='below'; +C.items_n;return C;}if(C.card_n<0){C.card_n=E;C.card=C.cards[E];C.items_n=this.items.indexOf(C.cards[E]);C.position='below';}if(this.items[C.items_n].el==A){return false;}if(C.position=='below'){var G=C.card_n+1==C.cards.length?false:C.cards[C.card_n+1];if(G&&G.el==A){return false; +}return C;}var H=C.card_n>0?C.cards[C.card_n-1]:false;if(H&&H.el==A){return false;}return C;},onNodeEnter:function(n,dd,e,A){return false;},onNodeOver:function(n,dd,e,A){var B=this.getTargetFromEvent(e,A.source.el);if(B===false){this.dropPlaceHolder('hide'); +return false;}Roo.log(['getTargetFromEvent',B]);this.dropPlaceHolder('show',B,A);return false;},onNodeOut:function(n,dd,e,A){this.dropPlaceHolder('hide');},onNodeDrop:function(n,dd,e,A){var B=this.getTargetFromEvent(e,A.source.el);if(B===false){return false; +}this.dropPlaceHolder('hide');this.acceptCard(A.source,B.position,B.card,B.items_n);return true;},firstChildCard:function(){for(var i=0;i1){var nw=(ww*(1/hw));Roo.get(he).setSize(ww*(1/hw),ww);he.style.left=((ww-nw)/2)+'px'; +he.style.position='relative';}}}); // 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 diff --git a/roojs-debug.js b/roojs-debug.js index d0b21744ed..dc2cfc3056 100644 --- a/roojs-debug.js +++ b/roojs-debug.js @@ -56779,7 +56779,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, { ); */ if(ctop < stop){ - c.scrollTop = ctop; + c.scrollTop = ctop; //Roo.log("set scrolltop to ctop DISABLE?"); }else if(cbot > sbot){ //Roo.log("set scrolltop to cbot-ch"); diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js index c20c019ab9..1d30256a64 100644 --- a/roojs-ui-debug.js +++ b/roojs-ui-debug.js @@ -33771,7 +33771,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, { ); */ if(ctop < stop){ - c.scrollTop = ctop; + c.scrollTop = ctop; //Roo.log("set scrolltop to ctop DISABLE?"); }else if(cbot > sbot){ //Roo.log("set scrolltop to cbot-ch"); -- 2.39.2