JSFiddle - React, Tailwind, and code Playground

by thinkloop

HTML

<div id="page" style="background: #aaffaa; ">
    <div id="c1" style="background: #aaaaff;"><div>
    <div id="c2" style="background: #ffaaaa;"><div>
</div>
<div id="dimensions" style="top: 600px; left: 0;">
    <section id="trim-container">
        <input type="radio" name="trim" value="iw" /> IW (534 x 513)
        <input type="radio" name="trim" value="dj" /> DJ (534 x 549)
        <input type="radio" name="trim" value="sc" checked /> SC (495 x 495)
    </section>

    <input id="c1W" value="315" />
    <input id="c1H" value="86" />
    <input id="c1X" value="89" />
    <input id="c1Y" value="219" />
    <br />
    <input id="c2W" value="327" />
    <input id="c2H" value="22" />
    <input id="c2X" value="84" />
    <input id="c2Y" value="395" />
</div>

CSS

DIV {
    display: block; position: fixed;
    top: 0; left: 0;
    border: 1px solid black;
}
SECTION {
    display: block; position:relative;
    padding: 1em;
}
#trim-container input {
    display: inline-block;
}

JavaScript

// Blurb layout helper
$(document).ready(function() {
    var trims = {
            sc: { w: 495, h: 495 },
            iw: { w: 534, h: 513 },
            dj: { w: 534, h: 549 }
        },
        c1 = { w: 315, h: 86, x: 89, y: 219 },
        c2 = { w: 327, h: 22, x: 84, y: 395 };
    
    function updateAll(trim) {  
        var newTrim = trims[trim],
            defaultTrim = trims['sc'],
            ratioWidth = newTrim.w / defaultTrim.w,
            ratioHeight = newTrim.h / defaultTrim.h,
            newC1 = {
                w: Math.round(c1.w * ratioWidth),
                h: Math.round(c1.h * ratioHeight),
                x: Math.round(c1.x * ratioWidth),
                y: Math.round(c1.y * ratioHeight)
            },
            newC2 = {
                w: Math.round(c2.w * ratioWidth),
                h: Math.round(c2.h * ratioHeight),
                x: Math.round(c2.x * ratioWidth),
                y: Math.round(c2.y * ratioHeight)
            };
    console.log(newTrim);
        $('#page').css({
            width: newTrim.w + 'px',
            height: newTrim.h + 'px'
        });
    
        $('#c1').css({
            width: newC1.w + 'px',
            height: newC1.h + 'px',
            left: newC1.x + 'px',
            top: newC1.y + 'px'
        });
    
        $('#c2').css({
            width: newC2.w + 'px',
            height: newC2.h + 'px',
            left: newC2.x + 'px',
            top: newC2.y + 'px'
        });
    
        $('#c1W').val(newC1.w);
        $('#c1H').val(newC1.h);
        $('#c1X').val(newC1.x);
        $('#c1Y').val(newC1.y);
        
        $('#c2W').val(newC2.w);
        $('#c2H').val(newC2.h);
        $('#c2X').val(newC2.x);
        $('#c2Y').val(newC2.y);        
    } 

    $('input[name="trim"]').change(function() {
        updateAll($('input[name="trim"]:checked').val());       
    }); 
    
    updateAll('sc');
});