JSFiddle - React, Tailwind, and code Playground

by raam86

HTML

<input class="strechable" value="foo" name="strech1" />

JavaScript

function inRange(point, pos) {
    var EPS = 3;
    var max = point + EPS;
    var min = point - EPS;
    if (pos <= max && pos >= min) {
        return true;
    }
}

function cssProp(el, prop) {
    this.originalProp = false;
    this.setDefault = function () {
        console.log(el);
        if (!this.originalProp) {
            console.log("NO orignal found");
            var obj = {};
            obj[Object.keys(prop)[0]] = el.css(Object.keys(prop)[0]);
            //console.log(obj);
            return obj;
        }
        return this.originalProp;
    };
    this.defaultProp = this.setDefault();
    this.getDefault = function () {
        return this.defaultProp;
    };
}

function toggler(el, prop) {
    this.prop = prop;
    this.oldProp = new cssProp(el, prop);
    this.change = function () {
        var keyInObj = Object.keys(this.oldProp)[0]
        var getDefault = this.oldProp.getDefault()
        if (el.css(keyInObj) == getDefault.keyInObj) {
            console.log(this.prop,"has old",keyInObj);
            el.css(this.prop);
        } else {
            console.log(this.oldProp.getDefault());
            el.css(this.oldProp.getDefault());
        }
    }
}
var inputs = [];
$('.strechable').hover(function (e) {
    $this = $(this);
    var o = $this.offset();
    var ePos = e.clientX;
    if (!inputs[e.target.name]) {
        inputs[e.target.name] = new toggler($this, {
            "cursor": "ew-resize"
        });
    }
    if (inRange(o.left, ePos)) {
        inputs[e.target.name].change();
    } else {

    }
});