JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css">
<div data-libraryaware-resizable data-libraryaware-resizable-update="my-width:width;my-height:height" data-libraryaware-resizable-aspectratio="16x9" style="width:160px; height:90px;">
    <div class="resize-controls">
        <input type="text" value="160" id="my-width" data-libraryaware-resizecontrol="width"/> x <input type="text" id="my-height" value="90" data-libraryaware-resizecontrol="height"/>
    </div>
</div>

CSS

[data-libraryaware-resizable] {
 margin:10px;
 border:1px solid #ccc;
 border-radius:5px;   
    position:relative;
    background-color: #ccc;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.resizable-helper {
 background-color:#000;
opacity:.2;
 border:1px dashed red;   
}

.resize-controls {
    position:absolute;
    top:45%;
    left:10%;
}

.resize-controls input {
 width:40px;   
    text-align:center;
    border:0;
}

JavaScript

$(function(){
    
    var getAspectRatio = function(node){
        var $this = $(node);
        var aspectStr = $this.attr("data-libraryaware-resizable-aspectratio");
        var parts = aspectStr.split('x');
        var width = parseInt(parts[0],10);
        var height = parseInt(parts[1], 10);
        
        var ratio = width / height
        return ratio;
    };
    
    var roundToEven = function(number) {
        var parts = {
            digit: Math.floor(number),
            decimal: number - Math.floor(number)                
        };
        var rval = number;
        if (parts.decimal === .5){
            rval = parts.digit % 2 === 0 ? parts.digit : parts.digit + 1;
        }else if (parts.decimal > .5){
            rval = parts.digit + 1;
        }else {
         rval = parts.digit;   
        }
        return rval;
    };
    
    var centerElement = function(ele, relativeTo){
        var w = ele.width();
        var h = ele.height();
        ele.css( {
            top: (relativeTo.height() - h )/2,
            left: (relativeTo.width() - w)/2
        });
    };
    
    var resizeHandler = function(event, ui){
        var ele = ui.element;
        var newSize = ui.size;
        for (var x in newSize){
            if (newSize.hasOwnProperty(x)){
                newSize[x] = roundToEven(newSize[x]);                
            }                
        }
        var resizeUpdate = ele.attr('data-libraryaware-resizable-update');
        var updateParts = resizeUpdate.split(';');
        for(var i = 0, max = updateParts.length; i < max; i++){
            var p = updateParts[i].split(":");
            $("#" + p[0]).val(newSize[p[1]]);
        }
        
        var resizeControls = ele.find(".resize-controls");
                    
        centerElement(resizeControls, ele);
        
    };
    
    var stopHandler = function(event, ui){
      var ele = ui.element;
var width = ele.find("[data-libraryaware-resizecontrol=width]");
 var height =...