auto set picture height

Image Tests - Flex Picture - This also demos how to hunt out transforms and attach an event to trigger when transforms have completed.

by Ben Clayton

HTML

<button>20%</button>
<button>25%</button>
<button>30%</button>

<br>
<div id='container'>

<div style="" class="-sys-dbnewpicture">
    <img src="http://www.aquafreshbrushtime.co.uk/images/spacer.gif" style="width: 100%; background-image: url(http://flowcms-bc.v11002.infxlocal/images/300px-Oval.png);" class="-sys-dbnewpicture-img" alt="" title="" data-aspectratio="0.45666666666667" />
</div><div style="" class="-sys-dbnewpicture">
    <img src="http://www.aquafreshbrushtime.co.uk/images/spacer.gif" style="width: 100%; background-image: url(http://flowcms-bc.v11002.infxlocal/images/300px-Oval.png);" class="-sys-dbnewpicture-img" alt="" title="" data-aspectratio="0.45666666666667" />
</div><div style="" class="-sys-dbnewpicture">
    <img src="http://www.aquafreshbrushtime.co.uk/images/spacer.gif" style="width: 100%; background-image: url(http://flowcms-bc.v11002.infxlocal/images/300px-Oval.png);" class="-sys-dbnewpicture-img" alt="" title="" data-aspectratio="0.45666666666667" />
</div><div style="" class="-sys-dbnewpicture">
    <img src="http://www.aquafreshbrushtime.co.uk/images/spacer.gif" style="width: 100%; background-image: url(http://flowcms-bc.v11002.infxlocal/images/300px-Oval.png);" class="-sys-dbnewpicture-img" alt="" title="" data-aspectratio="0.45666666666667" />
</div><div style="" class="-sys-dbnewpicture">
    <img src="http://www.aquafreshbrushtime.co.uk/images/spacer.gif" style="width: 100%; background-image: url(http://flowcms-bc.v11002.infxlocal/images/300px-Oval.png);" class="-sys-dbnewpicture-img" alt="" title="" data-aspectratio="0.45666666666667" />
</div>
    <br><br>
Element Width changes do not trigger events, so you can only detect window resize, or any interactions with the page must each coded to trigger an event if picture width calculation may need to be rerun. That is why Flow Page Editor Objects like tab panels etc trigger events when the use interacts with them. event "tab_change" . event "col_change" triggers when new auto...

CSS

#container {
    width:100%;
    padding:20px;
    height:500px;
    background-color:#d0d0d0;
}

.-sys-dbnewpicture {
    width:20%;
    padding:0px;
    margin:00px;
    display:inline-block;
    overflow: visible;
    transition: opacity 0.25s ease 0.1s;
    -webkit-transition: opacity 0.25s ease 0.1s;
    transition: all 4s ease 0.1s;
    -webkit-transition: all 4s ease 0.1s;
}

.-sys-dbnewpicture-img {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
/*overflow: hidden;*/
display: block;
transition: opacity 0.25s ease;
-webkit-transition: opacity 0.25s ease;
opacity:0; 
-webkit-opacity: 0;
}

img.heightset {
opacity: 1;
-webkit-opacity: 1;
}

JavaScript

$('button').on('click',function(){
    $('.-sys-dbnewpicture').css('width',$(this).text() );
    $(window).trigger('col_change');
});


var $longest=null;
var longestdur=0;

$.each($('*'),function(){
    //debugger;
	var duration = parseFloat($(this).css('transition-duration'));
	if (duration){ // ignore '0s'
		var prop = $(this).css('transition-property');
        console.log('dur:',duration," prop:",prop);
		if ( ['all','transform','width'].indexOf(prop) >-1){
			if(duration > longestdur){
				longestdur=duration;
				$longest = $(this);
			}
		} 
	}
});

console.log('longest duration',longestdur);

if($longest.length){
    $longest.on('transitionend oTransitionEnd webkitTransitionEnd', function(e){
        // access original Event object versus jQuery's normalized version
        var evt = e.originalEvent;
        console.log('longest completed');
        $(window).trigger('transitions_complete');
    })
}
//================================================================

var asph_tid=null;
var cnt=0;
$(window).on('resize load tab_change col_change transitions_complete',function(){
	autoSetPictureHeight();
	if(asph_tid)clearTimeout(asph_tid);
    cnt=longestdur*100;
    if(cnt) defer();
});

function defer(){
	asph_tid = setTimeout(function(){
        autoSetPictureHeight();
        if(cnt--) defer();
    },10);
}

function autoSetPictureHeight(){
	$('.-sys-dbnewpicture img').css('height','');
	var ww = $(window).width(); // get window max width as check for duff widths of elements
	var cw=0;
	$.each($('.-sys-dbnewpicture-img'),function(){
		var w = $(this).width();
		//var w=$(this)[0].getBoundingClientRect().width;
		//console.log(w);
		if(cw==0)cw=w;
		if( (cw!=w) && (Math.abs(w-cw) < 2)){
			 w=cw;
			//console.log('corrected:'+w);
		}
			var r=$(this).data('aspectratio');
			if(r){
			 	$(this).height(w * r  );
			    $(this).addClass('heightset');
            	console.log(w * r);

			}
	});
	//$elems.addClass('infx-table');// restore the 'infx-table'...