Web Platform Advocate at @CloudinaryLtd
Published
Edited
May 27, 2022
1 star
img.currentSrc === selectedResource.url
selectedResource = selectSrcset( candidates, dpr )
selectSmallestOverOrLargest( candidates )
selectClosest( candidates )
img.currentSrc
selectSrcset = function( annotatedCandidates, dpr ) {
if ( dpr > 1 ) {
return selectClosest( annotatedCandidates );
} else {
return selectSmallestOverOrLargest( annotatedCandidates );
}
}
selectClosest = function( annotatedCandidates ) {
const distances = annotatedCandidates.map( c => c.geometricDistance );
const minDistance = Math.min( ...distances );
return annotatedCandidates.find( c => c.geometricDistance === minDistance );
}
selectSmallestOverOrLargest = function( annotatedCandidates ) {
const distances = annotatedCandidates.map( c => c.linearDistance );
const larger = distances.filter( (d) => { return d >= 0 } );
let selectedDistance;
if ( larger.length === 0 ) {
selectedDistance = Math.max( ...distances );
} else {
selectedDistance = Math.min( ...larger );
}
return annotatedCandidates.find( c => c.linearDistance === selectedDistance );
}
addDensitiesAndDistances = function( parsedSrcset, sizesLengthInPx, dpr ) {
parsedSrcset.candidates.forEach( i => {
if ( i.hasOwnProperty( 'd' ) ) {
i.density = i.d;
} else if ( i.hasOwnProperty( 'w' ) && sizesLengthInPx ) {
i.density = i.w / sizesLengthInPx;
} else {
i.density = 1;
}
i.geometricDistance = geometricDistance( i.density, dpr );
i.linearDistance = i.density - dpr;
} );
return parsedSrcset;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
