Sha256: 48e6e694af3f4488a7f17536501e1f5c39c08284224fd359ba0aee0f53afa93a
Contents?: true
Size: 1.67 KB
Versions: 23
Compression:
Stored size: 1.67 KB
Contents
<!-- JS function to reposition SVG labels on images !fullwidth -->
<!-- We use Front Matter to determine if this script should be included, hence here and not in assets -->
<script type="text/javascript">
function reposition_svg_labels(){
/* get svg labels */
var svg = document.querySelectorAll('.augment-not-fullwidth .svg__labels');
/* rendered image in pixels */
var x_i_px = document.getElementsByClassName("image--guarantee")[0].offsetWidth ;
var y_i_px = document.getElementsByClassName("image--guarantee")[0].offsetHeight ;
var r_i = x_i_px / y_i_px ;
/* original image in pixels */
var x_0_px = {{ page.images.guarantee.size | split: ', ' | first }} ;
var y_0_px = {{ page.images.guarantee.size | split: ', ' | last }} ;
var r_0 = x_0_px / y_0_px ;
for (let i = 0; i < svg.length; i++) {
/* Reversing the calculation we did in Liquid on build */
var dx_0_px = parseInt( svg[i].getAttribute('x'), 10 ) / 100 * x_0_px ;
var dy_0_px = parseInt( svg[i].getAttribute('y'), 10 ) / 100 * y_0_px ;
if (r_i > r_0 ) { /* x_i / y_i > r_0 so x_i is 100% */
/* rendered image magnification */
var scale = x_i_px / x_0_px ;
var dy_i_px = dy_0_px * scale - ( (y_0_px * scale - y_i_px ) / 2 ) ;
svg[i].setAttribute("y", ( dy_i_px * 100 / y_i_px + '%') ) ;
}
if (r_i < r_0 ) { /* x_i/y_i < r_0 so y_i is 100% */
/* rendered image magnification */
var scale = y_i_px / y_0_px ;
var dx_i_px = dx_0_px * scale - ( (x_0_px * scale - x_i_px ) / 2 ) ;
svg[i].setAttribute("x", ( dx_i_px * 100 / x_i_px + '%') ) ;
}
};
}
reposition_svg_labels()
</script>
Version data entries
23 entries across 23 versions & 1 rubygems