1
\$\begingroup\$

Is there any way I can simplify this re-sizable solution? It seems too difficult and messy to me.

Working example

$.ui.plugin.add("resizable", "alsoResizeReverse", {

    start: function (event, ui) {

        var self = $(this).data("resizable"),
            o = self.options;

        var _store = function (exp) {
            $(exp).each(function () {
                $(this).data("resizable-alsoresize-reverse", {
                    width: parseInt($(this).width(), 10),
                    height: parseInt($(this).height(), 10),
                    left: parseInt($(this).css('left'), 10),
                    top: parseInt($(this).css('top'), 10)
                });
            });
        };

        if (typeof (o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {
            if (o.alsoResizeReverse.length) {
                o.alsoResize = o.alsoResizeReverse[0];
                _store(o.alsoResizeReverse);
            } else {
                $.each(o.alsoResizeReverse, function (exp, c) {
                    _store(exp);
                });
            }
        } else {
            _store(o.alsoResizeReverse);
        }
    },

    resize: function (event, ui) {
        var self = $(this).data("resizable"),
            o = self.options,
            os = self.originalSize,
            op = self.originalPosition;

        var delta = {
            height: (self.size.height - os.height) || 0,
            width: (self.size.width - os.width) || 0,
            top: (self.position.top - op.top) || 0,
            left: (self.position.left - op.left) || 0
        },

        _alsoResizeReverse = function (exp, c) {
            $(exp).each(function () {
                var el = $(this),
                    start = $(this).data("resizable-alsoresize-reverse"),
                    style = {}, css = c && c.length ? c : ['width', 'height', 'top', 'left'];

                $.each(css || ['width', 'height', 'top', 'left'], function (i, prop) {
                    var sum = (start[prop] || 0) - (delta[prop] || 0);
                    if (sum && sum >= 0) style[prop] = sum || null;
                });

                //Opera fixing relative position
                if (/relative/.test(el.css('position')) && $.browser.opera) {
                    self._revertToRelativePosition = true;
                    el.css({
                        position: 'absolute',
                        top: 'auto',
                        left: 'auto'
                    });
                }

                el.css(style);
            });
        };

        if (typeof (o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.nodeType) {
            $.each(o.alsoResizeReverse, function (exp, c) {
                _alsoResizeReverse(exp, c);
            });
        } else {
            _alsoResizeReverse(o.alsoResizeReverse);
        }
    },

    stop: function (event, ui) {
        var self = $(this).data("resizable");

        //Opera fixing relative position
        if (self._revertToRelativePosition && $.browser.opera) {
            self._revertToRelativePosition = false;
            el.css({
                position: 'relative'
            });
        }

        $(this).removeData("resizable-alsoresize-reverse");
    }
});





$(function () {

    $("#resizable").resizable({
        alsoResizeReverse: ".myframe"
    });

});
#resizable, .myframe {
    border:1px solid black;
    padding:10px;
    margin-bottom:20px;
    width:50%;
    height: 150px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


<div id="resizable">This is the resizable content...</div>
<div class="myframe">This must resize in reverse direction...</div>

\$\endgroup\$
1
\$\begingroup\$

Your code is good, but there's a few things you can improve on:

            $(this).data("resizable-alsoresize-reverse", {
                width: parseInt($(this).width(), 10),
                height: parseInt($(this).height(), 10),
                left: parseInt($(this).css('left'), 10),
                top: parseInt($(this).css('top'), 10)
            });

You can use an unary instead of parseInt:

            $(this).data("resizable-alsoresize-reverse", {
                width: +$(this).width(),
                height: +$(this).height(),
                left: +$(this).css('left'),
                top: +$(this).css('top')
            });

This doesn't really look like you're storing anything.

var _store = function (exp)

It looks more like you're setting up css rules and what is exp?

You should be more descriptive with your function and variable names.


I would avoid omitting the var keyword as it makes the code harder to maintain in future.

    var self = $(this).data("resizable"),
        o = self.options,
        os = self.originalSize,
        op = self.originalPosition;

Imagine you're a contractor coming in to improve this plugin and you accidentally remove the , after self's assignment. All of a sudden you've got a bunch of troublesome globals.

Sticking to adding the var keyword on every line is a practise best kept early.


Your choice of variable assignment is strange:

Here, you assign os and op,

    var self = $(this).data("resizable"),
        o = self.options,
        os = self.originalSize,
        op = self.originalPosition;

But in the following block, you don't bother assigning self.size.* variables.

    var delta = {
        height: (self.size.height - os.height) || 0,
        width: (self.size.width - os.width) || 0,
        top: (self.position.top - op.top) || 0,
        left: (self.position.left - op.left) || 0
    },

Don't assign variables you don't need to.


Making o a shorthand accessor for your options variable is unclear, o can represent many other things. Try to be a little more clear with your variable assignment, and additionally try to avoid abbreviations.


event and ui are passed in as parameters into your three parent functions of start, resize and stop, yet they're never actually used. Remove unnecessary parameters.


You have a lot of extraneous lines, I would try to avoid that, really only leaving lines when necessary.


In your data strings, you have the following resizable-alsoresize-reverse, you should be adding a space (-) between also and resize.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.